Skip to content

Commit c1991c4

Browse files
feat(textfield,field): add leading/trailing icon spacing tokens
PiperOrigin-RevId: 665383710
1 parent be69438 commit c1991c4

File tree

9 files changed

+59
-10
lines changed

9 files changed

+59
-10
lines changed

field/internal/_content.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,14 @@ $_enter-delay: $_label-duration - $_visible-duration;
4747
justify-content: center;
4848
}
4949

50-
// TODO(b/239188049): remove when layout tokens are ready
51-
.with-start .start,
52-
.with-end .end {
53-
min-width: 48px;
54-
}
55-
5650
.with-start .start {
57-
margin-inline-end: 4px;
51+
margin-inline: var(--_with-leading-content-leading-space)
52+
var(--_content-space);
5853
}
5954

6055
.with-end .end {
61-
margin-inline-start: 4px;
56+
margin-inline: var(--_content-space)
57+
var(--_with-trailing-content-trailing-space);
6258
}
6359

6460
.middle {

testing/tokens.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,11 +180,15 @@ const CSS_SHORTHAND_PROPERTIES = [
180180
'grid-template',
181181
'list-style',
182182
'margin',
183+
'margin-block',
184+
'margin-inline',
183185
'mask',
184186
'offset',
185187
'outline',
186188
'overflow',
187189
'padding',
190+
'padding-block',
191+
'padding-inline',
188192
'place-content',
189193
'place-items',
190194
'place-self',

textfield/internal/_filled-text-field.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
'content-font': var(--_input-text-font),
5656
'content-line-height': var(--_input-text-line-height),
5757
'content-size': var(--_input-text-size),
58+
'content-space': var(--_icon-input-space),
5859
'content-weight': var(--_input-text-weight),
5960
'disabled-active-indicator-color':
6061
var(--_disabled-active-indicator-color),
@@ -142,6 +143,10 @@
142143
'trailing-space': var(--_trailing-space),
143144
'with-label-bottom-space': var(--_with-label-bottom-space),
144145
'with-label-top-space': var(--_with-label-top-space),
146+
'with-leading-content-leading-space':
147+
var(--_with-leading-icon-leading-space),
148+
'with-trailing-content-trailing-space':
149+
var(--_with-trailing-icon-trailing-space),
145150
// go/keep-sorted end
146151
)
147152
);

textfield/internal/_icon.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,28 @@
77
.icon {
88
color: currentColor;
99
display: flex;
10+
align-items: center;
11+
justify-content: center;
1012
fill: currentColor;
13+
position: relative;
1114
}
1215

1316
.icon ::slotted(*) {
1417
// Remove excess whitespace below inline elements
1518
display: flex;
19+
// Absolutely position the icons within their `icon-size` container. This
20+
// supports icon buttons whose actual width and height is greater than the
21+
// 24px `icon-size` due to their 40px ripple.
22+
position: absolute;
1623
}
1724

