feat!: renames Colorpicker(Dialog) to ColorPicker(Dialog) (#1719)

Author: geotrev

docs/migration.md

@@ -34,7 +34,9 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-colorpickers
 
-- `ColorPickerDialog`: removed `popperModifiers` prop (see [note](#breaking-changes))
+- `Colorpicker`: renamed to `ColorPicker`
+- `ColorpickerDialog`: renamed to `ColorPickerDialog`
+  - removed `popperModifiers` prop (see [note](#breaking-changes))
 - `ColorSwatch`
   - The new `name` prop is required because the refactored component is now
     backed by a native radio or checkbox group.

packages/colorpickers/README.md

@@ -14,15 +14,85 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+### ColorPicker
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Colorpicker } from '@zendeskgarden/react-colorpickers';
+import { ColorPicker } from '@zendeskgarden/react-colorpickers';
 
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
-  <Colorpicker defaultColor="#17494D">
+  <ColorPicker defaultColor="#17494D">
 </ThemeProvider>
 ```
+
+### ColorPickerDialog
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorPickerDialog } from '@zendeskgarden/react-colorpickers';
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorPickerDialog defaultColor="#17494D" buttonProps={{ 'aria-label': 'Example label' }} />
+</ThemeProvider>;
+```
+
+### ColorSwatch
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorSwatch } from '@zendeskgarden/react-colorpickers';
+
+const colors = [
+  [
+    { label: 'Green-800', value: '#0b3b29' },
+    { label: 'Green-700', value: '#186146' }
+  ],
+  [
+    { label: 'Green-600', value: '#038153' },
+    { label: 'Green-500', value: '#228f67' }
+  ]
+];
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorSwatch colors={colors} name="swatch" />
+</ThemeProvider>;
+```
+
+### ColorSwatchDialog
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorSwatchDialog } from '@zendeskgarden/react-colorpickers';
+
+const colors = [
+  [
+    { label: 'Green-800', value: '#0b3b29' },
+    { label: 'Green-700', value: '#186146' }
+  ],
+  [
+    { label: 'Green-600', value: '#038153' },
+    { label: 'Green-500', value: '#228f67' }
+  ]
+];
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorSwatchDialog
+    colors={colors}
+    name="swatch-dialog"
+    buttonProps={{ 'aria-label': 'Example label' }}
+  />
+</ThemeProvider>;
+```

packages/colorpickers/demo/colorPicker.stories.mdx

@@ -1,12 +1,12 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import { PALETTE } from '@zendeskgarden/react-theming';
-import { Colorpicker } from '@zendeskgarden/react-colorpickers';
+import { ColorPicker } from '@zendeskgarden/react-colorpickers';
 import README from '../README.md';
 
 <Meta
-  title="Packages/Colorpickers/Colorpicker"
-  component={Colorpicker}
+  title="Packages/Colorpickers/ColorPicker"
+  component={ColorPicker}
   parameters={{
     design: {
       allowFullscreen: true,
@@ -26,7 +26,7 @@ import README from '../README.md';
 
 <Canvas>
   <Story name="Uncontrolled" argTypes={{ color: { control: false } }}>
-    {args => <Colorpicker {...args} />}
+    {args => <ColorPicker {...args} />}
   </Story>
 </Canvas>
 
@@ -41,7 +41,7 @@ import README from '../README.md';
     {args => {
       const updateArgs = useArgs()[1];
       const handleChange = color => updateArgs({ color });
-      return <Colorpicker {...args} onChange={handleChange} />;
+      return <ColorPicker {...args} onChange={handleChange} />;
     }}
   </Story>
 </Canvas>

packages/colorpickers/demo/colorPickerDialog.stories.mdx

@@ -1,13 +1,13 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import { PALETTE } from '@zendeskgarden/react-theming';
-import { ColorpickerDialog } from '@zendeskgarden/react-colorpickers';
-import { ColorpickerDialogStory } from './stories/ColorpickerDialogStory';
+import { ColorPickerDialog } from '@zendeskgarden/react-colorpickers';
+import { ColorPickerDialogStory } from './stories/ColorPickerDialogStory';
 import README from '../README.md';
 
 <Meta
-  title="Packages/Colorpickers/ColorpickerDialog"
-  component={ColorpickerDialog}
+  title="Packages/Colorpickers/ColorPickerDialog"
+  component={ColorPickerDialog}
   args={{
     buttonProps: { 'aria-label': 'Label' },
     'aria-label': 'Title',
@@ -38,7 +38,7 @@ import README from '../README.md';
 
 <Canvas>
   <Story name="Uncontrolled" argTypes={{ color: { control: false } }}>
-    {args => <ColorpickerDialogStory {...args} />}
+    {args => <ColorPickerDialogStory {...args} />}
   </Story>
 </Canvas>
 
@@ -55,7 +55,7 @@ import README from '../README.md';
       const handleDialogChange = ({ isOpen }) => updateArgs({ isOpen });
       const handleChange = color => updateArgs({ color });
       return (
-        <ColorpickerDialogStory
+        <ColorPickerDialogStory
           {...args}
           onDialogChange={handleDialogChange}
           onChange={handleChange}

packages/colorpickers/demo/stories/ColorpickerDialogStory.tsx renamed to packages/colorpickers/demo/stories/ColorPickerDialogStory.tsx

@@ -8,13 +8,13 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
-import { ColorpickerDialog, IColorpickerDialogProps } from '@zendeskgarden/react-colorpickers';
+import { ColorPickerDialog, IColorPickerDialogProps } from '@zendeskgarden/react-colorpickers';
 
-export const ColorpickerDialogStory: Story<IColorpickerDialogProps> = args => (
+export const ColorPickerDialogStory: Story<IColorPickerDialogProps> = args => (
   <Grid>
     <Row style={{ height: 'calc(100vh - 80px)' }}>
       <Col textAlign="center" alignSelf="center">
-        <ColorpickerDialog {...args} />
+        <ColorPickerDialog {...args} />
       </Col>
     </Row>
   </Grid>