@salutejs/plasma-new-hope 0.142.0-canary.1428.10806066547.0 → 0.142.1-canary.1429.10825691560.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -4
- package/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.css +16 -15
- package/cjs/components/Badge/Badge.css +2 -0
- package/cjs/components/Badge/Badge.js +12 -3
- package/cjs/components/Badge/Badge.js.map +1 -1
- package/cjs/components/Badge/Badge.tokens.js +3 -1
- package/cjs/components/Badge/Badge.tokens.js.map +1 -1
- package/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/cjs/components/Badge/variations/_clear/base.js.map +1 -0
- package/cjs/components/Badge/variations/_clear/base_oopyb7.css +1 -0
- package/cjs/components/Badge/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Badge/variations/_transparent/base.js.map +1 -1
- package/cjs/components/Calendar/Calendar.types.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/cjs/components/Calendar/hooks/useMonths.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/cjs/components/Calendar/utils/constants.js +3 -64
- package/cjs/components/Calendar/utils/constants.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +16 -15
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +16 -15
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +16 -15
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +16 -15
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -15
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +16 -15
- package/cjs/components/Range/Range.css +16 -15
- package/cjs/components/Slider/Slider.css +16 -15
- package/cjs/components/Slider/components/Double/Double.css +16 -15
- package/cjs/components/TextField/TextField.js +1 -1
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +22 -11
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_u6pm7v.css → TextField.styles_ht6ibd.css} +5 -4
- package/cjs/components/TextField/TextField.tokens.js +5 -1
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/{es/components/TextField/variations/_label-placement/base_1dbnupp.css → cjs/components/TextField/variations/_label-placement/base_6k17xp.css} +1 -1
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/{es/components/TextField/variations/_read-only/base_4tqave.css → cjs/components/TextField/variations/_read-only/base_8onybn.css} +1 -1
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/{es/components/TextField/variations/_size/base_uk56yo.css → cjs/components/TextField/variations/_size/base_1h8l0kj.css} +1 -1
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/{base_uszjx8.css → base_1ph5cr0.css} +1 -1
- package/cjs/index.css +18 -15
- package/emotion/cjs/components/Badge/Badge.js +12 -3
- package/emotion/cjs/components/Badge/Badge.template-doc.mdx +19 -28
- package/emotion/cjs/components/Badge/Badge.tokens.js +3 -1
- package/emotion/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/emotion/cjs/components/Badge/variations/_clear/tokens.json +1 -0
- package/emotion/cjs/components/Badge/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Badge/variations/_transparent/base.js +1 -1
- package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/emotion/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/emotion/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/emotion/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/emotion/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/emotion/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/emotion/cjs/components/Calendar/utils/constants.js +4 -68
- package/emotion/cjs/components/TextField/TextField.js +2 -2
- package/emotion/cjs/components/TextField/TextField.styles.js +27 -23
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/cjs/components/TextField/TextField.tokens.js +5 -1
- package/emotion/cjs/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +15 -12
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/emotion/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/emotion/cjs/examples/plasma_web/components/Badge/Badge.config.js +15 -12
- package/emotion/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/emotion/es/components/Badge/Badge.js +12 -3
- package/emotion/es/components/Badge/Badge.template-doc.mdx +19 -28
- package/emotion/es/components/Badge/Badge.tokens.js +3 -1
- package/emotion/es/components/Badge/variations/_clear/base.js +3 -0
- package/emotion/es/components/Badge/variations/_clear/tokens.json +1 -0
- package/emotion/es/components/Badge/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Badge/variations/_transparent/base.js +1 -1
- package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/emotion/es/components/Calendar/hooks/useMonths.js +4 -6
- package/emotion/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/emotion/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/emotion/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/emotion/es/components/Calendar/utils/constants.js +3 -67
- package/emotion/es/components/TextField/TextField.js +2 -2
- package/emotion/es/components/TextField/TextField.styles.js +27 -23
- package/emotion/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/es/components/TextField/TextField.tokens.js +5 -1
- package/emotion/es/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +15 -12
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/emotion/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/emotion/es/examples/plasma_web/components/Badge/Badge.config.js +15 -12
- package/emotion/es/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/es/_virtual/_rollupPluginBabelHelpers.js +1 -4
- package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/es/components/Autocomplete/Autocomplete.css +16 -15
- package/es/components/Badge/Badge.css +2 -0
- package/es/components/Badge/Badge.js +12 -3
- package/es/components/Badge/Badge.js.map +1 -1
- package/es/components/Badge/Badge.tokens.js +3 -1
- package/es/components/Badge/Badge.tokens.js.map +1 -1
- package/es/components/Badge/variations/_clear/base.js +5 -0
- package/es/components/Badge/variations/_clear/base.js.map +1 -0
- package/es/components/Badge/variations/_clear/base_oopyb7.css +1 -0
- package/es/components/Badge/variations/_pilled/base.js.map +1 -1
- package/es/components/Badge/variations/_transparent/base.js.map +1 -1
- package/es/components/Calendar/Calendar.types.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/Calendar/hooks/useMonths.js +4 -6
- package/es/components/Calendar/hooks/useMonths.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/es/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/es/components/Calendar/utils/constants.js +4 -64
- package/es/components/Calendar/utils/constants.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.css +16 -15
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +16 -15
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +16 -15
- package/es/components/DatePicker/RangeDate/RangeDate.css +16 -15
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -15
- package/es/components/DatePicker/SingleDate/SingleDate.css +16 -15
- package/es/components/Range/Range.css +16 -15
- package/es/components/Slider/Slider.css +16 -15
- package/es/components/Slider/components/Double/Double.css +16 -15
- package/es/components/TextField/TextField.js +1 -1
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +22 -11
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_u6pm7v.css → TextField.styles_ht6ibd.css} +5 -4
- package/es/components/TextField/TextField.tokens.js +5 -1
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/{cjs/components/TextField/variations/_label-placement/base_1dbnupp.css → es/components/TextField/variations/_label-placement/base_6k17xp.css} +1 -1
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/{cjs/components/TextField/variations/_read-only/base_4tqave.css → es/components/TextField/variations/_read-only/base_8onybn.css} +1 -1
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/{cjs/components/TextField/variations/_size/base_uk56yo.css → es/components/TextField/variations/_size/base_1h8l0kj.css} +1 -1
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/{base_uszjx8.css → base_1ph5cr0.css} +1 -1
- package/es/index.css +18 -15
- package/package.json +2 -2
- package/styled-components/cjs/components/Badge/Badge.js +12 -3
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +19 -28
- package/styled-components/cjs/components/Badge/Badge.tokens.js +3 -1
- package/styled-components/cjs/components/Badge/variations/_clear/base.js +9 -0
- package/styled-components/cjs/components/Badge/variations/_clear/tokens.json +1 -0
- package/styled-components/cjs/components/Badge/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Badge/variations/_transparent/base.js +1 -1
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/styled-components/cjs/components/Calendar/hooks/useMonths.js +4 -6
- package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/styled-components/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/styled-components/cjs/components/Calendar/utils/constants.js +4 -68
- package/styled-components/cjs/components/TextField/TextField.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.styles.js +12 -9
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -1
- package/styled-components/cjs/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +10 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +10 -7
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/styled-components/es/components/Badge/Badge.js +12 -3
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +19 -28
- package/styled-components/es/components/Badge/Badge.tokens.js +3 -1
- package/styled-components/es/components/Badge/variations/_clear/base.js +3 -0
- package/styled-components/es/components/Badge/variations/_clear/tokens.json +1 -0
- package/styled-components/es/components/Badge/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Badge/variations/_transparent/base.js +1 -1
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +4 -9
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +2 -9
- package/styled-components/es/components/Calendar/hooks/useMonths.js +4 -6
- package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -3
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -4
- package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -4
- package/styled-components/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/styled-components/es/components/Calendar/utils/constants.js +3 -67
- package/styled-components/es/components/TextField/TextField.js +1 -1
- package/styled-components/es/components/TextField/TextField.styles.js +12 -9
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/TextField/TextField.tokens.js +5 -1
- package/styled-components/es/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +10 -7
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +38 -6
- package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +1 -9
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +10 -7
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +39 -6
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +4 -4
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Badge/Badge.d.ts +7 -23
- package/types/components/Badge/Badge.d.ts.map +1 -1
- package/types/components/Badge/Badge.tokens.d.ts +2 -0
- package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +52 -13
- package/types/components/Badge/Badge.types.d.ts.map +1 -1
- package/types/components/Badge/variations/_clear/base.d.ts +2 -0
- package/types/components/Badge/variations/_clear/base.d.ts.map +1 -0
- package/types/components/Calendar/Calendar.types.d.ts +0 -5
- package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/Calendar/hooks/types.d.ts +1 -2
- package/types/components/Calendar/hooks/types.d.ts.map +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts +1 -2
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts.map +1 -1
- package/types/components/Calendar/utils/calendarGridHelper.d.ts.map +1 -1
- package/types/components/Calendar/utils/constants.d.ts +5 -8
- package/types/components/Calendar/utils/constants.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +4 -4
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +4 -4
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +4 -4
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +4 -4
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +6 -2
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +3 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +2 -1
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +32 -3
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -4
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts +3 -0
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +32 -3
- package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -4
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
@@ -28,24 +28,27 @@ var InputPlaceholder = exports.InputPlaceholder = /*#__PURE__*/_styledComponents
|
|
28
28
|
var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
|
29
29
|
componentId: "plasma-new-hope__sc-g4vxbb-6"
|
30
30
|
})(["position:relative;display:inline-flex;"]);
|
31
|
-
var
|
31
|
+
var StyledContentSlot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
32
32
|
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
33
|
-
})(["
|
34
|
-
var
|
33
|
+
})(["color:var(", ");line-height:0;"], _TextField.tokens.contentSlotColor);
|
34
|
+
var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/(0, _styledComponents["default"])(StyledContentSlot).withConfig({
|
35
35
|
componentId: "plasma-new-hope__sc-g4vxbb-8"
|
36
|
-
})(["margin:var(", ");
|
37
|
-
var
|
36
|
+
})(["margin:var(", ");"], _TextField.tokens.leftContentMargin);
|
37
|
+
var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/(0, _styledComponents["default"])(StyledContentSlot).withConfig({
|
38
38
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
39
|
+
})(["margin:var(", ");&:hover{color:var(", ");cursor:pointer;}&:active{color:var(", ");}"], _TextField.tokens.rightContentMargin, _TextField.tokens.contentSlotColorHover, _TextField.tokens.contentSlotColorActive);
|
40
|
+
var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
41
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
39
42
|
})([""]);
|
40
43
|
var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
41
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
44
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
42
45
|
})([""]);
|
43
46
|
var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
44
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
47
|
+
componentId: "plasma-new-hope__sc-g4vxbb-12"
|
45
48
|
})([""]);
|
46
49
|
var StyledOptionalText = exports.StyledOptionalText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
47
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
50
|
+
componentId: "plasma-new-hope__sc-g4vxbb-13"
|
48
51
|
})(["color:var(", ");"], _TextField.tokens.optionalColor);
|
49
52
|
var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
50
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
53
|
+
componentId: "plasma-new-hope__sc-g4vxbb-14"
|
51
54
|
})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextField.tokens.indicatorColor, _TextField.classes.outerLabelPlacement, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorLabelPlacementOuter, _TextField.tokens.indicatorLabelPlacementOuterRight, _TextField.classes.innerLabelPlacement, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorLabelPlacementInner, _TextField.tokens.indicatorLabelPlacementInnerRight);
|
@@ -24,12 +24,12 @@ export function App() {
|
|
24
24
|
<TextField
|
25
25
|
placeholder="Положение иконки"
|
26
26
|
defaultValue="Слева"
|
27
|
-
contentLeft={<IconDownload />}
|
27
|
+
contentLeft={<IconDownload color="inherit" />}
|
28
28
|
/>
|
29
29
|
<TextField
|
30
30
|
placeholder="Положение иконки"
|
31
31
|
defaultValue="Справа"
|
32
|
-
contentRight={<IconDownload />}
|
32
|
+
contentRight={<IconDownload color="inherit" />}
|
33
33
|
/>
|
34
34
|
</div>
|
35
35
|
);
|
@@ -37,7 +37,7 @@ var tokens = exports.tokens = {
|
|
37
37
|
/** Отступ от границы ТextField */
|
38
38
|
padding: '--plasma-textfield-padding',
|
39
39
|
paddingWithChips: '--plasma-textfield-padding-with-chips',
|
40
|
-
/* Токены для
|
40
|
+
/* Токены для input */
|
41
41
|
leftContentMargin: '--plasma-textfield__left-content-margin',
|
42
42
|
rightContentMargin: '--plasma-textfield__right-content-margin',
|
43
43
|
fontFamily: '--plasma-textfield-font-family',
|
@@ -46,6 +46,10 @@ var tokens = exports.tokens = {
|
|
46
46
|
fontWeight: '--plasma-textfield-font-weight',
|
47
47
|
letterSpacing: '--plasma-textfield-letter-spacing',
|
48
48
|
lineHeight: '--plasma-textfield-line-height',
|
49
|
+
/* Tokens for content slot */
|
50
|
+
contentSlotColor: '--plasma-textfield-content-slot-color',
|
51
|
+
contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
|
52
|
+
contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
|
49
53
|
/** Токены лейбла */
|
50
54
|
labelColor: '--plasma-textfield__label-color',
|
51
55
|
labelColorReadOnly: '--plasma-textfield__label-color-readonly',
|
@@ -34,7 +34,7 @@ export function App() {
|
|
34
34
|
### Размер
|
35
35
|
Размер TextFieldGroup задается с помощью свойства `size`.
|
36
36
|
С помощью свойства `isCommonTextFieldStyles` можно отключить переопределение стилей для всех input внутри группы.
|
37
|
-
Тогда
|
37
|
+
Тогда каждый input будет иметь настраиваемый размер.
|
38
38
|
|
39
39
|
```tsx live
|
40
40
|
import React from 'react';
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
21
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
22
|
-
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
21
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
22
|
+
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
|
23
23
|
},
|
24
24
|
size: {
|
25
25
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
|
@@ -31,6 +31,9 @@ var config = exports.config = {
|
|
31
31
|
},
|
32
32
|
transparent: {
|
33
33
|
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
|
+
},
|
35
|
+
clear: {
|
36
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
37
|
}
|
35
38
|
}
|
36
39
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
2
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
|
@@ -23,13 +23,25 @@ const meta: Meta<typeof Badge> = {
|
|
23
23
|
type: 'select',
|
24
24
|
},
|
25
25
|
},
|
26
|
+
pilled: {
|
27
|
+
control: { type: 'boolean' },
|
28
|
+
if: { arg: 'clear', truthy: false },
|
29
|
+
},
|
30
|
+
transparent: {
|
31
|
+
control: { type: 'boolean' },
|
32
|
+
if: { arg: 'clear', truthy: false },
|
33
|
+
},
|
26
34
|
...disableProps(['contentLeft', 'contentRight']),
|
27
35
|
},
|
28
36
|
};
|
29
37
|
|
30
38
|
export default meta;
|
31
39
|
|
32
|
-
type
|
40
|
+
type StoryProps = ComponentProps<typeof Badge> & {
|
41
|
+
enableContentLeft: boolean;
|
42
|
+
enableContentRight: boolean;
|
43
|
+
};
|
44
|
+
type Story = StoryObj<StoryProps>;
|
33
45
|
|
34
46
|
const BellIcon = (props) => (
|
35
47
|
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
@@ -41,16 +53,36 @@ const BellIcon = (props) => (
|
|
41
53
|
);
|
42
54
|
|
43
55
|
export const Default: Story = {
|
56
|
+
argTypes: {
|
57
|
+
enableContentLeft: {
|
58
|
+
control: { type: 'boolean' },
|
59
|
+
if: { arg: 'enableContentRight', truthy: false },
|
60
|
+
},
|
61
|
+
enableContentRight: {
|
62
|
+
control: { type: 'boolean' },
|
63
|
+
if: { arg: 'enableContentLeft', truthy: false },
|
64
|
+
},
|
65
|
+
},
|
44
66
|
args: {
|
45
67
|
text: 'Hello',
|
46
68
|
view: 'default',
|
47
69
|
size: 'm',
|
70
|
+
enableContentLeft: false,
|
71
|
+
enableContentRight: false,
|
72
|
+
clear: false,
|
48
73
|
pilled: false,
|
49
74
|
transparent: false,
|
50
75
|
},
|
51
|
-
}
|
76
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
77
|
+
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
52
78
|
|
53
|
-
|
54
|
-
|
55
|
-
|
79
|
+
return (
|
80
|
+
<Badge
|
81
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
82
|
+
contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
83
|
+
size={size}
|
84
|
+
{...rest}
|
85
|
+
/>
|
86
|
+
);
|
87
|
+
},
|
56
88
|
};
|
@@ -32,12 +32,6 @@ const meta: Meta<typeof CalendarBase> = {
|
|
32
32
|
type: 'inline-radio',
|
33
33
|
},
|
34
34
|
},
|
35
|
-
local: {
|
36
|
-
options: ['ru', 'eng'],
|
37
|
-
control: {
|
38
|
-
type: 'select',
|
39
|
-
},
|
40
|
-
},
|
41
35
|
},
|
42
36
|
};
|
43
37
|
|
@@ -81,7 +75,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
|
|
81
75
|
};
|
82
76
|
|
83
77
|
const StoryDefault = (args: CalendarProps) => {
|
84
|
-
const { isRange, isDouble, min, max, date, includeEdgeDates, size
|
78
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
|
85
79
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
86
80
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
87
81
|
|
@@ -103,7 +97,6 @@ const StoryDefault = (args: CalendarProps) => {
|
|
103
97
|
min={min}
|
104
98
|
max={max}
|
105
99
|
includeEdgeDates={includeEdgeDates}
|
106
|
-
local={local}
|
107
100
|
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
|
108
101
|
/>
|
109
102
|
);
|
@@ -117,7 +110,6 @@ export const Default: StoryObj<CalendarProps> = {
|
|
117
110
|
isRange: false,
|
118
111
|
includeEdgeDates: false,
|
119
112
|
size: 'm',
|
120
|
-
local: 'ru',
|
121
113
|
},
|
122
114
|
render: (args) => <StoryDefault {...args} />,
|
123
115
|
};
|
@@ -14,10 +14,10 @@ var config = exports.config = {
|
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
|
21
21
|
},
|
22
22
|
size: {
|
23
23
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
|
package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx
CHANGED
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { WithTheme } from '../../../_helpers';
|
7
|
+
import { IconCross } from '../../../../components/_Icon';
|
7
8
|
|
8
9
|
import { TextField } from './TextField';
|
9
10
|
|
@@ -103,8 +104,8 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
|
|
103
104
|
{...rest}
|
104
105
|
enumerationType="plain"
|
105
106
|
value={text}
|
106
|
-
contentLeft={enableContentLeft ? <
|
107
|
-
contentRight={enableContentRight ? <
|
107
|
+
contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
|
108
|
+
contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
|
108
109
|
view={view}
|
109
110
|
onChange={(e) => {
|
110
111
|
setText(e.target.value);
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
21
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
22
|
-
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
21
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
|
22
|
+
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
|
23
23
|
},
|
24
24
|
size: {
|
25
25
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
|
@@ -31,6 +31,9 @@ var config = exports.config = {
|
|
31
31
|
},
|
32
32
|
transparent: {
|
33
33
|
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
|
+
},
|
35
|
+
clear: {
|
36
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
34
37
|
}
|
35
38
|
}
|
36
39
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
2
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
|
@@ -8,6 +8,7 @@ import { Badge } from './Badge';
|
|
8
8
|
|
9
9
|
const meta: Meta<typeof Badge> = {
|
10
10
|
title: 'plasma_web/Badge',
|
11
|
+
component: Badge,
|
11
12
|
decorators: [WithTheme],
|
12
13
|
argTypes: {
|
13
14
|
size: {
|
@@ -22,13 +23,25 @@ const meta: Meta<typeof Badge> = {
|
|
22
23
|
type: 'select',
|
23
24
|
},
|
24
25
|
},
|
26
|
+
pilled: {
|
27
|
+
control: { type: 'boolean' },
|
28
|
+
if: { arg: 'clear', truthy: false },
|
29
|
+
},
|
30
|
+
transparent: {
|
31
|
+
control: { type: 'boolean' },
|
32
|
+
if: { arg: 'clear', truthy: false },
|
33
|
+
},
|
25
34
|
...disableProps(['contentLeft', 'contentRight']),
|
26
35
|
},
|
27
36
|
};
|
28
37
|
|
29
38
|
export default meta;
|
30
39
|
|
31
|
-
type
|
40
|
+
type StoryProps = ComponentProps<typeof Badge> & {
|
41
|
+
enableContentLeft: boolean;
|
42
|
+
enableContentRight: boolean;
|
43
|
+
};
|
44
|
+
type Story = StoryObj<StoryProps>;
|
32
45
|
|
33
46
|
const BellIcon = (props) => (
|
34
47
|
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
@@ -40,16 +53,36 @@ const BellIcon = (props) => (
|
|
40
53
|
);
|
41
54
|
|
42
55
|
export const Default: Story = {
|
56
|
+
argTypes: {
|
57
|
+
enableContentLeft: {
|
58
|
+
control: { type: 'boolean' },
|
59
|
+
if: { arg: 'enableContentRight', truthy: false },
|
60
|
+
},
|
61
|
+
enableContentRight: {
|
62
|
+
control: { type: 'boolean' },
|
63
|
+
if: { arg: 'enableContentLeft', truthy: false },
|
64
|
+
},
|
65
|
+
},
|
43
66
|
args: {
|
44
67
|
text: 'Hello',
|
45
68
|
view: 'default',
|
46
69
|
size: 'm',
|
70
|
+
enableContentLeft: false,
|
71
|
+
enableContentRight: false,
|
72
|
+
clear: false,
|
47
73
|
pilled: false,
|
48
74
|
transparent: false,
|
49
75
|
},
|
50
|
-
}
|
76
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
77
|
+
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
51
78
|
|
52
|
-
|
53
|
-
|
54
|
-
|
79
|
+
return (
|
80
|
+
<Badge
|
81
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
82
|
+
contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
|
83
|
+
size={size}
|
84
|
+
{...rest}
|
85
|
+
/>
|
86
|
+
);
|
87
|
+
},
|
55
88
|
};
|
@@ -14,10 +14,10 @@ var config = exports.config = {
|
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
20
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
18
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
19
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
|
20
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
|
21
21
|
},
|
22
22
|
size: {
|
23
23
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
|
package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx
CHANGED
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { WithTheme } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
7
8
|
|
8
9
|
import { TextField } from './TextField';
|
9
10
|
|
@@ -185,7 +186,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
|
|
185
186
|
{...rest}
|
186
187
|
enumerationType="chip"
|
187
188
|
value={text}
|
188
|
-
contentLeft={enableContentLeft ? <
|
189
|
+
contentLeft={enableContentLeft ? <IconChevronLeft color="inherit" size={iconSize} /> : undefined}
|
189
190
|
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
190
191
|
view={view}
|
191
192
|
onChange={(e) => {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent"];
|
1
|
+
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -8,6 +8,7 @@ import { base as viewCSS } from './variations/_view/base';
|
|
8
8
|
import { base as sizeCSS } from './variations/_size/base';
|
9
9
|
import { base as pilledCSS } from './variations/_pilled/base';
|
10
10
|
import { base as transparentCSS } from './variations/_transparent/base';
|
11
|
+
import { base as clearCSS } from './variations/_clear/base';
|
11
12
|
import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
|
12
13
|
import { classes } from './Badge.tokens';
|
13
14
|
export var badgeRoot = function badgeRoot(Root) {
|
@@ -23,17 +24,21 @@ export var badgeRoot = function badgeRoot(Root) {
|
|
23
24
|
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
24
25
|
_props$transparent = props.transparent,
|
25
26
|
transparent = _props$transparent === void 0 ? false : _props$transparent,
|
27
|
+
_props$clear = props.clear,
|
28
|
+
clear = _props$clear === void 0 ? false : _props$clear,
|
26
29
|
rest = _objectWithoutProperties(props, _excluded);
|
27
30
|
var pilledClass = pilled ? classes.badgePilled : undefined;
|
28
31
|
var transparentClass = transparent ? classes.badgeTransparent : undefined;
|
32
|
+
var clearClass = clear ? classes.badgeClear : undefined;
|
29
33
|
var txt = !text && typeof children === 'string' ? children : text;
|
30
34
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
31
35
|
ref: ref,
|
32
|
-
className: cx(pilledClass, transparentClass, className),
|
36
|
+
className: cx(pilledClass, transparentClass, clearClass, className),
|
33
37
|
view: view,
|
34
38
|
size: size,
|
35
39
|
pilled: pilled,
|
36
|
-
transparent: transparent
|
40
|
+
transparent: transparent,
|
41
|
+
clear: clear
|
37
42
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
38
43
|
});
|
39
44
|
};
|
@@ -56,6 +61,10 @@ export var badgeConfig = {
|
|
56
61
|
transparent: {
|
57
62
|
css: transparentCSS,
|
58
63
|
attrs: true
|
64
|
+
},
|
65
|
+
clear: {
|
66
|
+
css: clearCSS,
|
67
|
+
attrs: true
|
59
68
|
}
|
60
69
|
},
|
61
70
|
defaults: {
|