Add 'block' support to Select (#11894)

* Add 'block' support to Select

* Make ChartSettingFieldPicker's select flex-full

* Update snapshot

frontend/src/metabase/components/Select.jsx

@@ -7,6 +7,8 @@ import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import SelectButton from "./SelectButton";
 
 import _ from "underscore";
+import cx from "classnames";
+
 import AccordionList from "./AccordionList";
 import { createSelector } from "reselect";
 
@@ -174,7 +176,10 @@ export default class Select extends Component {
       <PopoverWithTrigger
         ref={ref => (this._popover = ref)}
         triggerElement={
-          <SelectButton hasValue={selectedNames.length > 0}>
+          <SelectButton
+            className="full-width"
+            hasValue={selectedNames.length > 0}
+          >
             {selectedNames.length > 0
               ? selectedNames.map((name, index) => (
                   <span key={index}>
@@ -185,7 +190,7 @@ export default class Select extends Component {
               : placeholder}
           </SelectButton>
         }
-        triggerClasses={className}
+        triggerClasses={cx("flex", className)}
         isInitiallyOpen={isInitiallyOpen}
         verticalAttachments={["top", "bottom"]}
         // keep the popover from jumping around one its been opened,

frontend/src/metabase/components/SelectButton.jsx

@@ -9,18 +9,16 @@ import cx from "classnames";
 const SelectButton = ({ className, style, children, hasValue = true }) => (
   <div
     style={style}
-    className={cx(className, "AdminSelect", {
+    className={cx(className, "AdminSelect flex align-center", {
       "text-medium": !hasValue,
     })}
   >
-    <span className="flex align-center">
-      <span className="AdminSelect-content mr1">{children}</span>
-      <Icon
-        className="AdminSelect-chevron flex-align-right"
-        name="chevrondown"
-        size={12}
-      />
-    </span>
+    <span className="AdminSelect-content mr1">{children}</span>
+    <Icon
+      className="AdminSelect-chevron flex-align-right"
+      name="chevrondown"
+      size={12}
+    />
   </div>
 );
 

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx

@@ -30,6 +30,7 @@ const ChartSettingFieldPicker = ({
   return (
     <div className={cx(className, "flex align-center")}>
       <ChartSettingSelect
+        className="flex-full"
         value={value}
         options={options}
         onChange={onChange}

frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx

@@ -17,7 +17,7 @@ const ChartSettingSelect = ({
   ...props
 }) => (
   <Select
-    className={cx(className, "block flex-auto", {
+    className={cx(className, "block", {
       disabled:
         options.length === 0 ||
         (options.length === 1 && options[0].value === value),

frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap

@@ -969,38 +969,34 @@ exports[`Radio should render "vertical" correctly 1`] = `
 
 exports[`Select should render "default" correctly 1`] = `
 <a
-  className="no-decoration"
+  className="flex no-decoration"
   id={undefined}
   onClick={[Function]}
   style={undefined}
 >
   <div
-    className="AdminSelect"
+    className="full-width AdminSelect flex align-center"
     style={undefined}
   >
     <span
-      className="flex align-center"
+      className="AdminSelect-content mr1"
     >
-      <span
-        className="AdminSelect-content mr1"
-      >
-        <span>
-          Entity Key
-          
-        </span>
+      <span>
+        Entity Key
+        
       </span>
-      <svg
-        className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
-        fill="currentcolor"
-        height={12}
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
-        />
-      </svg>
     </span>
+    <svg
+      className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={12}
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
+      />
+    </svg>
   </div>
   <span
     className="hide"
@@ -1010,42 +1006,38 @@ exports[`Select should render "default" correctly 1`] = `
 
 exports[`Select should render "kitchen_sink" correctly 1`] = `
 <a
-  className="no-decoration"
+  className="flex no-decoration"
   id={undefined}
   onClick={[Function]}
   style={undefined}
 >
   <div
-    className="AdminSelect"
+    className="full-width AdminSelect flex align-center"
     style={undefined}
   >
     <span
-      className="flex align-center"
+      className="AdminSelect-content mr1"
     >
-      <span
-        className="AdminSelect-content mr1"
-      >
-        <span>
-          Entity Key
-          , 
-        </span>
-        <span>
-          Avatar Image URL
-          
-        </span>
+      <span>
+        Entity Key
+        , 
+      </span>
+      <span>
+        Avatar Image URL
+        
       </span>
-      <svg
-        className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
-        fill="currentcolor"
-        height={12}
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
-        />
-      </svg>
     </span>
+    <svg
+      className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={12}
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
+      />
+    </svg>
   </div>
   <span
     className="hide"
@@ -1055,42 +1047,38 @@ exports[`Select should render "kitchen_sink" correctly 1`] = `
 
 exports[`Select should render "multiple" correctly 1`] = `
 <a
-  className="no-decoration"
+  className="flex no-decoration"
   id={undefined}
   onClick={[Function]}
   style={undefined}
 >
   <div
-    className="AdminSelect"
+    className="full-width AdminSelect flex align-center"
     style={undefined}
   >
     <span
-      className="flex align-center"
+      className="AdminSelect-content mr1"
     >
-      <span
-        className="AdminSelect-content mr1"
-      >
-        <span>
-          Entity Key
-          , 
-        </span>
-        <span>
-          Avatar Image URL
-          
-        </span>
+      <span>
+        Entity Key
+        , 
+      </span>
+      <span>
+        Avatar Image URL
+        
       </span>
-      <svg
-        className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
-        fill="currentcolor"
-        height={12}
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
-        />
-      </svg>
     </span>
+    <svg
+      className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={12}
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
+      />
+    </svg>
   </div>
   <span
     className="hide"
@@ -1100,38 +1088,34 @@ exports[`Select should render "multiple" correctly 1`] = `
 
 exports[`Select should render "search" correctly 1`] = `
 <a
-  className="no-decoration"
+  className="flex no-decoration"
   id={undefined}
   onClick={[Function]}
   style={undefined}
 >
   <div
-    className="AdminSelect"
+    className="full-width AdminSelect flex align-center"
     style={undefined}
   >
     <span
-      className="flex align-center"
+      className="AdminSelect-content mr1"
     >
-      <span
-        className="AdminSelect-content mr1"
-      >
-        <span>
-          Entity Key
-          
-        </span>
+      <span>
+        Entity Key
+        
       </span>
-      <svg
-        className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
-        fill="currentcolor"
-        height={12}
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
-        />
-      </svg>
     </span>
+    <svg
+      className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={12}
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
+      />
+    </svg>
   </div>
   <span
     className="hide"
@@ -1141,38 +1125,34 @@ exports[`Select should render "search" correctly 1`] = `
 
 exports[`Select should render "sections" correctly 1`] = `
 <a
-  className="no-decoration"
+  className="flex no-decoration"
   id={undefined}
   onClick={[Function]}
   style={undefined}
 >
   <div
-    className="AdminSelect"
+    className="full-width AdminSelect flex align-center"
     style={undefined}
   >
     <span
-      className="flex align-center"
+      className="AdminSelect-content mr1"
     >
-      <span
-        className="AdminSelect-content mr1"
-      >
-        <span>
-          Entity Key
-          
-        </span>
+      <span>
+        Entity Key
+        
       </span>
-      <svg
-        className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
-        fill="currentcolor"
-        height={12}
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
-        />
-      </svg>
     </span>
+    <svg
+      className="Icon Icon-chevrondown AdminSelect-chevron flex-align-right Icon-cxuQhR kTAgZA"
+      fill="currentcolor"
+      height={12}
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z "
+      />
+    </svg>
   </div>
   <span
     className="hide"