Skip to content

Commit 28eb623

Browse files
ivancheprasovivancheprasov
authored
feat: added landing docs for Disclosure component (#2510)
1 parent 6881c99 commit 28eb623

File tree

2 files changed

+604
-72
lines changed

2 files changed

+604
-72
lines changed

‎src/components/Disclosure/README-ru.md‎

Lines changed: 303 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,246 @@
1-
## Disclosure
1+
<!--GITHUB_BLOCK-->
2+
3+
# Disclosure
4+
5+
<!--/GITHUB_BLOCK-->
6+
7+
```tsx
8+
import {Disclosure} from '@gravity-ui/uikit';
9+
```
210

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

5-
### Свойства
13+
<!--GITHUB_BLOCK-->
14+
15+
## Базовый пример
616

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

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

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

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

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

35-
### Примеры
29+
<!--LANDING_BLOCK
3630
37-
Базовый пример:
31+
<ExampleBlock
32+
code={`
33+
function ControlledDisclosure() {
34+
const [expanded, setExpanded] = React.useState(true);
3835
39-
```jsx
40-
<Disclosure summary="summary">Content</Disclosure>
36+
return (
37+
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
38+
Content
39+
</Disclosure>
40+
);
41+
}
42+
`}>
43+
<UIKit.Disclosure summary="Summary" defaultExpanded>
44+
Content
45+
</UIKit.Disclosure>
46+
</ExampleBlock>
47+
48+
LANDING_BLOCK-->
49+
50+
<!--GITHUB_BLOCK-->
51+
52+
```tsx
53+
function ControlledDisclosure() {
54+
const [expanded, setExpanded] = React.useState(true);
55+
56+
return (
57+
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
58+
Content
59+
</Disclosure>
60+
);
61+
}
4162
```
4263

43-
Пример с пользовательским кратким описанием:
64+
<!--/GITHUB_BLOCK-->
65+
66+
## Размер
67+
68+
Используйте свойство `size` для управления размером `Disclosure`. Размер по умолчанию — `m`.
69+
70+
<!--LANDING_BLOCK
71+
72+
<ExampleBlock
73+
code={`
74+
<Disclosure summary="Middle size" size="m">
75+
Content
76+
</Disclosure>
77+
<Disclosure summary="Large size" size="l">
78+
Content
79+
</Disclosure>
80+
<Disclosure summary="Extra large size" size="xl">
81+
Content
82+
</Disclosure>
83+
`}
84+
>
85+
<UIKit.Flex gap={4} alignItems="center">
86+
<UIKit.Disclosure summary="Middle size" size="m">
87+
Content
88+
</UIKit.Disclosure>
89+
<UIKit.Disclosure summary="Large size" size="l">
90+
Content
91+
</UIKit.Disclosure>
92+
<UIKit.Disclosure summary="Extra large size" size="xl">
93+
Content
94+
</UIKit.Disclosure>
95+
</UIKit.Flex>
96+
</ExampleBlock>
97+
98+
LANDING_BLOCK-->
99+
100+
<!--GITHUB_BLOCK-->
101+
102+
```tsx
103+
<Disclosure summary="Middle size" size="m">
104+
Content
105+
</Disclosure>
106+
<Disclosure summary="Large size" size="l">
107+
Content
108+
</Disclosure>
109+
<Disclosure summary="Extra large size" size="xl">
110+
Content
111+
</Disclosure>
112+
```
113+
114+
<!--/GITHUB_BLOCK-->
115+
116+
## Позиция стрелки
117+
118+
`start`: Стрелка расположена в начале заголовка (используется по умолчанию).
119+
120+
`end`: Стрелка расположена в конце заголовка.
121+
122+
<!--LANDING_BLOCK
123+
124+
<ExampleBlock
125+
code={`
126+
<Disclosure summary="Summary with start arrow" arrowPosition="start">
127+
Content
128+
</Disclosure>
129+
<Disclosure summary="Summary with end arrow" arrowPosition="end">
130+
Content
131+
</Disclosure>
132+
`}
133+
>
134+
<UIKit.Flex gap={4} alignItems="center">
135+
<UIKit.Disclosure summary="Summary with start arrow" arrowPosition="start">
136+
Content
137+
</UIKit.Disclosure>
138+
<UIKit.Disclosure summary="Summary with end arrow" arrowPosition="end">
139+
Content
140+
</UIKit.Disclosure>
141+
</UIKit.Flex>
142+
</ExampleBlock>
143+
144+
LANDING_BLOCK-->
145+
146+
<!--GITHUB_BLOCK-->
147+
148+
```tsx
149+
<Disclosure summary="Summary with start arrow" arrowPosition="start">
150+
Content
151+
</Disclosure>
152+
<Disclosure summary="Summary with end arrow" arrowPosition="end">
153+
Content
154+
</Disclosure>
155+
```
156+
157+
<!--/GITHUB_BLOCK-->
158+
159+
## Пользовательский контент
160+
161+
Используйте компонент `Disclosure.Summary` для создания пользовательского заголовка и компонент `Disclosure.Details` для заполнения пользовательского контента.
162+
163+
<!--LANDING_BLOCK
164+
165+
<ExampleBlock
166+
code={`
167+
<Disclosure>
168+
<Disclosure.Summary>
169+
{(props) => (
170+
<Button {...props}>
171+
<Icon data={Check} size={14} />
172+
Custom summary
173+
<Icon data={Check} size={14} />
174+
</Button>
175+
)}
176+
</Disclosure.Summary>
177+
<div>Custom details</div>
178+
<div>More custom details</div>
179+
</Disclosure>
180+
<Disclosure summary="Summary">
181+
<Disclosure.Summary>
182+
{(_props, defaultButton) => (
183+
<Flex gap={4}>
184+
{defaultButton}
185+
<Icon data={Check} size={14} />
186+
</Flex>
187+
)}
188+
</Disclosure.Summary>
189+
<Disclosure.Details>
190+
Custom Details
191+
</Disclosure.Details>
192+
</Disclosure>
193+
`}>
194+
<UIKit.Flex gap={4} alignItems="center">
195+
<UIKit.Disclosure>
196+
<UIKit.Disclosure.Summary>
197+
{(props) => (
198+
<UIKit.Button {...props}>
199+
<UIKit.Icon
200+
data={() => (
201+
<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>
202+
)}
203+
size={14}
204+
/>
205+
Custom summary
206+
<UIKit.Icon
207+
data={() => (
208+
<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>
209+
)}
210+
size={14}
211+
/>
212+
</UIKit.Button>
213+
)}
214+
</UIKit.Disclosure.Summary>
215+
<div>Custom details</div>
216+
<div>More custom details</div>
217+
</UIKit.Disclosure>
218+
<UIKit.Disclosure summary="Summary">
219+
<UIKit.Disclosure.Summary>
220+
{(_props, defaultButton) => (
221+
<UIKit.Flex gap={4}>
222+
{defaultButton}
223+
<UIKit.Icon
224+
data={() => (
225+
<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>
226+
)}
227+
size={14}
228+
/>
229+
</UIKit.Flex>
230+
)}
231+
</UIKit.Disclosure.Summary>
232+
<UIKit.Disclosure.Details>
233+
Custom Details
234+
</UIKit.Disclosure.Details>
235+
</UIKit.Disclosure>
236+
</UIKit.Flex>
237+
</ExampleBlock>
238+
239+
LANDING_BLOCK-->
240+
241+
<!--GITHUB_BLOCK-->
44242

45-
```jsx
243+
```tsx
46244
<Disclosure>
47245
<Disclosure.Summary>
48246
{(props) => (
@@ -58,7 +256,7 @@
58256
</Disclosure>
59257
```
60258

61-
```jsx
259+
```tsx
62260
<Disclosure>
63261
<Disclosure.Summary>
64262
{(_props, defaultButton) => (
@@ -68,6 +266,78 @@
68266
</Flex>
69267
)}
70268
</Disclosure.Summary>
71-
Details
269+
<Disclosure.Details>Custom Details</Disclosure.Details>
72270
</Disclosure>
73271
```
272+
273+
<!--/GITHUB_BLOCK-->
274+
275+
## Отключенное состояние
276+
277+
`Disclosure` может быть отключен с помощью свойства `disabled`.
278+
279+
<!--LANDING_BLOCK
280+
281+
<ExampleBlock
282+
code={`
283+
<Disclosure summary="Summary" disabled>
284+
Content
285+
</Disclosure>
286+
`}
287+
>
288+
<UIKit.Disclosure summary="Summary" disabled>
289+
Content
290+
</UIKit.Disclosure>
291+
</ExampleBlock>
292+
293+
LANDING_BLOCK-->
294+
295+
<!--GITHUB_BLOCK-->
296+
297+
```tsx
298+
<Disclosure summary="Summary" disabled>
299+
Content
300+
</Disclosure>
301+
```
302+
303+
<!--/GITHUB_BLOCK-->
304+
305+
## Свойства
306+
307+
### Disclosure
308+
309+
| Имя | Описание | Тип | Значение по умолчанию |
310+
| :--------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :-------------------- |
311+
| size | Размер компонента | `"m"` `"l"` `"xl"` | `"m"` |
312+
| className | Имя CSS-класса корневого элемента | `string` | |
313+
| disabled | Отключенное состояние | `boolean` | `false` |
314+
| defaultExpanded | Состояние раскрытия по умолчанию | `boolean` | `false` |
315+
| expanded | Контролируемое состояние раскрытия | `boolean` | |
316+
| arrowPosition | Положение контрола | `"start"` `"end"` | `"start"` |
317+
| summary | Краткое описание контента | `React.ReactNode` | |
318+
| keepMounted | Сохранение контента в DOM при скрытии | `boolean` | `true` |
319+
| onUpdate | Обратный вызов, срабатывающий при изменении состояния раскрытия | `(expanded: boolean) => void` | |
320+
| onSummaryKeyDown | Обратный вызов, срабатывающий при фокусе заголовка | `(e: React.KeyboardEvent<HTMLButtonElement>) => void` | |
321+
| children | Контент | `React.ReactNode` | |
322+
| qa | Идентификатор для тестирования | `string` | |
323+
324+
### Disclosure.Summary
325+
326+
| Имя | Описание | Тип | Значение по умолчанию |
327+
| :------- | :----------------------------- | :---------------------------------------------- | :-------------------- |
328+
| children | Функция рендеринга | `(props, defaultSummary) => React.ReactElement` | |
329+
| qa | Идентификатор для тестирования | `string` | `disclosure-summary` |
330+
331+
### Disclosure.Details
332+
333+
| Имя | Описание | Тип | Значение по умолчанию |
334+
| :------- | :----------------------------- | :---------------- | :-------------------- |
335+
| children | Контент | `React.ReactNode` | |
336+
| qa | Идентификатор для тестирования | `string` | `disclosure-details` |
337+
338+
## CSS API
339+
340+
| Имя | Описание |
341+
| :----------------------------------- | :----------------------------------------------------------------- |
342+
| `--g-disclosure-text-color` | Цвет текста краткого описания контента |
343+
| `--g-disclosure-text-color-disabled` | Цвет текста краткого описания контента в заблокированном состоянии |

0 commit comments

Comments
 (0)