18-
[hasstart] .icon.leading {
25+
[has-start] .icon.leading {
1926
font-size: var(--_leading-icon-size);
2027
height: var(--_leading-icon-size);
2128
width: var(--_leading-icon-size);
2229
}
2330

24-
[hasend] .icon.trailing {
31+
[has-end] .icon.trailing {
2532
font-size: var(--_trailing-icon-size);
2633
height: var(--_trailing-icon-size);
2734
width: var(--_trailing-icon-size);

textfield/internal/_outlined-text-field.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
'content-font': var(--_input-text-font),
4848
'content-line-height': var(--_input-text-line-height),
4949
'content-size': var(--_input-text-size),
50+
'content-space': var(--_icon-input-space),
5051
'content-weight': var(--_input-text-weight),
5152
'disabled-content-color': var(--_disabled-input-text-color),
5253
'disabled-content-opacity': var(--_disabled-input-text-opacity),
@@ -122,6 +123,10 @@
122123
'top-space': var(--_top-space),
123124
'trailing-content-color': var(--_trailing-icon-color),
124125
'trailing-space': var(--_trailing-space),
126+
'with-leading-content-leading-space':
127+
var(--_with-leading-icon-leading-space),
128+
'with-trailing-content-trailing-space':
129+
var(--_with-trailing-icon-trailing-space),
125130
// go/keep-sorted end
126131
)
127132
);

tokens/_md-comp-filled-field.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ $supported-tokens: (
3232
'content-font',
3333
'content-line-height',
3434
'content-size',
35+
'content-space',
3536
'content-weight',
3637
'disabled-active-indicator-color',
3738
'disabled-active-indicator-height',
@@ -106,6 +107,8 @@ $supported-tokens: (
106107
'trailing-space',
107108
'with-label-bottom-space',
108109
'with-label-top-space',
110+
'with-leading-content-leading-space',
111+
'with-trailing-content-trailing-space',
109112
// go/keep-sorted end
110113
);
111114

@@ -137,6 +140,7 @@ $_default: (
137140
'content-font': map.get($text-field, 'input-text-font'),
138141
'content-line-height': map.get($text-field, 'input-text-line-height'),
139142
'content-size': map.get($text-field, 'input-text-size'),
143+
'content-space': if($exclude-hardcoded-values, null, 16px),
140144
'content-weight': map.get($text-field, 'input-text-weight'),
141145
'disabled-active-indicator-color':
142146
map.get($text-field, 'disabled-active-indicator-color'),
@@ -256,6 +260,10 @@ $_default: (
256260
'trailing-space': if($exclude-hardcoded-values, null, 16px),
257261
'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
258262
'with-label-top-space': if($exclude-hardcoded-values, null, 8px),
263+
'with-leading-content-leading-space':
264+
if($exclude-hardcoded-values, null, 12px),
265+
'with-trailing-content-trailing-space':
266+
if($exclude-hardcoded-values, null, 12px),
259267
// go/keep-sorted end
260268
);
261269

tokens/_md-comp-filled-text-field.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ $supported-tokens: (
8282
'hover-state-layer-opacity',
8383
'hover-supporting-text-color',
8484
'hover-trailing-icon-color',
85+
'icon-input-space',
8586
'input-text-color',
8687
'input-text-font',
8788
'input-text-line-height',
@@ -113,6 +114,8 @@ $supported-tokens: (
113114
'trailing-space',
114115
'with-label-bottom-space',
115116
'with-label-top-space',
117+
'with-leading-icon-leading-space',
118+
'with-trailing-icon-trailing-space',
116119
// go/keep-sorted end
117120
);
118121

@@ -143,6 +146,7 @@ $_default: (
143146
$new-tokens: map.merge(
144147
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
145148
(
149+
'icon-input-space': if($exclude-hardcoded-values, null, 16px),
146150
'leading-space': if($exclude-hardcoded-values, null, 16px),
147151
'trailing-space': if($exclude-hardcoded-values, null, 16px),
148152
'top-space': if($exclude-hardcoded-values, null, 16px),
@@ -155,6 +159,10 @@ $_default: (
155159
'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
156160
// TODO(b/270705687): remove when focus-caret-color token added
157161
'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
162+
'with-leading-icon-leading-space':
163+
if($exclude-hardcoded-values, null, 12px),
164+
'with-trailing-icon-trailing-space':
165+
if($exclude-hardcoded-values, null, 12px),
158166
)
159167
);
160168

tokens/_md-comp-outlined-field.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ $supported-tokens: (
2929
'content-font',
3030
'content-line-height',
3131
'content-size',
32+
'content-space',
3233
'content-weight',
3334
'disabled-content-color',
3435
'disabled-content-opacity',
@@ -99,6 +100,8 @@ $supported-tokens: (
99100
'top-space',
100101
'trailing-content-color',
101102
'trailing-space',
103+
'with-leading-content-leading-space',
104+
'with-trailing-content-trailing-space',
102105
// go/keep-sorted end
103106
);
104107

@@ -127,6 +130,7 @@ $_default: (
127130
'content-font': map.get($text-field, 'input-text-font'),
128131
'content-line-height': map.get($text-field, 'input-text-line-height'),
129132
'content-size': map.get($text-field, 'input-text-size'),
133+
'content-space': if($exclude-hardcoded-values, null, 16px),
130134
'content-weight': map.get($text-field, 'input-text-weight'),
131135
'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
132136
'disabled-content-opacity':
@@ -231,6 +235,10 @@ $_default: (
231235
'top-space': if($exclude-hardcoded-values, null, 16px),
232236
'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
233237
'trailing-space': if($exclude-hardcoded-values, null, 16px),
238+
'with-leading-content-leading-space':
239+
if($exclude-hardcoded-values, null, 12px),
240+
'with-trailing-content-trailing-space':
241+
if($exclude-hardcoded-values, null, 12px),
234242
// go/keep-sorted end
235243
);
236244

tokens/_md-comp-outlined-text-field.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ $supported-tokens: (
7272
'hover-outline-width',
7373
'hover-supporting-text-color',
7474
'hover-trailing-icon-color',
75+
'icon-input-space',
7576
'input-text-color',
7677
'input-text-font',
7778
'input-text-line-height',
@@ -103,6 +104,8 @@ $supported-tokens: (
103104
'trailing-icon-color',
104105
'trailing-icon-size',
105106
'trailing-space',
107+
'with-leading-icon-leading-space',
108+
'with-trailing-icon-trailing-space',
106109
// go/keep-sorted end
107110
);
108111

@@ -132,6 +135,7 @@ $_default: (
132135
$new-tokens: map.merge(
133136
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
134137
(
138+
'icon-input-space': if($exclude-hardcoded-values, null, 16px),
135139
'leading-space': if($exclude-hardcoded-values, null, 16px),
136140
'trailing-space': if($exclude-hardcoded-values, null, 16px),
137141
'top-space': if($exclude-hardcoded-values, null, 16px),
@@ -142,6 +146,10 @@ $_default: (
142146
if($exclude-hardcoded-values, null, 2px),
143147
// TODO(b/270705687): remove when focus-caret-color token added
144148
'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
149+
'with-leading-icon-leading-space':
150+
if($exclude-hardcoded-values, null, 12px),
151+
'with-trailing-icon-trailing-space':
152+
if($exclude-hardcoded-values, null, 12px),
145153
)
146154
);
147155

0 commit comments

Comments
 (0)