@gravity-ui/uikit
Version:
Gravity UI base styling and components
95 lines (75 loc) • 5.46 kB
Markdown
# Palette
The `Palette` component is used to display a grid of icons, emojis, reactions, and symbols which you can select or deselect.
```tsx
import {Palette} from '@gravity-ui/uikit';
```
### Disabled state
You can disable every option using the `disabled` property. If you want to disable only certain options, you can change the `disabled` property of those `options` (`PaletteOption[]`).
```tsx
const options: PaletteOption[] = [
// disable a single item
{content: '😎', value: 'ID-cool', disabled: true},
{content: '🥴', value: 'ID-woozy'},
];
// or disable all of them
<Palette options={options} disabled={true} />;
```
### Size
Use the `size` property to manage the `Palette` size. The default size is `s`.
```tsx
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} size={"xs"} />
<Palette options={options} size={"s"} />
<Palette options={options} size={"m"} />
<Palette options={options} size={"l"} />
<Palette options={options} size={"xl"} />
```
### Columns
You can change the number of columns in the grid by changing the `columns` property (the default value is `6`).
```tsx
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />;
```
### Multiple
By default, you can select and deselect multiple options. In case you only want to make a single option selectable, you can disable the `multiple` property.
```tsx
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />;
```
## Properties
`PaletteProps`:
| Name | Description | Type | Default |
| :-------------- | :------------------------------------------------------------------------------------ | :----------------------------------------------------: | :-----: |
| aria-label | `aria-label` HTML attribute | `string` | |
| aria-labelledby | ID of the visible `Palette` caption element | `string` | |
| className | `class` HTML attribute | `string` | |
| columns | Number of elements per row | `number` | `6` |
| defaultValue | Sets the initial value state when the component is mounted | `string[]` | |
| disabled | Disables the options | `boolean` | `false` |
| multiple | Enables selecting multiple options | `boolean` | `true` |
| onBlur | `onBlur` event handler | `(event: React.FocusEvent<HTMLButtonElement>) => void` | |
| onFocus | `onFocus` event handler | `(event: React.FocusEvent<HTMLButtonElement>) => void` | |
| onUpdate | Fires when the user changes the state Provides the new value as a callback's argument | `(value: string[]) => void` | |
| optionClassName | `class` HTML attribute for the palette button | `string` | |
| options | List of options (palette elements) | `PaletteOption[]` | `[]` |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
| rowClassName | `class` HTML attribute for a palette row | `string` | |
| size | Sets the size of the elements | `xs` `s` `m` `l` `xl` | `m` |
| style | `style` HTML attribute | `React.CSSProperties` | |
| value | Current value for the controlled usage of the component | `string[]` | |
`PaletteOption`:
| Name | Description | Type | Default |
| :------- | :--------------------- | :---------: | :-----: |
| content | `class` HTML attribute | `ReactNode` | |
| disabled | Disables the button | `boolean` | `false` |
| title | `title` HTML attribute | `string` | |
| value | Control value | `string` | |