Skip to content

Commit 5cc10bd

Browse files
ValentinaKozlovaValentinaKozlova
authored
docs(react-color-picker): updated the spec and the migration (#33918)
1 parent 17664f4 commit 5cc10bd

File tree

2 files changed

+34
-64
lines changed

2 files changed

+34
-64
lines changed

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
#### Supported Props
1212

1313
- `color`
14-
- `onChange`
1514

1615
#### Props no longer supported with an equivalent functionality in ColorPicker V9:
1716

1817
- `className` => Slot system supports it by default. We don't need to provide it explicitly.
18+
- `onChange` => Use `onColorChange` instead.
1919
- `styles` => Use style customization through `className` instead.
2020
- `theme`
2121

@@ -43,9 +43,10 @@
4343

4444
#### New props
4545

46+
- `channel`
4647
- `defaultColor`
4748
- `shape`
48-
- `orient`
49+
- `vertical`
4950

5051
#### Props supported
5152

@@ -69,10 +70,9 @@
6970
| v8 `ColorPicker` | v9 `ColorPicker` |
7071
| ---------------- | -------------------------- |
7172
| `value` | `color` |
72-
| `onChange` | `onChange` |
73+
| `onChange` | `onColorChange` |
7374
| `maxValue` | |
7475
| `minValue` | |
75-
| `shape ` | |
7676
| `type` | |
7777
| `isAlpha` | `AlphaSlider` component |
7878
| `overlayColor` | In `AlphaSlider` component |

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

+30-60
Original file line numberDiff line numberDiff line change
@@ -74,24 +74,22 @@ import {
7474
ColorArea,
7575
ColorSliderProps,
7676
AlphaSlider,
77-
HueSlider,
77+
ColorSlider,
7878
ColorPickerOnSelectEventHandler,
7979
} from '@fluentui/react-color-picker-preview';
8080

8181
export const Default = () => {
82-
const [selectedColor, setSelectedColor] = React.useState('rgba(0, 255, 170, 1)');
83-
const handleChange: ColorPickerProps['onChange'] = (_, data) => {
84-
setSelectedColor(data.selectedColorHex);
85-
};
82+
const [selectedColor, setSelectedColor] = React.useState({ h: 109, s: 1, v: 0.9, a: 1 });
83+
const handleChange: ColorPickerProps['onChange'] = (_, data) => setSelectedColor(data.selectedColorHex);
8684

8785
return (
8886
<>
8987
<ColorPicker color={selectedColor} onChange={handleChange}>
9088
<ColorArea />
9189
<AlphaSlider />
92-
<HueSlider />
90+
<ColorSlider />
9391
</ColorPicker>
94-
<div style={{ backgroundColor: `${selectedColor}` }} />
92+
<div style={{ backgroundColor: tinycolor(color).toRgbString() }} />
9593
</>
9694
);
9795
};
@@ -132,51 +130,18 @@ For custom sizes users might want to customize it via CSS.
132130

133131
### ColorPicker
134132

135-
| Property | Values | Default | Purpose |
136-
| ---------- | ------------------- | --------- | -------------------------------------- |
137-
| color | `HSV` | | Sets color value in HSV format |
138-
| onChange | `function` | undefined | Callback called when color is selected |
139-
| shape | `square`, `rounded` | `rounded` | Sets shape |
140-
| step | `number` | 1 | Step for arrow navigation |
141-
| customStep | `number` | 3 | Fast navigation |
133+
| Property | Values | Default | Purpose |
134+
| ------------- | ------------------- | --------- | -------------------------------------- |
135+
| color | `HSV` | | Sets color value in HSV format |
136+
| onColorChange | `function` | undefined | Callback called when color is selected |
137+
| shape | `square`, `rounded` | `rounded` | Sets shape |
142138

143139
Color has an `HSV` type because the correct functioning of the component requires coordinates. In some parts of the ColorArea, the color is the same, and therefore it should be calculated using coordinates. Color manipulations will be done on the user end in the desired format.
144140

145-
`onChange` event returns data which contains a new color.
146-
147-
Input fields with color values will be in `renderUtils`. It will contain default ColorPicker which has all colors represented and a preview swatch. This functionality is similar to V8.
148-
149-
```tsx
150-
import { ColorPicker } from '@fluentui/react-color-picker-preview';
151-
152-
const COLOR = { h: 0, s: 1, v: 1 };
153-
154-
export const Default = () => {
155-
const [selectedColor, setSelectedColor] = React.useState(COLOR);
156-
const handleChange: ColorPickerOnSelectEventHandler = (_, data) => {
157-
setSelectedColor({ ...data.color, a: data.color.a ?? 1 });
158-
};
159-
160-
return (
161-
<>
162-
<ColorPicker color={color} onColorChange={handleChange}>
163-
<ColorSlider />
164-
<AlphaSlider />
165-
<ColorArea />
166-
</ColorPicker>
167-
<InputHexField color={color} onChange={handleChange} />
168-
<InputRgbField color={color} onChange={handleChange} />
169-
<ColorSwatch color={color}>
170-
<div style={{ backgroundColor: `${selectedColor}` }} />
171-
</>
172-
);
173-
};
174-
```
141+
`onColorChange` event returns data which contains a new color.
175142

176143
![ColorPicker](./assets/color-picker-layout.jpg)
177144

178-
Validation of color fields will be in `utils`. Validation should not allow entering incorrect values to the input fields.
179-
180145
For color manipulation and conversion [tinycolor](https://www.npmjs.com/package/@ctrl/tinycolor) library will be used.
181146

182147
| Slots | Values | Default | Description |
@@ -188,7 +153,7 @@ For color manipulation and conversion [tinycolor](https://www.npmjs.com/package/
188153
| Property | Values | Default | Purpose |
189154
| ------------ | ------------------- | --------- | --------------------------------------- |
190155
| color | `HSV` | | Sets color value in HSV format |
191-
| defauleColor | `HSV` | | Sets color for uncontrollable ColorArea |
156+
| defaultColor | `HSV` | | Sets color for uncontrollable ColorArea |
192157
| onChange | `function` | undefined | Callback called when color is selected |
193158
| shape | `square`, `rounded` | `rounded` | Sets shape |
194159

@@ -201,13 +166,14 @@ For color manipulation and conversion [tinycolor](https://www.npmjs.com/package/
201166

202167
### ColorSlider
203168

204-
| Property | Values | Default | Purpose |
205-
| ------------ | ------------------------ | ------------ | ----------------------------------------- |
206-
| color | `HSV` | | Sets color value in HSV format |
207-
| defauleColor | `HSV` | | Sets color for uncontrollable ColorSlider |
208-
| onChange | `function` | undefined | Callback called when color is selected |
209-
| orient | `horizontal`, `vertical` | `horizontal` | Orientation of a slider |
210-
| shape | `square`, `rounded` | `rounded` | Sets shape |
169+
| Property | Values | Default | Purpose |
170+
| ------------ | ---------------------------- | --------- | ----------------------------------------- |
171+
| channel | `hue`, `saturation`, `value` | `hue` | Sets color channel |
172+
| color | `HSV` | | Sets color value in HSV format |
173+
| defaultColor | `HSV` | | Sets color for uncontrollable ColorSlider |
174+
| onChange | `function` | undefined | Callback called when color is selected |
175+
| shape | `square`, `rounded` | `rounded` | Sets shape |
176+
| vertical | `boolean` | `false` | Orientation of a slider |
211177

212178
| Slots | Values | Default | Description |
213179
| ------ | ------- | ------- | ---------------------------------------------------------------- |
@@ -218,7 +184,10 @@ For color manipulation and conversion [tinycolor](https://www.npmjs.com/package/
218184

219185
### AlphaSlider
220186

221-
AlphaSlider has the same props and slots as ColorSlider.
187+
AlphaSlider has the same props and slots as ColorSlider except `transparent` prop.
188+
| Property | Values | Default | Purpose |
189+
| ------------ | ---------------------------- | --------- | ----------------------------------------- |
190+
| transparent | `boolean` | `false` | The `transparency` property determines how the alpha channel is interpreted |
222191

223192
## Structure
224193

@@ -309,11 +278,12 @@ States:
309278

310279
In a `horizontal` orientation top/right arrows move to the right, bottom/left arrows move to the left.
311280

312-
| Key | Result |
313-
| -------------------- | -------------------------------------------------------------- |
314-
| Arrows | Color thumb is focused. Color is selected |
315-
| `Home/End/PgUp/PgDn` | Can be used another configuration for the step to move faster. |
316-
| `Tab` | Navigation between color sliders and Color Area |
281+
| Key | Result |
282+
| ----------- | ----------------------------------------------- |
283+
| Arrows | Color thumb is focused. Color is selected |
284+
| `PgUp/PgDn` | Can be used for faster navigation |
285+
| `Home/End` | Navigates to the beginning or end of a Slider |
286+
| `Tab` | Navigation between color sliders and Color Area |
317287

318288
##### Color/Alpha Slider
319289

0 commit comments

Comments
 (0)