@salutejs/plasma-new-hope 0.245.0-dev.0 → 0.245.1-canary.1668.12889767790.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.
Files changed (115) hide show
  1. package/cjs/components/Attach/Attach.css +10 -10
  2. package/cjs/components/Attach/components/AttachButton/AttachButton.css +10 -10
  3. package/cjs/components/Attach/ui/IconButton/IconButton.styles.js +3 -3
  4. package/cjs/components/Attach/ui/IconButton/IconButton.styles.js.map +1 -1
  5. package/cjs/components/Attach/ui/IconButton/IconButton.styles_7clf9d.css +2 -0
  6. package/cjs/components/Button/Button.css +8 -8
  7. package/cjs/components/Button/Button.js +8 -2
  8. package/cjs/components/Button/Button.js.map +1 -1
  9. package/cjs/components/Button/Button.styles.js +22 -3
  10. package/cjs/components/Button/Button.styles.js.map +1 -1
  11. package/cjs/components/Button/{Button.styles_1sopr3d.css → Button.styles_8cvmld.css} +2 -2
  12. package/cjs/components/Calendar/CalendarBase/CalendarBase.css +8 -8
  13. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.css +8 -8
  14. package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.css +8 -8
  15. package/cjs/components/Combobox/ComboboxNew/Combobox.css +8 -8
  16. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +8 -8
  17. package/cjs/components/DatePicker/RangeDate/RangeDate.css +8 -8
  18. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +8 -8
  19. package/cjs/components/DatePicker/SingleDate/SingleDate.css +8 -8
  20. package/cjs/components/Drawer/Drawer.css +8 -8
  21. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +8 -8
  22. package/cjs/components/EmptyState/EmptyState.css +8 -8
  23. package/cjs/components/IconButton/IconButton.css +8 -8
  24. package/cjs/components/Notification/Notification.css +8 -8
  25. package/cjs/components/Notification/NotificationsProvider.css +8 -8
  26. package/cjs/components/NumberInput/NumberInput.css +8 -8
  27. package/cjs/components/Pagination/Pagination.css +8 -8
  28. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
  29. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +8 -8
  30. package/cjs/components/Select/Select.css +8 -8
  31. package/cjs/components/Select/ui/Target/Target.css +8 -8
  32. package/cjs/components/Select/ui/Target/ui/Button/Button.css +8 -8
  33. package/cjs/components/Toast/Toast.css +8 -8
  34. package/cjs/components/Toast/ToastController.css +8 -8
  35. package/cjs/index.css +10 -10
  36. package/emotion/cjs/components/Attach/ui/IconButton/IconButton.styles.js +4 -4
  37. package/emotion/cjs/components/Button/Button.js +8 -2
  38. package/emotion/cjs/components/Button/Button.styles.js +14 -8
  39. package/emotion/cjs/components/Button/Button.template-doc.mdx +19 -41
  40. package/emotion/cjs/components/IconButton/IconButton.template-doc.mdx +13 -6
  41. package/emotion/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  42. package/emotion/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
  43. package/emotion/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  44. package/emotion/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
  45. package/emotion/es/components/Attach/ui/IconButton/IconButton.styles.js +4 -4
  46. package/emotion/es/components/Button/Button.js +8 -2
  47. package/emotion/es/components/Button/Button.styles.js +14 -8
  48. package/emotion/es/components/Button/Button.template-doc.mdx +19 -41
  49. package/emotion/es/components/IconButton/IconButton.template-doc.mdx +13 -6
  50. package/emotion/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  51. package/emotion/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
  52. package/emotion/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  53. package/emotion/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
  54. package/es/components/Attach/Attach.css +10 -10
  55. package/es/components/Attach/components/AttachButton/AttachButton.css +10 -10
  56. package/es/components/Attach/ui/IconButton/IconButton.styles.js +3 -3
  57. package/es/components/Attach/ui/IconButton/IconButton.styles.js.map +1 -1
  58. package/es/components/Attach/ui/IconButton/IconButton.styles_7clf9d.css +2 -0
  59. package/es/components/Button/Button.css +8 -8
  60. package/es/components/Button/Button.js +8 -2
  61. package/es/components/Button/Button.js.map +1 -1
  62. package/es/components/Button/Button.styles.js +22 -3
  63. package/es/components/Button/Button.styles.js.map +1 -1
  64. package/es/components/Button/{Button.styles_1sopr3d.css → Button.styles_8cvmld.css} +2 -2
  65. package/es/components/Calendar/CalendarBase/CalendarBase.css +8 -8
  66. package/es/components/Calendar/CalendarDouble/CalendarDouble.css +8 -8
  67. package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.css +8 -8
  68. package/es/components/Combobox/ComboboxNew/Combobox.css +8 -8
  69. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +8 -8
  70. package/es/components/DatePicker/RangeDate/RangeDate.css +8 -8
  71. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +8 -8
  72. package/es/components/DatePicker/SingleDate/SingleDate.css +8 -8
  73. package/es/components/Drawer/Drawer.css +8 -8
  74. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +8 -8
  75. package/es/components/EmptyState/EmptyState.css +8 -8
  76. package/es/components/IconButton/IconButton.css +8 -8
  77. package/es/components/Notification/Notification.css +8 -8
  78. package/es/components/Notification/NotificationsProvider.css +8 -8
  79. package/es/components/NumberInput/NumberInput.css +8 -8
  80. package/es/components/Pagination/Pagination.css +8 -8
  81. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
  82. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +8 -8
  83. package/es/components/Select/Select.css +8 -8
  84. package/es/components/Select/ui/Target/Target.css +8 -8
  85. package/es/components/Select/ui/Target/ui/Button/Button.css +8 -8
  86. package/es/components/Toast/Toast.css +8 -8
  87. package/es/components/Toast/ToastController.css +8 -8
  88. package/es/index.css +10 -10
  89. package/package.json +3 -3
  90. package/styled-components/cjs/components/Attach/ui/IconButton/IconButton.styles.js +2 -2
  91. package/styled-components/cjs/components/Button/Button.js +8 -2
  92. package/styled-components/cjs/components/Button/Button.styles.js +8 -2
  93. package/styled-components/cjs/components/Button/Button.template-doc.mdx +19 -41
  94. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +13 -6
  95. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  96. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
  97. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  98. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
  99. package/styled-components/es/components/Attach/ui/IconButton/IconButton.styles.js +2 -2
  100. package/styled-components/es/components/Button/Button.js +8 -2
  101. package/styled-components/es/components/Button/Button.styles.js +8 -2
  102. package/styled-components/es/components/Button/Button.template-doc.mdx +19 -41
  103. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +13 -6
  104. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  105. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
  106. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  107. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
  108. package/types/components/Attach/ui/IconButton/IconButton.styles.d.ts.map +1 -1
  109. package/types/components/Button/Button.d.ts.map +1 -1
  110. package/types/components/Button/Button.styles.d.ts +6 -2
  111. package/types/components/Button/Button.styles.d.ts.map +1 -1
  112. package/types/components/Button/Button.types.d.ts +5 -9
  113. package/types/components/Button/Button.types.d.ts.map +1 -1
  114. package/cjs/components/Attach/ui/IconButton/IconButton.styles_1q2jfs2.css +0 -2
  115. package/es/components/Attach/ui/IconButton/IconButton.styles_1q2jfs2.css +0 -2
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
16
16
  component: IconButton,
