From 543da4991bb319fbceb2b9b5e5ac4a8bdf5a8cac Mon Sep 17 00:00:00 2001 From: ivancheprasov Date: Tue, 18 Nov 2025 20:19:56 +0300 Subject: [PATCH 1/2] feat: added landing docs for Disclosure component --- src/components/Disclosure/README-ru.md | 362 ++++++++++++++++++++++--- src/components/Disclosure/README.md | 358 +++++++++++++++++++++--- 2 files changed, 652 insertions(+), 68 deletions(-) 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 | From 89120369a382a24bd39122a420b6ce7db3ef4c02 Mon Sep 17 00:00:00 2001 From: ivancheprasov Date: Wed, 19 Nov 2025 13:37:29 +0300 Subject: [PATCH 2/2] fix: fixed the review comments --- src/components/Disclosure/README-ru.md | 58 ++++++------------- src/components/Disclosure/README.md | 80 +++++++++----------------- 2 files changed, 43 insertions(+), 95 deletions(-) diff --git a/src/components/Disclosure/README-ru.md b/src/components/Disclosure/README-ru.md index 9047066324..a34352531f 100644 --- a/src/components/Disclosure/README-ru.md +++ b/src/components/Disclosure/README-ru.md @@ -115,24 +115,14 @@ LANDING_BLOCK--> ## Позиция стрелки -`left`: Стрелка расположена слева от заголовка (используется по умолчанию). +`start`: Стрелка расположена в начале заголовка (используется по умолчанию). -`right`: Стрелка расположена справа от заголовка. - -`start`: Стрелка расположена в начале заголовка (отличается от `left` при использовании RTL). - -`end`: Стрелка расположена в конце заголовка (отличается от `right` при использовании RTL). +`end`: Стрелка расположена в конце заголовка. ```tsx - - Content - - - Content - Content @@ -334,14 +308,14 @@ LANDING_BLOCK--> | Имя | Описание | Тип | Значение по умолчанию | | :--------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :-------------------- | -| size | Размер раскрытия | `"m"` `"l"` `"xl"` | `"m"` | +| size | Размер компонента | `"m"` `"l"` `"xl"` | `"m"` | | className | Имя CSS-класса корневого элемента | `string` | | | disabled | Отключенное состояние | `boolean` | `false` | | defaultExpanded | Состояние раскрытия по умолчанию | `boolean` | `false` | | expanded | Контролируемое состояние раскрытия | `boolean` | | -| arrowPosition | Положение контрола | `"start"` `"end"` `"left"` `"right"` | `"left"` | +| arrowPosition | Положение контрола | `"start"` `"end"` | `"start"` | | summary | Краткое описание контента | `React.ReactNode` | | -| keepMounted | Сохранение контента в DOM | `boolean` | `true` | +| keepMounted | Сохранение контента в DOM при скрытии | `boolean` | `true` | | onUpdate | Обратный вызов, срабатывающий при изменении состояния раскрытия | `(expanded: boolean) => void` | | | onSummaryKeyDown | Обратный вызов, срабатывающий при фокусе заголовка | `(e: React.KeyboardEvent) => void` | | | children | Контент | `React.ReactNode` | | @@ -363,7 +337,7 @@ LANDING_BLOCK--> ## CSS API -| Имя | Описание | -| :----------------------------------- | :------------------------------------- | -| `--g-disclosure-text-color` | Цвет текста заголовка trigger | -| `--g-disclosure-text-color-disabled` | Цвет текста заблокированного заголовка | +| Имя | Описание | +| :----------------------------------- | :----------------------------------------------------------------- | +| `--g-disclosure-text-color` | Цвет текста краткого описания контента | +| `--g-disclosure-text-color-disabled` | Цвет текста краткого описания контента в заблокированном состоянии | diff --git a/src/components/Disclosure/README.md b/src/components/Disclosure/README.md index 32c3bb7fb6..ee52613f74 100644 --- a/src/components/Disclosure/README.md +++ b/src/components/Disclosure/README.md @@ -115,24 +115,14 @@ LANDING_BLOCK--> ## Arrow Position -`left`: Arrow is positioned on the left of the header (used by default). +`start`: Arrow is positioned at the start 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). +`end`: Arrow is positioned at the end of the header. ```tsx - - Content - - - Content - Content @@ -332,20 +306,20 @@ LANDING_BLOCK--> ### 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` | | +| Name | Description | Type | Default | +| :--------------- | :----------------------------------------------------------- | :---------------------------------------------------- | :-------- | +| size | Component 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"` | `"start"` | +| summary | Content summary | `React.ReactNode` | | +| keepMounted | Keep content in DOM even when collapsed | `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 @@ -363,7 +337,7 @@ LANDING_BLOCK--> ## CSS API -| Name | Description | -| :----------------------------------- | :------------------------------------------ | -| `--g-disclosure-text-color` | Text color for the summary trigger | -| `--g-disclosure-text-color-disabled` | Text color for the disabled summary trigger | +| Name | Description | +| :----------------------------------- | :--------------------------------------------------- | +| `--g-disclosure-text-color` | Text color for the content summary | +| `--g-disclosure-text-color-disabled` | Text color for the content summary in disabled state |