Fixes control panel fields styling (#12236) (#12326)

superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts

@@ -35,13 +35,9 @@ describe('Advanced analytics', () => {
       .find('input[type=text]')
       .type('28 days{enter}');
 
-    cy.get('[data-test=time_compare]').find('.Select__control').click();
     cy.get('[data-test=time_compare]')
       .find('input[type=text]')
-      .type('364 days{enter}');
+      .type('1 year{enter}');
-    cy.get('[data-test=time_compare]')
-      .find('.Select__multi-value__label')
-      .contains('364 days');
 
     cy.get('button[data-test="run-query-button"]').click();
     cy.wait('@postJson');
@@ -51,10 +47,13 @@ describe('Advanced analytics', () => {
       chartSelector: 'svg',
     });
 
-    cy.get('[data-test=time_compare]').within(() => {
+    cy.get('.panel-title').contains('Advanced Analytics').click();
-      cy.get('.Select__multi-value__label').contains('364 days');
+    cy.get('[data-test=time_compare]')
-      cy.get('.Select__multi-value__label').contains('28 days');
+      .find('.Select__multi-value__label')
-    });
+      .contains('28 days');
+    cy.get('[data-test=time_compare]')
+      .find('.Select__multi-value__label')
+      .contains('1 year');
   });
 });
 

superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx

