@salutejs/plasma-new-hope 0.134.0-canary.1352.10591857563.0 → 0.134.0-canary.1352.10609199302.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +9 -8
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +9 -8
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +9 -8
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +9 -8
- package/cjs/components/Range/Range.css +9 -8
- package/cjs/components/Slider/Slider.css +9 -8
- package/cjs/components/Slider/components/Double/Double.css +9 -8
- package/cjs/components/Switch/Switch.tokens.js +1 -1
- package/cjs/components/Switch/Switch.tokens.js.map +1 -1
- package/cjs/components/Switch/_size/base.js +1 -1
- package/cjs/components/Switch/_size/base.js.map +1 -1
- package/cjs/components/Switch/_size/{base_9sphki.css → base_1sjw39x.css} +1 -1
- package/cjs/components/Switch/_view/base.js +1 -1
- package/cjs/components/Switch/_view/base.js.map +1 -1
- package/cjs/components/Switch/_view/base_d10e49.css +1 -0
- package/cjs/components/TextArea/TextArea.js +18 -11
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +42 -36
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles_av6xxy.css +11 -0
- package/cjs/components/TextField/TextField.js +16 -9
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +8 -2
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/{es/components/TextField/TextField.styles_x7rboj.css → cjs/components/TextField/TextField.styles_1lfge6n.css} +3 -2
- package/cjs/index.css +22 -20
- package/emotion/cjs/components/Switch/Switch.tokens.js +1 -1
- package/emotion/cjs/components/Switch/_size/base.js +1 -1
- package/emotion/cjs/components/Switch/_view/base.js +1 -1
- package/emotion/cjs/components/TextArea/TextArea.js +19 -12
- package/emotion/cjs/components/TextArea/TextArea.styles.js +16 -12
- package/emotion/cjs/components/TextField/TextField.js +17 -10
- package/emotion/cjs/components/TextField/TextField.styles.js +30 -26
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -4
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +12 -9
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +9 -0
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +15 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -1
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -4
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +10 -45
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -43
- package/emotion/es/components/Switch/Switch.tokens.js +1 -1
- package/emotion/es/components/Switch/_size/base.js +1 -1
- package/emotion/es/components/Switch/_view/base.js +1 -1
- package/emotion/es/components/TextArea/TextArea.js +20 -13
- package/emotion/es/components/TextArea/TextArea.styles.js +15 -11
- package/emotion/es/components/TextField/TextField.js +18 -11
- package/emotion/es/components/TextField/TextField.styles.js +29 -25
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -4
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +12 -9
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +9 -0
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +15 -12
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -1
- package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -4
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +10 -45
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -43
- package/es/components/Autocomplete/Autocomplete.css +9 -8
- package/es/components/DatePicker/RangeDate/RangeDate.css +9 -8
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +9 -8
- package/es/components/DatePicker/SingleDate/SingleDate.css +9 -8
- package/es/components/Range/Range.css +9 -8
- package/es/components/Slider/Slider.css +9 -8
- package/es/components/Slider/components/Double/Double.css +9 -8
- package/es/components/Switch/Switch.tokens.js +1 -1
- package/es/components/Switch/Switch.tokens.js.map +1 -1
- package/es/components/Switch/_size/base.js +1 -1
- package/es/components/Switch/_size/base.js.map +1 -1
- package/es/components/Switch/_size/{base_9sphki.css → base_1sjw39x.css} +1 -1
- package/es/components/Switch/_view/base.js +1 -1
- package/es/components/Switch/_view/base.js.map +1 -1
- package/es/components/Switch/_view/base_d10e49.css +1 -0
- package/es/components/TextArea/TextArea.js +19 -12
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +42 -37
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/es/components/TextArea/TextArea.styles_av6xxy.css +11 -0
- package/es/components/TextField/TextField.js +17 -10
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +8 -3
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/{cjs/components/TextField/TextField.styles_x7rboj.css → es/components/TextField/TextField.styles_1lfge6n.css} +3 -2
- package/es/index.css +22 -20
- package/package.json +4 -4
- package/styled-components/cjs/components/Switch/Switch.tokens.js +1 -1
- package/styled-components/cjs/components/Switch/_size/base.js +1 -1
- package/styled-components/cjs/components/Switch/_view/base.js +1 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +18 -11
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +14 -11
- package/styled-components/cjs/components/TextField/TextField.js +16 -9
- package/styled-components/cjs/components/TextField/TextField.styles.js +6 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +7 -4
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +9 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +7 -4
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -1
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +10 -45
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -43
- package/styled-components/es/components/Switch/Switch.tokens.js +1 -1
- package/styled-components/es/components/Switch/_size/base.js +1 -1
- package/styled-components/es/components/Switch/_view/base.js +1 -1
- package/styled-components/es/components/TextArea/TextArea.js +19 -12
- package/styled-components/es/components/TextArea/TextArea.styles.js +13 -10
- package/styled-components/es/components/TextField/TextField.js +17 -10
- package/styled-components/es/components/TextField/TextField.styles.js +5 -2
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +7 -4
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +9 -0
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +7 -4
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -1
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +10 -45
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -43
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +4 -2
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +4 -2
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +4 -2
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +4 -2
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +1 -0
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +6 -2
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +1 -0
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +6 -2
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +3 -0
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +7 -2
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -2
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -2
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/Switch/_view/base_b0jyco.css +0 -1
- package/cjs/components/TextArea/TextArea.styles_wt773g.css +0 -10
- package/es/components/Switch/_view/base_b0jyco.css +0 -1
- package/es/components/TextArea/TextArea.styles_wt773g.css +0 -10
@@ -25,6 +25,12 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
25
25
|
decorators: [WithTheme],
|
26
26
|
component: TextArea,
|
27
27
|
argTypes: {
|
28
|
+
requiredPlacement: {
|
29
|
+
options: ['left', 'right'],
|
30
|
+
control: {
|
31
|
+
type: 'select',
|
32
|
+
},
|
33
|
+
},
|
28
34
|
...argTypesFromConfig(mergeConfig(textAreaConfig, config)),
|
29
35
|
rows: {
|
30
36
|
control: {
|
@@ -55,6 +61,10 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
55
61
|
autoResize: false,
|
56
62
|
minAuto: 0,
|
57
63
|
maxAuto: 0,
|
64
|
+
size: 's',
|
65
|
+
optional: false,
|
66
|
+
required: false,
|
67
|
+
requiredPlacement: 'right',
|
58
68
|
},
|
59
69
|
};
|
60
70
|
|
@@ -71,47 +81,6 @@ const IconPlaceholder = styled.div`
|
|
71
81
|
background: ${tertiary};
|
72
82
|
`;
|
73
83
|
|
74
|
-
const StoryRequired = (props: StoryTextAreaProps) => {
|
75
|
-
const [value, setValue] = useState('Значение поля');
|
76
|
-
|
77
|
-
return (
|
78
|
-
<div
|
79
|
-
style={{
|
80
|
-
display: 'grid',
|
81
|
-
gap: '1.5rem',
|
82
|
-
}}
|
83
|
-
>
|
84
|
-
<TextArea
|
85
|
-
value={value}
|
86
|
-
label="Лейбл"
|
87
|
-
required
|
88
|
-
contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
|
89
|
-
onChange={(e) => {
|
90
|
-
setValue(e.target.value);
|
91
|
-
onChange(e);
|
92
|
-
}}
|
93
|
-
onFocus={onFocus}
|
94
|
-
onBlur={onBlur}
|
95
|
-
{...props}
|
96
|
-
/>
|
97
|
-
<TextArea
|
98
|
-
value={value}
|
99
|
-
label="Лейбл"
|
100
|
-
required
|
101
|
-
requiredAlign="right"
|
102
|
-
contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
|
103
|
-
onChange={(e) => {
|
104
|
-
setValue(e.target.value);
|
105
|
-
onChange(e);
|
106
|
-
}}
|
107
|
-
onFocus={onFocus}
|
108
|
-
onBlur={onBlur}
|
109
|
-
{...props}
|
110
|
-
/>
|
111
|
-
</div>
|
112
|
-
);
|
113
|
-
};
|
114
|
-
|
115
84
|
const StoryDefault = (props: StoryTextAreaProps) => {
|
116
85
|
const [value, setValue] = useState('Значение поля');
|
117
86
|
|
@@ -130,10 +99,6 @@ const StoryDefault = (props: StoryTextAreaProps) => {
|
|
130
99
|
);
|
131
100
|
};
|
132
101
|
|
133
|
-
export const Required: StoryObj<StoryTextAreaProps> = {
|
134
|
-
render: (args) => <StoryRequired {...args} />,
|
135
|
-
};
|
136
|
-
|
137
102
|
export const Default: StoryObj<StoryTextAreaProps> = {
|
138
103
|
render: (args) => <StoryDefault {...args} />,
|
139
104
|
};
|
package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx
CHANGED
@@ -22,6 +22,12 @@ const meta: Meta<typeof TextField> = {
|
|
22
22
|
component: TextField,
|
23
23
|
decorators: [WithTheme],
|
24
24
|
argTypes: {
|
25
|
+
requiredPlacement: {
|
26
|
+
options: ['left', 'right'],
|
27
|
+
control: {
|
28
|
+
type: 'select',
|
29
|
+
},
|
30
|
+
},
|
25
31
|
view: {
|
26
32
|
options: views,
|
27
33
|
control: {
|
@@ -109,6 +115,9 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
109
115
|
leftHelper: 'Подсказка к полю',
|
110
116
|
disabled: false,
|
111
117
|
readOnly: false,
|
118
|
+
required: false,
|
119
|
+
requiredPlacement: 'right',
|
120
|
+
optional: false,
|
112
121
|
enableContentLeft: true,
|
113
122
|
enableContentRight: true,
|
114
123
|
},
|
@@ -132,55 +141,13 @@ type StoryPropsChips = Omit<
|
|
132
141
|
| 'maxLength'
|
133
142
|
| 'minLength'
|
134
143
|
| 'required'
|
144
|
+
| 'optional'
|
135
145
|
| 'enumerationType'
|
136
146
|
> & {
|
137
147
|
enableContentLeft: boolean;
|
138
148
|
enableContentRight: boolean;
|
139
149
|
};
|
140
150
|
|
141
|
-
const StoryRequired = ({ view, ...rest }: StoryPropsDefault) => {
|
142
|
-
const [text, setText] = useState('Значение поля');
|
143
|
-
|
144
|
-
return (
|
145
|
-
<div style={{ display: 'grid', gap: '1.5rem' }}>
|
146
|
-
<TextField
|
147
|
-
{...rest}
|
148
|
-
value={text}
|
149
|
-
required
|
150
|
-
view={view}
|
151
|
-
onChange={(e) => {
|
152
|
-
setText(e.target.value);
|
153
|
-
onChange(e.target.value);
|
154
|
-
}}
|
155
|
-
onFocus={onFocus}
|
156
|
-
onBlur={onBlur}
|
157
|
-
onChangeChips={onChipsChange}
|
158
|
-
/>
|
159
|
-
<TextField
|
160
|
-
{...rest}
|
161
|
-
value={text}
|
162
|
-
required
|
163
|
-
requiredAlign="right"
|
164
|
-
view={view}
|
165
|
-
onChange={(e) => {
|
166
|
-
setText(e.target.value);
|
167
|
-
onChange(e.target.value);
|
168
|
-
}}
|
169
|
-
onFocus={onFocus}
|
170
|
-
onBlur={onBlur}
|
171
|
-
onChangeChips={onChipsChange}
|
172
|
-
/>
|
173
|
-
</div>
|
174
|
-
);
|
175
|
-
};
|
176
|
-
|
177
|
-
export const Required: StoryObj<StoryPropsDefault> = {
|
178
|
-
args: {
|
179
|
-
...Default.args,
|
180
|
-
},
|
181
|
-
render: (args) => <StoryRequired {...args} />,
|
182
|
-
};
|
183
|
-
|
184
151
|
const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
|
185
152
|
const [text, setText] = useState('Значение поля');
|
186
153
|
|
@@ -14,7 +14,7 @@ export var tokens = {
|
|
14
14
|
trackHeight: '--plasma-switch__track-height',
|
15
15
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
16
16
|
// NOTE: could be intersection with checked
|
17
|
-
trackBackgroundColorOn: '--plasma-
|
17
|
+
trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
|
18
18
|
trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',
|
19
19
|
trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',
|
20
20
|
trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
3
|
import { StyledLabel, StyledTrigger } from '../Switch.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(--plasma_private-switch__label-offset,0);}:active ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
|
4
|
+
export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(--plasma_private-switch__label-offset,0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
3
|
import { StyledTrigger, StyledInput } from '../Switch.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:
|
4
|
+
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);
|
@@ -1,5 +1,5 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
-
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "
|
2
|
+
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
3
3
|
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); }
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
5
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -24,7 +24,7 @@ import { useResizeObserver } from '@salutejs/plasma-core';
|
|
24
24
|
import { cx } from '../../utils';
|
25
25
|
import { applyDynamicLabel } from './mixins';
|
26
26
|
import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
|
27
|
-
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator } from './TextArea.styles';
|
27
|
+
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
|
28
28
|
import { classes } from './TextArea.tokens';
|
29
29
|
import { base as viewCSS } from './variations/_view/base';
|
30
30
|
import { base as sizeCSS } from './variations/_size/base';
|
@@ -38,6 +38,7 @@ var innerPlaceholderUp = classes.innerPlaceholderUp,
|
|
38
38
|
styledTextAreaWrapper = classes.styledTextAreaWrapper,
|
39
39
|
styledPlaceholder = classes.styledPlaceholder,
|
40
40
|
styledHelpers = classes.styledHelpers;
|
41
|
+
var optionalText = 'optional';
|
41
42
|
var base = /*#__PURE__*/css(["", ";position:relative;box-sizing:border-box;"], applyDynamicLabel);
|
42
43
|
|
43
44
|
// TODO: Удалить после отказа от старых библиотек plasma-web / plasma-b2c
|
@@ -91,7 +92,9 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
91
92
|
value = props.value,
|
92
93
|
disabled = props.disabled,
|
93
94
|
required = props.required,
|
94
|
-
|
95
|
+
_props$requiredPlacem = props.requiredPlacement,
|
96
|
+
requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
|
97
|
+
optional = props.optional,
|
95
98
|
size = props.size,
|
96
99
|
view = props.view,
|
97
100
|
id = props.id,
|
@@ -116,12 +119,15 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
116
119
|
setUncontrolledValue = _useState6[1];
|
117
120
|
var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
|
118
121
|
var hasHelper = Boolean(leftHelper || rightHelper || helperText);
|
122
|
+
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
119
123
|
var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
|
120
124
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
121
125
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
122
|
-
var
|
123
|
-
|
124
|
-
|
126
|
+
var placeholderLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
|
127
|
+
if (optional && !hasOuterLabel) {
|
128
|
+
placeholderLabel = placeholderLabel ? "".concat(placeholderLabel, "\xA0").concat(optionalText) : optionalText;
|
129
|
+
}
|
130
|
+
var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
|
125
131
|
useResizeObserver(outerRef, function (currentElement) {
|
126
132
|
var inlineWidth = currentElement.style.width;
|
127
133
|
if (inlineWidth || cols) {
|
@@ -155,6 +161,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
155
161
|
} : {
|
156
162
|
autoResize: autoResize
|
157
163
|
}), focused);
|
164
|
+
var optionalTextNode = optional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(label) && '\xa0', optionalText) : null;
|
158
165
|
return /*#__PURE__*/React.createElement(Root, {
|
159
166
|
view: overriddenView,
|
160
167
|
size: size,
|
@@ -166,14 +173,14 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
166
173
|
}, style),
|
167
174
|
className: className
|
168
175
|
}, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
169
|
-
className: cx('placement-outer',
|
170
|
-
}), label), /*#__PURE__*/React.createElement(StyledContainer, {
|
176
|
+
className: cx('placement-outer', requiredPlacementClass)
|
177
|
+
}), label, optionalTextNode), /*#__PURE__*/React.createElement(StyledContainer, {
|
171
178
|
className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
|
172
179
|
width: helperWidth,
|
173
180
|
onFocus: onFocusHandler,
|
174
181
|
onBlur: onBlurHandler
|
175
182
|
}, required && !hasOuterLabel && /*#__PURE__*/React.createElement(StyledIndicator, {
|
176
|
-
className: cx('placement-inner',
|
183
|
+
className: cx('placement-inner', requiredPlacementClass)
|
177
184
|
}), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
|
178
185
|
className: styledTextAreaWrapper,
|
179
186
|
hasHelper: hasHelper
|
@@ -187,7 +194,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
187
194
|
disabled: disabled,
|
188
195
|
height: autoResize ? minAuto : height,
|
189
196
|
width: width,
|
190
|
-
placeholder:
|
197
|
+
placeholder: placeholderLabel,
|
191
198
|
"aria-describedby": textareaHelperId,
|
192
199
|
value: value,
|
193
200
|
readOnly: readOnly,
|
@@ -199,11 +206,11 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
199
206
|
}, rest))), hasHelper && /*#__PURE__*/React.createElement(StyledHelpers, {
|
200
207
|
className: styledHelpers,
|
201
208
|
id: textareaHelperId
|
202
|
-
}, (leftHelper || helperText) && /*#__PURE__*/React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/React.createElement(StyledRightHelper, null, rightHelper)),
|
209
|
+
}, (leftHelper || helperText) && /*#__PURE__*/React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/React.createElement(StyledRightHelper, null, rightHelper)), placeholderLabel && /*#__PURE__*/React.createElement(StyledPlaceholder, {
|
203
210
|
hasContentRight: Boolean(contentRight),
|
204
211
|
className: styledPlaceholder,
|
205
212
|
htmlFor: id
|
206
|
-
},
|
213
|
+
}, placeholderLabel)));
|
207
214
|
});
|
208
215
|
};
|
209
216
|
export var textAreaConfig = {
|
@@ -3,9 +3,12 @@ import { applyEllipsis } from '../../mixins';
|
|
3
3
|
import { tokens } from './TextArea.tokens';
|
4
4
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
5
5
|
componentId: "plasma-new-hope__sc-pxxv3p-0"
|
6
|
-
})(["position:relative;display:inline-
|
7
|
-
export var
|
6
|
+
})(["position:relative;display:inline-flex;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
7
|
+
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
8
8
|
componentId: "plasma-new-hope__sc-pxxv3p-1"
|
9
|
+
})(["color:var(", ");"], tokens.placeholderColor);
|
10
|
+
export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-pxxv3p-2"
|
9
12
|
})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
|
10
13
|
var hasHelper = _ref.hasHelper;
|
11
14
|
return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
|
@@ -14,16 +17,16 @@ export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
14
17
|
return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
|
15
18
|
});
|
16
19
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
17
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
20
|
+
componentId: "plasma-new-hope__sc-pxxv3p-3"
|
18
21
|
})(["position:absolute;display:flex;align-items:center;bottom:0;z-index:1;top:var(", ");right:var(", ");height:var(", ");"], tokens.rightContentTop, tokens.rightContentRight, tokens.rightContentHeight);
|
19
22
|
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
20
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
23
|
+
componentId: "plasma-new-hope__sc-pxxv3p-4"
|
21
24
|
})(["display:inline-flex;flex-direction:column;width:", ";position:relative;"], function (_ref3) {
|
22
25
|
var width = _ref3.width;
|
23
26
|
return width;
|
24
27
|
});
|
25
28
|
export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
26
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
29
|
+
componentId: "plasma-new-hope__sc-pxxv3p-5"
|
27
30
|
})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ");padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ") + var(", ") + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}"], tokens.inputColor, tokens.inputCaretColor, function (_ref4) {
|
28
31
|
var resize = _ref4.resize;
|
29
32
|
return resize || 'none';
|
@@ -54,20 +57,20 @@ export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
|
54
57
|
return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
|
55
58
|
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus);
|
56
59
|
export var StyledHelpers = /*#__PURE__*/styled.div.withConfig({
|
57
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
60
|
+
componentId: "plasma-new-hope__sc-pxxv3p-6"
|
58
61
|
})(["box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");border-bottom-left-radius:var(", ");border-bottom-right-radius:var(", ");"], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
|
59
62
|
export var StyledLeftHelper = /*#__PURE__*/styled.span.withConfig({
|
60
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
63
|
+
componentId: "plasma-new-hope__sc-pxxv3p-7"
|
61
64
|
})(["", ";display:block;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");"], /*#__PURE__*/applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
|
62
65
|
export var StyledRightHelper = /*#__PURE__*/styled(StyledLeftHelper).withConfig({
|
63
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
66
|
+
componentId: "plasma-new-hope__sc-pxxv3p-8"
|
64
67
|
})(["color:var(", ");margin-left:auto;"], tokens.rightHelperColor);
|
65
68
|
export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
|
66
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
69
|
+
componentId: "plasma-new-hope__sc-pxxv3p-9"
|
67
70
|
})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, function (_ref13) {
|
68
71
|
var hasContentRight = _ref13.hasContentRight;
|
69
72
|
return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
|
70
73
|
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
71
74
|
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
72
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
75
|
+
componentId: "plasma-new-hope__sc-pxxv3p-10"
|
73
76
|
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -18,10 +18,11 @@ import { base as disabledCSS } from './variations/_disabled/base';
|
|
18
18
|
import { base as readOnlyCSS } from './variations/_read-only/base';
|
19
19
|
import { base as requiredCSS } from './variations/_required/base';
|
20
20
|
import { base as labelPlacementCSS } from './variations/_label-placement/base';
|
21
|
-
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator } from './TextField.styles';
|
21
|
+
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText } from './TextField.styles';
|
22
22
|
import { classes } from './TextField.tokens';
|
23
23
|
import { TextFieldChip } from './ui';
|
24
24
|
import { useKeyNavigation } from './hooks';
|
25
|
+
var optionalText = 'optional';
|
25
26
|
export var base = /*#__PURE__*/css(["display:block;"]);
|
26
27
|
export var textFieldRoot = function textFieldRoot(Root) {
|
27
28
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
@@ -38,8 +39,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
38
39
|
leftHelper = _ref.leftHelper,
|
39
40
|
_ref$enumerationType = _ref.enumerationType,
|
40
41
|
enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
|
41
|
-
_ref$
|
42
|
-
|
42
|
+
_ref$requiredPlacemen = _ref.requiredPlacement,
|
43
|
+
requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
|
43
44
|
view = _ref.view,
|
44
45
|
size = _ref.size,
|
45
46
|
_ref$readOnly = _ref.readOnly,
|
@@ -48,6 +49,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
48
49
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
49
50
|
_ref$required = _ref.required,
|
50
51
|
required = _ref$required === void 0 ? false : _ref$required,
|
52
|
+
_ref$optional = _ref.optional,
|
53
|
+
optional = _ref$optional === void 0 ? false : _ref$optional,
|
51
54
|
values = _ref.chips,
|
52
55
|
onChange = _ref.onChange,
|
53
56
|
onChangeChips = _ref.onChangeChips,
|
@@ -75,10 +78,13 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
75
78
|
var hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';
|
76
79
|
var labelInside = size !== 'xs' && labelPlacement === 'inner';
|
77
80
|
var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
|
78
|
-
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
79
81
|
var innerLabelValue = hideLabel ? undefined : label;
|
80
82
|
var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
|
81
|
-
var
|
83
|
+
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
84
|
+
if (optional && !innerLabelValue && !hasOuterLabel) {
|
85
|
+
innerPlaceholderValue = innerPlaceholderValue ? "".concat(innerPlaceholderValue, "\xA0").concat(optionalText) : optionalText;
|
86
|
+
}
|
87
|
+
var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
|
82
88
|
var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
|
83
89
|
var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
|
84
90
|
var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
|
@@ -150,6 +156,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
150
156
|
})) || [];
|
151
157
|
setChips(newChips);
|
152
158
|
}, [isChipEnumeration, values]);
|
159
|
+
var optionalTextNode = optional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(innerLabelValue) && '\xa0', optionalText) : null;
|
153
160
|
return /*#__PURE__*/React.createElement(Root, {
|
154
161
|
view: view,
|
155
162
|
size: size,
|
@@ -164,11 +171,11 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
164
171
|
id: labelId,
|
165
172
|
htmlFor: id
|
166
173
|
}, required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
167
|
-
className: cx('placement-outer',
|
168
|
-
}), innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
|
174
|
+
className: cx('placement-outer', requiredPlacementClass)
|
175
|
+
}), innerLabelValue, optionalTextNode), /*#__PURE__*/React.createElement(InputWrapper, {
|
169
176
|
className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
170
177
|
}, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
171
|
-
className: cx('placement-inner',
|
178
|
+
className: cx('placement-inner', requiredPlacementClass)
|
172
179
|
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
173
180
|
tabIndex: -1,
|
174
181
|
ref: contentRef,
|
@@ -208,7 +215,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
208
215
|
}, rest)), labelInside && /*#__PURE__*/React.createElement(Label, {
|
209
216
|
id: labelId,
|
210
217
|
htmlFor: innerId
|
211
|
-
}, innerLabelValue), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
218
|
+
}, innerLabelValue, optionalTextNode), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
212
219
|
id: helperTextId
|
213
220
|
}, leftHelper));
|
214
221
|
});
|
@@ -14,7 +14,7 @@ export var Input = /*#__PURE__*/styled.input.withConfig({
|
|
14
14
|
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
|
15
15
|
export var Label = /*#__PURE__*/styled.label.withConfig({
|
16
16
|
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
17
|
-
})(["position:relative;"]);
|
17
|
+
})(["position:relative;display:inline-flex;"]);
|
18
18
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
19
19
|
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
20
20
|
})(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
|
@@ -30,6 +30,9 @@ export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
31
31
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
32
32
|
})([""]);
|
33
|
-
export var
|
33
|
+
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
34
34
|
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
35
|
+
})(["color:var(", ");"], tokens.placeholderColor);
|
36
|
+
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
37
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
35
38
|
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
@@ -14,7 +14,7 @@ export var config = {
|
|
14
14
|
m: /*#__PURE__*/css(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale, switchTokens.labelOffset)
|
15
15
|
},
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-
|
17
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
|
18
18
|
},
|
19
19
|
labelPosition: {
|
20
20
|
before: labelPosition_Before,
|
@@ -7,10 +7,10 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
size: {
|
10
|
-
xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem
|
11
|
-
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem
|
12
|
-
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem
|
13
|
-
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem
|
10
|
+
xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.5625rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0rem;", ":0rem;", ":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);", ":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.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.675rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
|
11
|
+
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.6875rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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.375rem;", ":0.125rem;", ":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);", ":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.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
|
12
|
+
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.4375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.1875rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
|
13
|
+
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":1rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":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.125rem;", ":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);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight)
|
14
14
|
},
|
15
15
|
view: {
|
16
16
|
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
@@ -20,6 +20,9 @@ export var config = {
|
|
20
20
|
},
|
21
21
|
disabled: {
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled)
|
23
|
+
},
|
24
|
+
required: {
|
25
|
+
"true": /*#__PURE__*/css(["", ":var(--surface-negative);"], textAreaTokens.indicatorColor)
|
23
26
|
}
|
24
27
|
}
|
25
28
|
};
|
@@ -25,6 +25,12 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
25
25
|
decorators: [WithTheme],
|
26
26
|
component: TextArea,
|
27
27
|
argTypes: {
|
28
|
+
requiredPlacement: {
|
29
|
+
options: ['left', 'right'],
|
30
|
+
control: {
|
31
|
+
type: 'select',
|
32
|
+
},
|
33
|
+
},
|
28
34
|
...argTypesFromConfig(mergeConfig(textAreaConfig, config)),
|
29
35
|
rows: {
|
30
36
|
control: {
|
@@ -55,6 +61,9 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
55
61
|
autoResize: false,
|
56
62
|
minAuto: 0,
|
57
63
|
maxAuto: 0,
|
64
|
+
optional: false,
|
65
|
+
required: false,
|
66
|
+
requiredPlacement: 'right',
|
58
67
|
},
|
59
68
|
};
|
60
69
|
|