style: use tabs in dashboard edit pane (#10394)

* style: use tabs in dashboard edit pane

* fix tests

* more hackin'

* getting ready to rip cell measurer

* working

* pogress

* Fix cards

* done

* fix jest

* fix cy

superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx

@@ -22,6 +22,7 @@ import { isFunction } from 'lodash';
 import { CreatableSelect } from 'src/components/Select';
 import ControlHeader from '../ControlHeader';
 import TooltipWrapper from '../../../components/TooltipWrapper';
+import './ColorSchemeControl.less';
 
 const propTypes = {
   description: PropTypes.string,
@@ -29,6 +30,7 @@ const propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.string,
+  clearable: PropTypes.bool,
   default: PropTypes.string,
   choices: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.array),
@@ -41,6 +43,7 @@ const propTypes = {
 const defaultProps = {
   choices: [],
   schemes: {},
+  clearable: false,
   onChange: () => {},
 };
 
@@ -111,7 +114,7 @@ export default class ColorSchemeControl extends React.PureComponent {
       options,
       value: this.props.value,
       autosize: false,
-      clearable: false,
+      clearable: this.props.clearable,
       onChange: this.onChange,
       optionRenderer: this.renderOption,
       valueRenderer: this.renderOption,

superset-frontend/src/explore/components/controls/ColorSchemeControl.less

@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+.color-scheme-container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+
+  li {
+    flex-basis: 9px;
+    height: 10px;
+    margin: 9px 1px;
+  }
+}