Skip to content
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.

Sign up for GitHub

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

fix(Palette): fixed README.md for the landing #1431

Merged
merged 10 commits into from
Mar 20, 2024
Merged

fix(Palette): fixed README.md for the landing #1431

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6e7bf58
fix(Palette): fixed readme
Ruminat Mar 19, 2024
f6a5e3f
fix: test #1
Ruminat Mar 19, 2024
d98e17d
fix: test #2
Ruminat Mar 19, 2024
c1778ce
fix: test #3
Ruminat Mar 19, 2024
34ee490
fix: test #4
Ruminat Mar 19, 2024
0a3e341
fix: test #5
Ruminat Mar 19, 2024
80bd3e5
fix: test #6
Ruminat Mar 19, 2024
94a5d01
fix: test #7
Ruminat Mar 19, 2024
04f60cd
fix: test #8
Ruminat Mar 19, 2024
bc4f242
fix: test #9
Ruminat Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 28 additions & 24 deletions src/components/Palette/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import {Palette} from '@gravity-ui/uikit';

The `Palette` component is used display a grid of icons/emojis/reactions/symbols which you can select or unselect.

<!--/GITHUB_BLOCK-->

### Disabled state

You can disable every option with the `disabled` property. If you want to disable only a portion of options, you can change the `disabled` property of some of the `options` (`PaletteOption[]`).
Expand All @@ -20,24 +18,30 @@ You can disable every option with the `disabled` property. If you want to disabl

<ExampleBlock
code={`
const options: UIKit.PaletteOption[] = [
// disable a single item
{content: '😎', value: 'ID-cool', disabled: true},
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
// disable the first item
<Palette options={[{ ...options[0], disabled: true }, options[1]]} disabled={true} />
// or disable all of them
<UIKit.Palette options={options} disabled={true} />
<Palette options={options} disabled={true} />
`}
>
<UIKit.Palette
options={[
// disable a single item
{content: '😎', value: 'ID-cool', disabled: true},
{content: '🥴', value: 'ID-woozy'},
]}
/>
<UIKit.Palette
options={[
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
]}
disabled={true}
/>
</ExampleBlock>;
</ExampleBlock>

LANDING_BLOCK-->

Expand All @@ -63,15 +67,15 @@ To control the size of the `Palette`, use the `size` property. The default size

<ExampleBlock
code={`
const options: UIKit.PaletteOption[] = [
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<UIKit.Palette options={options} size={"xs"} />
<UIKit.Palette options={options} size={"s"} /> // «s» is the default
<UIKit.Palette options={options} size={"m"} />
<UIKit.Palette options={options} size={"l"} />
<UIKit.Palette options={options} size={"xl"} />
<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"} />
`}
>
<UIKit.Palette
Expand Down Expand Up @@ -109,7 +113,7 @@ const options: UIKit.PaletteOption[] = [
]}
size="xl"
/>
</ExampleBlock>;
</ExampleBlock>

LANDING_BLOCK-->

Expand All @@ -121,7 +125,7 @@ const options: PaletteOption[] = [
{content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} size={"xs"} />
<Palette options={options} size={"s"} /> // «s» is the default
<Palette options={options} size={"s"} />
<Palette options={options} size={"m"} />
<Palette options={options} size={"l"} />
<Palette options={options} size={"xl"} />
Expand All @@ -137,11 +141,11 @@ You can change the number of columns in the grid by changing the `columns` prope

<ExampleBlock
code={`
const options: UIKit.PaletteOption[] = [
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<UIKit.Palette options={options} columns={1} />
<Palette options={options} columns={1} />
`}
>
<UIKit.Palette
Expand All @@ -151,7 +155,7 @@ const options: UIKit.PaletteOption[] = [
]}
columns={1}
/>
</ExampleBlock>;
</ExampleBlock>

LANDING_BLOCK-->

Expand All @@ -169,27 +173,27 @@ const options: PaletteOption[] = [

### Multiple

By default you can (un)select multiple option, but in case you want only one option to be selected, you can disable the `multiple` property.
By default you can (un)select multiple options, but in case you want only one option to be selected, you can disable the `multiple` property.

<!--LANDING_BLOCK

<ExampleBlock
code={`
const options: UIKit.PaletteOption[] = [
const options: PaletteOption[] = [
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
];
<UIKit.Palette options={options} multiple={false} />
<Palette options={options} multiple={false} />
`}
>
<UIKit.Palette
options={[
{content: '😎', value: 'ID-cool'},
{content: '🥴', value: 'ID-woozy'},
]}
columns={1}
multiple={false}
/>
</ExampleBlock>;
</ExampleBlock>

LANDING_BLOCK-->

Expand Down
Loading