Skip to content

feat: added landing docs for Disclosure component #2510

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

Merged
merged 2 commits into from
Nov 19, 2025
+604 −72
Merged

feat: added landing docs for Disclosure component #2510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
543da49
feat: added landing docs for Disclosure component
ivancheprasov Nov 18, 2025
8912036
fix: fixed the review comments
ivancheprasov Nov 19, 2025
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
336 changes: 303 additions & 33 deletions src/components/Disclosure/README-ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,246 @@
## Disclosure
<!--GITHUB_BLOCK-->

# Disclosure

<!--/GITHUB_BLOCK-->

```tsx
import {Disclosure} from '@gravity-ui/uikit';
```

`Disclosure` — компонент раскрытия, который показывает и скрывает вложенный контент.

### Свойства
<!--GITHUB_BLOCK-->

## Базовый пример

| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
| :-------------- | :---------------------------- | :----------: | :-------------------- | :--------------------------------------------------------------- |
| size | `m` `l` `xl` | | `m` | Размер раскрытия. |
| className | `String` | | | Имя CSS-класса корневого элемента. |
| disabled | `Boolean` | | `false` | Отключенное состояние. |
| defaultExpanded | `Boolean` | | `false` | Состояние раскрытия по умолчанию. |
| expanded | `Boolean` | | | Контролируемое состояние раскрытия. |
| arrowPosition | `start` `end` | | `left` | Положение контрола. |
| summary | `React.ReactNode` | | | Краткое описание контента. |
| keepMounted | `Boolean` | | `true` | Сохранение контента в DOM. |
| onUpdate | `(expanded: boolean) => void` | | | Обратный вызов, срабатывающий при изменении состояния раскрытия. |
| children | `React.ReactNode` | | | Контент. |
| qa | `String` | | | Идентификатор для тестирования. |
```tsx
<Disclosure summary="Summary">Content</Disclosure>
```

### Свойства Disclosure.Summary
<!--/GITHUB_BLOCK-->

| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
| :------- | :---------------------------------------------- | :----------: | :-------------------- | :------------------------------ |
| children | `(props, defaultSummary) => React.ReactElement` | Да | | Функция рендеринга. |
| qa | `String` | | `disclosure-summary` | Идентификатор для тестирования. |
## Управление состоянием раскрытия

### Свойства Disclosure.Details
Вы можете управлять состоянием раскрытия компонента, используя свойства `expanded` и `onUpdate`.

| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
| :------- | :---------------- | :----------: | :-------------------- | :------------------------------ |
| children | `React.ReactNode` | Да | | Контент |
| qa | `String` | | `disclosure-details` | Идентификатор для тестирования. |
Пример управления состоянием:

### Примеры
<!--LANDING_BLOCK

Базовый пример:
<ExampleBlock
code={`
function ControlledDisclosure() {
const [expanded, setExpanded] = React.useState(true);

```jsx
<Disclosure summary="summary">Content</Disclosure>
return (
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
Content
</Disclosure>
);
}
`}>
<UIKit.Disclosure summary="Summary" defaultExpanded>
Content
</UIKit.Disclosure>
</ExampleBlock>

LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
function ControlledDisclosure() {
const [expanded, setExpanded] = React.useState(true);

return (
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
Content
</Disclosure>
);
}
```

Пример с пользовательским кратким описанием:
<!--/GITHUB_BLOCK-->

## Размер

Используйте свойство `size` для управления размером `Disclosure`. Размер по умолчанию — `m`.

<!--LANDING_BLOCK

<ExampleBlock
code={`
<Disclosure summary="Middle size" size="m">
Content
</Disclosure>
<Disclosure summary="Large size" size="l">
Content
</Disclosure>
<Disclosure summary="Extra large size" size="xl">
Content
</Disclosure>
`}
>
<UIKit.Flex gap={4} alignItems="center">
<UIKit.Disclosure summary="Middle size" size="m">
Content
</UIKit.Disclosure>
<UIKit.Disclosure summary="Large size" size="l">
Content
</UIKit.Disclosure>
<UIKit.Disclosure summary="Extra large size" size="xl">
Content
</UIKit.Disclosure>
</UIKit.Flex>
</ExampleBlock>

LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Disclosure summary="Middle size" size="m">
Content
</Disclosure>
<Disclosure summary="Large size" size="l">
Content
</Disclosure>
<Disclosure summary="Extra large size" size="xl">
Content
</Disclosure>
```

<!--/GITHUB_BLOCK-->

## Позиция стрелки

`start`: Стрелка расположена в начале заголовка (используется по умолчанию).

`end`: Стрелка расположена в конце заголовка.

<!--LANDING_BLOCK

<ExampleBlock
code={`
<Disclosure summary="Summary with start arrow" arrowPosition="start">
Content
</Disclosure>
<Disclosure summary="Summary with end arrow" arrowPosition="end">
Content
</Disclosure>
`}
>
<UIKit.Flex gap={4} alignItems="center">
<UIKit.Disclosure summary="Summary with start arrow" arrowPosition="start">
Content
</UIKit.Disclosure>
<UIKit.Disclosure summary="Summary with end arrow" arrowPosition="end">
Content
</UIKit.Disclosure>
</UIKit.Flex>
</ExampleBlock>

LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Disclosure summary="Summary with start arrow" arrowPosition="start">
Content
</Disclosure>
<Disclosure summary="Summary with end arrow" arrowPosition="end">
Content
</Disclosure>
```

<!--/GITHUB_BLOCK-->

## Пользовательский контент

Используйте компонент `Disclosure.Summary` для создания пользовательского заголовка и компонент `Disclosure.Details` для заполнения пользовательского контента.

<!--LANDING_BLOCK

<ExampleBlock
code={`
<Disclosure>
<Disclosure.Summary>
{(props) => (
<Button {...props}>
<Icon data={Check} size={14} />
Custom summary
<Icon data={Check} size={14} />
</Button>
)}
</Disclosure.Summary>
<div>Custom details</div>
<div>More custom details</div>
</Disclosure>
<Disclosure summary="Summary">
<Disclosure.Summary>
{(_props, defaultButton) => (
<Flex gap={4}>
{defaultButton}
<Icon data={Check} size={14} />
</Flex>
)}
</Disclosure.Summary>
<Disclosure.Details>
Custom Details
</Disclosure.Details>
</Disclosure>
`}>
<UIKit.Flex gap={4} alignItems="center">
<UIKit.Disclosure>
<UIKit.Disclosure.Summary>
{(props) => (
<UIKit.Button {...props}>
<UIKit.Icon
data={() => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
)}
size={14}
/>
Custom summary
<UIKit.Icon
data={() => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
)}
size={14}
/>
</UIKit.Button>
)}
</UIKit.Disclosure.Summary>
<div>Custom details</div>
<div>More custom details</div>
</UIKit.Disclosure>
<UIKit.Disclosure summary="Summary">
<UIKit.Disclosure.Summary>
{(_props, defaultButton) => (
<UIKit.Flex gap={4}>
{defaultButton}
<UIKit.Icon
data={() => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
)}
size={14}
/>
</UIKit.Flex>
)}
</UIKit.Disclosure.Summary>
<UIKit.Disclosure.Details>
Custom Details
</UIKit.Disclosure.Details>
</UIKit.Disclosure>
</UIKit.Flex>
</ExampleBlock>

LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```jsx
```tsx
<Disclosure>
<Disclosure.Summary>
{(props) => (
Expand All @@ -58,7 +256,7 @@
</Disclosure>
```

```jsx
```tsx
<Disclosure>
<Disclosure.Summary>
{(_props, defaultButton) => (
Expand All @@ -68,6 +266,78 @@
</Flex>
)}
</Disclosure.Summary>
Details
<Disclosure.Details>Custom Details</Disclosure.Details>
</Disclosure>
```

<!--/GITHUB_BLOCK-->

## Отключенное состояние

`Disclosure` может быть отключен с помощью свойства `disabled`.

<!--LANDING_BLOCK

<ExampleBlock
code={`
<Disclosure summary="Summary" disabled>
Content
</Disclosure>
`}
>
<UIKit.Disclosure summary="Summary" disabled>
Content
</UIKit.Disclosure>
</ExampleBlock>

LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Disclosure summary="Summary" disabled>
Content
</Disclosure>
```

<!--/GITHUB_BLOCK-->

## Свойства

### Disclosure

| Имя | Описание | Тип | Значение по умолчанию |
| :--------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :-------------------- |
| size | Размер компонента | `"m"` `"l"` `"xl"` | `"m"` |
| className | Имя CSS-класса корневого элемента | `string` | |
| disabled | Отключенное состояние | `boolean` | `false` |
| defaultExpanded | Состояние раскрытия по умолчанию | `boolean` | `false` |
| expanded | Контролируемое состояние раскрытия | `boolean` | |
| arrowPosition | Положение контрола | `"start"` `"end"` | `"start"` |
| summary | Краткое описание контента | `React.ReactNode` | |
| keepMounted | Сохранение контента в DOM при скрытии | `boolean` | `true` |
| onUpdate | Обратный вызов, срабатывающий при изменении состояния раскрытия | `(expanded: boolean) => void` | |
| onSummaryKeyDown | Обратный вызов, срабатывающий при фокусе заголовка | `(e: React.KeyboardEvent<HTMLButtonElement>) => 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` | Цвет текста краткого описания контента |
| `--g-disclosure-text-color-disabled` | Цвет текста краткого описания контента в заблокированном состоянии |
Loading
Loading