diff --git a/src/components/Disclosure/README-ru.md b/src/components/Disclosure/README-ru.md index c0732d0c48..9047066324 100644 --- a/src/components/Disclosure/README-ru.md +++ b/src/components/Disclosure/README-ru.md @@ -1,48 +1,272 @@ -## Disclosure + + +# Disclosure + + + +```tsx +import {Disclosure} from '@gravity-ui/uikit'; +``` `Disclosure` — компонент раскрытия, который показывает и скрывает вложенный контент. -### Свойства + + +## Базовый пример + +```tsx +Content +``` + + + +## Управление состоянием раскрытия + +Вы можете управлять состоянием раскрытия компонента, используя свойства `expanded` и `onUpdate`. + +Пример управления состоянием: + + + + + +```tsx +function ControlledDisclosure() { + const [expanded, setExpanded] = React.useState(true); + + return ( + + Content + + ); +} +``` + + + +## Размер + +Используйте свойство `size` для управления размером `Disclosure`. Размер по умолчанию — `m`. + + + + + +```tsx + + Content + + + Content + + + Content + +``` + + -### Свойства Disclosure.Summary +## Позиция стрелки -| Имя | Тип | Обязательное | Значение по умолчанию | Описание | -| :------- | :---------------------------------------------- | :----------: | :-------------------- | :------------------------------ | -| children | `(props, defaultSummary) => React.ReactElement` | Да | | Функция рендеринга. | -| qa | `String` | | `disclosure-summary` | Идентификатор для тестирования. | +`left`: Стрелка расположена слева от заголовка (используется по умолчанию). -### Свойства Disclosure.Details +`right`: Стрелка расположена справа от заголовка. -| Имя | Тип | Обязательное | Значение по умолчанию | Описание | -| :------- | :---------------- | :----------: | :-------------------- | :------------------------------ | -| children | `React.ReactNode` | Да | | Контент | -| qa | `String` | | `disclosure-details` | Идентификатор для тестирования. | +`start`: Стрелка расположена в начале заголовка (отличается от `left` при использовании RTL). -### Примеры +`end`: Стрелка расположена в конце заголовка (отличается от `right` при использовании RTL). -Базовый пример: + + + + +```tsx + + Content + + + Content + + + Content + + + Content + ``` -Пример с пользовательским кратким описанием: + + +## Пользовательский контент -```jsx +Используйте компонент `Disclosure.Summary` для создания пользовательского заголовка и компонент `Disclosure.Details` для заполнения пользовательского контента. + + + + + +```tsx {(props) => ( @@ -58,7 +282,7 @@ ``` -```jsx +```tsx {(_props, defaultButton) => ( @@ -68,6 +292,78 @@ )} - Details + Custom Details ``` + + + +## Отключенное состояние + +`Disclosure` может быть отключен с помощью свойства `disabled`. + + + + + +```tsx + + Content + +``` + + + +## Свойства + +### Disclosure + +| Имя | Описание | Тип | Значение по умолчанию | +| :--------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :-------------------- | +| size | Размер раскрытия | `"m"` `"l"` `"xl"` | `"m"` | +| className | Имя CSS-класса корневого элемента | `string` | | +| disabled | Отключенное состояние | `boolean` | `false` | +| defaultExpanded | Состояние раскрытия по умолчанию | `boolean` | `false` | +| expanded | Контролируемое состояние раскрытия | `boolean` | | +| arrowPosition | Положение контрола | `"start"` `"end"` `"left"` `"right"` | `"left"` | +| summary | Краткое описание контента | `React.ReactNode` | | +| keepMounted | Сохранение контента в DOM | `boolean` | `true` | +| onUpdate | Обратный вызов, срабатывающий при изменении состояния раскрытия | `(expanded: boolean) => void` | | +| onSummaryKeyDown | Обратный вызов, срабатывающий при фокусе заголовка | `(e: React.KeyboardEvent) => void` | | +| children | Контент | `React.ReactNode` | | +| qa | Идентификатор для тестирования | `string` | | + +### Disclosure.Summary + +| Имя | Описание | Тип | Значение по умолчанию | +| :------- | :----------------------------- | :---------------------------------------------- | :-------------------- | +| children | Функция рендеринга | `(props, defaultSummary) => React.ReactElement` | | +| qa | Идентификатор для тестирования | `string` | `disclosure-summary` | + +### Disclosure.Details + +| Имя | Описание | Тип | Значение по умолчанию | +| :------- | :----------------------------- | :---------------- | :-------------------- | +| children | Контент | `React.ReactNode` | | +| qa | Идентификатор для тестирования | `string` | `disclosure-details` | + +## CSS API + +| Имя | Описание | +| :----------------------------------- | :------------------------------------- | +| `--g-disclosure-text-color` | Цвет текста заголовка trigger | +| `--g-disclosure-text-color-disabled` | Цвет текста заблокированного заголовка | diff --git a/src/components/Disclosure/README.md b/src/components/Disclosure/README.md index 337da9d9bf..32c3bb7fb6 100644 --- a/src/components/Disclosure/README.md +++ b/src/components/Disclosure/README.md @@ -1,49 +1,272 @@ -## Disclosure + -This is the disclosure component that shows and hides enclosed content. +# Disclosure -### PropTypes + -| Name | Type | Required | Default | Description | -| :--------------- | :---------------------------------------------------- | :------: | :------ | :---------------------------------------------------------- | -| size | `m` `l` `xl` | | `m` | Disclosure size | -| className | `String` | | | CSS class name of the root element | -| disabled | `Boolean` | | `false` | Disabled state | -| defaultExpanded | `Boolean` | | `false` | Default opening state | -| expanded | `Boolean` | | | Controlled opening state | -| arrowPosition | `start` `end` | | `left` | Control position | -| summary | `React.ReactNode` | | | Content summary | -| keepMounted | `Boolean` | | `true` | Keep content in DOM | -| onUpdate | `(expanded: boolean) => void` | | | Callback is fired when the expand/collapse state is changed | -| onSummaryKeyDown | `(e: React.KeyboardEvent) => void` | | | Callback fires on keyboard events when summary is focused | -| children | `React.ReactNode` | | | Content | -| qa | `String` | | | Test identifier | +```tsx +import {Disclosure} from '@gravity-ui/uikit'; +``` + +`Disclosure` is a collapsible component that allows to display and hide its nested content. + + + +## Base example + +```tsx +Content +``` -### Disclosure.Summary PropTypes + -| Name | Type | Required | Default | Description | -| :------- | :---------------------------------------------- | :------: | :------------------- | :-------------- | -| children | `(props, defaultSummary) => React.ReactElement` | Yes | | Render function | -| qa | `String` | | `disclosure-summary` | Test identifier | +## Controlling expansion state -### Disclosure.Details PropTypes +You can control the expansion state using the `expanded` and `onUpdate` properties. -| Name | Type | Required | Default | Description | -| :------- | :---------------- | :------: | :------------------- | :-------------- | -| children | `React.ReactNode` | Yes | | Content | -| qa | `String` | | `disclosure-details` | Test identifier | +Controlled component example: -### Examples + + + + +```tsx +function ControlledDisclosure() { + const [expanded, setExpanded] = React.useState(true); + + return ( + + Content + + ); +} +``` -```jsx -Content + + +## Size + +Use the `size` property to control the `Disclosure` size. The default size is `m`. + + + + + +```tsx + + Content + + + Content + + + Content + +``` + + + +## Arrow Position + +`left`: Arrow is positioned on the left of the header (used by default). + +`right`: Arrow is positioned on the right of the header. + +`start`: Arrow is positioned at the start of the header (differs from `left` when using RTL). + +`end`: Arrow is positioned at the end of the header (differs from `right` when using RTL). + + + + + +```tsx + + Content + + + Content + + + Content + + + Content + ``` -Example with a custom summary: + -```jsx +## Custom content + +Use `Disclosure.Summary` component to create a custom header and `Disclosure.Details` to fulfill custom content. + + + + + +```tsx {(props) => ( @@ -59,7 +282,7 @@ Example with a custom summary: ``` -```jsx +```tsx {(_props, defaultButton) => ( @@ -69,10 +292,75 @@ Example with a custom summary: )} - Details + Custom Details + +``` + + + +## Disabled state + +`Disclosure` can be disabled using the `disabled` property. + + + + + +```tsx + + Content ``` + + +## Properties + +### Disclosure + +| Name | Description | Type | Default | +| :--------------- | :----------------------------------------------------------- | :---------------------------------------------------- | :------- | +| size | Disclosure size | `"m"` `"l"` `"xl"` | `"m"` | +| className | CSS class name of the root element | `string` | | +| disabled | Disabled state | `boolean` | `false` | +| defaultExpanded | Default opening state | `boolean` | `false` | +| expanded | Controlled opening state | `boolean` | | +| arrowPosition | Control position | `"start"` `"end"` `"left"` `"right"` | `"left"` | +| summary | Content summary | `React.ReactNode` | | +| keepMounted | Keep content in DOM | `boolean` | `true` | +| onUpdate | Callback is fired when the expand/collapse state is changed. | `(expanded: boolean) => void` | | +| onSummaryKeyDown | Callback fires on keyboard events when summary is focused. | `(e: React.KeyboardEvent) => void` | | +| children | Content | `React.ReactNode` | | +| qa | Test identifier | `string` | | + +### Disclosure.Summary + +| Name | Description | Type | Default | +| :------- | :-------------- | :---------------------------------------------- | :------------------- | +| children | Render function | `(props, defaultSummary) => React.ReactElement` | | +| qa | Test identifier | `string` | `disclosure-summary` | + +### Disclosure.Details + +| Name | Description | Type | Default | +| :------- | :-------------- | :---------------- | :------------------- | +| children | Content | `React.ReactNode` | | +| qa | Test identifier | `string` | `disclosure-details` | + ## CSS API | Name | Description |