@salutejs/plasma-new-hope 0.321.1-canary.1931.14570122322.0 → 0.321.1-canary.1937.14653374486.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Autocomplete/Autocomplete.css +22 -22
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +22 -22
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +22 -22
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +22 -22
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +22 -22
- package/cjs/components/Pagination/Pagination.css +22 -22
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +22 -22
- package/cjs/components/Range/Range.css +22 -22
- package/cjs/components/Select/Select.css +22 -22
- package/cjs/components/Select/ui/Target/Target.css +22 -22
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +22 -22
- package/cjs/components/Slider/Slider.css +22 -22
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +22 -22
- package/cjs/components/Table/Table.css +22 -22
- package/cjs/components/Table/ui/Cell/Cell.css +22 -22
- package/cjs/components/Table/ui/EditableCell/EditableCell.css +22 -22
- package/cjs/components/Table/ui/HeadCell/HeadCell.css +22 -22
- package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +22 -22
- package/cjs/components/TextField/TextField.styles.js +17 -17
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_1cdp5eg.css → TextField.styles_1895ept.css} +1 -1
- package/cjs/components/TextField/ui/Hint/Hint.css +20 -20
- package/cjs/index.css +22 -22
- package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +71 -99
- package/emotion/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
- package/emotion/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
- package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +27 -58
- package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx +0 -5
- package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
- package/emotion/cjs/components/Flow/Flow.template-doc.mdx +2 -2
- package/emotion/cjs/components/Notification/Notification.template-doc.mdx +1 -10
- package/emotion/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
- package/emotion/cjs/components/Radiobox/Radiobox.template-doc.mdx +11 -10
- package/emotion/cjs/components/Range/Range.template-doc.mdx +1 -5
- package/emotion/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- package/emotion/cjs/components/Select/Select.template-doc.mdx +27 -27
- package/emotion/cjs/components/Slider/Slider.template-doc.mdx +2 -2
- package/emotion/cjs/components/Switch/Switch.template-doc.mdx +3 -3
- package/emotion/cjs/components/Table/Table.template-doc.mdx +2 -2
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +7 -11
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +2 -9
- package/emotion/cjs/components/TextField/TextField.styles.js +23 -30
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +32 -117
- package/emotion/cjs/components/Toast/Toast.template-doc.mdx +2 -48
- package/emotion/cjs/components/Tooltip/Tooltip.template-doc.mdx +4 -19
- package/emotion/cjs/components/Tree/Tree.template-doc.mdx +1 -0
- package/emotion/es/components/Accordion/Accordion.template-doc.mdx +71 -99
- package/emotion/es/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
- package/emotion/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
- package/emotion/es/components/Combobox/Combobox.template-doc.mdx +27 -58
- package/emotion/es/components/DatePicker/DatePicker.template-doc.mdx +0 -5
- package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
- package/emotion/es/components/Flow/Flow.template-doc.mdx +2 -2
- package/emotion/es/components/Notification/Notification.template-doc.mdx +1 -10
- package/emotion/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
- package/emotion/es/components/Radiobox/Radiobox.template-doc.mdx +11 -10
- package/emotion/es/components/Range/Range.template-doc.mdx +1 -5
- package/emotion/es/components/Segment/Segment.template-doc.mdx +3 -3
- package/emotion/es/components/Select/Select.template-doc.mdx +27 -27
- package/emotion/es/components/Slider/Slider.template-doc.mdx +2 -2
- package/emotion/es/components/Switch/Switch.template-doc.mdx +3 -3
- package/emotion/es/components/Table/Table.template-doc.mdx +2 -2
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +7 -11
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +2 -9
- package/emotion/es/components/TextField/TextField.styles.js +23 -30
- package/emotion/es/components/TextField/TextField.template-doc.mdx +32 -117
- package/emotion/es/components/Toast/Toast.template-doc.mdx +2 -48
- package/emotion/es/components/Tooltip/Tooltip.template-doc.mdx +4 -19
- package/emotion/es/components/Tree/Tree.template-doc.mdx +1 -0
- package/es/components/Autocomplete/Autocomplete.css +22 -22
- package/es/components/Combobox/ComboboxNew/Combobox.css +22 -22
- package/es/components/DatePicker/RangeDate/RangeDate.css +22 -22
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +22 -22
- package/es/components/DatePicker/SingleDate/SingleDate.css +22 -22
- package/es/components/Pagination/Pagination.css +22 -22
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +22 -22
- package/es/components/Range/Range.css +22 -22
- package/es/components/Select/Select.css +22 -22
- package/es/components/Select/ui/Target/Target.css +22 -22
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +22 -22
- package/es/components/Slider/Slider.css +22 -22
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +22 -22
- package/es/components/Table/Table.css +22 -22
- package/es/components/Table/ui/Cell/Cell.css +22 -22
- package/es/components/Table/ui/EditableCell/EditableCell.css +22 -22
- package/es/components/Table/ui/HeadCell/HeadCell.css +22 -22
- package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +22 -22
- package/es/components/TextField/TextField.styles.js +17 -17
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_1cdp5eg.css → TextField.styles_1895ept.css} +1 -1
- package/es/components/TextField/ui/Hint/Hint.css +20 -20
- package/es/index.css +22 -22
- package/package.json +4 -4
- package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +71 -99
- package/styled-components/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +27 -58
- package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx +0 -5
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
- package/styled-components/cjs/components/Flow/Flow.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -10
- package/styled-components/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +11 -10
- package/styled-components/cjs/components/Range/Range.template-doc.mdx +1 -5
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Select/Select.template-doc.mdx +27 -27
- package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Table/Table.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +7 -11
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +2 -9
- package/styled-components/cjs/components/TextField/TextField.styles.js +2 -1
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +32 -117
- package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +2 -48
- package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx +4 -19
- package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +1 -0
- package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +71 -99
- package/styled-components/es/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +27 -58
- package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx +0 -5
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
- package/styled-components/es/components/Flow/Flow.template-doc.mdx +2 -2
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -10
- package/styled-components/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +11 -10
- package/styled-components/es/components/Range/Range.template-doc.mdx +1 -5
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +3 -3
- package/styled-components/es/components/Select/Select.template-doc.mdx +27 -27
- package/styled-components/es/components/Slider/Slider.template-doc.mdx +2 -2
- package/styled-components/es/components/Switch/Switch.template-doc.mdx +3 -3
- package/styled-components/es/components/Table/Table.template-doc.mdx +2 -2
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +7 -11
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +2 -9
- package/styled-components/es/components/TextField/TextField.styles.js +2 -1
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +32 -117
- package/styled-components/es/components/Toast/Toast.template-doc.mdx +2 -48
- package/styled-components/es/components/Tooltip/Tooltip.template-doc.mdx +4 -19
- package/styled-components/es/components/Tree/Tree.template-doc.mdx +1 -0
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- /package/emotion/cjs/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
- /package/emotion/es/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
- /package/styled-components/cjs/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
- /package/styled-components/es/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
@@ -37,7 +37,7 @@ export function App() {
|
|
37
37
|
```
|
38
38
|
|
39
39
|
### Размер поля
|
40
|
-
Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l"
|
40
|
+
Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l"` и `"m"`:
|
41
41
|
|
42
42
|
```tsx live
|
43
43
|
import React from 'react';
|
@@ -53,8 +53,8 @@ export function App() {
|
|
53
53
|
/>
|
54
54
|
<TextField
|
55
55
|
placeholder="Размер"
|
56
|
-
size="
|
57
|
-
defaultValue="
|
56
|
+
size="m"
|
57
|
+
defaultValue="M48"
|
58
58
|
/>
|
59
59
|
</div>
|
60
60
|
);
|
@@ -62,9 +62,9 @@ export function App() {
|
|
62
62
|
```
|
63
63
|
|
64
64
|
### Статус поля
|
65
|
-
Статус поля задается с помощью свойства `
|
66
|
-
|
67
|
-
|
65
|
+
Статус поля задается с помощью свойства `status`.
|
66
|
+
Возможные значения свойства: `success`, `warning` и `error`.
|
67
|
+
На отображение TextField так же влияют свойства `clear` и `hasDivider`:
|
68
68
|
|
69
69
|
```tsx live
|
70
70
|
import React from 'react';
|
@@ -75,61 +75,46 @@ export function App() {
|
|
75
75
|
<div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
76
76
|
<div style=\{{ display: "flex", gap: "0.5rem" }}>
|
77
77
|
<TextField
|
78
|
-
placeholder="Статус
|
79
|
-
|
78
|
+
placeholder="Статус"
|
79
|
+
status="success"
|
80
80
|
size="m"
|
81
|
-
defaultValue="
|
81
|
+
defaultValue="Успех"
|
82
82
|
/>
|
83
83
|
<TextField
|
84
|
-
placeholder="Статус
|
85
|
-
|
84
|
+
placeholder="Статус"
|
85
|
+
status="warning"
|
86
86
|
size="m"
|
87
|
-
defaultValue="
|
87
|
+
defaultValue="Предупреждение"
|
88
88
|
/>
|
89
89
|
<TextField
|
90
|
-
placeholder="Статус
|
91
|
-
|
90
|
+
placeholder="Статус"
|
91
|
+
status="error"
|
92
92
|
size="m"
|
93
|
-
defaultValue="
|
93
|
+
defaultValue="Ошибка"
|
94
94
|
/>
|
95
95
|
</div>
|
96
|
-
</div>
|
97
|
-
);
|
98
|
-
}
|
99
|
-
```
|
100
|
-
|
101
|
-
### Вариация Clear
|
102
|
-
На отображение компонента так же влияют свойства `clear` и `hasDivider`:
|
103
|
-
|
104
|
-
```tsx live
|
105
|
-
import React from 'react';
|
106
|
-
import { TextField } from '@salutejs/{{ package }}';
|
107
|
-
|
108
|
-
export function App() {
|
109
|
-
return (
|
110
|
-
<div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
111
96
|
<div style=\{{ display: "flex", gap: "0.5rem" }}>
|
112
97
|
<TextField
|
113
|
-
placeholder="Статус
|
114
|
-
|
98
|
+
placeholder="Статус"
|
99
|
+
status="success"
|
115
100
|
size="m"
|
116
|
-
defaultValue="
|
101
|
+
defaultValue="Успех"
|
117
102
|
clear
|
118
103
|
hasDivider
|
119
104
|
/>
|
120
105
|
<TextField
|
121
|
-
placeholder="Статус
|
122
|
-
|
106
|
+
placeholder="Статус"
|
107
|
+
status="warning"
|
123
108
|
size="m"
|
124
|
-
defaultValue="
|
109
|
+
defaultValue="Предупреждение"
|
125
110
|
clear
|
126
111
|
hasDivider
|
127
112
|
/>
|
128
113
|
<TextField
|
129
|
-
placeholder="Статус
|
130
|
-
|
114
|
+
placeholder="Статус"
|
115
|
+
status="error"
|
131
116
|
size="m"
|
132
|
-
defaultValue="
|
117
|
+
defaultValue="Ошибка"
|
133
118
|
clear
|
134
119
|
hasDivider
|
135
120
|
/>
|
@@ -140,11 +125,8 @@ export function App() {
|
|
140
125
|
```
|
141
126
|
|
142
127
|
### Подсказка
|
143
|
-
Для вывода
|
144
|
-
|
145
|
-
- `leftHelper` внизу слева под компонентом
|
146
|
-
- `titleCaption` сверху справа над компонентом
|
147
|
-
- `hintText` для подсказки в виде `Tooltip`
|
128
|
+
Для вывода подсказки снизу от поля используйте свойство `helperText`,
|
129
|
+
для подсказки в виде Tooltip - `hintText`, для подсказки сверху справа - `titleCaption`:
|
148
130
|
|
149
131
|
```tsx live
|
150
132
|
import React from 'react';
|
@@ -156,7 +138,7 @@ export function App() {
|
|
156
138
|
<TextField
|
157
139
|
placeholder="Введите значение"
|
158
140
|
defaultValue="Значение"
|
159
|
-
|
141
|
+
helperText="Подсказка снизу"
|
160
142
|
titleCaption="Подсказка сверху"
|
161
143
|
hintText="Подсказка в виде Tooltip"
|
162
144
|
hintView="default"
|
@@ -169,9 +151,7 @@ export function App() {
|
|
169
151
|
|
170
152
|
### Режим ввода
|
171
153
|
С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
|
172
|
-
|
173
|
-
С помощью `chipView` можно задать общий вид `Chip`. Валидация `Chip` происходит с помощью функции `chipValidator`.
|
174
|
-
|
154
|
+
С помощью `chipView` можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator.
|
175
155
|
По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.
|
176
156
|
|
177
157
|
```tsx live
|
@@ -188,7 +168,7 @@ export function App() {
|
|
188
168
|
defaultValue="Значение"
|
189
169
|
size="l"
|
190
170
|
enumerationType="chip"
|
191
|
-
|
171
|
+
helperText="Подсказка снизу"
|
192
172
|
chips={["Значение 1", "Значение 2"]}
|
193
173
|
chipView="positive"
|
194
174
|
chipValidator={validateChip}
|
@@ -199,7 +179,7 @@ export function App() {
|
|
199
179
|
defaultValue="Значение"
|
200
180
|
size="l"
|
201
181
|
enumerationType="chip"
|
202
|
-
|
182
|
+
helperText="Подсказка снизу"
|
203
183
|
chips={["Значение 1"]}
|
204
184
|
chipType="text"
|
205
185
|
/>
|
@@ -208,15 +188,9 @@ export function App() {
|
|
208
188
|
}
|
209
189
|
```
|
210
190
|
|
211
|
-
### Обязательность поля
|
212
|
-
|
213
|
-
:::tip
|
214
|
-
Наличие индикатора регулируется свойством `hasRequiredIndicator`.
|
215
|
-
:::
|
216
|
-
|
217
|
-
Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`.
|
218
191
|
|
219
|
-
|
192
|
+
### Обязательность поля
|
193
|
+
Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
220
194
|
|
221
195
|
```tsx live
|
222
196
|
import React from 'react';
|
@@ -235,66 +209,7 @@ export function App() {
|
|
235
209
|
required
|
236
210
|
requiredPlacement="right"
|
237
211
|
/>
|
238
|
-
<TextField
|
239
|
-
placeholder="Введите значение"
|
240
|
-
label="Поле обязательное, но не имеет визуального индикатора"
|
241
|
-
required
|
242
|
-
requiredPlacement="right"
|
243
|
-
hasRequiredIndicator={false}
|
244
|
-
/>
|
245
212
|
</div>
|
246
213
|
);
|
247
214
|
}
|
248
215
|
```
|
249
|
-
|
250
|
-
## Примеры
|
251
|
-
|
252
|
-
### TextField + очистка поля
|
253
|
-
|
254
|
-
```tsx live
|
255
|
-
import React, { useState } from "react";
|
256
|
-
import { TextField } from "@salutejs/{{ package }}";
|
257
|
-
import { IconClose } from "@salutejs/plasma-icons";
|
258
|
-
|
259
|
-
export function App() {
|
260
|
-
const [value, setValue] = useState("");
|
261
|
-
|
262
|
-
const ControlClear = (props: { onClick: () => void }) => {
|
263
|
-
return (
|
264
|
-
<div {...props}>
|
265
|
-
<IconClose size="xs" color="inherit" />
|
266
|
-
</div>
|
267
|
-
);
|
268
|
-
};
|
269
|
-
|
270
|
-
return (
|
271
|
-
<div>
|
272
|
-
<TextField
|
273
|
-
placeholder="Положение иконки"
|
274
|
-
value={value}
|
275
|
-
onChange={(e) => {
|
276
|
-
setValue(e.target.value);
|
277
|
-
}}
|
278
|
-
contentRight={
|
279
|
-
<ControlClear
|
280
|
-
onClick={() => {
|
281
|
-
setValue("");
|
282
|
-
}}
|
283
|
-
/>
|
284
|
-
}
|
285
|
-
/>
|
286
|
-
</div>
|
287
|
-
);
|
288
|
-
}
|
289
|
-
```
|
290
|
-
|
291
|
-
## Клавиатурная навигация
|
292
|
-
|
293
|
-
Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
|
294
|
-
- по нажатию `Tab` фокусируемся на input
|
295
|
-
- если enumeratinType=`chip` после ввода текста, по нажатию `Enter`, input очистится и появится Chip
|
296
|
-
- если введен текст в input по нажатию `ArrowLeft` или `ArrowRight` каретка передвигается по тексту
|
297
|
-
- при достижении левой границы текста или отсутствии текста в input, при нажатии `Backspace` удаляем последний Chip, если он есть
|
298
|
-
- при достижении левой границы текста или отсутствии текста в input, при нажатии `ArrowLeft` переключаемся на последний Chip, если он есть
|
299
|
-
- при фокусе на Chip работает переключение фокуса на другие Chip по нажатию `ArrowLeft`, `ArrowRight`; если же Chip крайний правый, при нажатии `ArrowRight` фокус переходит на input
|
300
|
-
|
@@ -9,11 +9,6 @@ import { PropsTable, Description } from '@site/src/components';
|
|
9
9
|
<Description name="Toast" />
|
10
10
|
<PropsTable name="Toast" />
|
11
11
|
|
12
|
-
:::caution Устаревшие значения свойства `view`
|
13
|
-
Значения `dark` и `light` являются устаревшими.<br/>
|
14
|
-
Для изменения фона `Toast` используйте компонент `ViewContainer` (см. <a href="#пример-использования">пример использования</a>)
|
15
|
-
:::
|
16
|
-
|
17
12
|
## Система подсказок
|
18
13
|
Существует готовая система текстовых подсказок, для использования которой необходимо обернуть приложение в `ToastProvider`:
|
19
14
|
|
@@ -125,6 +120,7 @@ export interface ShowToastArgs {
|
|
125
120
|
```
|
126
121
|
|
127
122
|
## Пример использования
|
123
|
+
|
128
124
|
Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
|
129
125
|
|
130
126
|
```jsx live
|
@@ -134,7 +130,7 @@ import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ pac
|
|
134
130
|
export function App() {
|
135
131
|
|
136
132
|
const ToastExample = () => {
|
137
|
-
const { showToast } = useToast()
|
133
|
+
const { showToast, hideToast } = useToast()
|
138
134
|
|
139
135
|
const onShow = () => {}
|
140
136
|
const onHide = () => {}
|
@@ -172,45 +168,3 @@ export function App() {
|
|
172
168
|
)
|
173
169
|
}
|
174
170
|
```
|
175
|
-
|
176
|
-
## Вид иконки
|
177
|
-
Значения `positive` и `negative` свойства `view` изменяют цвет иконки.<br/>
|
178
|
-
Чтобы цвет применился, установите в иконке свойство `color` со значением `inherit`:
|
179
|
-
|
180
|
-
```jsx live
|
181
|
-
import React from 'react'
|
182
|
-
import { IconBell } from '@salutejs/plasma-icons';
|
183
|
-
import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
|
184
|
-
|
185
|
-
export function App() {
|
186
|
-
const Icon = () => <IconBell color="inherit" size="xs" />;
|
187
|
-
|
188
|
-
const ToastExample = () => {
|
189
|
-
const { showToast } = useToast()
|
190
|
-
|
191
|
-
const onShow = () => {}
|
192
|
-
const onHide = () => {}
|
193
|
-
const toastData = {
|
194
|
-
contentLeft: <Icon />,
|
195
|
-
text: 'Подсказка c иконкой',
|
196
|
-
position: 'bottom',
|
197
|
-
role: 'status',
|
198
|
-
hasClose: true,
|
199
|
-
fade: false,
|
200
|
-
size: 'm',
|
201
|
-
view: 'positive',
|
202
|
-
timeout: 3000,
|
203
|
-
onShow,
|
204
|
-
onHide
|
205
|
-
}
|
206
|
-
|
207
|
-
return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
|
208
|
-
}
|
209
|
-
|
210
|
-
return (
|
211
|
-
<ToastProvider>
|
212
|
-
<ToastExample />
|
213
|
-
</ToastProvider>
|
214
|
-
)
|
215
|
-
}
|
216
|
-
```
|
@@ -17,28 +17,13 @@ import { PropsTable, Description } from '@site/src/components';
|
|
17
17
|
|
18
18
|
```tsx live
|
19
19
|
import React from 'react';
|
20
|
-
import { Tooltip
|
20
|
+
import { Tooltip } from '@salutejs/{{ package }}';
|
21
|
+
import { IconApps } from '@salutejs/plasma-icons';
|
21
22
|
|
22
23
|
export function App() {
|
23
24
|
return (
|
24
|
-
<div style=\{{
|
25
|
-
<Tooltip
|
26
|
-
target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" />}
|
27
|
-
placement="top-start"
|
28
|
-
opened
|
29
|
-
text="top-start"
|
30
|
-
view="default"
|
31
|
-
/>
|
32
|
-
<Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" />
|
33
|
-
<Tooltip
|
34
|
-
target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" />}
|
35
|
-
placement="top-end"
|
36
|
-
opened
|
37
|
-
text="top-end"
|
38
|
-
/>
|
39
|
-
<Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" />
|
40
|
-
<Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" />
|
41
|
-
<Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" />
|
25
|
+
<div style=\{{marginLeft: '100px',marginBottom: '35px'}}>
|
26
|
+
<Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow opened />
|
42
27
|
</div>
|
43
28
|
);
|
44
29
|
}
|
@@ -24,28 +24,28 @@
|
|
24
24
|
|
25
25
|
.Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
|
26
26
|
|
27
|
-
.
|
28
|
-
.
|
29
|
-
.
|
30
|
-
.
|
31
|
-
.
|
32
|
-
.
|
33
|
-
.
|
34
|
-
.
|
35
|
-
.
|
36
|
-
.
|
37
|
-
.
|
38
|
-
.
|
39
|
-
.
|
40
|
-
|
41
|
-
.
|
42
|
-
|
43
|
-
.
|
44
|
-
.
|
45
|
-
.
|
46
|
-
.
|
47
|
-
.
|
48
|
-
.
|
27
|
+
.TextField_styles_1895ept_iq39zt5__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
|
28
|
+
.TextField_styles_1895ept_i1j28rg8__ebba80b9{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_1895ept_i1j28rg8__ebba80b9::-webkit-scrollbar{display:none;}.TextField_styles_1895ept_i1j28rg8__ebba80b9.TextField_styles_1895ept_hasChips__ebba80b9{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
|
29
|
+
.TextField_styles_1895ept_s13zudoe__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
30
|
+
.TextField_styles_1895ept_io4bpie__ebba80b9{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.TextField_styles_1895ept_io4bpie__ebba80b9::-webkit-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::-moz-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9:-ms-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::placeholder{opacity:0;}
|
31
|
+
.TextField_styles_1895ept_i13qvwoy__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_1895ept_i13qvwoy__ebba80b9 .TextField_styles_1895ept_io4bpie__ebba80b9{max-width:var(--i13qvwoy-1);}
|
32
|
+
.TextField_styles_1895ept_i19ry60d__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
|
33
|
+
.TextField_styles_1895ept_obt1ohz__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
|
34
|
+
.TextField_styles_1895ept_tlv9av6__ebba80b9{display:inline-block;margin-left:auto;}
|
35
|
+
.TextField_styles_1895ept_s600610__ebba80b9{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
36
|
+
.TextField_styles_1895ept_luk2zst__ebba80b9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
37
|
+
.TextField_styles_1895ept_s1gjsnfi__ebba80b9{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
|
38
|
+
.TextField_styles_1895ept_ssv2kwg__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
39
|
+
.TextField_styles_1895ept_s190z894__ebba80b9{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_1895ept_s190z894__ebba80b9:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_1895ept_s190z894__ebba80b9:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
|
40
|
+
|
41
|
+
.TextField_styles_1895ept_s7hnwwb__ebba80b9{visibility:var(--s7hnwwb-0);}
|
42
|
+
|
43
|
+
.TextField_styles_1895ept_s14qvple__ebba80b9{color:var(--plasma-textfield__optional-color);}
|
44
|
+
.TextField_styles_1895ept_s16itze4__ebba80b9{display:inline-block;line-height:0;}.TextField_styles_1895ept_s16itze4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
|
45
|
+
.TextField_styles_1895ept_h1skqnhr__ebba80b9{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
46
|
+
.TextField_styles_1895ept_hgy0im1__ebba80b9 .TextField_styles_1895ept_h1skqnhr__ebba80b9 .TextField_styles_1895ept_popoverRoot__ebba80b9{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
47
|
+
.TextField_styles_1895ept_h8yezh4__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
48
|
+
.TextField_styles_1895ept_szsveq4__ebba80b9{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9.TextField_styles_1895ept_textfieldHasHint__ebba80b9{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-inner-right);}
|
49
49
|
|
50
50
|
.base_1lwlv7t_b13tc97x__334a4e59{color:var(--plasma-chip-color);background-color:var(--plasma-chip-background);}.base_1lwlv7t_b13tc97x__334a4e59:hover{color:var(--plasma-chip-color-hover);background-color:var(--plasma-chip-background-hover);scale:var(--plasma-chip-scale-hover);}.base_1lwlv7t_b13tc97x__334a4e59:active{color:var(--plasma-chip-color-active);background-color:var(--plasma-chip-background-active);scale:var(--plasma-chip-scale-active);}
|
51
51
|
|
@@ -75,28 +75,28 @@
|
|
75
75
|
|
76
76
|
.Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
|
77
77
|
|
78
|
-
.
|
79
|
-
.
|
80
|
-
.
|
81
|
-
.
|
82
|
-
.
|
83
|
-
.
|
84
|
-
.
|
85
|
-
.
|
86
|
-
.
|
87
|
-
.
|
88
|
-
.
|
89
|
-
.
|
90
|
-
.
|
91
|
-
|
92
|
-
.
|
93
|
-
|
94
|
-
.
|
95
|
-
.
|
96
|
-
.
|
97
|
-
.
|
98
|
-
.
|
99
|
-
.
|
78
|
+
.TextField_styles_1895ept_iq39zt5__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
|
79
|
+
.TextField_styles_1895ept_i1j28rg8__ebba80b9{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_1895ept_i1j28rg8__ebba80b9::-webkit-scrollbar{display:none;}.TextField_styles_1895ept_i1j28rg8__ebba80b9.TextField_styles_1895ept_hasChips__ebba80b9{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
|
80
|
+
.TextField_styles_1895ept_s13zudoe__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
81
|
+
.TextField_styles_1895ept_io4bpie__ebba80b9{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.TextField_styles_1895ept_io4bpie__ebba80b9::-webkit-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::-moz-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9:-ms-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::placeholder{opacity:0;}
|
82
|
+
.TextField_styles_1895ept_i13qvwoy__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_1895ept_i13qvwoy__ebba80b9 .TextField_styles_1895ept_io4bpie__ebba80b9{max-width:var(--i13qvwoy-1);}
|
83
|
+
.TextField_styles_1895ept_i19ry60d__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
|
84
|
+
.TextField_styles_1895ept_obt1ohz__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
|
85
|
+
.TextField_styles_1895ept_tlv9av6__ebba80b9{display:inline-block;margin-left:auto;}
|
86
|
+
.TextField_styles_1895ept_s600610__ebba80b9{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
87
|
+
.TextField_styles_1895ept_luk2zst__ebba80b9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
88
|
+
.TextField_styles_1895ept_s1gjsnfi__ebba80b9{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
|
89
|
+
.TextField_styles_1895ept_ssv2kwg__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
90
|
+
.TextField_styles_1895ept_s190z894__ebba80b9{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_1895ept_s190z894__ebba80b9:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_1895ept_s190z894__ebba80b9:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
|
91
|
+
|
92
|
+
.TextField_styles_1895ept_s7hnwwb__ebba80b9{visibility:var(--s7hnwwb-0);}
|
93
|
+
|
94
|
+
.TextField_styles_1895ept_s14qvple__ebba80b9{color:var(--plasma-textfield__optional-color);}
|
95
|
+
.TextField_styles_1895ept_s16itze4__ebba80b9{display:inline-block;line-height:0;}.TextField_styles_1895ept_s16itze4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
|
96
|
+
.TextField_styles_1895ept_h1skqnhr__ebba80b9{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
97
|
+
.TextField_styles_1895ept_hgy0im1__ebba80b9 .TextField_styles_1895ept_h1skqnhr__ebba80b9 .TextField_styles_1895ept_popoverRoot__ebba80b9{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
98
|
+
.TextField_styles_1895ept_h8yezh4__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
99
|
+
.TextField_styles_1895ept_szsveq4__ebba80b9{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9.TextField_styles_1895ept_textfieldHasHint__ebba80b9{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-inner-right);}
|
100
100
|
|
101
101
|
.base_1lwlv7t_b13tc97x__334a4e59{color:var(--plasma-chip-color);background-color:var(--plasma-chip-background);}.base_1lwlv7t_b13tc97x__334a4e59:hover{color:var(--plasma-chip-color-hover);background-color:var(--plasma-chip-background-hover);scale:var(--plasma-chip-scale-hover);}.base_1lwlv7t_b13tc97x__334a4e59:active{color:var(--plasma-chip-color-active);background-color:var(--plasma-chip-background-active);scale:var(--plasma-chip-scale-active);}
|
102
102
|
|
@@ -107,28 +107,28 @@
|
|
107
107
|
|
108
108
|
.Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
|
109
109
|
|
110
|
-
.
|
111
|
-
.
|
112
|
-
.
|
113
|
-
.
|
114
|
-
.
|
115
|
-
.
|
116
|
-
.
|
117
|
-
.
|
118
|
-
.
|
119
|
-
.
|
120
|
-
.
|
121
|
-
.
|
122
|
-
.
|
123
|
-
|
124
|
-
.
|
125
|
-
|
126
|
-
.
|
127
|
-
.
|
128
|
-
.
|
129
|
-
.
|
130
|
-
.
|
131
|
-
.
|
110
|
+
.TextField_styles_1895ept_iq39zt5__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
|
111
|
+
.TextField_styles_1895ept_i1j28rg8__ebba80b9{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_1895ept_i1j28rg8__ebba80b9::-webkit-scrollbar{display:none;}.TextField_styles_1895ept_i1j28rg8__ebba80b9.TextField_styles_1895ept_hasChips__ebba80b9{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
|
112
|
+
.TextField_styles_1895ept_s13zudoe__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
113
|
+
.TextField_styles_1895ept_io4bpie__ebba80b9{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.TextField_styles_1895ept_io4bpie__ebba80b9::-webkit-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::-moz-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9:-ms-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::placeholder{opacity:0;}
|
114
|
+
.TextField_styles_1895ept_i13qvwoy__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_1895ept_i13qvwoy__ebba80b9 .TextField_styles_1895ept_io4bpie__ebba80b9{max-width:var(--i13qvwoy-1);}
|
115
|
+
.TextField_styles_1895ept_i19ry60d__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
|
116
|
+
.TextField_styles_1895ept_obt1ohz__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
|
117
|
+
.TextField_styles_1895ept_tlv9av6__ebba80b9{display:inline-block;margin-left:auto;}
|
118
|
+
.TextField_styles_1895ept_s600610__ebba80b9{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
119
|
+
.TextField_styles_1895ept_luk2zst__ebba80b9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
120
|
+
.TextField_styles_1895ept_s1gjsnfi__ebba80b9{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
|
121
|
+
.TextField_styles_1895ept_ssv2kwg__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
122
|
+
.TextField_styles_1895ept_s190z894__ebba80b9{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_1895ept_s190z894__ebba80b9:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_1895ept_s190z894__ebba80b9:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
|
123
|
+
|
124
|
+
.TextField_styles_1895ept_s7hnwwb__ebba80b9{visibility:var(--s7hnwwb-0);}
|
125
|
+
|
126
|
+
.TextField_styles_1895ept_s14qvple__ebba80b9{color:var(--plasma-textfield__optional-color);}
|
127
|
+
.TextField_styles_1895ept_s16itze4__ebba80b9{display:inline-block;line-height:0;}.TextField_styles_1895ept_s16itze4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
|
128
|
+
.TextField_styles_1895ept_h1skqnhr__ebba80b9{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
129
|
+
.TextField_styles_1895ept_hgy0im1__ebba80b9 .TextField_styles_1895ept_h1skqnhr__ebba80b9 .TextField_styles_1895ept_popoverRoot__ebba80b9{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
130
|
+
.TextField_styles_1895ept_h8yezh4__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
131
|
+
.TextField_styles_1895ept_szsveq4__ebba80b9{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9.TextField_styles_1895ept_textfieldHasHint__ebba80b9{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-inner-right);}
|
132
132
|
|
133
133
|
.base_1lwlv7t_b13tc97x__334a4e59{color:var(--plasma-chip-color);background-color:var(--plasma-chip-background);}.base_1lwlv7t_b13tc97x__334a4e59:hover{color:var(--plasma-chip-color-hover);background-color:var(--plasma-chip-background-hover);scale:var(--plasma-chip-scale-hover);}.base_1lwlv7t_b13tc97x__334a4e59:active{color:var(--plasma-chip-color-active);background-color:var(--plasma-chip-background-active);scale:var(--plasma-chip-scale-active);}
|
134
134
|
|