Skip to content

Commit ec6f58e

Browse files
EldarMuhamethanovEldarMuhamethanov
committed
fix: fix documentation and deprecate prop accessible
1 parent f2525d8 commit ec6f58e

File tree

6 files changed

+25
-25
lines changed

6 files changed

+25
-25
lines changed

‎packages/vkui/src/components/CustomSelect/CustomSelect.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,8 @@ export interface SelectProps<
238238
*/
239239
onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
240240
/**
241+
* @deprecated Since 8.0.0. Будет удалено в 9.0.0.
242+
*
241243
* Включает режим в котором выбранное значение `CustomSelect` читается скринридерами корректно.
242244
* В данном режиме введенное в поле ввода значение не сбрасывается при потере фокуса.
243245
*/

‎packages/vkui/src/components/DateInput/DateInput.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ export interface DateInputProps
158158
*/
159159
timezone?: string;
160160
/**
161+
* @deprecated Since 8.0.0. Будет удалено в 9.0.0.
162+
*
161163
* Включает режим в котором DateInput доступен
162164
* для ассистивных технологий.
163165
* В этом режиме:

‎packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ export interface DateRangeInputProps
153153
*/
154154
disableFocusTrap?: UseFocusTrapProps['disabled'];
155155
/**
156+
* @deprecated Since 8.0.0. Будет удалено в 9.0.0.
157+
*
156158
* Включает режим в котором DateRangeInput доступен
157159
* для ассистивных технологий.
158160
* В этом режиме:

‎website/content/components/custom-select.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,7 +515,7 @@ return (
515515

516516
#### Рекомендация
517517

518-
Настоятельно рекомендуем включить этот флаг, так как в `v8` он будет включён по умолчанию (`accessible: true`).
518+
С `v8` этот флаг теперь включен по умолчанию. Не рекомендуется отключать этот флаг, так как с `v9` этот флаг будет удален.
519519

520520
## Свойства и методы [#api]
521521

‎website/content/components/date-input.mdx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ description: Компонент для поля даты и времени.
1212

1313
<Playground style={{ width: 'fit-content' }}>
1414
```jsx
15-
<DateInput accessible />
15+
<DateInput />
1616
```
1717
</Playground>
1818

@@ -38,12 +38,12 @@ React-компонентов, прочитать про это можно в [д
3838

3939
```jsx
4040
// Неконтролируемое состояние
41-
<DateInput defaultValue={new Date()} accessible />;
41+
<DateInput defaultValue={new Date()} />;
4242

4343
// Контролируемое состояние
4444
const [date, setDate] = React.useState(new Date());
4545

46-
<DateInput value={date} onChange={setDate} accessible />;
46+
<DateInput value={date} onChange={setDate} />;
4747
```
4848

4949
## Состояния
@@ -54,7 +54,7 @@ const [date, setDate] = React.useState(new Date());
5454

5555
<Playground style={{ width: 'fit-content' }}>
5656
```jsx
57-
<DateInput defaultValue={new Date()} disabled accessible />
57+
<DateInput defaultValue={new Date()} disabled />
5858
```
5959
</Playground>
6060

@@ -69,8 +69,8 @@ const [date, setDate] = React.useState(new Date());
6969
<Playground style={{ width: 'fit-content' }}>
7070
```jsx
7171
<Flex direction="column" gap="m">
72-
<DateInput status="error" defaultValue={new Date()} accessible />
73-
<DateInput status="valid" defaultValue={new Date()} accessible />
72+
<DateInput status="error" defaultValue={new Date()} />
73+
<DateInput status="valid" defaultValue={new Date()} />
7474
</Flex>
7575
```
7676
</Playground>
@@ -95,10 +95,9 @@ const [date, setDate] = React.useState(new Date());
9595

9696
Новое, доступное поведение можно включить с помощью нового свойства `accessible`.
9797

98-
> Настоятельно рекомендуем включить режим `accessible` доступным уже сейчас. В VKUI v8 режим `accessible` будет включен
99-
> по умолчанию.
98+
С `v8` этой свойство включено по умолчанию. Рекомендуется не отключать это поведение, так как этот флаг будет выключен в `v9`
10099

101-
Вот список изменений которые отличают поведение со свойством `accessible` от поведения по умолчанию:
100+
Вот список изменений которые отличают поведение со свойством `accessible` от поведения без:
102101

103102
- иконка календаря видна постоянно (раньше она была видна, только если в `DateInput` нет значения);
104103
- календарь открывается только по клику по иконке календаря, по клику на поле ввода и нажатию клавиши `<Space>`,
@@ -114,18 +113,18 @@ const [date, setDate] = React.useState(new Date());
114113
```jsx
115114
<label>
116115
День рождения
117-
<DateInput aria-label="День рождения" accessible />
116+
<DateInput aria-label="День рождения" />
118117
</label>
119118
```
120119

121120
```jsx
122121
<label htmlFor="date"> День рождения</label>
123-
<DateInput id="date" aria-label="День рождения" accessible />
122+
<DateInput id="date" aria-label="День рождения" />
124123
```
125124

126125
```jsx
127126
<FormItem top="День рождения" htmlFor="date">
128-
<DateInput id="date" aria-label="День рождения" accessible />
127+
<DateInput id="date" aria-label="День рождения" />
129128
</FormItem>
130129
```
131130

‎website/content/components/date-range-input.mdx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ description: Компонент для поля выбора диапазона
1414

1515
<Playground style={{ width: 'fit-content' }}>
1616
```jsx
17-
<DateRangeInput accessible />
17+
<DateRangeInput />
1818
```
1919
</Playground>
2020

@@ -40,12 +40,12 @@ React-компонентов, прочитать про это можно в [д
4040

4141
```jsx
4242
// Неконтролируемое состояние
43-
<DateRangeInput defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} accessible />;
43+
<DateRangeInput defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} />;
4444

4545
// Контролируемое состояние
4646
const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2, 10)]);
4747

48-
<DateRangeInput value={date} onChange={setDate} accessible />;
48+
<DateRangeInput value={date} onChange={setDate} />;
4949
```
5050

5151
## Состояния
@@ -59,7 +59,6 @@ const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2,
5959
<DateRangeInput
6060
defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]}
6161
disabled
62-
accessible
6362
/>
6463
```
6564
</Playground>
@@ -78,12 +77,10 @@ const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2,
7877
<DateRangeInput
7978
status="error"
8079
defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]}
81-
accessible
8280
/>
8381
<DateRangeInput
8482
status="valid"
8583
defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]}
86-
accessible
8784
/>
8885
</Flex>
8986
```
@@ -109,10 +106,9 @@ const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2,
109106

110107
Новое, доступное поведение можно включить с помощью нового свойства `accessible`.
111108

112-
> Настоятельно рекомендуем включить режим `accessible` доступным уже сейчас. В VKUI v8 режим `accessible` будет включен
113-
> по умолчанию.
109+
С `v8` этой свойство включено по умолчанию. Рекомендуется не отключать это поведение, так как этот флаг будет выключен в `v9`
114110

115-
Вот список изменений которые отличают поведение со свойством `accessible` от поведения по умолчанию:
111+
Вот список изменений которые отличают поведение со свойством `accessible` от поведения без:
116112

117113
- иконка календаря видна постоянно (раньше она была видна, только если в `DateRangeInput` нет значения);
118114
- календарь открывается только по клику по иконке календаря, по клику на поле ввода и нажатию клавиши `<Space>`,
@@ -128,7 +124,7 @@ const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2,
128124
```jsx
129125
<label>
130126
Период проживания
131-
<DateRangeInput aria-label="Период проживания" accessible />
127+
<DateRangeInput aria-label="Период проживания" />
132128
</label>
133129
```
134130

@@ -137,13 +133,12 @@ const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2,
137133
<DateRangeInput
138134
id="date"
139135
aria-label="Срок действия договора"
140-
accessible
141136
/>
142137
```
143138

144139
```jsx
145140
<FormItem top="Период бронирования" htmlFor="date">
146-
<DateRangeInput id="date" aria-label="Период бронирования" accessible />
141+
<DateRangeInput id="date" aria-label="Период бронирования" />
147142
</FormItem>
148143
```
149144

0 commit comments

Comments
 (0)