-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(react-color-picker): updated the spec and the migration #33918
base: master
Are you sure you want to change the base?
docs(react-color-picker): updated the spec and the migration #33918
Conversation
| step | `number` | 1 | Step for arrow navigation | | ||
| customStep | `number` | 3 | Fast navigation | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Those are supported by default. And customStep
idea was for faster navigation but because we use native inputs it's supported from the box.
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. | ||
|
||
```tsx | ||
import { ColorPicker } from '@fluentui/react-color-picker-preview'; | ||
|
||
const COLOR = { h: 0, s: 1, v: 1 }; | ||
|
||
export const Default = () => { | ||
const [selectedColor, setSelectedColor] = React.useState(COLOR); | ||
const handleChange: ColorPickerOnSelectEventHandler = (_, data) => { | ||
setSelectedColor({ ...data.color, a: data.color.a ?? 1 }); | ||
}; | ||
|
||
return ( | ||
<> | ||
<ColorPicker color={color} onColorChange={handleChange}> | ||
<ColorSlider /> | ||
<AlphaSlider /> | ||
<ColorArea /> | ||
</ColorPicker> | ||
<InputHexField color={color} onChange={handleChange} /> | ||
<InputRgbField color={color} onChange={handleChange} /> | ||
<ColorSwatch color={color}> | ||
<div style={{ backgroundColor: `${selectedColor}` }} /> | ||
</> | ||
); | ||
}; | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the examples of inputs are in the storybook now
📊 Bundle size report✅ No changes found |
Pull request demo site: URL |
@@ -11,11 +11,11 @@ | |||
#### Supported Props |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵🏾♀️ visual regressions to review in the fluentuiv9 Visual Regression Report
Avatar Converged 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Avatar Converged.badgeMask.normal.chromium.png | 5 | Changed |
Avatar Converged.badgeMask - RTL.normal.chromium.png | 3 | Changed |
Updated the spec and the migration docs