17
17
  argTypes: {
18
18
  ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ ...disableProps(['focused']),
19
20
  pin: {
20
21
  options: [
21
22
  'square-square',
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
16
16
  component: IconButton,
17
17
  argTypes: {
18
18
  ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ ...disableProps(['focused']),
19
20
  pin: {
20
21
  options: [
21
22
  'square-square',
@@ -5,8 +5,8 @@ import { tokens as attachTokens } from '../../Attach.tokens';
5
5
  var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
6
6
  var IconButton = /*#__PURE__*/component(mergedConfig);
7
7
  export var StyledIconButton = /*#__PURE__*/styled(IconButton).withConfig({
8
- componentId: "plasma-new-hope__sc-1d69ffq-0"
8
+ componentId: "plasma-new-hope__sc-5koxke-0"
9
9
  })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");flex-shrink:0;"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerSize);
10
10
  export var StyledIconButtonCancel = /*#__PURE__*/styled(IconButton).withConfig({
11
- componentId: "plasma-new-hope__sc-1d69ffq-1"
11
+ componentId: "plasma-new-hope__sc-5koxke-1"
12
12
  })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonCancelColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonCancelColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonCancelBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonCancelColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonCancelBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonCancelScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonCancelScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonCancelHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonCancelWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonCancelPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonCancelRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonCancelRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonCancelFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonCancelFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonCancelFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonCancelFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonCancelLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonCancelLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonCancelDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonCancelFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonCancelSpinnerSize);
@@ -46,6 +46,8 @@ export var buttonRoot = function buttonRoot(Root) {
46
46
  stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
47
47
  rest = _objectWithoutProperties(props, _excluded);
48
48
  var txt = typeof children === 'string' ? children : text;
49
+ var hasRightContentMargin = Boolean(txt || value || contentRight);
50
+ var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
49
51
  var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
50
52
  var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
51
53
  var squareClass = square ? classes.buttonSquare : undefined;
@@ -73,9 +75,13 @@ export var buttonRoot = function buttonRoot(Root) {
73
75
  }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
74
76
  contentPlacing: contentPlacementValue,
75
77
  isLoading: isLoading
76
- }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
78
+ }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
79
+ hasContentMargin: hasRightContentMargin
80
+ }, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
77
81
  className: contentRelaxedClass
78
- }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
82
+ }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, {
83
+ hasContentMargin: hasLeftContentMargin
84
+ }, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
79
85
  });
