feat(colorpickers)!: refactor ColorSwatch with improved accessibility backed by a native input (radio or checkbox) group (#1711)

BREAKING CHANGE: `colorpickers`
- `ColorSwatch`
  - `name` is a required prop
  - removed `rowIndex`, `colIndex`, `defaultRowIndex`, and `defaultColIndex`
- `ColorSwatchDialog` – same breaking changes as `ColorSwatch`

#### 🚀 New Feature
- new `isCheckboxGroup` prop can be used to convert the color swatch to a `<input type="checkbox">` group – which means selection can now be compeletely cleared, if necessary

Author: jzempel

docs/migration.md

@@ -7,8 +7,27 @@
 #### All Packages
 
 - Garden v9 packages use `styled-components` version range `^5.1.0`.
+
   - `react-theming@v9` uses version range `^4.2.0 || ^5.1.0` to support `v8` to `v9` upgrades.
 
+- Garden v9 upgraded from `react-merge-refs` v1 to v2.
+  - The [breaking
+    change](https://github.com/gregberge/react-merge-refs/blob/main/CHANGELOG.md#200-2022-06-19)
+    exports ESM only.
+  - Build and test pipelines may need to be updated to account for the `.mjs`
+    extension. See Garden's
+    [jest.config.js](https://github.com/zendeskgarden/react-components/blob/c2aa97d1edccfa0578ee5655b543ca6635767fb9/utils/test/jest.config.js#L28-L30)
+    for details.
+
+#### @zendeskgarden/react-colorpickers
+
+- `ColorSwatch`
+  - The new `name` prop is required because the refactored component is now
+    backed by a native radio or checkbox group.
+  - Removed `rowIndex`, `colIndex`, `defaultRowIndex`, and `defaultColIndex`.
+    For the sake of accessibility, focus state should not be exposed or controlled.
+- `ColorSwatchDialog`: same breaking changes as `ColorSwatch`.
+
 #### @zendeskgarden/react-theming
 
 - Utility function `isRtl` has been removed. Use `props.theme.rtl` instead.
@@ -22,4 +41,4 @@
 
 ## v8
 
-[Migration Guide](https://github.com/zendeskgarden/react-components/blob/next/docs/migrations/v8.md)
+[Migration Guide](https://github.com/zendeskgarden/react-components/blob/main/docs/migrations/v8.md)

package-lock.json

@@ -48,13 +48,20 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Controlled"
-    args={{ color: PALETTE.blue[600] }}
+    args={{ color: PALETTE.blue[600], isOpen: false }}
     argTypes={{ defaultColor: { control: false } }}
   >
     {args => {
       const updateArgs = useArgs()[1];
+      const handleDialogChange = ({ isOpen }) => updateArgs({ isOpen });
       const handleChange = color => updateArgs({ color });
-      return <ColorpickerDialogStory {...args} onChange={handleChange} />;
+      return (
+        <ColorpickerDialogStory
+          {...args}
+          onDialogChange={handleDialogChange}
+          onChange={handleChange}
+        />
+      );
     }}
   </Story>
 </Canvas>

packages/colorpickers/demo/colorPickerDialog.stories.mdx

@@ -7,7 +7,7 @@ import README from '../README.md';
 <Meta
   title="Packages/Colorpickers/ColorSwatch"
   component={ColorSwatch}
-  args={{ colors: COLORS }}
+  args={{ colors: COLORS, name: 'name' }}
   parameters={{
     design: {
       allowFullscreen: true,
@@ -29,8 +29,6 @@ import README from '../README.md';
   <Story
     name="Uncontrolled"
     argTypes={{
-      colIndex: { control: false },
-      rowIndex: { control: false },
       selectedColIndex: { control: false },
       selectedRowIndex: { control: false }
     }}
@@ -44,20 +42,19 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Controlled"
-    args={{ rowIndex: 0, colIndex: 5, selectedRowIndex: 0, selectedColIndex: 5 }}
+    args={{ selectedRowIndex: 0, selectedColIndex: 5 }}
     argTypes={{
-      defaultColIndex: { control: false },
-      defaultRowIndex: { control: false },
       defaultSelectedColIndex: { control: false },
-      defaultSelectedRowIndex: { control: false }
+      defaultSelectedRowIndex: { control: false },
+      selectedColIndex: { control: { type: 'number' } },
+      selectedRowIndex: { control: { type: 'number' } }
     }}
   >
     {args => {
       const updateArgs = useArgs()[1];
-      const handleChange = (rowIndex, colIndex) => updateArgs({ rowIndex, colIndex });
       const handleSelect = (selectedRowIndex, selectedColIndex) =>
         updateArgs({ selectedRowIndex, selectedColIndex });
-      return <ColorSwatch {...args} onChange={handleChange} onSelect={handleSelect} />;
+      return <ColorSwatch {...args} onSelect={handleSelect} />;
     }}
   </Story>
 </Canvas>

packages/colorpickers/demo/colorSwatch.stories.mdx

@@ -12,7 +12,8 @@ import README from '../README.md';
     buttonProps: { 'aria-label': 'Label' },
     'aria-label': 'Title',
     colors: COLORS,
-    isAnimated: true
+    isAnimated: true,
+    name: 'name'
   }}
   argTypes={{
     focusInset: { control: 'boolean' },
@@ -41,12 +42,6 @@ import README from '../README.md';
   <Story
     name="Uncontrolled"
     argTypes={{
-      defaultColIndex: { control: 'number' },
-      defaultRowIndex: { control: 'number' },
-      defaultSelectedColIndex: { control: 'number' },
-      defaultSelectedRowIndex: { control: 'number' },
-      colIndex: { control: false },
-      rowIndex: { control: false },
       selectedColIndex: { control: false },
       selectedRowIndex: { control: false }
     }}
@@ -60,20 +55,22 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Controlled"
-    args={{ rowIndex: 0, colIndex: 5, selectedRowIndex: 0, selectedColIndex: 5 }}
+    args={{ isOpen: false, selectedRowIndex: 0, selectedColIndex: 5 }}
     argTypes={{
-      defaultColIndex: { control: false },
-      defaultRowIndex: { control: false },
       defaultSelectedColIndex: { control: false },
-      defaultSelectedRowIndex: { control: false }
+      defaultSelectedRowIndex: { control: false },
+      selectedColIndex: { control: { type: 'number' } },
+      selectedRowIndex: { control: { type: 'number' } }
     }}
   >
     {args => {
       const updateArgs = useArgs()[1];
-      const handleChange = (rowIndex, colIndex) => updateArgs({ rowIndex, colIndex });
+      const handleChange = ({ isOpen }) => updateArgs({ isOpen });
       const handleSelect = (selectedRowIndex, selectedColIndex) =>
         updateArgs({ selectedRowIndex, selectedColIndex });
-      return <ColorSwatchDialogStory {...args} onChange={handleChange} onSelect={handleSelect} />;
+      return (
+        <ColorSwatchDialogStory {...args} onDialogChange={handleChange} onSelect={handleSelect} />
+      );
     }}
   </Story>
 </Canvas>

packages/colorpickers/demo/colorSwatchDialog.stories.mdx

@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-grid": "^0.1.1",
+    "@zendeskgarden/container-grid": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.0.0-next.1",
     "@zendeskgarden/react-forms": "^9.0.0-next.1",
@@ -30,7 +30,8 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.67.0",