Skip to content

Commit bbd5e74

Browse files
EstasieEstasie
committed
fix: review changes + storybook and docs :)
1 parent cc6acae commit bbd5e74

File tree

21 files changed

+285
-66
lines changed

21 files changed

+285
-66
lines changed

‎package-lock.json‎

Lines changed: 74 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ColorPicker/constants.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/ColorPicker/ColorPicker.scss‎ renamed to ‎src/components/lab/ColorPicker/ColorPicker.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../variables';
1+
@use '../../variables';
22
/* stylelint-disable declaration-no-important */
33

44
$block: '.#{variables.$ns}color-picker';
@@ -21,8 +21,8 @@ $block: '.#{variables.$ns}color-picker';
2121
box-sizing: border-box;
2222

2323
/* Color swatch specific styles */
24-
min-width: var(--g-button-height, var(--_--height));
25-
height: var(--g-button-height, var(--_--height));
24+
min-width: var(--_--height);
25+
height: var(--_--height);
2626
border-radius: var(--g-border-radius-s);
2727
cursor: pointer;
2828
position: relative;
@@ -106,7 +106,7 @@ $block: '.#{variables.$ns}color-picker';
106106
padding: var(--__--picker-wrapper-padding);
107107
width: var(--_--base-picker-wrapper-width);
108108

109-
&_withAlpha {
109+
&_alpha {
110110
width: calc(--_--base-picker-wrapper-width + 10px);
111111
}
112112

@@ -130,7 +130,7 @@ $block: '.#{variables.$ns}color-picker';
130130
}
131131
}
132132

