Updating remaining Funnel Viz Settings style changes (#25035)

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>
         ) : (

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" &&

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 })}>

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

 /* 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>
   );
 };
 

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx

 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;

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`

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} />}

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)`

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`,