From a009257dc04a6b5a2fa8c233c720e1692567acc1 Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Mon, 29 Aug 2022 17:36:51 -0300
Subject: [PATCH] Updating remaining Funnel Viz Settings style changes (#25035)
---
.../components/ChartSettings.jsx | 4 +--
.../components/ChartSettingsWidget.styled.tsx | 9 ++++---
.../components/ChartSettingsWidget.tsx | 3 +++
.../settings/ChartSettingFieldPicker.jsx | 25 +++++++++++-------
.../ChartSettingFieldPicker.styled.tsx | 26 +++++++++++++++++++
.../ChartSettingOrderedRows.styled.tsx | 2 +-
.../components/settings/ColumnItem.jsx | 2 +-
.../components/settings/ColumnItem.styled.tsx | 5 ++--
.../visualizations/visualizations/Funnel.jsx | 3 ++-
9 files changed, 58 insertions(+), 21 deletions(-)
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
index ce18201b7d4..c0f3b046fed 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 ddb6d177ae6..850fd1bef75 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 721e0e489f6..c3ef96bd4a9 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 0ad2ecd25bb..ccb130f3818 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 5fa69d757a1..bf7a25ccd2e 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 a3ba39815dc..a6f4691d331 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 448d7d9b103..1347d807e31 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 46579b6a2a3..a6b4c7c0680 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 a83aa133d88..bc512b4c1e8 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`,
--
GitLab