Use new ColorSelector for single color chart settings (#22974)

frontend/src/metabase/hooks/use-current-ref.ts

+import { useRef } from "react";
+
+export const useCurrentRef = function<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+};

frontend/src/metabase/lib/colors.ts

@@ -64,7 +64,6 @@ export const harmony: string[] = [];
 // DEPRECATED: we should remove these and use `colors` directly
 // compute satured/desaturated variants using "color" lib if absolutely required
 export const normal: Record<string, string> = {};
-export const saturated: Record<string, string> = {};
 export const desaturated: Record<string, string> = {};
 // make sure to do the initial "sync"
 syncColors();
@@ -109,11 +108,11 @@ function syncHarmony() {
 // syncs deprecated color families for legacy code
 function syncDeprecatedColorFamilies() {
   // normal + saturated + desaturated
-  normal.blue = saturated.blue = desaturated.blue = colors["brand"];
-  normal.green = saturated.green = desaturated.green = colors["accent1"];
-  normal.purple = saturated.purple = desaturated.purple = colors["accent2"];
-  normal.red = saturated.red = desaturated.red = colors["accent3"];
-  normal.yellow = saturated.yellow = desaturated.yellow = colors["accent4"];
+  normal.blue = desaturated.blue = colors["brand"];
+  normal.green = desaturated.green = colors["accent1"];
+  normal.purple = desaturated.purple = colors["accent2"];
+  normal.red = desaturated.red = colors["accent3"];
+  normal.yellow = desaturated.yellow = colors["accent4"];
   normal.orange = colors["accent5"];
   normal.teal = colors["accent6"];
   normal.indigo = colors["accent7"];

frontend/src/metabase/lib/colors/charts.ts

+import { times } from "lodash";
+import { color } from "metabase/lib/colors";
+
+export const getNormalColors = () => [
+  color("brand"),
+  ...times(7, i => color(`accent${i + 1}`)),
+  color("text-dark"),
+];
+
+export const getDesaturatedColors = () => [
+  color("brand"),
+  ...times(4, i => color(`accent${i + 1}`)),
+];

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

 /* eslint-disable react/prop-types */
 import React from "react";
 
-import ColorPicker from "metabase/components/ColorPicker";
+import { getNormalColors } from "metabase/lib/colors/charts";
+import ColorSelector from "metabase/core/components/ColorSelector";
 import { SegmentedControl } from "metabase/components/SegmentedControl";
 import Icon from "metabase/components/Icon";
 import IconWrapper from "metabase/components/IconWrapper";
@@ -39,9 +40,9 @@ export default class ChartNestedSettingSeries extends React.Component {
                 className="px4 pt2 mt2 border-top align-self-stretch"
               >
                 <div className="flex align-center">
-                  <ColorPicker
+                  <ColorSelector
                     value={settings.color}
-                    triggerSize={21}
+                    colors={getNormalColors()}
                     onChange={value =>
                       onChangeObjectSettings(single, { color: value })
                     }

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

 /* eslint-disable react/prop-types */
-import React, { Component } from "react";
+import React from "react";
 
-import ColorPicker from "metabase/components/ColorPicker";
+import { getNormalColors } from "metabase/lib/colors/charts";
+import ColorSelector from "metabase/core/components/ColorSelector";
 
-export default class ChartSettingColorPicker extends Component {
-  render() {
-    return (
-      <div className="flex align-center mb1">
-        <ColorPicker {...this.props} triggerSize={12} />
-        {this.props.title && <h4 className="ml1">{this.props.title}</h4>}
-      </div>
-    );
-  }
+export default function ChartSettingColorPicker(props) {
+  const { value, onChange } = props;
+
+  return (
+    <div className="flex align-center mb1">
+      <ColorSelector
+        value={value}
+        colors={getNormalColors()}
+        onChange={onChange}
+      />
+      {props.title && <h4 className="ml1">{props.title}</h4>}
+    </div>
+  );
 }

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

@@ -4,9 +4,10 @@ import React from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
-import { color, normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
+import { getNormalColors } from "metabase/lib/colors/charts";
 
-import ColorPicker from "metabase/components/ColorPicker";
+import ColorSelector from "metabase/core/components/ColorSelector";
 import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import NumericInput from "metabase/components/NumericInput";
@@ -33,12 +34,11 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
             <React.Fragment key={segment.index}>
               <tr>
                 <td>
-                  <ColorPicker
-                    value={segment.color}
-                    onChange={color => onChangeProperty(index, "color", color)}
-                    triggerSize={28}
-                    padding={2}
+                  <ColorSelector
+                    className="mr1"
+                    color={segment.color}
                     colors={getColorPalette()}
+                    onChange={color => onChangeProperty(index, "color", color)}
                   />
                 </td>
                 <td>
@@ -101,10 +101,10 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
 
 function getColorPalette() {
   return [
+    ...getNormalColors(),
     color("error"),
     color("warning"),
     color("success"),
-    ...Object.values(normal).slice(0, 9),
     color("bg-medium"),
   ];
 }
@@ -117,7 +117,7 @@ function newSegment(segments) {
     : -1;
   const nextColor =
     lastColorIndex >= 0
-      ? palette[lastColorIndex + (1 % palette.length)]
+      ? palette[(lastColorIndex + 1) % palette.length]
       : palette[0];
 
   return {

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

@@ -9,7 +9,7 @@ import Icon from "metabase/components/Icon";
 import Select, { Option } from "metabase/core/components/Select";
 import Radio from "metabase/core/components/Radio";
 import Toggle from "metabase/core/components/Toggle";
-import ColorPicker from "metabase/components/ColorPicker";
+import ColorSelector from "metabase/core/components/ColorSelector";
 
 import ColorRangePicker, {
   ColorRangePreview,
@@ -53,10 +53,11 @@ export const ALL_OPERATOR_NAMES = {
   ...STRING_OPERATOR_NAMES,
 };
 
-import { color, desaturated } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
+import { getDesaturatedColors } from "metabase/lib/colors/charts";
 
 // TODO
-const COLORS = Object.values(desaturated);
+const COLORS = getDesaturatedColors();
 const COLOR_RANGES = [].concat(
   ...COLORS.map(color => [
     ["white", color],
@@ -390,7 +391,7 @@ const RuleEditor = ({ rule, cols, isNew, onChange, onDone, onRemove }) => {
             />
           ) : null}
           <h3 className="mt3 mb1">{t`…turn its background this color:`}</h3>
-          <ColorPicker
+          <ColorSelector
             value={rule.color}
             colors={COLORS}
             onChange={color => onChange({ ...rule, color })}