80
86
  };
81
87
  export var buttonConfig = {
@@ -35,10 +35,16 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
35
35
  })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
36
36
  export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
37
37
  componentId: "plasma-new-hope__sc-9d9bqj-5"
38
- })(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonLeftContentMargin, tokens.buttonLeftContentAlignSelf);
38
+ })(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonLeftContentAlignSelf, function (_ref3) {
39
+ var hasContentMargin = _ref3.hasContentMargin;
40
+ return hasContentMargin ? "var(".concat(tokens.buttonLeftContentMargin, ")") : 0;
41
+ });
39
42
  export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
40
43
  componentId: "plasma-new-hope__sc-9d9bqj-6"
41
- })(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonRightContentMargin, tokens.buttonRightContentAlignSelf);
44
+ })(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonRightContentAlignSelf, function (_ref4) {
45
+ var hasContentMargin = _ref4.hasContentMargin;
46
+ return hasContentMargin ? "var(".concat(tokens.buttonRightContentMargin, ")") : 0;
47
+ });
42
48
  export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE:\n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
43
49
 
44
50
  // INFO: Для возможности переиспользования стилей в других компонентах
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
8
8
  # Button
9
9
  Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
10
10
 
11
- ## Button
12
11
  <Description name="Button" />
13
12
  <PropsTable name="Button" />
14
13
 
@@ -34,20 +33,13 @@ export function App() {
34
33
  <div>
35
34
  <Button text="Текст" />
36
35
 
37
- <Button text="Текст" contentLeft={<IconDownload />} />
36
+ <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
38
37
 
39
- <Button text="Текст" contentRight={<IconDownload />} />
40
-
41
- <Button contentLeft={<IconDownload />} />
38
+ <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
42
39
 
43
40
  <Button text="Текст" isLoading />
44
41
 
45
42
  <Button text="Текст" isLoading loader={<div>Loader...</div>} />
46
-
47
- <Button>
48
- <IconDownload />
49
- <span>Текст</span>
50
- </Button>
51
43
  </div>
52
44
  );
53
45
  }
