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

Commit 9f79d17

Browse files
kfranqueirokfranqueiro
authored
fix(shape): Fix errors related to multi-value shape categories (#4547)
1 parent f2db177 commit 9f79d17

File tree

7 files changed

+125
-78
lines changed

7 files changed

+125
-78
lines changed

‎packages/mdc-notched-outline/_mixins.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,13 @@
4545
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
4646
$radius: mdc-shape-prop-value($radius);
4747

48+
@if (length($radius) > 1) {
49+
// stylelint-disable-next-line max-line-length
50+
@warn "mdc-notched-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140";
51+
}
52+
53+
$radius: nth($radius, 1);
54+
4855
.mdc-notched-outline__leading {
4956
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
5057

‎packages/mdc-select/_mixins.scss

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,12 @@
108108
}
109109

110110
@mixin mdc-select-outline-shape-radius($radius, $rtl-reflexive: false) {
111-
$resolved-radius: mdc-shape-resolve-percentage-radius($mdc-select-height, $radius);
111+
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($mdc-select-height, mdc-shape-prop-value($radius)), 1);
112+
113+
@if (length(mdc-shape-prop-value($radius)) > 1) {
114+
// stylelint-disable-next-line max-line-length
115+
@warn "mdc-select-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140";
116+
}
112117

113118
.mdc-notched-outline {
114119
@include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
@@ -118,21 +123,19 @@
118123
@include mdc-shape-radius($resolved-radius, $rtl-reflexive);
119124
}
120125

121-
$radius-pixels: mdc-shape-prop-value($resolved-radius);
122-
123-
@if ($radius-pixels > $mdc-notched-outline-leading-width) {
126+
@if ($resolved-radius > $mdc-notched-outline-leading-width) {
124127
.mdc-select__native-control {
125128
@include mdc-rtl-reflexive-property(
126129
padding,
127-
$radius-pixels + $mdc-notched-outline-padding,
130+
$resolved-radius + $mdc-notched-outline-padding,
128131
$mdc-select-arrow-padding
129132
);
130133
}
131134

132135
+ .mdc-select-helper-text {
133136
@include mdc-rtl-reflexive-property(
134137
margin,
135-
$radius-pixels + $mdc-notched-outline-padding,
138+
$resolved-radius + $mdc-notched-outline-padding,
136139
$mdc-select-outline-label-offset
137140
);
138141
}

‎packages/mdc-shape/_functions.scss

Lines changed: 61 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@
5757
// mdc-shape-resolve-percentage-radius(36px, 50%) => `18px` (i.e., 36px / 2)
5858
//
5959
@function mdc-shape-resolve-percentage-radius($component-height, $radius) {
60+
$radius: mdc-shape-prop-value($radius);
61+
6062
@if type-of($radius) == "list" {
6163
$radius-value: ();
6264

@@ -70,59 +72,43 @@
7072
}
7173
}
7274

73-
@function mdc-shape-resolve-percentage-for-corner_($component-height, $radius) {
74-
$radius-value: mdc-shape-prop-corner-value_($radius);
75-
76-
@if type-of($radius-value) == "number" and unit($radius-value) == "%" {
77-
// Converts the percentage to number without unit. Example: 50% => 50.
78-
$percentage: $radius-value / ($radius-value * 0 + 1);
79-
80-
@return $component-height * ($percentage / 100);
81-
} @else {
82-
@return $radius-value;
83-
}
84-
}
85-
86-
//
87-
// Strips unit from number. This is accomplished by dividing the value by itself to cancel out units, while resulting
88-
// in a denominator of 1.
89-
//
90-
// Examples:
91-
//
92-
// 50% => 50
93-
//
94-
@function mdc-shape-strip-unit_($number) {
95-
@if type-of($number) == "number" and not unitless($number) {
96-
@return $number / ($number * 0 + 1);
97-
}
98-
99-
@return $number;
100-
}
101-
10275
//
10376
// Returns $radius value of shape category - `large`, `medium` or `small`.
10477
// Otherwise, it returns the $radius itself if valid.
105-
// $radius can be a single value or list of up to 4.
78+
// $radius can be a single value, or a list of up to 4 values.
10679
//
10780
// Examples:
10881
//
10982
// mdc-shape-prop-value(small) => 4px
83+
// mdc-shape-prop-value(small small 0 0) => 4px 4px 0 0
11084
//
11185
@function mdc-shape-prop-value($radius) {
11286
@if type-of($radius) == "list" {
11387
@if length($radius) > 4 {
11488
@error "Invalid radius: '#{$radius}' is more than 4 values";
11589
}
11690

117-
$radius-value: ();
91+
$radius-values: ();
11892

119-
@each $corner in $radius {
120-
$radius-value: append($radius-value, mdc-shape-prop-corner-value_($corner));
93+
@for $i from 1 through length($radius) {
94+
$corner: nth($radius, $i);
95+
96+
@if map-has-key($mdc-shape-category-values, $corner) {
97+
// If a category is encountered within a list of radii, apply the category's value for the corresponding corner
98+
$radius-values:
99+
append($radius-values, nth(mdc-shape-unpack-radius_(map-get($mdc-shape-category-values, $corner)), $i));
100+
} @else {
101+
$radius-values: append($radius-values, mdc-shape-validate-radius-value_($corner));
102+
}
121103
}
122104

123-
@return $radius-value;
105+
@return $radius-values;
124106
} @else {
125-
@return mdc-shape-prop-corner-value_($radius);
107+
@if map-has-key($mdc-shape-category-values, $radius) {
108+
@return map-get($mdc-shape-category-values, $radius);
109+
} @else {
110+
@return mdc-shape-validate-radius-value_($radius);
111+
}
126112
}
127113
}
128114

@@ -147,34 +133,58 @@
147133
@error "Expected masked-corners of length 4 but got '#{length($masked-corners)}'.";
148134
}
149135

150-
@if length($radius) == 3 {
151-
$radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 2);
152-
} @else if length($radius) == 2 {
153-
$radius: nth($radius, 1) nth($radius, 2) nth($radius, 1) nth($radius, 2);
154-
} @else if length($radius) == 1 {
155-
$radius: $radius $radius $radius $radius;
156-
}
136+
$radius: mdc-shape-unpack-radius_($radius);
157137

158138
@return if(nth($masked-corners, 1) == 1, nth($radius, 1), 0)
159139
if(nth($masked-corners, 2) == 1, nth($radius, 2), 0)
160140
if(nth($masked-corners, 3) == 1, nth($radius, 3), 0)
161141
if(nth($masked-corners, 4) == 1, nth($radius, 4), 0);
162142
}
163143

164-
@function mdc-shape-prop-corner-value_($radius) {
165-
@if map-has-key($mdc-shape-category-values, $radius) {
166-
@return map-get($mdc-shape-category-values, $radius);
167-
} @else if mdc-shape-is-valid-radius-value_($radius) {
144+
//
145+
// Unpacks shorthand values for border-radius (i.e. lists of 1-3 values).
146+
// If a list of 4 values is given, it is returned as-is.
147+
//
148+
// Examples:
149+
//
150+
// 1. mdc-shape-unpack-radius_(4px) => 4px 4px 4px 4px
151+
// 2. mdc-shape-unpack-radius_(4px 2px) => 4px 2px 4px 2px
152+
// 3. mdc-shape-unpack-radius_(4px 2px 2px) => 4px 2px 2px 2px
153+
// 2. mdc-shape-unpack-radius_(4px 2px 0 2px) => 4px 2px 0 2px
154+
//
155+
// TODO: This is private for purposes of getting it into a patch; make it public for a future minor/major release.
156+
//
157+
@function mdc-shape-unpack-radius_($radius) {
158+
@if length($radius) == 4 {
168159
@return $radius;
169-
} @else {
170-
@error "Invalid radius: '#{$radius}' radius is not supported";
160+
} @else if length($radius) == 3 {
161+
@return nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 2);
162+
} @else if length($radius) == 2 {
163+
@return nth($radius, 1) nth($radius, 2) nth($radius, 1) nth($radius, 2);
164+
} @else if length($radius) == 1 {
165+
@return $radius $radius $radius $radius;
171166
}
172167

173-
@return map-get($mdc-shape-category-values, $radius);
168+
@error "Invalid radius: '#{$radius}' is more than 4 values";
169+
}
170+
171+
@function mdc-shape-resolve-percentage-for-corner_($component-height, $radius) {
172+
@if type-of($radius) == "number" and unit($radius) == "%" {
173+
// Converts the percentage to number without unit. Example: 50% => 50.
174+
$percentage: $radius / ($radius * 0 + 1);
175+
176+
@return $component-height * ($percentage / 100);
177+
} @else {
178+
@return $radius;
179+
}
174180
}
175181

176-
@function mdc-shape-is-valid-radius-value_($radius) {
182+
@function mdc-shape-validate-radius-value_($radius) {
177183
$is-number: type-of($radius) == "number";
178184

179-
@return $is-number or str_index($radius, "var(") or str_index($radius, "calc(");
185+
@if not ($is-number or str_index($radius, "var(") or str_index($radius, "calc(")) {
186+
@error "Invalid radius: #{$radius}";
187+
}
188+
189+
@return $radius;
180190
}

‎packages/mdc-textfield/_mixins.scss

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -217,21 +217,24 @@
217217
}
218218

219219
@mixin mdc-text-field-outline-shape-radius($radius, $rtl-reflexive: false) {
220-
$resolved-radius: mdc-shape-resolve-percentage-radius($mdc-text-field-height, $radius);
220+
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($mdc-text-field-height, mdc-shape-prop-value($radius)), 1);
221+
222+
@if (length(mdc-shape-prop-value($radius)) > 1) {
223+
// stylelint-disable-next-line max-line-length
224+
@warn "mdc-text-field-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140";
225+
}
221226

222227
.mdc-notched-outline {
223228
@include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
224229
}
225230

226-
$radius-pixels: mdc-shape-prop-value($resolved-radius);
227-
228-
@if ($radius-pixels > $mdc-notched-outline-leading-width) {
231+
@if ($resolved-radius > $mdc-notched-outline-leading-width) {
229232
.mdc-text-field__input {
230-
@include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, 0);
233+
@include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, 0);
231234
}
232235

233236
+ .mdc-text-field-helper-line {
234-
@include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, $radius-pixels);
237+
@include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, $resolved-radius);
235238
}
236239
}
237240
}

