Hack Days 34 Unified Color Picker

.changeset/mighty-turkeys-act.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Add text editor to the `ColorPicker`

polaris-react/locales/en.json

@@ -41,6 +41,10 @@
       "spinnerAccessibilityLabel": "Loading",
       "connectedDisclosureAccessibilityLabel": "Related actions"
     },
+    "ColorPicker": {
+      "textPickerAccessibilityLabel": "HEX color",
+      "alphaFieldAccessibilityLabel": "Alpha"
+    },
     "Common": {
       "checkbox": "checkbox",
       "undo": "Undo",

polaris-react/src/components/ColorPicker/ColorPicker.scss

@@ -32,6 +32,10 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-color-picker-size);
 
+  .AlphaAllowed.TextAllowed & {
+    width: 224px;
+  }
+
   .fullWidth & {
     width: auto;
     flex-grow: 1;
@@ -187,3 +191,45 @@ $vertical-picker-border-radius: calc(var(--pc-color-picker-size) * 0.5);
   width: 100%;
   cursor: pointer;
 }
+
+.TextFields {
+  display: flex;
+}
+
+.TextPicker {
+  width: 148px;
+  margin-top: var(--p-space-2);
+
+  &.AlphaAllowed {
+    width: 136px;
+  }
+
+  .fullWidth & {
+    width: auto;
+    flex-grow: 1;
+  }
+}
+
+.TextFieldSwatch {
+  width: control-height();
+  height: control-height();
+  margin: var(--p-space-2) var(--p-space-2) 0 0;
+  border: var(--p-border-width-1) solid var(--p-color-border-strong);
+  border-radius: 3px;
+
+  &.AlphaAllowed {
+    @include checkers;
+  }
+}
+
+.SwatchBackground {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  box-shadow: inherit;
+}
+
+.AlphaField {
+  flex: 0 0 100px;
+  margin: var(--p-space-2) 0 0 var(--p-space-2);
+}

polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -44,63 +44,44 @@ export function WithTransparentValueFullWidth() {
   return <ColorPicker fullWidth onChange={setColor} color={color} allowAlpha />;
 }
 
-export function WithHexTextField() {
+export function WithTextFields() {
   const [color, setColor] = useState({
-    hue: 300,
-    saturation: 0.7,
+    hue: 120,
     brightness: 1,
+    saturation: 1,
   });
 
-  const [hex, setHex] = useState(hsbToHex(color));
-
-  const handleBlur = useCallback(() => {
-    setColor(rgbToHsb(hexToRgb(hex)));
-  }, [hex]);
-
-  useEffect(() => {
-    setHex(hsbToHex(color));
-  }, [color]);
+  return <ColorPicker onChange={setColor} color={color} textEditor />;
+}
 
-  const styles = {
-    Wrapper: {
-      display: 'grid',
-      gap: 'var(--p-space-2)',
-      gridTemplateColumns: 'auto 1fr',
-      maxWidth: 'fit-content',
-    },
-    Picker: {
-      gridColumn: '1 / 3',
-    },
-    Tile: {
-      minHeight: 'calc(100% - 0.125rem)',
-      aspectRatio: '1 / 1',
-      borderRadius: 'var(--p-border-radius-1)',
-      border: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
-      backgroundColor: hsbToHex(color),
-    },
-    TextField: {
-      maxWidth: 'fit-content',
-    },
-  };
+export function WithTransparentValueAndTextFields() {
+  const [color, setColor] = useState({
+    hue: 300,
+    brightness: 1,
+    saturation: 0.7,
+    alpha: 0.7,
+  });
 
   return (
-    <div style={styles.Wrapper}>
-      <div style={styles.Picker}>
-        <ColorPicker onChange={setColor} color={color} />
-      </div>
+    <ColorPicker onChange={setColor} color={color} allowAlpha textEditor />
+  );
+}
 
-      <div style={styles.Tile} />
+export function WithTransparentValueAndTextFieldsFullWidth() {
+  const [color, setColor] = useState({
+    hue: 300,
+    brightness: 1,
+    saturation: 0.7,
+    alpha: 0.7,
+  });
 
-      <div style={styles.TextField}>
-        <TextField
-          label=""
-          prefix="#"
-          value={hex.replace('#', '')}
-          onChange={setHex}
-          onBlur={handleBlur}
-          autoComplete="off"
-        />
-      </div>
-    </div>
+  return (
+    <ColorPicker
+      onChange={setColor}
+      color={color}
+      allowAlpha
+      fullWidth
+      textEditor
+    />
   );
 }