@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (139) hide show
  1. package/cjs/components/Button/Button.css +9 -6
  2. package/cjs/components/Button/Button.js +16 -2
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +31 -10
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_nedem1.css +8 -0
  7. package/cjs/components/Button/Button.tokens.js +5 -0
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  12. package/cjs/components/Drawer/Drawer.css +9 -6
  13. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  14. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  15. package/cjs/components/IconButton/IconButton.css +10 -7
  16. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  17. package/{es/components/IconButton/IconButton.styles_1hknr37.css → cjs/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  18. package/cjs/components/Notification/Notification.css +9 -6
  19. package/cjs/components/Notification/NotificationsProvider.css +9 -6
  20. package/cjs/components/Pagination/Pagination.css +9 -6
  21. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  22. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  23. package/cjs/components/Select/Select.css +9 -6
  24. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  25. package/cjs/components/Toast/Toast.css +9 -6
  26. package/cjs/components/Toast/ToastController.css +9 -6
  27. package/cjs/index.css +12 -9
  28. package/es/components/Button/Button.css +9 -6
  29. package/es/components/Button/Button.js +17 -3
  30. package/es/components/Button/Button.js.map +1 -1
  31. package/es/components/Button/Button.styles.js +29 -11
  32. package/es/components/Button/Button.styles.js.map +1 -1
  33. package/es/components/Button/Button.styles_nedem1.css +8 -0
  34. package/es/components/Button/Button.tokens.js +5 -0
  35. package/es/components/Button/Button.tokens.js.map +1 -1
  36. package/es/components/Button/variations/_stretching/base.js +1 -1
  37. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  38. package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  39. package/es/components/Drawer/Drawer.css +9 -6
  40. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  41. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  42. package/es/components/IconButton/IconButton.css +10 -7
  43. package/es/components/IconButton/IconButton.styles.js +1 -1
  44. package/{cjs/components/IconButton/IconButton.styles_1hknr37.css → es/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  45. package/es/components/Notification/Notification.css +9 -6
  46. package/es/components/Notification/NotificationsProvider.css +9 -6
  47. package/es/components/Pagination/Pagination.css +9 -6
  48. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  49. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  50. package/es/components/Select/Select.css +9 -6
  51. package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  52. package/es/components/Toast/Toast.css +9 -6
  53. package/es/components/Toast/ToastController.css +9 -6
  54. package/es/index.css +12 -9
  55. package/package.json +2 -2
  56. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +1 -3
  57. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  58. package/styled-components/cjs/components/Button/Button.js +16 -2
  59. package/styled-components/cjs/components/Button/Button.styles.js +20 -12
  60. package/styled-components/cjs/components/Button/Button.template-doc.mdx +51 -8
  61. package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
  62. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  63. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  64. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  65. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  66. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  67. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  68. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  69. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  70. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  71. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
  72. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
  73. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  74. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
  75. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  76. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  77. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  78. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  79. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  80. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  81. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  82. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  83. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  84. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  85. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  86. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
  87. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  88. package/styled-components/es/components/Button/Button.js +17 -3
  89. package/styled-components/es/components/Button/Button.styles.js +19 -11
  90. package/styled-components/es/components/Button/Button.template-doc.mdx +51 -8
  91. package/styled-components/es/components/Button/Button.tokens.js +5 -0
  92. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  93. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  94. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  95. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  96. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  97. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  98. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  99. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  100. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  101. package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
  102. package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
  103. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
  105. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  106. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  107. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  108. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  109. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  110. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  111. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  112. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  113. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  114. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  115. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  116. package/types/components/Button/Button.d.ts.map +1 -1
  117. package/types/components/Button/Button.styles.d.ts +5 -1
  118. package/types/components/Button/Button.styles.d.ts.map +1 -1
  119. package/types/components/Button/Button.tokens.d.ts +5 -0
  120. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  121. package/types/components/Button/Button.types.d.ts +10 -0
  122. package/types/components/Button/Button.types.d.ts.map +1 -1
  123. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  124. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  125. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  126. package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
  127. package/es/components/Button/Button.styles_uqvh6u.css +0 -5
  128. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
  129. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
  130. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
  131. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
  132. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
  133. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
  135. package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
  136. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
  137. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
  138. package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
  139. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
21
21
 
22
22
  ```tsx live
23
23
  import React from 'react';
24
- import { Button } from '@salutejs/{{ package }}';
24
+ import { Button } from '@salutejs/{{package}}';
25
25
  import { IconDownload } from '@salutejs/plasma-icons';
26
26
 
27
27
  export function App() {
@@ -55,7 +55,7 @@ export function App() {
55
55
 
56
56
  ```tsx live
57
57
  import React from 'react';
58
- import { Button } from '@salutejs/{{ package }}';
58
+ import { Button } from '@salutejs/{{package}}';
59
59
 
60
60
  export function App() {
61
61
  return (
@@ -68,6 +68,48 @@ export function App() {
68
68
  }
69
69
  ```
70
70
 
71
+ ### Ширина кнопки
72
+ Ширина кнопки регулируется с помощью свойства `stretching`.
73
+ Возможные значения свойства `contentPlacing`:
74
+ + `auto` – ширина подстраивается под контент;
75
+ + `filled` – кнопка растягивается на всю доступную ширину;
76
+ + `fixed` – кнопка фиксированной ширины.
77
+
78
+ ```tsx live
79
+ import React from 'react';
80
+ import { Button } from '@salutejs/{{package}}';
81
+
82
+ export function App() {
83
+ return (
84
+ <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
85
+ <Button text="Button" stretching="fixed" />
86
+ <Button text="Button" stretching="auto" />
87
+ <Button text="Button" stretching="filled" />
88
+ </div>
89
+ );
90
+ }
91
+ ```
92
+
93
+ ### Позиционирование контента внутри
94
+ Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
95
+ Возможные значения свойства `contentPlacing`:
96
+ + `default` – контент центрируется;
97
+ + `relaxed` – контент распологается по краям.
98
+
99
+ ```tsx live
100
+ import React from 'react';
101
+ import { Button } from '@salutejs/{{package}}';
102
+
103
+ export function App() {
104
+ return (
105
+ <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
106
+ <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
107
+ <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
108
+ </div>
109
+ );
110
+ }
111
+ ```
112
+
71
113
  ### Вид кнопки
72
114
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
73
115
  + `"primary"` – основная;
@@ -80,7 +122,7 @@ export function App() {
80
122
 
81
123
  ```tsx live
82
124
  import React from 'react';
83
- import { Button } from '@salutejs/{{ package }}';
125
+ import { Button } from '@salutejs/{{package}}';
84
126
 
85
127
  export function App() {
86
128
  return (
@@ -106,7 +148,7 @@ export function App() {
106
148
 
107
149
  ```tsx live
108
150
  import React from 'react';
109
- import { Button } from '@salutejs/{{ package }}';
151
+ import { Button } from '@salutejs/{{package}}';
110
152
 
111
153
  export function App() {
112
154
  return (
@@ -132,15 +174,15 @@ export function App() {
132
174
 
133
175
  ```tsx live
134
176
  import React from 'react';
135
- import { Button } from '@salutejs/{{ package }}';
177
+ import { Button } from '@salutejs/{{package}}';
136
178
  import { IconDownload } from '@salutejs/plasma-icons';
137
179
 
138
180
  export function App() {
139
181
  return (
140
182
  <div>
141
- <Button contentLeft={<IconDownload color="inherit" />} />
183
+ <Button contentLeft={<IconDownload />} />
142
184
 
143
- <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
185
+ <Button contentLeft={<IconDownload />} pin="circle-circle" />
144
186
  </div>
145
187
  );
146
188
  }
@@ -151,7 +193,8 @@ export function App() {
151
193
 
152
194
  ```tsx live
153
195
  import React from 'react';
154
- import { Button } from '@salutejs/{{ package }}';
196
+ import { Button } from '@salutejs/{{package}}';
197
+ import { IconDownload } from '@salutejs/plasma-icons';
155
198
 
156
199
  export function App() {
157
200
  return (
@@ -9,11 +9,13 @@ var classes = exports.classes = {
9
9
  autoStretching: 'button-stretching-auto',
10
10
  filledStretching: 'button-stretching-filled',
11
11
  fixedStretching: 'button-stretching-fixed',
12
+ contentRelaxed: 'button-content-relaxed',
12
13
  buttonSquare: 'button-square',
13
14
  buttonItem: 'button-item'
14
15
  };
15
16
  var tokens = exports.tokens = {
16
17
  buttonColor: '--plasma-button-color',
18
+ buttonValueColor: '--plasma-button-value-color',
17
19
  buttonBackgroundColor: '--plasma-button-background-color',
18
20
  buttonColorHover: '--plasma-button-color-hover',
19
21
  buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -32,6 +34,9 @@ var tokens = exports.tokens = {
32
34
  buttonFontWeight: '--plasma-button-font-weight',
33
35
  buttonLetterSpacing: '--plasma-button-letter-spacing',
34
36
  buttonLineHeight: '--plasma-button-line-height',
37
+ buttonLeftContentMargin: '--plasma-button-left-content-margin',
38
+ buttonRightContentMargin: '--plasma-button-right-content-margin',
39
+ buttonValueMargin: '--plasma-button-value-margin',
35
40
  buttonDisabledOpacity: '--plasma-button-disabled-opacity',
36
41
  buttonFocusColor: '--plasma-button-focus-color',
37
42
  buttonSpinnerColor: '--plasma-button-spinner-color',
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Button = /*#__PURE__*/require("../../Button.tokens");
9
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
14
14
 
15
15
  ```tsx live
16
16
  import React from 'react';
17
- import { Checkbox } from '@salutejs/{{ package }}';
17
+ import { Checkbox } from '@salutejs/s{{package}}';
18
18
 
19
19
  export function App() {
20
20
  return (
@@ -31,7 +31,7 @@ export function App() {
31
31
 
32
32
  ```tsx live
33
33
  import React from 'react';
34
- import { Checkbox } from '@salutejs/{{ package }}';
34
+ import { Checkbox } from '@salutejs/s{{package}}';
35
35
 
36
36
  export function App() {
37
37
  return (
@@ -72,7 +72,7 @@ export function App() {
72
72
  Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
73
73
  + `"default"` – основная;
74
74
  + `"secondary"` – вторичная;
75
- + `"accent"` – акцентный;
75
+ + `"accent"` – акцентый.
76
76
 
77
77
  ```tsx live
78
78
  import React from 'react';
@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
22
22
  ## Клавиатурная навигация
23
23
 
24
24
  Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
25
- - `Tab` - переход на target (input)
25
+ - `Tab` - переход на таргет (инпут)
26
26
  - `Shift` + `tab` - выход с него (теряем фокус)
27
27
  - `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
28
28
  - `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
29
- - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
30
- - Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
- - Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
32
- - В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
29
+ - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
30
+ - Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
+ - Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
32
+ - В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
33
33
  - Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
34
- - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
35
- - Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
36
- - Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
34
+ - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)
35
+ - Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
36
+ - Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
37
37
  - Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
38
- - Если удалили последний чип, то фокусируемся на target
38
+ - Если удалили последний чип, то фокусируемся на таргете
39
39
  - Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
40
40
  - Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
41
- - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
42
- - Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
41
+ - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
42
+ - Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
43
43
 
44
44
  ### Single
45
45
 
@@ -178,12 +178,12 @@ export function App() {
178
178
  ```
179
179
 
180
180
  ### Применение пользовательского фильтра
181
- `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
182
- которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
181
+ `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
182
+ которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
183
183
 
184
184
  ```tsx live
185
185
  import React from 'react';
186
- import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
186
+ import { Combobox } from '@salutejs/{{ package }}';
187
187
 
188
188
  export function App() {
189
189
  const [value, setValue] = React.useState(['item_0']);
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Примеры
13
13
 
14
- ### Максимальное значение числового badge
14
+ ### Максимальное значение числового бейджа
15
15
  Задается с помощью свойства `maxCount`.
16
16
 
17
17
  ```tsx live
@@ -28,7 +28,7 @@ export function App() {
28
28
  }
29
29
  ```
30
30
 
31
- ### Размер числового badge
31
+ ### Размер числового бейджа
32
32
  Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
33
33
 
34
34
  ```tsx live
@@ -45,7 +45,7 @@ export function App() {
45
45
  }
46
46
  ```
47
47
 
48
- ### Вид числового badge
48
+ ### Вид числового бейджа
49
49
  Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
50
50
 
51
51
  + `"primary"` – основной бейдж;
@@ -53,8 +53,8 @@ export function App() {
53
53
  + `"positive"` – успешное завершение;
54
54
  + `"warning"` – предупреждение;
55
55
  + `"negative"` – ошибка;
56
- + `"dark"` – темный badge;
57
- + `"light"` – светлый badge.
56
+ + `"dark"` – темный бэйдж;
57
+ + `"light"` – светлый бэйдж.
58
58
 
59
59
  ```tsx live
60
60
  import React from 'react';
@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
35
35
  а также определить отступы от точки с помощью `offset`.
36
36
 
37
37
  У компонента Drawer есть 2 режима отображения:
38
- - модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
39
- - немодальный - нет подложки, scroll и фокус не заблокированы.
38
+ модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус;
39
+ немодальный - нет подложки, скролл и фокус не заблокированы.
40
40
 
41
41
  ```tsx live
42
42
  import React, { useRef } from 'react';
43
43
  import { IconDone } from '@salutejs/plasma-icons';
44
- import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
44
+ import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
45
45
 
46
46
  import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@salutejs/{{ package }}';
47
47