@viasat/beam-styles 2.37.0 → 2.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/combobox.module.scss +26 -19
- package/components/input.vars.scss +66 -0
- package/components/nativeSelect.module.scss +10 -7
- package/components/search.module.scss +20 -9
- package/components/textField.module.scss +11 -4
- package/package.json +1 -1
- package/styles.css +130 -34
- package/styles.css.map +1 -1
- package/styles.min.css +9 -9
- package/styles.min.css.map +1 -1
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
@use '../utils/mixins.scss' as mixins;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
6
|
@use './icon.vars.scss' as iconVars;
|
|
7
|
+
@use './input.vars.scss' as inputVars;
|
|
7
8
|
|
|
8
9
|
@import '@viasat/beam-tokens/components/Input';
|
|
9
10
|
|
|
@@ -50,6 +51,8 @@ $stateStyleTokens: (
|
|
|
50
51
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
51
52
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
52
53
|
|
|
54
|
+
@include inputVars.field-size-scale;
|
|
55
|
+
|
|
53
56
|
&--fluid {
|
|
54
57
|
max-width: 100%;
|
|
55
58
|
}
|
|
@@ -79,11 +82,11 @@ $stateStyleTokens: (
|
|
|
79
82
|
position: relative;
|
|
80
83
|
cursor: var(#{$comboboxCursor}, pointer);
|
|
81
84
|
user-select: none;
|
|
82
|
-
font:
|
|
83
|
-
min-height:
|
|
85
|
+
font: var(#{inputVars.$fieldFont});
|
|
86
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
84
87
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
85
88
|
#{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
|
|
86
|
-
#{iconVars.$iconSize}:
|
|
89
|
+
#{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
|
|
87
90
|
|
|
88
91
|
&__chevron {
|
|
89
92
|
position: absolute;
|
|
@@ -94,12 +97,11 @@ $stateStyleTokens: (
|
|
|
94
97
|
@include mixins.svg-icon($expandIcon, $expandIconWidth $expandIconHeight);
|
|
95
98
|
background-color: tokens.$bm-comp-input-color-icon;
|
|
96
99
|
inset-inline-end: calc(
|
|
97
|
-
|
|
100
|
+
var(#{inputVars.$fieldPaddingX}) -
|
|
98
101
|
(var(#{iconVars.$iconSize}) - $expandIconWidth) / 2
|
|
99
102
|
);
|
|
100
103
|
inset-block-start: calc(
|
|
101
|
-
|
|
102
|
-
2
|
|
104
|
+
var(#{inputVars.$fieldHeight}) / 2 - var(#{iconVars.$iconSize}) / 2
|
|
103
105
|
);
|
|
104
106
|
|
|
105
107
|
transition: transform 0.2s ease;
|
|
@@ -119,26 +121,24 @@ $stateStyleTokens: (
|
|
|
119
121
|
flex: 0 0 auto;
|
|
120
122
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
121
123
|
min-height: calc(
|
|
122
|
-
|
|
124
|
+
var(#{inputVars.$fieldHeight}) - 2 *
|
|
123
125
|
tokens.$bm-comp-input-border-width-field-default - 2 *
|
|
124
|
-
|
|
126
|
+
var(#{inputVars.$fieldPaddingY})
|
|
125
127
|
);
|
|
126
128
|
line-height: calc(
|
|
127
|
-
|
|
129
|
+
var(#{inputVars.$fieldHeight}) - 2 *
|
|
128
130
|
tokens.$bm-comp-input-border-width-field-default - 2 *
|
|
129
|
-
|
|
131
|
+
var(#{inputVars.$fieldPaddingY})
|
|
130
132
|
);
|
|
131
133
|
}
|
|
132
134
|
|
|
133
135
|
&__input {
|
|
134
136
|
background: transparent;
|
|
135
137
|
min-height: calc(
|
|
136
|
-
|
|
137
|
-
tokens.$bm-comp-input-space-field-y
|
|
138
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
138
139
|
);
|
|
139
140
|
line-height: calc(
|
|
140
|
-
|
|
141
|
-
tokens.$bm-comp-input-space-field-y
|
|
141
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
142
142
|
);
|
|
143
143
|
|
|
144
144
|
&::placeholder {
|
|
@@ -171,6 +171,13 @@ $stateStyleTokens: (
|
|
|
171
171
|
margin-block: calc(-1 * tokens.$bm-comp-input-border-width-field-default);
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
+
// Beam icons in the content slots resize with the field; chips and the
|
|
175
|
+
// chevron are unaffected, per EPTOOLS-1515.
|
|
176
|
+
&__content-before,
|
|
177
|
+
&__content-after {
|
|
178
|
+
@include inputVars.field-content-icon;
|
|
179
|
+
}
|
|
180
|
+
|
|
174
181
|
&__input {
|
|
175
182
|
flex: 1;
|
|
176
183
|
cursor: var(#{$comboboxInputCursor}, pointer);
|
|
@@ -181,7 +188,7 @@ $stateStyleTokens: (
|
|
|
181
188
|
outline: 0;
|
|
182
189
|
margin: 0;
|
|
183
190
|
padding: 0;
|
|
184
|
-
font:
|
|
191
|
+
font: var(#{inputVars.$fieldFont});
|
|
185
192
|
|
|
186
193
|
width: 100%;
|
|
187
194
|
min-width: 3rem;
|
|
@@ -231,13 +238,13 @@ $stateStyleTokens: (
|
|
|
231
238
|
tokens.$bm-sem-space-0
|
|
232
239
|
);
|
|
233
240
|
|
|
234
|
-
padding-block:
|
|
235
|
-
padding-inline:
|
|
241
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
242
|
+
padding-inline: var(#{inputVars.$fieldPaddingX})
|
|
236
243
|
calc(
|
|
237
|
-
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + #{
|
|
244
|
+
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
|
|
238
245
|
);
|
|
239
246
|
|
|
240
|
-
min-height:
|
|
247
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
241
248
|
|
|
242
249
|
&:focus-within {
|
|
243
250
|
@include mixins.simulated-inset-outline(
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../utils/constants.scss';
|
|
3
|
+
@use '../utils/tokens.scss' as tokens;
|
|
4
|
+
@use './icon.vars.scss' as iconVars;
|
|
5
|
+
|
|
6
|
+
// Shared CSS custom-property names for the input field size scale. These are
|
|
7
|
+
// deliberately distinct from the generic icon size var so a Beam `<Icon>` placed
|
|
8
|
+
// in a field slot resizes with the field even when it carries its own size prop.
|
|
9
|
+
$fieldHeight: '--#{constants.$prefix}input-field-height';
|
|
10
|
+
$fieldPaddingX: '--#{constants.$prefix}input-field-padding-x';
|
|
11
|
+
$fieldPaddingY: '--#{constants.$prefix}input-field-padding-y';
|
|
12
|
+
$fieldFont: '--#{constants.$prefix}input-field-font';
|
|
13
|
+
$fieldIconSize: '--#{constants.$prefix}input-field-icon-size';
|
|
14
|
+
|
|
15
|
+
// Shared sm / md / lg size scale for every Beam input component (TextField,
|
|
16
|
+
// NativeSelect, Select, Autocomplete, Search). md uses the existing input
|
|
17
|
+
// component tokens; sm + lg use semantic tokens until the component tokens land.
|
|
18
|
+
// TODO(EPTOOLS-1515): replace the sm/lg semantic tokens with
|
|
19
|
+
// bm-comp-input-size-field-{sm,lg}-* component tokens once PR #1315 merges.
|
|
20
|
+
$sizes: (
|
|
21
|
+
'sm': (
|
|
22
|
+
'height': tokens.$bm-sem-size-height-sm,
|
|
23
|
+
'padding-y': tokens.$bm-sem-space-25,
|
|
24
|
+
'padding-x': tokens.$bm-sem-space-75,
|
|
25
|
+
'icon': tokens.$bm-sem-size-icon-sm,
|
|
26
|
+
'font': tokens.$bm-sem-typo-compact-body-sm,
|
|
27
|
+
),
|
|
28
|
+
'md': (
|
|
29
|
+
'height': tokens.$bm-comp-input-size-field-md-height,
|
|
30
|
+
'padding-y': tokens.$bm-comp-input-space-field-y,
|
|
31
|
+
'padding-x': tokens.$bm-comp-input-space-field-x,
|
|
32
|
+
'icon': tokens.$bm-comp-input-size-field-icon,
|
|
33
|
+
'font': tokens.$bm-comp-input-typo-default,
|
|
34
|
+
),
|
|
35
|
+
'lg': (
|
|
36
|
+
'height': tokens.$bm-sem-size-height-lg,
|
|
37
|
+
'padding-y': tokens.$bm-sem-space-75,
|
|
38
|
+
'padding-x': tokens.$bm-sem-space-125,
|
|
39
|
+
'icon': tokens.$bm-comp-input-size-field-icon,
|
|
40
|
+
'font': tokens.$bm-comp-input-typo-default,
|
|
41
|
+
),
|
|
42
|
+
);
|
|
43
|
+
// Emits the per-size field custom properties. Include inside an input
|
|
44
|
+
// component's root block.
|
|
45
|
+
@mixin field-size-scale {
|
|
46
|
+
@each $size, $props in $sizes {
|
|
47
|
+
&--#{$size} &__field {
|
|
48
|
+
#{$fieldHeight}: #{map.get($props, 'height')};
|
|
49
|
+
#{$fieldPaddingY}: #{map.get($props, 'padding-y')};
|
|
50
|
+
#{$fieldPaddingX}: #{map.get($props, 'padding-x')};
|
|
51
|
+
#{$fieldFont}: #{map.get($props, 'font')};
|
|
52
|
+
#{$fieldIconSize}: #{map.get($props, 'icon')};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Resize rule for Beam icons (.bm-icon) inside an input content slot: they track
|
|
58
|
+
// the field icon size via the dedicated var, which an Icon's own size prop cannot
|
|
59
|
+
// shadow. Non-Beam (third-party) SVGs are left untouched. Include inside the
|
|
60
|
+
// component's content-slot selector.
|
|
61
|
+
@mixin field-content-icon {
|
|
62
|
+
.#{iconVars.$iconBaseClass} {
|
|
63
|
+
width: var(#{$fieldIconSize});
|
|
64
|
+
height: var(#{$fieldIconSize});
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@use '../utils/tokens.scss' as tokens;
|
|
4
4
|
@use '../utils/mixins.scss' as mixins;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
@use './input.vars.scss' as inputVars;
|
|
6
7
|
|
|
7
8
|
@import '@viasat/beam-tokens/components/Input';
|
|
8
9
|
|
|
@@ -46,6 +47,8 @@ $stateStyleTokens: (
|
|
|
46
47
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
47
48
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
48
49
|
|
|
50
|
+
@include inputVars.field-size-scale;
|
|
51
|
+
|
|
49
52
|
&--fluid {
|
|
50
53
|
max-width: 100%;
|
|
51
54
|
}
|
|
@@ -69,9 +72,9 @@ $stateStyleTokens: (
|
|
|
69
72
|
|
|
70
73
|
@include mixins.svg-icon($expandIcon);
|
|
71
74
|
background-color: tokens.$bm-comp-input-color-icon;
|
|
72
|
-
inset-inline-end:
|
|
75
|
+
inset-inline-end: var(#{inputVars.$fieldPaddingX});
|
|
73
76
|
inset-block-start: calc(
|
|
74
|
-
#{
|
|
77
|
+
var(#{inputVars.$fieldPaddingX}) + #{$expandIconHeight} / 2
|
|
75
78
|
);
|
|
76
79
|
}
|
|
77
80
|
}
|
|
@@ -110,21 +113,21 @@ $stateStyleTokens: (
|
|
|
110
113
|
border-width: tokens.$bm-comp-input-border-width-field-default;
|
|
111
114
|
|
|
112
115
|
color: tokens.$bm-comp-input-color-text;
|
|
113
|
-
font:
|
|
116
|
+
font: var(#{inputVars.$fieldFont});
|
|
114
117
|
cursor: var(#{$selectInputCursor}, pointer);
|
|
115
118
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
116
119
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
117
|
-
height:
|
|
120
|
+
height: var(#{inputVars.$fieldHeight});
|
|
118
121
|
transform: translate3d(
|
|
119
122
|
tokens.$bm-sem-space-0,
|
|
120
123
|
tokens.$bm-sem-space-0,
|
|
121
124
|
tokens.$bm-sem-space-0
|
|
122
125
|
);
|
|
123
126
|
|
|
124
|
-
padding-block:
|
|
125
|
-
padding-inline:
|
|
127
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
128
|
+
padding-inline: var(#{inputVars.$fieldPaddingX})
|
|
126
129
|
calc(
|
|
127
|
-
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + #{
|
|
130
|
+
#{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
|
|
128
131
|
);
|
|
129
132
|
|
|
130
133
|
&:focus {
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
6
|
@use './icon.vars.scss' as iconVars;
|
|
7
7
|
@use './actionList.vars.scss' as actionListVars;
|
|
8
|
+
@use './input.vars.scss' as inputVars;
|
|
8
9
|
|
|
9
10
|
@import '@viasat/beam-tokens/components/Input';
|
|
10
11
|
|
|
@@ -47,6 +48,8 @@ $stateStyleTokens: (
|
|
|
47
48
|
|
|
48
49
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
49
50
|
|
|
51
|
+
@include inputVars.field-size-scale;
|
|
52
|
+
|
|
50
53
|
&--fluid {
|
|
51
54
|
max-width: 100%;
|
|
52
55
|
}
|
|
@@ -59,11 +62,11 @@ $stateStyleTokens: (
|
|
|
59
62
|
position: relative;
|
|
60
63
|
cursor: var(#{$searchCursor}, pointer);
|
|
61
64
|
user-select: none;
|
|
62
|
-
font:
|
|
63
|
-
min-height:
|
|
65
|
+
font: var(#{inputVars.$fieldFont});
|
|
66
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
64
67
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
65
68
|
#{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
|
|
66
|
-
#{iconVars.$iconSize}:
|
|
69
|
+
#{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
|
|
67
70
|
|
|
68
71
|
&__input {
|
|
69
72
|
display: flex;
|
|
@@ -71,8 +74,12 @@ $stateStyleTokens: (
|
|
|
71
74
|
flex: 0 0 auto;
|
|
72
75
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
73
76
|
background: transparent;
|
|
74
|
-
min-height: calc(
|
|
75
|
-
|
|
77
|
+
min-height: calc(
|
|
78
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
79
|
+
);
|
|
80
|
+
line-height: calc(
|
|
81
|
+
var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
|
|
82
|
+
);
|
|
76
83
|
|
|
77
84
|
&::-webkit-search-decoration,
|
|
78
85
|
&::-webkit-search-cancel-button,
|
|
@@ -94,7 +101,7 @@ $stateStyleTokens: (
|
|
|
94
101
|
outline: 0;
|
|
95
102
|
margin: 0;
|
|
96
103
|
padding: 0;
|
|
97
|
-
font:
|
|
104
|
+
font: var(#{inputVars.$fieldFont});
|
|
98
105
|
|
|
99
106
|
width: 100%;
|
|
100
107
|
min-width: $searchInputMinWidth;
|
|
@@ -148,10 +155,10 @@ $stateStyleTokens: (
|
|
|
148
155
|
tokens.$bm-sem-space-0
|
|
149
156
|
);
|
|
150
157
|
|
|
151
|
-
padding-block:
|
|
152
|
-
padding-inline:
|
|
158
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
159
|
+
padding-inline: var(#{inputVars.$fieldPaddingX});
|
|
153
160
|
|
|
154
|
-
min-height:
|
|
161
|
+
min-height: var(#{inputVars.$fieldHeight});
|
|
155
162
|
|
|
156
163
|
&:focus-within {
|
|
157
164
|
@include mixins.simulated-inset-outline(
|
|
@@ -179,6 +186,10 @@ $stateStyleTokens: (
|
|
|
179
186
|
width: tokens.$bm-comp-input-size-field-icon;
|
|
180
187
|
height: tokens.$bm-comp-input-size-field-icon;
|
|
181
188
|
}
|
|
189
|
+
|
|
190
|
+
// Beam icons resize with the field; third-party SVGs keep the fixed size
|
|
191
|
+
// set above, per EPTOOLS-1515 acceptance criteria.
|
|
192
|
+
@include inputVars.field-content-icon;
|
|
182
193
|
}
|
|
183
194
|
|
|
184
195
|
&__dropdown {
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@use '../utils/mixins.scss' as mixins;
|
|
4
4
|
@use '../utils/tokens.scss' as tokens;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
@use './input.vars.scss' as inputVars;
|
|
6
7
|
|
|
7
8
|
@import '@viasat/beam-tokens/components/Input';
|
|
8
9
|
|
|
@@ -44,6 +45,8 @@ $stateStyleTokens: (
|
|
|
44
45
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
45
46
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
46
47
|
|
|
48
|
+
@include inputVars.field-size-scale;
|
|
49
|
+
|
|
47
50
|
@each $state, $styleTokens in $stateStyleTokens {
|
|
48
51
|
&--#{$state} &__field {
|
|
49
52
|
border-color: map.get($styleTokens, borderColor);
|
|
@@ -109,8 +112,8 @@ $stateStyleTokens: (
|
|
|
109
112
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
110
113
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
111
114
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
112
|
-
height:
|
|
113
|
-
padding:
|
|
115
|
+
height: var(#{inputVars.$fieldHeight});
|
|
116
|
+
padding: var(#{inputVars.$fieldPaddingY}) var(#{inputVars.$fieldPaddingX});
|
|
114
117
|
|
|
115
118
|
&:focus-within {
|
|
116
119
|
@include mixins.simulated-inset-outline(
|
|
@@ -130,7 +133,7 @@ $stateStyleTokens: (
|
|
|
130
133
|
width: 100%;
|
|
131
134
|
padding: tokens.$bm-sem-space-0;
|
|
132
135
|
color: tokens.$bm-comp-input-color-text;
|
|
133
|
-
font:
|
|
136
|
+
font: var(#{inputVars.$fieldFont});
|
|
134
137
|
cursor: var(#{$textFieldInputCursor}, text);
|
|
135
138
|
|
|
136
139
|
&:-webkit-autofill {
|
|
@@ -138,7 +141,7 @@ $stateStyleTokens: (
|
|
|
138
141
|
-webkit-text-fill-color: tokens.$bm-comp-input-color-text;
|
|
139
142
|
|
|
140
143
|
@include mixins.simulated-inset-border(
|
|
141
|
-
|
|
144
|
+
var(#{inputVars.$fieldHeight}),
|
|
142
145
|
tokens.$bm-comp-input-color-bg
|
|
143
146
|
);
|
|
144
147
|
}
|
|
@@ -158,5 +161,9 @@ $stateStyleTokens: (
|
|
|
158
161
|
width: tokens.$bm-comp-input-size-field-icon;
|
|
159
162
|
height: tokens.$bm-comp-input-size-field-icon;
|
|
160
163
|
}
|
|
164
|
+
|
|
165
|
+
// Beam icons resize with the field; third-party SVGs keep the fixed size
|
|
166
|
+
// set above, per EPTOOLS-1515 acceptance criteria.
|
|
167
|
+
@include inputVars.field-content-icon;
|
|
161
168
|
}
|
|
162
169
|
}
|