refactor: color picker and add docs

chakra-ui · Nov 13, 2023 · bc2853b · bc2853b
1 parent ce75330
commit bc2853b
Show file tree

Hide file tree

Showing 36 changed files with 1,221 additions and 142 deletions.
diff --git a/.changeset/cold-parrots-eat.md b/.changeset/cold-parrots-eat.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/color-picker": minor
+---
+
+- Add support for setting the desired output format. This format will be used in the `details.valueAsString` for
+  `onValueChange` callback
+- Add support for format trigger and select parts to help control the format of the output value
+- Add `onFormatChange` callback to listen for format changes
+- Add `closeOnSelect` prop to control whether the color picker should close when a swatch color is selected
diff --git a/.xstate/color-picker.js b/.xstate/color-picker.js
@@ -14,15 +14,22 @@ const fetchMachine = createMachine({
   initial: ctx.open ? "open" : "idle",
   context: {
     "shouldRestoreFocus": false,
+    "closeOnSelect": false,
     "shouldRestoreFocus": false
   },
   activities: ["trackFormControl"],
   on: {
     "VALUE.SET": {
       actions: ["setValue"]
     },
+    "FORMAT.SET": {
+      actions: ["setFormat"]
+    },
     "CHANNEL_INPUT.CHANGE": {
       actions: ["setChannelColorFromInput"]
+    },
+    "EYEDROPPER.CLICK": {
+      actions: ["openEyeDropper"]
     }
   },
   on: {
@@ -65,6 +72,9 @@ const fetchMachine = createMachine({
         "CHANNEL_INPUT.BLUR": {
           target: "idle",
           actions: ["setChannelColorFromInput"]
+        },
+        "TRIGGER.BLUR": {
+          target: "idle"
         }
       }
     },
@@ -76,9 +86,6 @@ const fetchMachine = createMachine({
           target: "idle",
           actions: ["invokeOnClose"]
         },
-        "EYEDROPPER.CLICK": {
-          actions: ["openEyeDropper"]
-        },
         "AREA.POINTER_DOWN": {
           target: "open:dragging",
           actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
@@ -149,7 +156,14 @@ const fetchMachine = createMachine({
         CLOSE: {
           target: "idle",
           actions: ["invokeOnClose"]
-        }
+        },
+        "SWATCH_TRIGGER.CLICK": [{
+          cond: "closeOnSelect",
+          target: "focused",
+          actions: ["setValue", "setReturnFocus", "invokeOnClose"]
+        }, {
+          actions: ["setValue"]
+        }]
       }
     },
     "open:dragging": {
@@ -195,6 +209,7 @@ const fetchMachine = createMachine({
     })
   },
   guards: {
-    "shouldRestoreFocus": ctx => ctx["shouldRestoreFocus"]
+    "shouldRestoreFocus": ctx => ctx["shouldRestoreFocus"],
+    "closeOnSelect": ctx => ctx["closeOnSelect"]
   }
 });
diff --git a/packages/docs/api.json b/packages/docs/api.json
@@ -336,6 +336,14 @@
       "setAlpha": {
         "type": "(value: number) => void",
         "description": "Function to set the color alpha"
+      },
+      "open": {
+        "type": "() => void",
+        "description": "Function to open the color picker"
+      },
+      "close": {
+        "type": "() => void",
+        "description": "Function to close the color picker"
       }
     },
     "context": {
@@ -379,10 +387,6 @@
         "type": "PositioningOptions",
         "description": "The positioning options for the color picker"
       },
-      "autoFocus": {
-        "type": "boolean",
-        "description": "Whether to automatically set focus on the first focusable\ncontent within the color picker when opened."
-      },
       "initialFocusEl": {
         "type": "MaybeFunction<HTMLElement>",
         "description": "The initial focus element when the color picker is opened."
@@ -391,6 +395,18 @@
         "type": "boolean",
         "description": "Whether the color picker is open"
       },
+      "format": {
+        "type": "ColorFormat",
+        "description": "The color format to use"
+      },
+      "onFormatChange": {
+        "type": "(details: FormatChangeDetails) => void",
+        "description": "Function called when the color format changes"
+      },
+      "closeOnSelect": {
+        "type": "boolean",
+        "description": "Whether to close the color picker when a swatch is selected"
+      },
       "id": {
         "type": "string",
         "description": "The unique identifier of the machine."

diff --git a/packages/machines/color-picker/src/color-picker.anatomy.ts b/packages/machines/color-picker/src/color-picker.anatomy.ts
@@ -17,8 +17,11 @@ export const anatomy = createAnatomy("color-picker", [
   "transparencyGrid",
   "swatchGroup",
   "swatchTrigger",
+  "swatchIndicator",
   "swatch",
   "eyeDropperTrigger",
+  "formatTrigger",
+  "formatSelect",
 ])
 
 export const parts = anatomy.build()