Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 43aeea4

Browse files
rlfriedmanrlfriedman
authored
feat(chips): Add mixins to customize horizontal padding and icon margins (#3530)
1 parent 6f758fc commit 43aeea4

File tree

10 files changed

+550
-22
lines changed

10 files changed

+550
-22
lines changed

‎packages/mdc-chips/README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,14 +208,17 @@ Mixin | Description
208208
`mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
209209
`mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state
210210
`mdc-chip-outline($width, $style, $color)` | Customizes the outline properties for a chip
211-
`mdc-chip-outline-width($width)` | Customizes the outline width for a chip
211+
`mdc-chip-outline-width($width, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value
212212
`mdc-chip-outline-style($style)` | Customizes the outline style for a chip
213213
`mdc-chip-outline-color($color)` | Customizes the outline color for a chip
214214
`mdc-chip-height($height)` | Customizes the height for a chip
215+
`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding for a chip
215216
`mdc-chip-leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity
216217
`mdc-chip-trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities
217218
`mdc-chip-leading-icon-size($size)` | Customizes the size of a leading icon in a chip
218219
`mdc-chip-trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip
220+
`mdc-chip-leading-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a leading icon in a chip
221+
`mdc-chip-trailing-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a trailing icon in a chip
219222

220223
> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
221224

‎packages/mdc-chips/_mixins.scss

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -93,15 +93,19 @@
9393
border-style: $style;
9494
}
9595

96-
@mixin mdc-chip-outline-width($width) {
96+
@mixin mdc-chip-outline-width($width, $horizontal-padding: $mdc-chip-horizontal-padding) {
9797
// Note: Adjust padding to maintain consistent width with non-outlined chips
98-
$horizontal-padding-value: max($mdc-chip-horizontal-padding - $width, 0);
98+
$horizontal-padding-value: max($horizontal-padding - $width, 0);
9999
$vertical-padding-value: max($mdc-chip-vertical-padding - $width, 0);
100100

101101
padding: $vertical-padding-value $horizontal-padding-value;
102102
border-width: $width;
103103
}
104104

105+
@mixin mdc-chip-horizontal-padding($padding) {
106+
padding: $mdc-chip-vertical-padding $padding;
107+
}
108+
105109
@mixin mdc-chip-height($height) {
106110
height: $height;
107111
}
@@ -114,12 +118,8 @@
114118
}
115119
}
116120

117-
// For customizing icon styles, we need to increase specifity to ensure
118-
// overrides apply. Styles defined in the .material-icons CSS class are
119-
// loaded separately, so the order of CSS definitions is not guaranteed.
120-
121121
@mixin mdc-chip-leading-icon-color($color, $opacity: $mdc-chip-icon-opacity) {
122-
.mdc-chip__icon.mdc-chip__icon--leading {
122+
.mdc-chip__icon--leading {
123123
color: rgba(mdc-theme-prop-value($color), $opacity);
124124
}
125125
}
@@ -129,7 +129,7 @@
129129
$opacity: $mdc-chip-icon-opacity,
130130
$hover-opacity: $mdc-chip-trailing-icon-hover-opacity,
131131
$focus-opacity: $mdc-chip-trailing-icon-focus-opacity) {
132-
.mdc-chip__icon.mdc-chip__icon--trailing {
132+
.mdc-chip__icon--trailing {
133133
color: rgba(mdc-theme-prop-value($color), $opacity);
134134

135135
&:hover {
@@ -142,6 +142,10 @@
142142
}
143143
}
144144

145+
// For customizing icon size, we need to increase specifity to ensure
146+
// overrides apply. Styles defined in the .material-icons CSS class are
147+
// loaded separately, so the order of CSS definitions is not guaranteed.
148+
145149
@mixin mdc-chip-leading-icon-size($size) {
146150
.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
147151
@include mdc-chip-icon-size_($size);
@@ -159,3 +163,24 @@
159163
height: $size;
160164
font-size: $size;
161165
}
166+
167+
@mixin mdc-chip-leading-icon-margin(
168+
$top: $mdc-chip-leading-icon-margin-top,
169+
$right: $mdc-chip-leading-icon-margin-right,
170+
$bottom: $mdc-chip-leading-icon-margin-bottom,
171+
$left: $mdc-chip-leading-icon-margin-left) {
172+
&.mdc-chip--selected .mdc-chip__checkmark,
173+
.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
174+
margin: $top $right $bottom $left;
175+
}
176+
}
177+
178+
@mixin mdc-chip-trailing-icon-margin(
179+
$top: $mdc-chip-trailing-icon-margin-top,
180+
$right: $mdc-chip-trailing-icon-margin-right,
181+
$bottom: $mdc-chip-trailing-icon-margin-bottom,
182+
$left: $mdc-chip-trailing-icon-margin-left) {
183+
.mdc-chip__icon--trailing {
184+
margin: $top $right $bottom $left;
185+
}
186+
}

‎packages/mdc-chips/_variables.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,13 @@ $mdc-chip-checkmark-animation-delay: 50ms;
4242
$mdc-chip-checkmark-animation-duration: 150ms;
4343
$mdc-chip-width-animation-duration: 150ms;
4444
$mdc-chip-opacity-animation-duration: 75ms;
45+
46+
$mdc-chip-leading-icon-margin-top: -4px;
47+
$mdc-chip-leading-icon-margin-right: 4px;
48+
$mdc-chip-leading-icon-margin-bottom: -4px;
49+
$mdc-chip-leading-icon-margin-left: -4px;
50+
51+
$mdc-chip-trailing-icon-margin-top: 0;
52+
$mdc-chip-trailing-icon-margin-right: -4px;
53+
$mdc-chip-trailing-icon-margin-bottom: 0;
54+
$mdc-chip-trailing-icon-margin-left: 4px;

‎packages/mdc-chips/chip/mdc-chip.scss

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,9 @@
3636
@include mdc-chip-corner-radius($mdc-chip-border-radius-default);
3737
@include mdc-chip-fill-color($mdc-chip-fill-color-default);
3838
@include mdc-chip-ink-color($mdc-chip-ink-color-default);
39-
@include mdc-chip-leading-icon-color($mdc-chip-icon-color);
40-
@include mdc-chip-trailing-icon-color($mdc-chip-icon-color);
41-
@include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size);
42-
@include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
4339
@include mdc-typography(body2);
4440
@include mdc-chip-height($mdc-chip-height-default);
41+
@include mdc-chip-leading-icon-margin();
4542

4643
display: inline-flex;
4744
position: relative;
@@ -57,6 +54,14 @@
5754
}
5855
}
5956

57+
@at-root {
58+
@include mdc-chip-leading-icon-color($mdc-chip-icon-color);
59+
@include mdc-chip-trailing-icon-color($mdc-chip-icon-color);
60+
@include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size);
61+
@include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
62+
@include mdc-chip-trailing-icon-margin();
63+
}
64+
6065
.mdc-chip--exit {
6166
transition:
6267
opacity 75ms $mdc-animation-standard-curve-timing-function,
@@ -76,14 +81,8 @@
7681
vertical-align: middle;
7782
}
7883

79-
.mdc-chip__icon--trailing {
80-
margin: 0 -4px 0 4px;
81-
}
82-
83-
.mdc-chip__checkmark,
84-
.mdc-chip__icon--leading {
84+
.mdc-chip__checkmark {
8585
height: $mdc-chip-leading-icon-size;
86-
margin: -4px 4px -4px -4px;
8786
}
8887

8988
.mdc-chip__checkmark-path {

‎test/screenshot/golden.json

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,15 @@
278278
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/height.html.windows_ie_11.png"
279279
}
280280
},
281+
"spec/mdc-chips/mixins/horizontal-padding.html": {
282+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/horizontal-padding.html?utm_source=golden_json",
283+
"screenshots": {
284+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/horizontal-padding.html.windows_chrome_69.png",
285+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/horizontal-padding.html.windows_edge_17.png",
286+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/horizontal-padding.html.windows_firefox_62.png",
287+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/horizontal-padding.html.windows_ie_11.png"
288+
}
289+
},
281290
"spec/mdc-chips/mixins/ink-color.html": {
282291
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/ink-color.html?utm_source=golden_json",
283292
"screenshots": {
@@ -296,6 +305,15 @@
296305
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/leading-icon-color.html.windows_ie_11.png"
297306
}
298307
},
308+
"spec/mdc-chips/mixins/leading-icon-margin.html": {
309+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/17/18_18_41_165/spec/mdc-chips/mixins/leading-icon-margin.html?utm_source=golden_json",
310+
"screenshots": {
311+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/17/18_18_41_165/spec/mdc-chips/mixins/leading-icon-margin.html.windows_chrome_69.png",
312+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/17/18_18_41_165/spec/mdc-chips/mixins/leading-icon-margin.html.windows_edge_17.png",
313+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/17/18_18_41_165/spec/mdc-chips/mixins/leading-icon-margin.html.windows_firefox_62.png",
314+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/17/18_18_41_165/spec/mdc-chips/mixins/leading-icon-margin.html.windows_ie_11.png"
315+
}
316+
},
299317
"spec/mdc-chips/mixins/leading-icon-size.html": {
300318
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/leading-icon-size.html?utm_source=golden_json",
301319
"screenshots": {
@@ -332,6 +350,15 @@
332350
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/trailing-icon-color.html.windows_ie_11.png"
333351
}
334352
},
353+
"spec/mdc-chips/mixins/trailing-icon-margin.html": {
354+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/trailing-icon-margin.html?utm_source=golden_json",
355+
"screenshots": {
356+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/trailing-icon-margin.html.windows_chrome_69.png",
357+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/trailing-icon-margin.html.windows_edge_17.png",
358+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/trailing-icon-margin.html.windows_firefox_62.png",
359+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/spec/mdc-chips/mixins/trailing-icon-margin.html.windows_ie_11.png"
360+
}
361+
},
335362
"spec/mdc-chips/mixins/trailing-icon-size.html": {
336363
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/trailing-icon-size.html?utm_source=golden_json",
337364
"screenshots": {
@@ -341,7 +368,7 @@
341368
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/20_54_11_470/spec/mdc-chips/mixins/trailing-icon-size.html.windows_ie_11.png"
342369
}
343370
},
344-
"spec/mdc-dialog/classes/baseline-alert.html": {
371+
"spec/mdc-dialog/classes/baseline-alert.html": {
345372
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/12/22_19_10_073/spec/mdc-dialog/classes/baseline-alert.html?utm_source=golden_json",
346373
"screenshots": {
347374
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/12/22_19_10_073/spec/mdc-dialog/classes/baseline-alert.html.windows_chrome_69.png",

‎test/screenshot/spec/mdc-chips/classes/filter.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@
9898

9999
<div class="test-cell test-cell--chip">
100100
<div class="mdc-chip-set mdc-chip-set--filter">
101-
<i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
102101
<div class="mdc-chip mdc-chip--selected" tabindex="0">
102+
<i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
103103
<div class="mdc-chip__checkmark" >
104104
<svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
105105
<path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>

‎test/screenshot/spec/mdc-chips/fixture.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,15 @@ $custom-chip-ink-color: $material-color-blue-500;
7979
.custom-chip--trailing-icon-size {
8080
@include mdc-chip-trailing-icon-size(25px);
8181
}
82+
83+
.custom-chip--leading-icon-margin {
84+
@include mdc-chip-leading-icon-margin(5px, 5px, 5px, 5px);
85+
}
86+
87+
.custom-chip--trailing-icon-margin {
88+
@include mdc-chip-trailing-icon-margin(5px, 5px, 5px, 5px);
89+
}
90+
91+
.custom-chip--horizontal-padding {
92+
@include mdc-chip-horizontal-padding(15px);
93+
}

0 commit comments

Comments
 (0)