From 5bfe5e8aba6f24a512387f42eae1cbb605a6c7ac Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Fri, 14 Feb 2020 09:49:19 -0800
Subject: [PATCH] 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 | 9 +-
.../src/metabase/components/SelectButton.jsx | 16 +-
.../settings/ChartSettingFieldPicker.jsx | 1 +
.../settings/ChartSettingSelect.jsx | 2 +-
.../components.unit.spec.js.snap | 206 ++++++++----------
5 files changed, 109 insertions(+), 125 deletions(-)
diff --git a/frontend/src/metabase/components/Select.jsx b/frontend/src/metabase/components/Select.jsx
index 9a2188672ac..65f95715f73 100644
--- a/frontend/src/metabase/components/Select.jsx
+++ b/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,
diff --git a/frontend/src/metabase/components/SelectButton.jsx b/frontend/src/metabase/components/SelectButton.jsx
index 6b6466ffd02..4cbe3439370 100644
--- a/frontend/src/metabase/components/SelectButton.jsx
+++ b/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>
);
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
index 0fcdd2af5b9..4e2bd06b5c9 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
+++ b/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}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
index 6b9ad3d8863..a641312516d 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
+++ b/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),
diff --git a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
index d676ac03290..7ba27874fa7 100644
--- a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
+++ b/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"
--
GitLab