‎test/screenshot/golden.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1080,11 +1080,11 @@
10801080
}
10811081
},
10821082
"spec/mdc-shape/variables/override.html": {
1083-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/28/02_09_33_134/spec/mdc-shape/variables/override.html?utm_source=golden_json",
1083+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/02/18_11_26_590/spec/mdc-shape/variables/override.html?utm_source=golden_json",
10841084
"screenshots": {
1085-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/28/02_09_33_134/spec/mdc-shape/variables/override.html.windows_chrome_73.png",
1086-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/28/02_09_33_134/spec/mdc-shape/variables/override.html.windows_firefox_65.png",
1087-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/28/02_09_33_134/spec/mdc-shape/variables/override.html.windows_ie_11.png"
1085+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/02/18_11_26_590/spec/mdc-shape/variables/override.html.windows_chrome_73.png",
1086+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/02/18_11_26_590/spec/mdc-shape/variables/override.html.windows_firefox_65.png",
1087+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/02/18_11_26_590/spec/mdc-shape/variables/override.html.windows_ie_11.png"
10881088
}
10891089
},
10901090
"spec/mdc-snackbar/classes/baseline-with-action.html": {

‎test/screenshot/spec/mdc-shape/fixture.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,18 @@
2222
*/
2323

2424
window.mdc.testFixture.fontsLoaded.then(() => {
25+
[].forEach.call(document.querySelectorAll('.mdc-text-field'), (el) => {
26+
mdc.textField.MDCTextField.attachTo(el);
27+
});
28+
29+
// Fixes the wide notched outline issue.
30+
[].forEach.call(document.querySelectorAll('.mdc-text-field__input[value=" "]'), (el) => {
31+
el.value = '';
32+
});
33+
34+
[].forEach.call(document.querySelectorAll('.mdc-select'), (el) => {
35+
mdc.select.MDCSelect.attachTo(el);
36+
});
37+
2538
window.mdc.testFixture.notifyDomReady();
2639
});

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,32 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
// stylelint-disable scss/dollar-variable-pattern
24-
$mdc-shape-small-component-radius: 50%;
25-
$mdc-shape-medium-component-radius: 50%;
26-
$mdc-shape-large-component-radius: 50%;
27-
// stylelint-enable scss/dollar-variable-pattern
28-
29-
@import "../../../../packages/mdc-button/mdc-button";
30-
@import "../../../../packages/mdc-fab/mdc-fab";
31-
@import "../../../../packages/mdc-textfield/mdc-text-field";
32-
@import "../../../../packages/mdc-select/mdc-select";
3323
@import "../mixins";
3424

3525
.test-cell--fab,
36-
.test-cell--button,
26+
.test-cell--button {
27+
// stylelint-disable scss/dollar-variable-pattern
28+
$mdc-shape-small-component-radius: 0 50% 0 50%;
29+
// stylelint-enable scss/dollar-variable-pattern
30+
31+
@at-root {
32+
@import "../../../../packages/mdc-button/mdc-button";
33+
@import "../../../../packages/mdc-fab/mdc-fab";
34+
}
35+
36+
@include test-cell-size(301, 81);
37+
}
38+
3739
.test-cell--textfield,
3840
.test-cell--select {
41+
// stylelint-disable scss/dollar-variable-pattern
42+
$mdc-shape-small-component-radius: 50%;
43+
// stylelint-enable scss/dollar-variable-pattern
44+
45+
@at-root {
46+
@import "../../../../packages/mdc-textfield/mdc-text-field";
47+
@import "../../../../packages/mdc-select/mdc-select";
48+
}
49+
3950
@include test-cell-size(301, 81);
4051
}

0 commit comments

Comments
 (0)