@@ -112,7 +112,7 @@ describe('SelectControl', () => {
               placeholder="add something"
             />,
           );
-          expect(withMulti.html()).not.toContain('placeholder=');
+          expect(withMulti.html()).not.toContain('option(s');
         });
       });
       describe('withSingleChoice', () => {
@@ -125,7 +125,7 @@ describe('SelectControl', () => {
               placeholder="add something"
             />,
           );
-          expect(singleChoice.html()).not.toContain('placeholder=');
+          expect(singleChoice.html()).not.toContain('option(s');
         });
       });
       describe('default placeholder', () => {
@@ -133,7 +133,7 @@ describe('SelectControl', () => {
           const defaultPlaceholder = mount(
             <SelectControl {...defaultProps} choices={[]} multi />,
           );
-          expect(defaultPlaceholder.html()).not.toContain('placeholder=');
+          expect(defaultPlaceholder.html()).not.toContain('option(s');
         });
       });
       describe('all choices selected', () => {
@@ -145,12 +145,12 @@ describe('SelectControl', () => {
               value={['today', '1 year ago']}
             />,
           );
-          expect(allChoicesSelected.html()).toContain('placeholder=""');
+          expect(allChoicesSelected.html()).not.toContain('option(s');
         });
       });
     });
     describe('when select is multi', () => {
-      it('renders the placeholder when a selection has been made', () => {
+      it('does not render the placeholder when a selection has been made', () => {
         wrapper = mount(
           <SelectControl
             {...defaultProps}
@@ -159,7 +159,7 @@ describe('SelectControl', () => {
             placeholder="add something"
           />,
         );
-        expect(wrapper.html()).toContain('add something');
+        expect(wrapper.html()).not.toContain('add something');
       });
       it('shows numbers of options as a placeholder by default', () => {
         wrapper = mount(<SelectControl {...defaultProps} multi />);

superset-frontend/src/components/Label/index.tsx

@@ -93,7 +93,7 @@ const SupersetLabel = styled(BootstrapLabel)`
     background-color: ${({ theme }) => theme.colors.grayscale.light3};
     color: ${({ theme }) => theme.colors.grayscale.dark1};
     border-color: ${({ theme, onClick }) =>
-      onClick ? theme.colors.grayscale.light1 : 'transparent'};
+      onClick ? theme.colors.grayscale.light2 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.primary.light2 : theme.colors.grayscale.light3};

superset-frontend/src/components/Select/SupersetStyledSelect.tsx

@@ -76,6 +76,7 @@ export type SupersetStyledSelectProps<
   // additional props for easier usage or backward compatibility
   labelKey?: string;
   valueKey?: string;
+  assistiveText?: string;
   multi?: boolean;
   clearable?: boolean;
   sortable?: boolean;

superset-frontend/src/components/Select/styles.tsx

@@ -98,7 +98,7 @@ export const defaultTheme: (
   spacing: {
     baseUnit: 3,
     menuGutter: 0,
-    controlHeight: 28,
+    controlHeight: 34,
     lineHeight: 19,
     fontSize: 14,
     minWidth: '7.5em', // just enough to display 'No options'
@@ -160,9 +160,9 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
     { isFocused, menuIsOpen, theme: { borderRadius, colors } },
   ) => {
     const isPseudoFocused = isFocused && !menuIsOpen;
-    let borderColor = '#ccc';
+    let borderColor = colors.grayBorder;
     if (isPseudoFocused) {
-      borderColor = '#000';
+      borderColor = colors.grayBorderDark;
     } else if (menuIsOpen) {
       borderColor = `${colors.grayBorderDark} ${colors.grayBorder} ${colors.grayBorderLight}`;
     }
@@ -181,6 +181,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
           box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
         }
         flex-wrap: nowrap;
+        padding-left: 1px;
       `,
     ];
   },
@@ -312,9 +313,31 @@ const {
   DropdownIndicator,
   Option,
   Input,
+  SelectContainer,
 } = defaultComponents as Required<DeepNonNullable<SelectComponentsType>>;
 
 export const DEFAULT_COMPONENTS: SelectComponentsType = {
+  SelectContainer: ({ children, ...props }) => {
+    const {
+      selectProps: { assistiveText },
+    } = props;
+    return (
+      <div>
+        <SelectContainer {...props}>{children}</SelectContainer>
+        {assistiveText && (
+          <span
+            css={(theme: SupersetTheme) => ({
+              marginLeft: 3,
+              fontSize: theme.typography.sizes.s,
+              color: theme.colors.grayscale.light1,
+            })}
+          >
+            {assistiveText}
+          </span>
+        )}
+      </div>
+    );
+  },
   Option: ({ children, innerProps, data, ...props }) => (
     <ClassNames>
       {({ css }) => (
@@ -344,22 +367,13 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
     </DropdownIndicator>
   ),
   Input: (props: InputProps) => {
-    const {
+    const { getStyles } = props;
-      selectProps: { isMulti, value, placeholder },
-      getStyles,
-    } = props;
-    const isMultiWithValue = isMulti && Array.isArray(value) && !!value.length;
     return (
       <Input
         {...props}
-        placeholder={isMultiWithValue ? placeholder : undefined}
         css={getStyles('input', props)}
         autoComplete="chrome-off"
-        inputStyle={
+        inputStyle={INPUT_TAG_BASE_STYLES}
-          isMultiWithValue
-            ? { ...INPUT_TAG_BASE_STYLES, width: '100%' }
-            : INPUT_TAG_BASE_STYLES
-        }
       />
     );
   },

superset-frontend/src/explore/components/DatasourcePanel.tsx

@@ -90,9 +90,6 @@ const DatasourceContainer = styled.div`
     padding-left: ${({ theme }) => theme.gridUnit * 2}px;
     padding-bottom: 0px;
   }
-  .form-control.input-sm {
-    margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
-  }
   .ant-collapse-item {
     background-color: ${({ theme }) => theme.colors.grayscale.light4};
     .anticon.anticon-right.ant-collapse-arrow > svg {
@@ -130,8 +127,8 @@ const DatasourceContainer = styled.div`
     font-size: ${({ theme }) => theme.typography.sizes.s}px;
     color: ${({ theme }) => theme.colors.grayscale.light1};
   }
-  .form-control.input-sm {
+  .form-control.input-md {
-    width: calc(100% - ${({ theme }) => theme.gridUnit * 2}px);
+    width: calc(100% - ${({ theme }) => theme.gridUnit * 4}px);
     margin: ${({ theme }) => theme.gridUnit * 2}px auto;
   }
   .type-label {
@@ -186,7 +183,7 @@ const DataSourcePanel = ({
       <input
         type="text"
         onChange={search}
-        className="form-control input-sm"
+        className="form-control input-md"
         placeholder={t('Search Metrics & Columns')}
       />
       <div className="field-selections">

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -81,10 +81,10 @@ const Styles = styled.div`
   border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   .explore-column {
     display: flex;
-    flex: 0 0 ${({ theme }) => theme.gridUnit * 80}px;
+    flex: 0 0 ${({ theme }) => theme.gridUnit * 95}px;
     flex-direction: column;
     padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
-    max-width: ${({ theme }) => theme.gridUnit * 80}px;
+    max-width: ${({ theme }) => theme.gridUnit * 95}px;
     max-height: 100%;
   }
   .data-source-selection {

superset-frontend/src/explore/components/OptionControls.tsx

@@ -87,7 +87,7 @@ export const HeaderContainer = styled.div`
 export const LabelsContainer = styled.div`
   padding: ${({ theme }) => theme.gridUnit}px;
   border: solid 1px ${({ theme }) => theme.colors.grayscale.light2};
-  border-radius: 3px;
+  border-radius: ${({ theme }) => theme.gridUnit}px;
 `;
 
 export const AddControlLabel = styled.div`
@@ -99,7 +99,7 @@ export const AddControlLabel = styled.div`
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
   color: ${({ theme }) => theme.colors.grayscale.light1};
   border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
-  border-radius: 3px;
+  border-radius: ${({ theme }) => theme.gridUnit}px;
   cursor: pointer;
 
   :hover {

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

@@ -203,13 +203,6 @@ export default class SelectControl extends React.PureComponent {
     return remainingOptions;
   }
 
-  createPlaceholder() {
-    const optionsRemaining = this.optionsRemaining();
-    const placeholder =
-      this.props.placeholder || t('%s option(s)', optionsRemaining);
-    return optionsRemaining ? placeholder : '';
-  }
-
   createMetaSelectAllOption() {
     const option = { label: 'Select All', meta: true };
     option[this.props.valueKey] = 'Select All';
@@ -235,9 +228,19 @@ export default class SelectControl extends React.PureComponent {
       valueKey,
       valueRenderer,
     } = this.props;
-    const placeholder = this.createPlaceholder();
+
+    const optionsRemaining = this.optionsRemaining();
+    const optionRemaingText = optionsRemaining
+      ? t('%s option(s)', optionsRemaining)
+      : '';
+    const placeholder = this.props.placeholder || optionRemaingText;
     const isMulti = this.props.isMulti || this.props.multi;
 
+    let assistiveText;
+    if (isMulti && optionsRemaining && Array.isArray(value) && !!value.length) {
+      assistiveText = optionRemaingText;
+    }
+
     const selectProps = {
       autoFocus,
       clearable,
@@ -257,6 +260,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       options: this.state.options,
       placeholder,
+      assistiveText,
       promptTextCreator,
       selectRef: this.getSelectRef,
       value,

superset-frontend/src/explore/components/controls/TextControl.tsx

@@ -107,7 +107,7 @@ export default class TextControl extends React.Component<
     return (
       <div>
         <ControlHeader {...this.props} />
-        <FormGroup controlId={this.state.controlId} bsSize="small">
+        <FormGroup controlId={this.state.controlId} bsSize="medium">
           <FormControl
             type="text"
             data-test="inline-name"

superset-frontend/stylesheets/less/cosmo/bootswatch.less

@@ -148,6 +148,10 @@ table,
 
 // Forms ======================================================================
 
+.form-control {
+  box-shadow: none;
+}
+
 .has-warning {
   .help-block,
   .control-label,
@@ -395,6 +399,11 @@ label {
   font-size: 24px;
 }
 
+.list-group-item {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
 a.list-group-item {
   &-success {
     &.active {

superset-frontend/stylesheets/less/cosmo/variables.less

@@ -91,7 +91,7 @@
 //
 // ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-@padding-base-vertical: 10px;
+@padding-base-vertical: 6.5px;
 @padding-base-horizontal: 18px;
 
 @padding-large-vertical: 18px;
@@ -152,7 +152,7 @@
 
 @btn-default-color: @bs-gray;
 @btn-default-bg: @lightest;
-@btn-default-border: @bs-gray-light;
+@btn-default-border: @gray-light;
 
 @btn-success-color: @btn-primary-color;
 @btn-success-bg: @brand-success;

superset-frontend/stylesheets/less/variables.less

@@ -47,7 +47,7 @@
 
 @almost-black: #263238;
 @gray-dark: #484848;
-@gray-light: #cfd8dc;
+@gray-light: #e0e0e0;
 @gray: #879399;
 @gray-bg: #f7f7f7;
 @gray-heading: #a3a3a3;