@@ -56,7 +48,7 @@ export function App() {
56
48
  ## Примеры
57
49
 
58
50
  ### Размер кнопки
59
- Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
51
+ Размер кнопки задается с помощью свойства `size`:
60
52
 
61
53
  ```tsx live
62
54
  import React from 'react';
@@ -64,11 +56,13 @@ import { Button } from '@salutejs/{{ package }}';
64
56
 
65
57
  export function App() {
66
58
  return (
67
- <div>
59
+ <div>
68
60
  <Button text="Button" size="xl" />
69
61
  <Button text="Button" size="l" />
70
62
  <Button text="Button" size="m" />
71
63
  <Button text="Button" size="s" />
64
+ <Button text="Button" size="xs" />
65
+ <Button text="Button" size="xxs" />
72
66
  </div>
73
67
  );
74
68
  }
@@ -118,13 +112,17 @@ export function App() {
118
112
 
119
113
  ### Вид кнопки
120
114
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
115
+ + `"default"` – по умолчанию;
116
+ + `"accent"` – акцентная;
121
117
  + `"primary"` – основная;
122
118
  + `"secondary"` – вторичная;
119
+ + `"clear"` – без цветового сопровождения.
123
120
  + `"success"` – успешное завершение;
124
121
  + `"warning"` – предупреждение;
125
122
  + `"critical"` – ошибка;
126
- + `"checked"` – выбранное состояние;
127
- + `"clear"` – без цветового сопровождения.
123
+ + `"dark"` – темная;
124
+ + `"black"` – черная;
125
+ + `"white"` – белая.
128
126
 
129
127
  ```tsx live
130
128
  import React from 'react';
@@ -132,15 +130,18 @@ import { Button } from '@salutejs/{{ package }}';
132
130
 
133
131
  export function App() {
134
132
  return (
135
- <div>
133
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
134
+ <Button text="Кнопка" size="s" view="default" />
136
135
  <Button text="Кнопка" size="s" view="primary" />
136
+ <Button text="Кнопка" size="s" view="accent" />
137
137
  <Button text="Кнопка" size="s" view="secondary" />
138
+ <Button text="Кнопка" size="s" view="clear" />
138
139
  <Button text="Кнопка" size="s" view="success" />
139
140
  <Button text="Кнопка" size="s" view="warning" />
140
141
  <Button text="Кнопка" size="s" view="critical" />
141
- <Button text="Кнопка" size="s" view="checked" />
142
- <Button text="Кнопка" size="s" view="overlay" />
143
- <Button text="Кнопка" size="s" view="clear" />
142
+ <Button text="Кнопка" size="s" view="dark" />
143
+ <Button text="Кнопка" size="s" view="black" />
144
+ <Button text="Кнопка" size="s" view="white" />
144
145
  </div>
145
146
  );
146
147
  }
@@ -171,29 +172,6 @@ export function App() {
171
172
  }
172
173
  ```
173
174
 
174
- ### Квадратные и круглые кнопки
175
- Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
176
- используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
177
-
178
- По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
179
- **Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
180
-
181
- ```tsx live
182
- import React from 'react';
183
- import { Button } from '@salutejs/{{ package }}';
184
- import { IconDownload } from '@salutejs/plasma-icons';
185
-
186
- export function App() {
187
- return (
188
- <div>
189
- <Button contentLeft={<IconDownload color="inherit" />} />
190
-
191
- <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
192
- </div>
193
- );
194
- }
195
- ```
196
-
197
175
  ### Гиперссылка
198
176
  Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
199
177
 
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
44
44
  export function App() {
45
45
  return (
46
46
  <div>
47
+ <IconButton size="xl">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
47
50
  <IconButton size="l">
48
51
  <IconClose color="inherit" />
49
52
  </IconButton>
@@ -66,11 +69,12 @@ export function App() {
66
69
 
67
70
  Возможные значения свойства `view`:
68
71
  + `"default"` – по умолчанию;
72
+ + `"accent"` – акцентная;
69
73
  + `"secondary"` – вторичная;
74
+ + `"clear"` – без цветового сопровождения.
70
75
  + `"success"` – успешное завершение;
71
76
  + `"warning"` – предупреждение;
72
77
  + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
78
  + `"dark"` – темная;
75
79
  + `"black"` – черная;
76
80
  + `"white"` – белая.
@@ -82,13 +86,19 @@ import { IconClose } from '@salutejs/plasma-icons';
82
86
 
83
87
  export function App() {
84
88
  return (
85
- <div>
89
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
86
90
  <IconButton size="s" view="default">
87
91
  <IconClose color="inherit" />
88
92
  </IconButton>
93
+ <IconButton size="s" view="accent">
94
+ <IconClose color="inherit" />
95
+ </IconButton>
89
96
  <IconButton size="s" view="secondary">
90
97
  <IconClose color="inherit" />
91
98
  </IconButton>
99
+ <IconButton size="s" view="clear">
100
+ <IconClose color="inherit" />
101
+ </IconButton>
92
102
  <IconButton size="s" view="success">
93
103
  <IconClose color="inherit" />
94
104
  </IconButton>
@@ -98,9 +108,6 @@ export function App() {
98
108
  <IconButton size="s" view="critical">
99
109
  <IconClose color="inherit" />
100
110
  </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
111
  <IconButton size="s" view="dark">
105
112
  <IconClose color="inherit" />
106
113
  </IconButton>
@@ -128,7 +135,7 @@ import { IconClose } from '@salutejs/plasma-icons';
128
135
 
129
136
  export function App() {
130
137
  return (
131
- <div>
138
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
132
139
  <IconButton pin="square-square">
133
140
  <IconClose color="inherit" />
134
141
  </IconButton>
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
16
16
  component: IconButton,
17
17
  argTypes: {
18
18
  ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ ...disableProps(['focused']),
19
20
  pin: {
20
21
  options: [
21
22
  'square-square',
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
16
16
  component: IconButton,
17
17
  argTypes: {
18
18
  ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ ...disableProps(['focused']),
19
20
  pin: {
20
21
  options: [
21
22
  'square-square',
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA8B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA4BlC,CAAC"}
1
+ {"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA8B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA4BlC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,uGA0EpE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBA5EQ,UAAU,iBAAiB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GzE,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,uGAgFpE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAlFQ,UAAU,iBAAiB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHzE,CAAC"}
@@ -22,8 +22,12 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
22
22
  size?: undefined;
23
23
  view?: string | undefined;
24
24
  } & import("react").RefAttributes<HTMLDivElement>))>;
25
- export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
26
- export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
25
+ export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
26
+ hasContentMargin?: boolean | undefined;
27
+ }>;
28
+ export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
29
+ hasContentMargin?: boolean | undefined;
30
+ }>;
27
31
  export declare const base: import("@linaria/core").LinariaClassName;
28
32
  export declare const baseContent: string;
29
33
  //# sourceMappingURL=Button.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAI7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAI9B,CAAC;AAEF,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
1
+ {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;EAK7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;EAK9B,CAAC;AAEF,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
@@ -51,8 +51,7 @@ declare type CustomButtonProps = {
51
51
  loader?: ReactNode;
52
52
  /**
53
53
  * Кнопка растягивается на всю доступную ширину
54
- * @deprecated
55
- * Использовать stretching
54
+ * @deprecated Использовать stretching
56
55
  */
57
56
  stretch?: boolean;
58
57
  /**
@@ -66,8 +65,7 @@ declare type CustomButtonProps = {
66
65
  stretching?: Stretching;
67
66
  /**
68
67
  * Кнопка принимает соотношение сторон 1:1
69
- * @deprecated
70
- * Использовать для этого случая IconButton
68
+ * @deprecated Использовать для этого случая IconButton
71
69
  */
72
70
  square?: boolean;
73
71
  /**
@@ -75,7 +73,7 @@ declare type CustomButtonProps = {
75
73
  */
76
74
  focused?: boolean;
77
75
  /**
78
- * кнопка неактивна
76
+ * Кнопка неактивна
79
77
  */
80
78
  disabled?: boolean;
81
79
  /**
@@ -92,8 +90,7 @@ declare type CustomButtonProps = {
92
90
  size?: string;
93
91
  /**
94
92
  * Добавить рамку при фокусе
95
- * @deprecated
96
- * использовать focused
93
+ * @deprecated использовать focused
97
94
  */
98
95
  outlined?: boolean;
99
96
  /**
@@ -108,8 +105,7 @@ declare type CustomButtonProps = {
108
105
  shiftRight?: boolean;
109
106
  /**
110
107
  * Степень размытия фона
111
- * @deprecated
112
- * для кнопок без прозрачности не работает
108
+ * @deprecated для кнопок без прозрачности не работает
113
109
  */
114
110
  blur?: Blur;
115
111
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAClF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACrC,OAAO,GACP,iBAAiB,GACjB,YAAY,CAAC"}
1
+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAClF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACrC,OAAO,GACP,iBAAiB,GACjB,YAAY,CAAC"}
@@ -1,2 +0,0 @@
1
- .s15ptif0{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
2
- .shuaj1a{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
@@ -1,2 +0,0 @@
1
- .s15ptif0{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
2
- .shuaj1a{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}