feat: add Palette component

[Ruminat]

DATAUI-2067

Palette — a basic grid with elements you can select/unselect (a grid of checkboxes basically).

Can be customized to display anything basically icons/GIFs/images/reactions/colors and so on:

[gravity-ui-bot]

Playwright Test Component is ready.

[gravity-ui-bot]

Preview is ready.

[korvin89]

Hey @Ruminat! We've discussed ur pr with @amje @ValeraS and have some suggestions for u:

1. Add separate component Palette with this interface:

interface PaletteOption {
    value: string;
    content: React.ReactNode;
    title?: string; // HTML title
    disabled?: boolean;
}

interface PaletteProps extends DOMProps, QAProps {
    value?: string[];
    defaultValue?: string[];
    onUpdate?: (value: string[]) => void;
    onFocus?: React.FocusEventHandler;
    onBlur?: React.FocusEventHandler;
    disabled?: boolean;
    name?: string;
    options: PaletteOption[];
    size?: ButtonSize;
}

Palette should have fully keyboard support:

• the first press of the tab key should focus first option in the component
• the second press of the tab key should take the focus away from the component
• navigation between options should be managed by arrow keys

Palette should use this hook

2. Use Palette as a base for EmojiPalette

[Ruminat]

Add separate component Palette

I'll add the Palette component (next week, I think)

Do we need the EmojiPalette component in uikit then?
It seems that we can simply put a usage example of Palette for EmojiPalette in storybook
But is there a need to make a distinct EmojiPalette component?

[korvin89]

Do we need the EmojiPalette component in uikit then? It seems that we can simply put a usage example of Palette for EmojiPalette in storybook But is there a need to make a distinct EmojiPalette component?

Hmm, we probably don't need it. Example in Storybook sounds quite enough

[Ruminat]

Turned the component into Palette

[Ruminat]

@korvin89 @amje @ValeraS ping

[Ruminat]

@korvin89 @amje @ValeraS ping

[Ruminat]

@korvin89 ping

[korvin89]

@korvin89 ping

@Ruminat Seems pretty good! Lets wait for at least another one review from @ValeraS or @amje

[Ruminat]

@amje ping

[amje]

We need shift the sizes down, they're a bit bigger than they should be. You can check font sizes of Button

[Ruminat]

Shifted the font sizes down according to the Button's --_--icon-size: 12px/16px/16px/16px/20px
The font sizes of Button are basically the same (except for the xl), so I didn't use them.

[amje]

In RTL mode keyboard navigation is broken

[Ruminat]

In RTL mode keyboard navigation is broken

Fixed

[Ruminat]

@amje ping