@salutejs/plasma-new-hope 0.141.2-canary.1429.10810544899.0 → 0.142.0-canary.1424.10789422667.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +15 -16
- 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/Combobox/ComboboxNew/Combobox.css +15 -16
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +15 -16
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +15 -16
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +15 -16
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +15 -16
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +15 -16
- package/cjs/components/Range/Range.css +15 -16
- package/cjs/components/Slider/Slider.css +15 -16
- package/cjs/components/Slider/components/Double/Double.css +15 -16
- package/cjs/components/TextField/TextField.js +1 -1
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +11 -22
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_ht6ibd.css → TextField.styles_u6pm7v.css} +4 -5
- package/cjs/components/TextField/TextField.tokens.js +1 -5
- 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_6k17xp.css → cjs/components/TextField/variations/_label-placement/base_1dbnupp.css} +1 -1
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/{es/components/TextField/variations/_read-only/base_8onybn.css → cjs/components/TextField/variations/_read-only/base_4tqave.css} +1 -1
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/{es/components/TextField/variations/_size/base_1h8l0kj.css → cjs/components/TextField/variations/_size/base_uk56yo.css} +1 -1
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/{base_1ph5cr0.css → base_uszjx8.css} +1 -1
- package/cjs/index.css +17 -16
- 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/TextField/TextField.js +2 -2
- package/emotion/cjs/components/TextField/TextField.styles.js +23 -27
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/cjs/components/TextField/TextField.tokens.js +1 -5
- 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/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -3
- 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 +1 -2
- 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/TextField/TextField.js +2 -2
- package/emotion/es/components/TextField/TextField.styles.js +23 -27
- package/emotion/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/es/components/TextField/TextField.tokens.js +1 -5
- 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/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -3
- 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 +1 -2
- package/es/components/Autocomplete/Autocomplete.css +15 -16
- 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/Combobox/ComboboxNew/Combobox.css +15 -16
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +15 -16
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +15 -16
- package/es/components/DatePicker/RangeDate/RangeDate.css +15 -16
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +15 -16
- package/es/components/DatePicker/SingleDate/SingleDate.css +15 -16
- package/es/components/Range/Range.css +15 -16
- package/es/components/Slider/Slider.css +15 -16
- package/es/components/Slider/components/Double/Double.css +15 -16
- package/es/components/TextField/TextField.js +1 -1
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +11 -22
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_ht6ibd.css → TextField.styles_u6pm7v.css} +4 -5
- package/es/components/TextField/TextField.tokens.js +1 -5
- 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_6k17xp.css → es/components/TextField/variations/_label-placement/base_1dbnupp.css} +1 -1
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/{cjs/components/TextField/variations/_read-only/base_8onybn.css → es/components/TextField/variations/_read-only/base_4tqave.css} +1 -1
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/{cjs/components/TextField/variations/_size/base_1h8l0kj.css → es/components/TextField/variations/_size/base_uk56yo.css} +1 -1
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/{base_1ph5cr0.css → base_uszjx8.css} +1 -1
- package/es/index.css +17 -16
- 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/TextField/TextField.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.styles.js +9 -12
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/TextField/TextField.tokens.js +1 -5
- 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/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -3
- 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 +1 -2
- 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/TextField/TextField.js +1 -1
- package/styled-components/es/components/TextField/TextField.styles.js +9 -12
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/TextField/TextField.tokens.js +1 -5
- 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/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -3
- 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 +1 -2
- 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 +60 -9
- 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/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 +2 -6
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +0 -3
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +1 -2
- 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
package/es/index.css
CHANGED
@@ -122,31 +122,30 @@
|
|
122
122
|
|
123
123
|
.TextArea_ob9y3r_b6rykm0__6e3f706d{position:relative;box-sizing:border-box;}.TextArea_ob9y3r_b6rykm0__6e3f706d .TextArea_ob9y3r_innerPlaceholderUp__6e3f706d .TextArea_ob9y3r_textarea__6e3f706d{height:calc(var(--plasma_private-textarea-input-actual-height) - var(--plasma-textarea-label-inner-top));}.TextArea_ob9y3r_b6rykm0__6e3f706d .TextArea_ob9y3r_innerPlaceholderUp__6e3f706d .TextArea_ob9y3r_textareaWrapper__6e3f706d{padding-top:calc(calc(var(--plasma-textarea-label-inner-top) + var(--plasma-textarea-label-inner-font-size)) + var(--plasma-textarea-label-inner-margin-bottom));}.TextArea_ob9y3r_b6rykm0__6e3f706d .TextArea_ob9y3r_innerPlaceholderUp__6e3f706d .TextArea_ob9y3r_textareaPlaceholder__6e3f706d{font-family:var(--plasma-textarea-label-inner-font-family);font-size:var(--plasma-textarea-label-inner-font-size);font-style:var(--plasma-textarea-label-inner-font-style);font-weight:var(--plasma-textarea-label-inner-font-weight);-webkit-letter-spacing:var(--plasma-textarea-label-inner-letter-spacing);-moz-letter-spacing:var(--plasma-textarea-label-inner-letter-spacing);-ms-letter-spacing:var(--plasma-textarea-label-inner-letter-spacing);letter-spacing:var(--plasma-textarea-label-inner-letter-spacing);line-height:var(--plasma-textarea-label-inner-line-height);top:var(--plasma-textarea-label-inner-top);}.TextArea_ob9y3r_b6rykm0__6e3f706d .TextArea_ob9y3r_hidePlaceholder__6e3f706d .TextArea_ob9y3r_textareaPlaceholder__6e3f706d{display:none;}.TextArea_ob9y3r_b6rykm0__6e3f706d .TextArea_ob9y3r_focusedOuterPlaceholderColor__6e3f706d .TextArea_ob9y3r_textareaPlaceholder__6e3f706d{color:var(--plasma-textarea-placeholder-color-focus);}
|
124
124
|
|
125
|
-
.
|
125
|
+
.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_io4bpie__5ad04311{width:100%;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_i13qvwoy__5ad04311{width:100%;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_iq39zt5__5ad04311{height:var(--plasma-textfield-height);border-radius:var(--plasma-textfield-border-radius);padding:var(--plasma-textfield-padding);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_iq39zt5__5ad04311.base_uk56yo_hasChips__5ad04311{padding-top:var(--plasma-textfield-padding-with-chips);padding-bottom:var(--plasma-textfield-padding-with-chips);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_iq39zt5__5ad04311.base_uk56yo_hasEmptyContentLeft__5ad04311{padding-left:var(--plasma-textfield-padding-with-chips);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_iq39zt5__5ad04311.base_uk56yo_hasEmptyContentRight__5ad04311{padding-right:var(--plasma-textfield-padding-with-chips);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_lbt1ohz__5ad04311{font-family:var(--plasma-textfield__label-font-family);font-size:var(--plasma-textfield__label-font-size);font-style:var(--plasma-textfield__label-font-style);font-weight:var(--plasma-textfield__label-font-weight);-webkit-letter-spacing:var(--plasma-textfield__label-letter-spacing);-moz-letter-spacing:var(--plasma-textfield__label-letter-spacing);-ms-letter-spacing:var(--plasma-textfield__label-letter-spacing);letter-spacing:var(--plasma-textfield__label-letter-spacing);line-height:var(--plasma-textfield__label-line-height);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_luk2zst__5ad04311{margin-top:var(--plasma-textfield__left-helper-offset);font-family:var(--plasma-textfield__left-helper-font-family);font-size:var(--plasma-textfield__left-helper-font-size);font-style:var(--plasma-textfield__left-helper-font-style);font-weight:var(--plasma-textfield__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);line-height:var(--plasma-textfield__left-helper-line-height);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_s1gjsnfi__5ad04311,.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_ssv2kwg__5ad04311{font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_s1gjsnfi__5ad04311{margin:var(--plasma-textfield__before-text-margin);}.base_uk56yo_b13ve66i__5ad04311 .base_uk56yo_ssv2kwg__5ad04311{margin:var(--plasma-textfield__after-text-margin);}
|
126
126
|
|
127
|
-
.
|
127
|
+
.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_iq39zt5__89b91e11{--plasma_private-textfield-border-color:var(--plasma-textfield-border-color);--plasma_private-textfield-bg-color:var(--plasma-textfield-bg-color);color:var(--plasma-textfield-color);background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(--plasma-textfield-border-width) var(--plasma_private-textfield-border-color);caret-color:var(--plasma-textfield__caret-color);-webkit-transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_iq39zt5__89b91e11:hover{--plasma_private-textfield-border-color:var(--plasma-textfield-border-color-hover,var(--plasma-textfield-border-color));--plasma_private-textfield-bg-color:var( --plasma-textfield-bg-color-hover, var(--plasma-textfield-bg-color) );}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_iq39zt5__89b91e11:focus-within{--plasma_private-textfield-border-color:var(--plasma-textfield-border-color-focus,var(--plasma-textfield-border-color));--plasma_private-textfield-bg-color:var( --plasma-textfield-bg-color-focus, var(--plasma-textfield-bg-color) );}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_i19ry60d__89b91e11{color:var(--plasma-textfield__placeholder-color);}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_io4bpie__89b91e11{color:var(--plasma-textfield-color);}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_luk2zst__89b91e11{color:var(--plasma-textfield__left-helper-color);}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_s1gjsnfi__89b91e11{color:var(--plasma-textfield__before-text-color);}.base_uszjx8_bptx5xt__89b91e11 .base_uszjx8_ssv2kwg__89b91e11{color:var(--plasma-textfield__after-text-color);}
|
128
128
|
|
129
129
|
.base_1tnjoy9_b15zsg4z__de8f837b[disabled]{opacity:var(--plasma-textfield-disabled-opacity);cursor:not-allowed;}.base_1tnjoy9_b15zsg4z__de8f837b[disabled] .base_1tnjoy9_io4bpie__de8f837b{cursor:not-allowed;min-width:unset;}
|
130
130
|
|
131
|
-
.
|
131
|
+
.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_iq39zt5__04747393{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasma-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_iq39zt5__04747393:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_i19ry60d__04747393{color:var(--plasma-textfield__placeholder-color-readonly);}.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_io4bpie__04747393{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_luk2zst__04747393{color:var(--plasma-textfield__left-helper-color-readonly);}.base_4tqave_b1w985rt__04747393[readonly] .base_4tqave_lbt1ohz__04747393{color:var(--plasma-textfield__label-color-readonly);}
|
132
132
|
|
133
|
-
.
|
133
|
+
.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementOuter__218bc44d .base_1dbnupp_lbt1ohz__218bc44d{position:relative;display:inline-block;margin-bottom:var(--plasma-textfield__label-offset);color:var(--plasma-textfield__label-color);}.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_i13qvwoy__218bc44d{padding:var(--plasma-textfield-placement_inner__content-padding);}.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_ssv2kwg__218bc44d,.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_s1gjsnfi__218bc44d{padding:var(--plasma-textfield-placement_inner__content-padding);}.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_io4bpie__218bc44d:focus ~ .base_1dbnupp_lbt1ohz__218bc44d,.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_io4bpie__218bc44d.base_1dbnupp_hasValue__218bc44d ~ .base_1dbnupp_lbt1ohz__218bc44d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:var(--plasma-textfield-placement_inner__label-padding);font-family:var(--plasma-textfield-placement_inner__label-font-family);font-size:var(--plasma-textfield-placement_inner__label-font-size);font-style:var(--plasma-textfield-placement_inner__label-font-style);font-weight:var(--plasma-textfield-placement_inner__label-font-weight);-webkit-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);line-height:var(--plasma-textfield-placement_inner__label-line-height);}.base_1dbnupp_b15d3bnf__218bc44d.base_1dbnupp_labelPlacementInner__218bc44d .base_1dbnupp_lbt1ohz__218bc44d{color:var(--plasma-textfield__placeholder-color);pointer-events:none;position:absolute;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;height:var(--plasma-textfield-height);padding-top:calc(calc(var(--plasma-textfield-height) - var(--plasma-textfield__label-line-height)) / 2);padding-bottom:calc(calc(var(--plasma-textfield-height) - var(--plasma-textfield__label-line-height)) / 2);}
|
134
134
|
|
135
|
-
.
|
136
|
-
.
|
137
|
-
.
|
138
|
-
.
|
139
|
-
.
|
140
|
-
.
|
141
|
-
.
|
142
|
-
.
|
143
|
-
.
|
144
|
-
.TextField_styles_ht6ibd_suk2zst__613b88ea.TextField_styles_ht6ibd_slv9av6__613b88ea{margin:var(--plasma-textfield__right-content-margin);}.TextField_styles_ht6ibd_suk2zst__613b88ea.TextField_styles_ht6ibd_slv9av6__613b88ea:hover{color:var(--plasma-textfield-content-slot-color-hover);cursor:pointer;}.TextField_styles_ht6ibd_suk2zst__613b88ea.TextField_styles_ht6ibd_slv9av6__613b88ea:active{color:var(--plasma-textfield-content-slot-color-active);}
|
135
|
+
.TextField_styles_u6pm7v_iq39zt5__c8d76292{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
|
136
|
+
.TextField_styles_u6pm7v_i1j28rg8__c8d76292{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_u6pm7v_i1j28rg8__c8d76292::-webkit-scrollbar{display:none;}.TextField_styles_u6pm7v_i1j28rg8__c8d76292.TextField_styles_u6pm7v_hasChips__c8d76292{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
|
137
|
+
.TextField_styles_u6pm7v_s13zudoe__c8d76292{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
138
|
+
.TextField_styles_u6pm7v_io4bpie__c8d76292{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;}.TextField_styles_u6pm7v_io4bpie__c8d76292::-webkit-input-placeholder{opacity:0;}.TextField_styles_u6pm7v_io4bpie__c8d76292::-moz-placeholder{opacity:0;}.TextField_styles_u6pm7v_io4bpie__c8d76292:-ms-input-placeholder{opacity:0;}.TextField_styles_u6pm7v_io4bpie__c8d76292::placeholder{opacity:0;}
|
139
|
+
.TextField_styles_u6pm7v_i13qvwoy__c8d76292{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
|
140
|
+
.TextField_styles_u6pm7v_i19ry60d__c8d76292{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);}
|
141
|
+
.TextField_styles_u6pm7v_lbt1ohz__c8d76292{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
142
|
+
.TextField_styles_u6pm7v_slv9av6__c8d76292{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
|
143
|
+
.TextField_styles_u6pm7v_s600610__c8d76292{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
|
145
144
|
|
146
145
|
|
147
146
|
|
148
|
-
.
|
149
|
-
.
|
147
|
+
.TextField_styles_u6pm7v_s190z894__c8d76292{color:var(--plasma-textfield__optional-color);}
|
148
|
+
.TextField_styles_u6pm7v_sb3k3v1__c8d76292{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_u6pm7v_sb3k3v1__c8d76292.TextField_styles_u6pm7v_labelPlacementOuter__c8d76292{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_u6pm7v_sb3k3v1__c8d76292.TextField_styles_u6pm7v_labelPlacementOuter__c8d76292.TextField_styles_u6pm7v_alignRight__c8d76292{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_u6pm7v_sb3k3v1__c8d76292.TextField_styles_u6pm7v_labelPlacementInner__c8d76292{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_u6pm7v_sb3k3v1__c8d76292.TextField_styles_u6pm7v_labelPlacementInner__c8d76292.TextField_styles_u6pm7v_alignRight__c8d76292{inset:var(--plasma-textfield__indicator-placement-inner-right);}
|
150
149
|
|
151
150
|
.TextFieldChip_styles_1y8n7la_s32p7ut__8f291676{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding-right:var(--plasma-textfield__chip-padding-right);--plasma-chip-padding-left:var(--plasma-textfield__chip-padding-left);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-scale-hover:var(--plasma-textfield__chip-scale-hover);--plasma-chip-scale-active:var(--plasma-textfield__chip-scale-active);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);-webkit-scroll-snap-align:center;-moz-scroll-snap-align:center;-ms-scroll-snap-align:center;scroll-snap-align:center;-webkit-scroll-snap-stop:normal;-moz-scroll-snap-stop:normal;-ms-scroll-snap-stop:normal;scroll-snap-stop:normal;position:relative;}.TextFieldChip_styles_1y8n7la_s32p7ut__8f291676::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_1y8n7la_s32p7ut__8f291676.TextFieldChip_styles_1y8n7la_focusVisible__8f291676:focus::before,.TextFieldChip_styles_1y8n7la_s32p7ut__8f291676[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_1y8n7la_s32p7ut__8f291676[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
|
152
151
|
|
@@ -387,6 +386,8 @@
|
|
387
386
|
|
388
387
|
.base_1l6036y_binquhc__5cc72580.base_1l6036y_badgeTransparent__5cc72580{color:var(--plasma-badge-color-transparent);background-color:var(--plasma-badge-background-transparent);}
|
389
388
|
|
389
|
+
.base_oopyb7_b1e1wuvi__72387433.base_oopyb7_badgeClear__72387433{color:var(--plasma-badge-color-clear);background-color:transparent;padding:0;}
|
390
|
+
|
390
391
|
.Badge_styles_8pi3br_b1t43xoe__783e5f62{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;}
|
391
392
|
.Badge_styles_8pi3br_st1n7hr__783e5f62{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-badge-left-content-margin-left);margin-right:var(--plasma-badge-left-content-margin-right);}
|
392
393
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.142.0-canary.1424.10789422667.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -121,5 +121,5 @@
|
|
121
121
|
"react-popper": "2.3.0",
|
122
122
|
"storeon": "3.1.5"
|
123
123
|
},
|
124
|
-
"gitHead": "
|
124
|
+
"gitHead": "2e4cbacb4247fa29f99e04551b10f65391b99ee4"
|
125
125
|
}
|
@@ -11,9 +11,10 @@ var _base = /*#__PURE__*/require("./variations/_view/base");
|
|
11
11
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
12
12
|
var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
|
13
13
|
var _base4 = /*#__PURE__*/require("./variations/_transparent/base");
|
14
|
+
var _base5 = /*#__PURE__*/require("./variations/_clear/base");
|
14
15
|
var _Badge = /*#__PURE__*/require("./Badge.styles");
|
15
16
|
var _Badge2 = /*#__PURE__*/require("./Badge.tokens");
|
16
|
-
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent"];
|
17
|
+
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
|
17
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
18
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
19
20
|
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); }
|
@@ -32,17 +33,21 @@ var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
|
|
32
33
|
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
33
34
|
_props$transparent = props.transparent,
|
34
35
|
transparent = _props$transparent === void 0 ? false : _props$transparent,
|
36
|
+
_props$clear = props.clear,
|
37
|
+
clear = _props$clear === void 0 ? false : _props$clear,
|
35
38
|
rest = _objectWithoutProperties(props, _excluded);
|
36
39
|
var pilledClass = pilled ? _Badge2.classes.badgePilled : undefined;
|
37
40
|
var transparentClass = transparent ? _Badge2.classes.badgeTransparent : undefined;
|
41
|
+
var clearClass = clear ? _Badge2.classes.badgeClear : undefined;
|
38
42
|
var txt = !text && typeof children === 'string' ? children : text;
|
39
43
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
40
44
|
ref: ref,
|
41
|
-
className: (0, _utils.cx)(pilledClass, transparentClass, className),
|
45
|
+
className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, className),
|
42
46
|
view: view,
|
43
47
|
size: size,
|
44
48
|
pilled: pilled,
|
45
|
-
transparent: transparent
|
49
|
+
transparent: transparent,
|
50
|
+
clear: clear
|
46
51
|
}, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight));
|
47
52
|
});
|
48
53
|
};
|
@@ -65,6 +70,10 @@ var badgeConfig = exports.badgeConfig = {
|
|
65
70
|
transparent: {
|
66
71
|
css: _base4.base,
|
67
72
|
attrs: true
|
73
|
+
},
|
74
|
+
clear: {
|
75
|
+
css: _base5.base,
|
76
|
+
attrs: true
|
68
77
|
}
|
69
78
|
},
|
70
79
|
defaults: {
|
@@ -60,41 +60,32 @@ export function App() {
|
|
60
60
|
+ `"dark"` – темный badge;
|
61
61
|
+ `"light"` – светлый badge.
|
62
62
|
|
63
|
-
|
64
|
-
import React from 'react';
|
65
|
-
import { Badge } from '@salutejs/{{ package }}';
|
66
|
-
|
67
|
-
export function App() {
|
68
|
-
return (
|
69
|
-
<div>
|
70
|
-
<Badge text="Бейдж" size="l" view="primary" />
|
71
|
-
<Badge text="Бейдж" size="l" view="accent" />
|
72
|
-
<Badge text="Бейдж" size="l" view="positive" />
|
73
|
-
<Badge text="Бейдж" size="l" view="warning" />
|
74
|
-
<Badge text="Бейдж" size="l" view="negative" />
|
75
|
-
<Badge text="Бейдж" size="l" view="dark" />
|
76
|
-
<Badge text="Бейдж" size="l" view="light" />
|
77
|
-
</div>
|
78
|
-
);
|
79
|
-
}
|
80
|
-
```
|
81
|
-
|
82
|
-
Так же на вид badge влияет свойство `transparent`:
|
63
|
+
Так же на вид badge влияет свойства `transparent` и `clear`.
|
83
64
|
|
84
65
|
```tsx live
|
85
66
|
import React from 'react';
|
86
67
|
import { Badge } from '@salutejs/{{ package }}';
|
87
68
|
|
88
69
|
export function App() {
|
70
|
+
const Badges = ({transparent, clear}) => {
|
71
|
+
return (
|
72
|
+
<div style=\{{ display: 'flex', gap: '0.5rem' }}>
|
73
|
+
<Badge text="Бейдж" size="l" view="primary" transparent={transparent} clear={clear} />
|
74
|
+
<Badge text="Бейдж" size="l" view="accent" transparent={transparent} clear={clear} />
|
75
|
+
<Badge text="Бейдж" size="l" view="positive" transparent={transparent} clear={clear} />
|
76
|
+
<Badge text="Бейдж" size="l" view="warning" transparent={transparent} clear={clear} />
|
77
|
+
<Badge text="Бейдж" size="l" view="negative" transparent={transparent} clear={clear} />
|
78
|
+
<Badge text="Бейдж" size="l" view="dark" transparent={transparent} clear={clear} />
|
79
|
+
<Badge text="Бейдж" size="l" view="light" transparent={transparent} clear={clear} />
|
80
|
+
</div>
|
81
|
+
)
|
82
|
+
}
|
83
|
+
|
89
84
|
return (
|
90
|
-
<div>
|
91
|
-
<
|
92
|
-
<
|
93
|
-
<
|
94
|
-
<Badge text="Бейдж" size="l" view="warning" transparent />
|
95
|
-
<Badge text="Бейдж" size="l" view="negative" transparent />
|
96
|
-
<Badge text="Бейдж" size="l" view="dark" transparent />
|
97
|
-
<Badge text="Бейдж" size="l" view="light" transparent />
|
85
|
+
<div style=\{{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
86
|
+
<Badges />
|
87
|
+
<Badges transparent />
|
88
|
+
<Badges clear />
|
98
89
|
</div>
|
99
90
|
);
|
100
91
|
}
|
@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.tokens = exports.classes = void 0;
|
7
7
|
var classes = exports.classes = {
|
8
8
|
badgePilled: 'badge-pilled',
|
9
|
-
badgeTransparent: 'badge-transparent'
|
9
|
+
badgeTransparent: 'badge-transparent',
|
10
|
+
badgeClear: 'badge-clear'
|
10
11
|
};
|
11
12
|
var tokens = exports.tokens = {
|
12
13
|
background: '--plasma-badge-background',
|
13
14
|
color: '--plasma-badge-color',
|
14
15
|
backgroundTransparent: '--plasma-badge-background-transparent',
|
15
16
|
colorTransparent: '--plasma-badge-color-transparent',
|
17
|
+
colorClear: '--plasma-badge-color-clear',
|
16
18
|
borderRadius: '--plasma-badge-border-radius',
|
17
19
|
pilledBorderRadius: '--plasma-badge-pilled-border-radius',
|
18
20
|
height: '--plasma-badge-height',
|
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.base = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Badge = /*#__PURE__*/require("../../Badge.tokens");
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{color:var(", ");background-color:transparent;padding:0;}"], /*#__PURE__*/String(_Badge.classes.badgeClear), _Badge.tokens.colorClear);
|
@@ -0,0 +1 @@
|
|
1
|
+
["--plasma-badge-color-clear"]
|
@@ -192,7 +192,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
192
192
|
}, required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
|
193
193
|
className: (0, _utils.cx)(_TextField2.classes.outerLabelPlacement, requiredPlacementClass)
|
194
194
|
}), innerLabelValue, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper
|
195
|
-
//
|
195
|
+
// Рефка для внутреннего использования. Не отдается наружу.
|
196
196
|
, {
|
197
197
|
ref: rest.inputWrapperRef,
|
198
198
|
className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
@@ -28,27 +28,24 @@ 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 StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
32
32
|
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
33
|
-
})(["
|
34
|
-
var
|
33
|
+
})(["margin:var(", ");line-height:0;"], _TextField.tokens.leftContentMargin);
|
34
|
+
var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
35
35
|
componentId: "plasma-new-hope__sc-g4vxbb-8"
|
36
|
-
})(["margin:var(", ");"], _TextField.tokens.
|
37
|
-
var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/(0, _styledComponents["default"])(StyledContentSlot).withConfig({
|
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);
|
36
|
+
})(["margin:var(", ");line-height:0;"], _TextField.tokens.rightContentMargin);
|
40
37
|
var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
41
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
38
|
+
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
42
39
|
})([""]);
|
43
40
|
var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
44
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
41
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
45
42
|
})([""]);
|
46
43
|
var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
47
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
44
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
48
45
|
})([""]);
|
49
46
|
var StyledOptionalText = exports.StyledOptionalText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
50
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
47
|
+
componentId: "plasma-new-hope__sc-g4vxbb-12"
|
51
48
|
})(["color:var(", ");"], _TextField.tokens.optionalColor);
|
52
49
|
var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
53
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
50
|
+
componentId: "plasma-new-hope__sc-g4vxbb-13"
|
54
51
|
})(["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 />}
|
28
28
|
/>
|
29
29
|
<TextField
|
30
30
|
placeholder="Положение иконки"
|
31
31
|
defaultValue="Справа"
|
32
|
-
contentRight={<IconDownload
|
32
|
+
contentRight={<IconDownload />}
|
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
|
+
/* Токены для инпута */
|
41
41
|
leftContentMargin: '--plasma-textfield__left-content-margin',
|
42
42
|
rightContentMargin: '--plasma-textfield__right-content-margin',
|
43
43
|
fontFamily: '--plasma-textfield-font-family',
|
@@ -46,10 +46,6 @@ 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',
|
53
49
|
/** Токены лейбла */
|
54
50
|
labelColor: '--plasma-textfield__label-color',
|
55
51
|
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,
|
48
72
|
pilled: false,
|
49
73
|
transparent: false,
|
74
|
+
clear: 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
|
};
|
@@ -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-
|
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-
|
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-
|
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-
|
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)
|
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,7 +4,6 @@ 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';
|
8
7
|
|
9
8
|
import { TextField } from './TextField';
|
10
9
|
|
@@ -104,8 +103,8 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
|
|
104
103
|
{...rest}
|
105
104
|
enumerationType="plain"
|
106
105
|
value={text}
|
107
|
-
contentLeft={enableContentLeft ? <
|
108
|
-
contentRight={enableContentRight ? <
|
106
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
107
|
+
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
109
108
|
view={view}
|
110
109
|
onChange={(e) => {
|
111
110
|
setText(e.target.value);
|