docs(react-color-picker): Updated documentation for the ColorPicker (#…

…33346)

Co-authored-by: Dmytro Kirpa <[email protected]>

packages/react-components/react-color-picker-preview/library/README.md

@@ -3,3 +3,48 @@
 **React Color Picker components for [Fluent UI React](https://react.fluentui.dev/)**
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+The ColorPicker allows users to browse and select colors.
+By default, it enables navigation through a color spectrum and operates in HSV/HSL format.
+However, it is also possible to specify a color using Red-Green-Blue (RGB), an alpha color code, or hexadecimal values in the text boxes.
+
+## Usage
+
+To import React ColorPicker components:
+
+```tsx
+import { ColorPicker, ColorSwatch, type ColorPickerOnSelectEventHandler } from '@fluentui/react-components';
+```
+
+Simple example of ColorPicker Usage:
+
+```tsx
+import { tinycolor } from '@ctrl/tinycolor';
+import { ColorPicker, ColorSlider, AlphaSlider, type ColorPickerProps, ColorArea } from '@fluentui/react-components';
+
+export const App = () => {
+  const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
+  const handleChange: ColorPickerProps['onColorChange'] = (_, data) =>
+    setColor({ ...data.color, a: data.color.a ?? 1 });
+
+  return (
+    <>
+      <ColorPicker color={color} onColorChange={handleChange}>
+        <ColorSlider />
+        <AlphaSlider />
+        <ColorArea />
+      </ColorPicker>
+
+      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
+    </>
+  );
+};
+```
+
+## Specification
+
+See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the API documentation.

packages/react-components/react-color-picker-preview/library/docs/MIGRATION.md

@@ -0,0 +1,80 @@
+## ColorPicker Migration
+
+## ColorPicker component
+
+### Fabric (v8) property mapping
+
+#### New props
+
+- `shape`
+
+#### Supported Props
+
+- `color`
+- `onChange`
+
+#### Props no longer supported with an equivalent functionality in ColorPicker V9:
+
+- `className` => Slot system supports it by default. We don't need to provide it explicitly.
+- `styles` => Use style customization through `className` instead.
+- `theme`
+
+#### Props no longer supported
+
+- `alphaType`
+- `componentRef`
+- `showPreview`
+- `strings`
+- `tooltipProps`
+
+#### ColorArea component
+
+#### New props
+
+- `defaultColor`
+- `shape`
+- `onChange`
+
+#### Props supported
+
+- `color`
+
+#### ColorSlider component
+
+#### New props
+
+- `defaultColor`
+- `shape`
+- `orient`
+
+#### Props supported
+
+- `onChange`
+
+#### Props no longer supported with an equivalent functionality in ColorPicker V9:
+
+- `value` => Use `color` instead
+- `type` => in case of support channels it'll be `channel` instead
+- `isAlpha` => use `AlphaSlider` component instead
+- `overlayColor` => part of `AlphaSlider` component
+- `thumbColor` => is calculated automatically or can be customized via CSS
+
+#### Props no longer supported
+
+- `minValue`
+- `maxValue`
+
+#### Property Mapping
+
+| v8 `ColorPicker` | v9 `ColorPicker`           |
+| ---------------- | -------------------------- |
+| `value`          | `color`                    |
+| `onChange`       | `onChange`                 |
+| `maxValue`       |                            |
+| `minValue`       |                            |
+| `shape `         |                            |
+| `type`           |                            |
+| `isAlpha`        | `AlphaSlider` component    |
+| `overlayColor`   | In `AlphaSlider` component |
+| `thumbColor`     |                            |
+|                  | `shape`                    |