@salutejs/plasma-new-hope 0.83.0-canary.1213.9175571113.0 → 0.83.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) hide show
  1. package/cjs/components/Button/Button.css +6 -9
  2. package/cjs/components/Button/Button.js +2 -16
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +10 -31
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
  7. package/cjs/components/Button/Button.tokens.js +0 -5
  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_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  21. package/cjs/components/Drawer/Drawer.css +6 -9
  22. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  23. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  24. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  26. package/cjs/components/IconButton/IconButton.css +7 -10
  27. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  28. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  29. package/cjs/components/Notification/Notification.css +6 -9
  30. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  31. package/cjs/components/Pagination/Pagination.css +8 -11
  32. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  33. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  34. package/cjs/components/Select/Select.css +6 -9
  35. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  36. package/cjs/components/Toast/Toast.css +6 -9
  37. package/cjs/components/Toast/ToastController.css +6 -9
  38. package/cjs/index.css +9 -12
  39. package/es/components/Button/Button.css +6 -9
  40. package/es/components/Button/Button.js +3 -17
  41. package/es/components/Button/Button.js.map +1 -1
  42. package/es/components/Button/Button.styles.js +11 -29
  43. package/es/components/Button/Button.styles.js.map +1 -1
  44. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  45. package/es/components/Button/Button.tokens.js +0 -5
  46. package/es/components/Button/Button.tokens.js.map +1 -1
  47. package/es/components/Button/variations/_stretching/base.js +1 -1
  48. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  49. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  50. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  51. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  52. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  53. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  54. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  55. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  56. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  57. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  58. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  59. package/es/components/Drawer/Drawer.css +6 -9
  60. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  61. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  62. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  63. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  64. package/es/components/IconButton/IconButton.css +7 -10
  65. package/es/components/IconButton/IconButton.styles.js +1 -1
  66. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  67. package/es/components/Notification/Notification.css +6 -9
  68. package/es/components/Notification/NotificationsProvider.css +6 -9
  69. package/es/components/Pagination/Pagination.css +8 -11
  70. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  71. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  72. package/es/components/Select/Select.css +6 -9
  73. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  74. package/es/components/Toast/Toast.css +6 -9
  75. package/es/components/Toast/ToastController.css +6 -9
  76. package/es/index.css +9 -12
  77. package/package.json +2 -2
  78. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  79. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  80. package/styled-components/cjs/components/Button/Button.js +2 -16
  81. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  82. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  83. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  84. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  85. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  86. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  87. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  88. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  89. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  90. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  91. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  92. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  93. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  94. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  95. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  96. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  97. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  98. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  99. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  100. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  101. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  102. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  103. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  105. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  106. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  107. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  108. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  109. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  110. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  111. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  112. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  113. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  114. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  115. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  116. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  117. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  118. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  119. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  120. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  121. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  122. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  123. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  124. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  125. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  126. package/styled-components/es/components/Button/Button.js +3 -17
  127. package/styled-components/es/components/Button/Button.styles.js +11 -19
  128. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  129. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  130. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  131. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  132. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  133. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  135. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  136. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  137. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  138. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  139. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  140. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  141. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  142. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  143. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  144. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  145. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  146. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  147. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  148. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  149. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  150. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  151. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  152. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  153. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  154. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  155. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  156. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  157. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  158. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  159. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  160. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  161. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  162. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  163. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  164. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  165. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  166. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  167. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  168. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  169. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  170. package/types/components/Button/Button.d.ts.map +1 -1
  171. package/types/components/Button/Button.styles.d.ts +1 -5
  172. package/types/components/Button/Button.styles.d.ts.map +1 -1
  173. package/types/components/Button/Button.tokens.d.ts +0 -5
  174. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  175. package/types/components/Button/Button.types.d.ts +4 -16
  176. package/types/components/Button/Button.types.d.ts.map +1 -1
  177. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  178. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  179. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  180. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  181. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  182. package/types/components/Notification/Notification.styles.d.ts +1 -43
  183. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  184. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  185. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  186. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  187. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  188. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  189. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  190. package/types/components/Toast/Toast.styles.d.ts +1 -43
  191. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  192. package/types/components/Toast/utils.d.ts +1 -43
  193. package/types/components/Toast/utils.d.ts.map +1 -1
  194. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  195. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  196. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  197. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  198. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  199. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  200. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  201. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  202. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  203. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  204. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  205. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  206. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  207. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  208. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  209. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  210. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  211. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  212. package/es/components/Button/Button.styles_nedem1.css +0 -8
  213. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -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,48 +68,6 @@ 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
-
113
71
  ### Вид кнопки
114
72
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
115
73
  + `"primary"` – основная;
