@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
@@ -1,120 +0,0 @@
1
- ---
2
- id: toolbar
3
- title: Toolbar
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Toolbar
9
- Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
10
-
11
- ## Toolbar
12
- <Description name="Toolbar" />
13
- <PropsTable name="Toolbar" exclude={['css', 'focused']} />
14
-
15
- ## Использование
16
- Компонент `Toolbar` должен содержать контент передаваемый в `children`.
17
- Для разделения элементов можно использовать ToolbarDivider.
18
-
19
- ```tsx live
20
- import React from 'react';
21
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
22
- import { IconEdit } from '@salutejs/plasma-icons';
23
-
24
- export function App() {
25
- return (
26
- <Toolbar>
27
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
28
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
29
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
30
- <ToolbarDivider />
31
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
32
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
33
- </Toolbar>
34
- );
35
- }
36
- ```
37
-
38
- ## Примеры
39
-
40
- ### Размер Toolbar
41
- Размер Toolbar задается с помощью свойства `size`.
42
-
43
- Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
44
-
45
- ```tsx live
46
- import React from 'react';
47
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
48
- import { IconEdit } from '@salutejs/plasma-icons';
49
-
50
- export function App() {
51
- return (
52
- <div>
53
- <Toolbar size="l">
54
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
55
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
56
- <ToolbarDivider />
57
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
58
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
59
- </Toolbar>
60
-
61
- <Toolbar size="m">
62
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
63
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
64
- <ToolbarDivider />
65
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
66
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
67
- </Toolbar>
68
-
69
- <Toolbar size="m">
70
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
71
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
72
- <ToolbarDivider />
73
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
74
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
75
- </Toolbar>
76
-
77
- <Toolbar size="xs">
78
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
79
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
80
- <ToolbarDivider />
81
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
82
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
83
- </Toolbar>
84
- </div>
85
- );
86
- }
87
- ```
88
-
89
- ### Положение Toolbar
90
- Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
91
- + `"vertical"` – вертикальное положение;
92
- + `"horizontal"` – горизонтальное положение;
93
-
94
- ```tsx live
95
- import React from 'react';
96
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
97
- import { IconEdit } from '@salutejs/plasma-icons';
98
-
99
- export function App() {
100
- return (
101
- <div>
102
- <Toolbar orientation="vertical">
103
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
104
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
105
- <ToolbarDivider />
106
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
107
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
108
- </Toolbar>
109
-
110
- <Toolbar orientation="horizontal">
111
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
112
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
113
- <ToolbarDivider />
114
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
115
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
116
- </Toolbar>
117
- </div>
118
- );
119
- }
120
- ```