diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
index ce18201b7d45f7d1d0b286cf4053aa659ab1fdc9..c0f3b046fedf5dc16b71aac5b540b17ca8772023 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettings.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -297,10 +297,10 @@ class ChartSettings extends Component {
return (
<div className={cx(className, "flex flex-column")}>
{showSectionPicker && (
- <div className="flex flex-no-shrink pl4 pt2 pb1">{sectionPicker}</div>
+ <div className="flex flex-no-shrink pl4 pb1">{sectionPicker}</div>
)}
{noPreview ? (
- <div className="full-height relative scroll-y scroll-show pt3 pb4">
+ <div className="full-height relative scroll-y scroll-show pt2 pb4">
{widgetList}
</div>
) : (
diff --git a/frontend/src/metabase/visualizations/components/ChartSettingsWidget.styled.tsx b/frontend/src/metabase/visualizations/components/ChartSettingsWidget.styled.tsx
index ddb6d177ae6ba57c9c8f111844260048383d69be..850fd1bef75615c386b3793a734577368dec8b7a 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettingsWidget.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettingsWidget.styled.tsx
@@ -11,12 +11,13 @@ export const Root = styled.div<{
disabled?: boolean;
noPadding?: boolean;
inline?: boolean;
+ marginBottom?: string;
}>`
${props =>
!props.noPadding &&
css`
- margin-left: 2em;
- margin-right: 2em;
+ margin-left: 2rem;
+ margin-right: 2rem;
`}
${props =>
@@ -28,7 +29,7 @@ export const Root = styled.div<{
${props =>
!props.hidden &&
css`
- margin-bottom: 1.5em;
+ margin-bottom: ${props.marginBottom || "1.5em"};
`}
${props =>
@@ -64,7 +65,7 @@ export const Root = styled.div<{
export const Title = styled.label<VariantProp>`
display: flex;
align-items: center;
- margin-bottom: 0.5em;
+ margin-bottom: 1rem;
${props =>
props.variant === "default" &&
diff --git a/frontend/src/metabase/visualizations/components/ChartSettingsWidget.tsx b/frontend/src/metabase/visualizations/components/ChartSettingsWidget.tsx
index 721e0e489f6f5e05a6d4e862f7772634062e441e..c3ef96bd4a9a9d1ebf5f6ba7cbe3fc528862dc01 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettingsWidget.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettingsWidget.tsx
@@ -17,6 +17,7 @@ type Props = {
disabled?: boolean;
widget?: React.ComponentType;
inline?: boolean;
+ marginBottom?: string;
props?: Record<string, unknown>;
noPadding?: boolean;
variant?: "default" | "form-field";
@@ -30,6 +31,7 @@ const ChartSettingsWidget = ({
disabled,
variant = "default",
inline = false,
+ marginBottom = undefined,
widget: Widget,
props,
// disables X padding for certain widgets so divider line extends to edge
@@ -47,6 +49,7 @@ const ChartSettingsWidget = ({
disabled={disabled}
className={cx({ "Form-field": isFormField })}
inline={inline}
+ marginBottom={marginBottom}
>
{title && (
<Title variant={variant} className={cx({ "Form-label": isFormField })}>
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
index 0ad2ecd25bb251fab896e4280f98aae72d2e3a7a..ccb130f38180a7323828458d22428f8d47cbe859 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
@@ -1,11 +1,13 @@
/* eslint-disable react/prop-types */
import React from "react";
import { t } from "ttag";
-import cx from "classnames";
import _ from "underscore";
import { keyForColumn } from "metabase/lib/dataset";
import ChartSettingSelect from "./ChartSettingSelect";
-import { SettingsIcon } from "./ChartSettingFieldPicker.styled";
+import {
+ SettingsIcon,
+ ChartSettingFieldPickerRoot,
+} from "./ChartSettingFieldPicker.styled";
const ChartSettingFieldPicker = ({
value,
@@ -25,7 +27,7 @@ const ChartSettingFieldPicker = ({
}
}
return (
- <div className={cx(className, "flex align-center")}>
+ <ChartSettingFieldPickerRoot className={className}>
<ChartSettingSelect
className="flex-full"
value={value}
@@ -34,10 +36,11 @@ const ChartSettingFieldPicker = ({
placeholder={t`Select a field`}
placeholderNoOptions={t`No valid fields`}
isInitiallyOpen={value === undefined}
+ hiddenIcons
/>
{columnKey && (
<SettingsIcon
- name="gear"
+ name="ellipsis"
onClick={() => {
onShowWidget({
id: "column_settings",
@@ -48,12 +51,14 @@ const ChartSettingFieldPicker = ({
}}
/>
)}
- <SettingsIcon
- data-testid={`remove-${value}`}
- name="close"
- onClick={onRemove}
- />
- </div>
+ {onRemove && (
+ <SettingsIcon
+ data-testid={`remove-${value}`}
+ name="close"
+ onClick={onRemove}
+ />
+ )}
+ </ChartSettingFieldPickerRoot>
);
};
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
index 5fa69d757a12db7ab008c12978d47db565f423f8..bf7a25ccd2ecd05bbd34f76efa10e97c07cdad65 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
@@ -1,6 +1,32 @@
import styled from "@emotion/styled";
import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
+import SelectButton from "metabase/core/components/SelectButton";
+
+export const ChartSettingFieldPickerRoot = styled.div`
+ display: flex;
+ align-items: center;
+ border: 1px solid ${color("border")};
+ border-radius: 0.5rem;
+ padding-right: 1rem;
+
+ ${SelectButton.Root} {
+ border: none;
+ padding: 0.75rem;
+ }
+
+ ${SelectButton.Icon} {
+ margin-left: 0;
+ color: ${color("text-dark")};
+ height: 0.625rem;
+ }
+
+ ${SelectButton.Content} {
+ font-size: 0.875rem;
+ line-height: 1rem;
+ margin-right: 0.25rem;
+ }
+`;
export const SettingsIcon = styled(Icon)`
margin-left: 0.5rem;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedRows.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedRows.styled.tsx
index a3ba39815dc0034b126cc6655a7b2ae756b30ee5..a6f4691d331f4b262b880ad34003afcf353dd2bb 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedRows.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedRows.styled.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
import { color } from "metabase/lib/colors";
export const ChartSettingOrderedRowsRoot = styled.div`
- margin-left: 0.5rem;
+ margin-left: 1rem;
`;
export const ChartSettingMessage = styled.div`
diff --git a/frontend/src/metabase/visualizations/components/settings/ColumnItem.jsx b/frontend/src/metabase/visualizations/components/settings/ColumnItem.jsx
index 448d7d9b1036fed66dee373e64f8b3994e136126..1347d807e314d5998457f74c206850470b29f65c 100644
--- a/frontend/src/metabase/visualizations/components/settings/ColumnItem.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ColumnItem.jsx
@@ -31,7 +31,7 @@ const ColumnItem = ({
}) => (
<ColumnItemRoot draggable={draggable} onClick={onClick}>
<ColumnItemContainer>
- {draggable && <ColumnItemDragHandle name="grabber2" />}
+ {draggable && <ColumnItemDragHandle name="grabber2" size={12} />}
<ColumnItemContent>
<ColumnItemSpan>{title}</ColumnItemSpan>
{onEdit && <ActionIcon icon="ellipsis" onClick={onEdit} />}
diff --git a/frontend/src/metabase/visualizations/components/settings/ColumnItem.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ColumnItem.styled.tsx
index 46579b6a2a34366e8bf1216a7d97dde4bf210b0f..a6b4c7c0680a9293579cfef0ca5442b049870496 100644
--- a/frontend/src/metabase/visualizations/components/settings/ColumnItem.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ColumnItem.styled.tsx
@@ -35,14 +35,14 @@ export const ColumnItemSpan = styled.span`
word-wrap: anywhere;
font-weight: 700;
margin: 0;
- font-size: 0.75rem;
+ font-size: 0.875rem;
line-height: 1rem;
flex: auto;
color: ${color("text-dark")};
`;
export const ColumnItemContent = styled.div`
- padding: 0 0.625rem;
+ padding: 0 0.5rem;
position: relative;
align-items: center;
display: flex;
@@ -54,6 +54,7 @@ export const ColumnItemContainer = styled.div`
position: relative;
flex: auto;
display: flex;
+ align-items: center;
`;
export const ColumnItemIcon = styled(Icon)`
diff --git a/frontend/src/metabase/visualizations/visualizations/Funnel.jsx b/frontend/src/metabase/visualizations/visualizations/Funnel.jsx
index a83aa133d88a8da73e312411792bda366c3045e1..bc512b4c1e89604b1c3f45b623a651e0141230c6 100644
--- a/frontend/src/metabase/visualizations/visualizations/Funnel.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Funnel.jsx
@@ -106,10 +106,11 @@ export default class Funnel extends Component {
...columnSettings({ hidden: true }),
...dimensionSetting("funnel.dimension", {
section: t`Data`,
- title: t`Step`,
+ title: t`Column with steps`,
dashboard: false,
useRawSeries: true,
showColumnSetting: true,
+ marginBottom: "0.625rem",
}),
"funnel.rows": {
section: t`Data`,