133-
&_onlyPicker {
133+
&_compact {
134134
--_--base-picker-wrapper-width: fit-content;
135135
--__--picker-wrapper-padding: var(--g-spacing-1);
136136
}

‎src/components/ColorPicker/ColorPicker.tsx‎ renamed to ‎src/components/lab/ColorPicker/ColorPicker.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import * as React from 'react';
33
import type {HsvaColor} from '@uiw/react-color';
44
import {Alpha, Hue, Saturation, hsvaToHex, hsvaToHexa} from '@uiw/react-color';
55

6-
import {useControlledState} from '../../hooks/useControlledState';
7-
import {Popup} from '../Popup';
8-
import {Select} from '../Select';
6+
import {useControlledState} from '../../../hooks/useControlledState';
7+
import {Popup} from '../../Popup';
8+
import {Select} from '../../Select';
99

1010
import {ColorDisplay, ColorPointer, HexInput, RgbInputs} from './components';
1111
import {DEFAULT_COLOR, b} from './constants';
@@ -48,7 +48,7 @@ export interface ColorPickerProps {
4848
/*
4949
* Render only picker button without value
5050
*/
51-
onlyPicker?: boolean;
51+
compact?: boolean;
5252
}
5353

5454
export const ColorPicker = ({
@@ -60,7 +60,7 @@ export const ColorPicker = ({
6060
onOpenChange,
6161
defaultOpen = false,
6262
withAlpha = false,
63-
onlyPicker = false,
63+
compact = false,
6464
}: ColorPickerProps) => {
6565
const [anchor, setAnchor] = React.useState<HTMLDivElement | null>(null);
6666
const [modeState, setModeState] = React.useState<Modes>(Modes.Hex);
@@ -130,7 +130,7 @@ export const ColorPicker = ({
130130
onColorChange={updateHsva}
131131
ref={setAnchor}
132132
size={size}
133-
onlyPicker={onlyPicker}
133+
compact={compact}
134134
/>
135135

136136
<Popup

‎src/components/lab/ColorPicker/README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# unstable_ColorPicker
2+
3+
> The `unstable_ColorPicker` component is an experimental color selection component. The component is unstable,
4+
> so it means breaking changes can occur during minor or patch releases. Be aware of that.
5+
6+
The `unstable_ColorPicker` component allows users to select colors using an interactive color picker interface with HEX/RGB input modes and optional alpha channel support.
7+
8+
The picker displays a color swatch that opens a popup with:
9+
10+
- Saturation and brightness selector
11+
- Hue slider
12+
- Alpha slider (when enabled)
13+
- Color input fields (HEX or RGB modes)
14+
15+
## Basic usage
16+
17+
```jsx
18+
import {unstable_ColorPicker as ColorPicker} from '@gravity-ui/uikit/unstable';
19+
20+
function BasicColorPicker() {
21+
const [color, setColor] = React.useState('#ff0000');
22+
23+
return <ColorPicker value={color} onUpdate={(newColor) => setColor(newColor)} />;
24+
}
25+
```
26+
27+
## With alpha channel
28+
29+
The ColorPicker supports alpha transparency when `withAlpha` is enabled. This adds a transparency slider and switches to HEXA/RGBA color formats:
30+
31+
```jsx
32+
import {unstable_ColorPicker as ColorPicker} from '@gravity-ui/uikit/unstable';
33+
34+
function ColorPickerWithAlpha() {
35+
const [color, setColor] = React.useState('#ff0000ff');
36+
37+
return <ColorPicker value={color} onUpdate={(newColor) => setColor(newColor)} withAlpha={true} />;
38+
}
39+
```
40+
41+
## Compact mode
42+
43+
For space-constrained layouts, you can render only the color swatch without displaying the color value text:
44+
45+
```jsx
46+
import {unstable_ColorPicker as ColorPicker} from '@gravity-ui/uikit/unstable';
47+
48+
function CompactColorPicker() {
49+
return (
50+
<ColorPicker
51+
defaultValue="#00ff00"
52+
compact={true}
53+
onUpdate={(newColor) => console.log('New color:', newColor)}
54+
/>
55+
);
56+
}
57+
```
58+
59+
## Controlled and uncontrolled states
60+
61+
The ColorPicker supports both controlled and uncontrolled usage patterns:
62+
63+
```jsx
64+
// Uncontrolled
65+
<ColorPicker
66+
defaultValue="#ffbe5c"
67+
onUpdate={(color) => console.log('Color changed:', color)}
68+
/>
69+
70+
// Controlled
71+
<ColorPicker
72+
value={color}
73+
onUpdate={setColor}
74+
/>
75+
```
76+
77+
You can also control the open state of the picker popup:
78+
79+
```jsx
80+
// Controlled open state
81+
<ColorPicker value={color} open={isOpen} onOpenChange={setIsOpen} onUpdate={setColor} />
82+
```
83+
84+
## Properties
85+
86+
| Name | Description | Type | Default |
87+
| :----------- | :----------------------------------------------------------------------- | :-----------------------: | :---------: |
88+
| size | The `unstable_ColorPicker` size | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
89+
| value | Color value for controlled state (HEX or HEXA string) | `string` | |
90+
| defaultValue | Default color value for uncontrolled state | `string` | `"#000000"` |
91+
| onUpdate | Callback when user updates the color. Receives a HEX(A) string. | `(value: string) => void` | |
92+
| open | Controlled state for popup open/close | `boolean` | |
93+
| defaultOpen | Default state for popup open/close | `boolean` | `false` |
94+
| onOpenChange | Callback for popup open/close state change | `(open: boolean) => void` | |
95+
| withAlpha | Enables alpha channel support for HEXA/RGBA mode and transparency slider | `boolean` | `false` |
96+
| compact | Renders only the picker button without displaying the color value text | `boolean` | `false` |
97+
98+
## Color formats
99+
100+
The ColorPicker always returns color values in HEX format:
101+
102+
- When `withAlpha={false}`: Returns 6-digit HEX (e.g., `#ff0000`)
103+
- When `withAlpha={true}`: Returns 8-digit HEXA (e.g., `#ff0000ff`)
104+
105+
Inside the picker popup, users can switch between HEX and RGB input modes to enter colors in their preferred format.

‎src/components/ColorPicker/__stories__/ColorPicker.stories.tsx‎ renamed to ‎src/components/lab/ColorPicker/__stories__/ColorPicker.stories.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,46 @@ export default meta;
1313

1414
type Story = StoryObj<typeof ColorPicker>;
1515

16-
export const Default: Story = {
17-
render: function ColorPickerStory(props) {
18-
const [value, setValue] = React.useState('#eeeeee');
19-
return (
20-
<div style={{padding: 20}}>
21-
<ColorPicker {...props} value={value} defaultValue="#ffbe5c" onUpdate={setValue} />
22-
</div>
23-
);
16+
const parameters = {
17+
a11y: {
18+
context: '#storybook-root',
19+
config: {
20+
rules: [
21+
{
22+
id: 'color-contrast',
23+
enabled: false,
24+
},
25+
],
26+
},
2427
},
2528
};
29+
export const Default = {
30+
args: {
31+
value: '#000000',
32+
onUpdate: (color) => console.log('Color changed:', color),
33+
},
34+
parameters,
35+
} satisfies Story;
2636

27-
export const WithAlpha: Story = {
28-
render: function ColorPickerStory(props) {
29-
const [value, setValue] = React.useState('#eeeeee');
30-
return (
31-
<div style={{padding: 20}}>
32-
<ColorPicker
33-
{...props}
34-
value={value}
35-
defaultValue="#ffbe5c"
36-
onUpdate={setValue}
37-
withAlpha
38-
/>
39-
</div>
40-
);
37+
export const Compact = {
38+
args: {
39+
value: '#000000',
40+
onUpdate: (color) => console.log('Color changed:', color),
41+
compact: true,
4142
},
42-
};
43+
parameters,
44+
} satisfies Story;
4345

44-
export const Sizes: Story = {
46+
export const WithAlpha = {
47+
args: {
48+
value: '#000000FF',
49+
onUpdate: (color) => console.log('Color changed:', color),
50+
withAlpha: true,
51+
},
52+
parameters,
53+
} satisfies Story;
54+
55+
export const Sizes = {
4556
render: function ColorPickerStory(props) {
4657
return (
4758
<React.Fragment>
@@ -80,4 +91,4 @@ export const Sizes: Story = {
8091
</React.Fragment>
8192
);
8293
},
83-
};
94+
} satisfies Story;

0 commit comments

Comments
 (0)