@@ -122,7 +80,7 @@ export function App() {
122
80
 
123
81
  ```tsx live
124
82
  import React from 'react';
125
- import { Button } from '@salutejs/{{package}}';
83
+ import { Button } from '@salutejs/{{ package }}';
126
84
 
127
85
  export function App() {
128
86
  return (
@@ -148,7 +106,7 @@ export function App() {
148
106
 
149
107
  ```tsx live
150
108
  import React from 'react';
151
- import { Button } from '@salutejs/{{package}}';
109
+ import { Button } from '@salutejs/{{ package }}';
152
110
 
153
111
  export function App() {
154
112
  return (
@@ -174,15 +132,15 @@ export function App() {
174
132
 
175
133
  ```tsx live
176
134
  import React from 'react';
177
- import { Button } from '@salutejs/{{package}}';
135
+ import { Button } from '@salutejs/{{ package }}';
178
136
  import { IconDownload } from '@salutejs/plasma-icons';
179
137
 
180
138
  export function App() {
181
139
  return (
182
140
  <div>
183
- <Button contentLeft={<IconDownload />} />
141
+ <Button contentLeft={<IconDownload color="inherit" />} />
184
142
 
185
- <Button contentLeft={<IconDownload />} pin="circle-circle" />
143
+ <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
186
144
  </div>
187
145
  );
188
146
  }
@@ -193,8 +151,7 @@ export function App() {
193
151
 
194
152
  ```tsx live
195
153
  import React from 'react';
196
- import { Button } from '@salutejs/{{package}}';
197
- import { IconDownload } from '@salutejs/plasma-icons';
154
+ import { Button } from '@salutejs/{{ package }}';
198
155
 
199
156
  export function App() {
200
157
  return (
@@ -3,13 +3,11 @@ export var classes = {
3
3
  autoStretching: 'button-stretching-auto',
4
4
  filledStretching: 'button-stretching-filled',
5
5
  fixedStretching: 'button-stretching-fixed',
6
- contentRelaxed: 'button-content-relaxed',
7
6
  buttonSquare: 'button-square',
8
7
  buttonItem: 'button-item'
9
8
  };
10
9
  export var tokens = {
11
10
  buttonColor: '--plasma-button-color',
12
- buttonValueColor: '--plasma-button-value-color',
13
11
  buttonBackgroundColor: '--plasma-button-background-color',
14
12
  buttonColorHover: '--plasma-button-color-hover',
15
13
  buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -28,9 +26,6 @@ export var tokens = {
28
26
  buttonFontWeight: '--plasma-button-font-weight',
29
27
  buttonLetterSpacing: '--plasma-button-letter-spacing',
30
28
  buttonLineHeight: '--plasma-button-line-height',
31
- buttonLeftContentMargin: '--plasma-button-left-content-margin',
32
- buttonRightContentMargin: '--plasma-button-right-content-margin',
33
- buttonValueMargin: '--plasma-button-value-margin',
34
29
  buttonDisabledOpacity: '--plasma-button-disabled-opacity',
35
30
  buttonFocusColor: '--plasma-button-focus-color',
36
31
  buttonSpinnerColor: '--plasma-button-spinner-color',
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../Button.tokens';
3
- export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
3
+ export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
@@ -14,7 +14,6 @@ export var classes = {
14
14
  export var tokens = {
15
15
  buttonGroupOrientation: '--plasma-button-group-orientation',
16
16
  buttonColor: '--plasma-button-group-item-color',
17
- buttonValueColor: '--plasma-button-group-item-value-color',
18
17
  buttonBackgroundColor: '--plasma-button-group-item-background-color',
19
18
  buttonColorHover: '--plasma-button-group-item-color-hover',
20
19
  buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
@@ -1,4 +1,3 @@
1
1
  import { css } from 'styled-components';
2
- import { classes, tokens } from '../../ButtonGroup.tokens';
3
- import { buttonClasses } from '../../../Button';
4
- export var base = /*#__PURE__*/css(["flex-direction:var(", ");&.", " .", "{width:auto;}"], tokens.buttonGroupOrientation, classes.vertical, buttonClasses.buttonItem);
2
+ import { tokens } from '../../ButtonGroup.tokens';
3
+ export var base = /*#__PURE__*/css(["flex-direction:var(", ");"], tokens.buttonGroupOrientation);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../ButtonGroup.tokens';
3
3
  import { buttonClasses, buttonTokens } from '../../../Button';
4
- export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
4
+ export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
@@ -0,0 +1,68 @@
1
+ ---
2
+ id: cell
3
+ title: Cell
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Cell
9
+ <PropsTable name="Cell" />
10
+ <Description name="Cell" />
11
+
12
+ Компонент ячейки представляет собой стилизованные слоты для контента.
13
+
14
+ Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
15
+
16
+ Они представляют собой стилизованный текст и слот для них.
17
+
18
+ ## Примеры
19
+
20
+ ### Базовое использование
21
+
22
+ ```tsx live
23
+ import React from 'react';
24
+ import { Avatar, Cell } from '@salutejs/{{ package }}';
25
+ import { IconChevronRight } from '@salutejs/plasma-icons';
26
+
27
+ export function App() {
28
+ return (
29
+ <>
30
+ <Cell
31
+ contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
32
+ size="m"
33
+ contentRight={<IconChevronRight color="inheart" size="xs" />}
34
+ title="Title"
35
+ subtitle="Subtitle"
36
+ label="Label"
37
+ />
38
+ </>
39
+ );
40
+ }
41
+ ```
42
+
43
+ ### С использованием своих стилей или встроенных компонентов
44
+
45
+ ```tsx live
46
+ import React from 'react';
47
+ import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
48
+ import { IconChevronRight } from '@salutejs/plasma-icons';
49
+
50
+ export function App() {
51
+ return (
52
+ <>
53
+ <Cell
54
+ contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
55
+ size="m"
56
+ contentRight={<IconChevronRight color="inheart" size="xs" />}
57
+ >
58
+ <CellTextbox>
59
+ <CellTextboxLabel>Label</CellTextboxLabel>
60
+ <CellTextboxTitle>Title</CellTextboxTitle>
61
+ <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
62
+ <div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
63
+ </CellTextbox>
64
+ </Cell>
65
+ </>
66
+ );
67
+ }
68
+ ```
@@ -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/s{{package}}';
17
+ import { Checkbox } from '@salutejs/{{ 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/s{{package}}';
34
+ import { Checkbox } from '@salutejs/{{ 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` - переход на таргет (инпут)
25
+ - `Tab` - переход на target (input)
26
26
  - `Shift` + `tab` - выход с него (теряем фокус)
27
27
  - `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
28
28
  - `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
29
- - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
30
- - Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
- - Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
32
- - В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
29
+ - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
30
+ - Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
+ - Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
32
+ - В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
33
33
  - Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
34
- - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)
35
- - Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
36
- - Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
34
+ - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
35
+ - Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
36
+ - Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
37
37
  - Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
38
- - Если удалили последний чип, то фокусируемся на таргете
38
+ - Если удалили последний чип, то фокусируемся на target
39
39
  - Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
40
40
  - Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
41
- - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
42
- - Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
41
+ - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
42
+ - Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
43
43
 
44
44
  ### Single
45
45
 
@@ -178,12 +178,12 @@ export function App() {
178
178
  ```
179
179
 
180
180
  ### Применение пользовательского фильтра
181
- `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
182
- которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
181
+ `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
182
+ которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
183
183
 
184
184
  ```tsx live
185
185
  import React from 'react';
186
- import { Combobox } from '@salutejs/{{ package }}';
186
+ import { Combobox, ComboboxItem } 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
- ### Максимальное значение числового бейджа
14
+ ### Максимальное значение числового badge
15
15
  Задается с помощью свойства `maxCount`.
16
16
 
17
17
  ```tsx live
@@ -28,7 +28,7 @@ export function App() {
28
28
  }
29
29
  ```
30
30
 
31
- ### Размер числового бейджа
31
+ ### Размер числового badge
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
- ### Вид числового бейджа
48
+ ### Вид числового badge
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"` – темный бэйдж;
57
- + `"light"` – светлый бэйдж.
56
+ + `"dark"` – темный badge;
57
+ + `"light"` – светлый badge.
58
58
 
59
59
  ```tsx live
60
60
  import React from 'react';
@@ -0,0 +1,57 @@
1
+ ---
2
+ id: divider
3
+ title: Divider
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ ## Divider
9
+ <Description name="Divider" />
10
+ <PropsTable name="Divider" exclude={['css']} />
11
+
12
+ ## Использование
13
+ Компонент `Divider` используется для визуального разделения компонент.
14
+
15
+ ### Ориентация разделителя
16
+ Ориентация разделителя задается с помощью свойства orientation.
17
+
18
+ Возможные значения свойства orientation:
19
+ + "horizontal" – горизонтальная (по умолчанию);
20
+ + "vertical" – вертикальная;
21
+
22
+ ```tsx live
23
+ import React from 'react';
24
+ import { BodyS, Divider } from '@salutejs/{{ package }}';
25
+
26
+ export function App() {
27
+ const Demo = ({
28
+ orientation = 'horizontal',
29
+ length = '100%',
30
+ beforeText = 'Before',
31
+ afterText = 'After',
32
+ }) => {
33
+ const wrapperStyle = {
34
+ display: "inline-flex",
35
+ gap: "0.5rem",
36
+ alignItems: "center",
37
+ justifyContent: "center",
38
+ flexDirection: orientation === "horizontal" ? "column" : "row"
39
+ }
40
+
41
+ return (
42
+ <div style={wrapperStyle}>
43
+ <BodyS>{beforeText}</BodyS>
44
+ <Divider orientation={orientation} length={length} />
45
+ <BodyS>{afterText}</BodyS>
46
+ </div>
47
+ );
48
+ };
49
+
50
+ return (
51
+ <div style=\{{ display: "flex", gap: "2rem" }}>
52
+ <Demo />
53
+ <Demo orientation="vertical" />
54
+ </div>
55
+ );
56
+ }
57
+ ```
@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
35
35
  а также определить отступы от точки с помощью `offset`.
36
36
 
37
37
  У компонента Drawer есть 2 режима отображения:
38
- модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус;
39
- немодальный - нет подложки, скролл и фокус не заблокированы.
38
+ - модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
39
+ - немодальный - нет подложки, scroll и фокус не заблокированы.
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/{{ theme }}';
44
+ import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
45
45
 
46
46
  import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@salutejs/{{ package }}';
47
47