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

Commit f648b2d

Browse files
abhiomkarabhiomkar
committed
fix(shape): Allow percentage based global overrides (#4548)
(cherry picked from commit 4bf7a86)
1 parent 01e0859 commit f648b2d

File tree

5 files changed

+218
-3
lines changed

5 files changed

+218
-3
lines changed

‎packages/mdc-shape/_functions.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,15 @@
7171
}
7272

7373
@function mdc-shape-resolve-percentage-for-corner_($component-height, $radius) {
74-
@if type-of($radius) == "number" and unit($radius) == "%" {
74+
$radius-value: mdc-shape-prop-corner-value_($radius);
75+
76+
@if type-of($radius-value) == "number" and unit($radius-value) == "%" {
7577
// Converts the percentage to number without unit. Example: 50% => 50.
76-
$percentage: $radius / ($radius * 0 + 1);
78+
$percentage: $radius-value / ($radius-value * 0 + 1);
7779

7880
@return $component-height * ($percentage / 100);
7981
} @else {
80-
@return $radius;
82+
@return $radius-value;
8183
}
8284
}
8385

‎test/screenshot/golden.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1087,6 +1087,14 @@
10871087
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/21/19_18_38_795/spec/mdc-select/mixins/shape-radius.html.windows_ie_11.png"
10881088
}
10891089
},
1090+
"spec/mdc-shape/variables/override.html": {
1091+
"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",
1092+
"screenshots": {
1093+
"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",
1094+
"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",
1095+
"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"
1096+
}
1097+
},
10901098
"spec/mdc-snackbar/classes/baseline-with-action.html": {
10911099
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2019/02/11/21_55_33_374/spec/mdc-snackbar/classes/baseline-with-action.html?utm_source=golden_json",
10921100
"screenshots": {

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google Inc.
4+
*
5+
* Permission is hereby granted, free of charge, to any person obtaining a copy
6+
* of this software and associated documentation files (the "Software"), to deal
7+
* in the Software without restriction, including without limitation the rights
8+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
* copies of the Software, and to permit persons to whom the Software is
10+
* furnished to do so, subject to the following conditions:
11+
*
12+
* The above copyright notice and this permission notice shall be included in
13+
* all copies or substantial portions of the Software.
14+
*
15+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
* THE SOFTWARE.
22+
*/
23+
24+
window.mdc.testFixture.fontsLoaded.then(() => {
25+
window.mdc.testFixture.notifyDomReady();
26+
});

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
//
2+
// Copyright 2019 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
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";
33+
@import "../mixins";
34+
35+
.test-cell--fab,
36+
.test-cell--button,
37+
.test-cell--textfield,
38+
.test-cell--select {
39+
@include test-cell-size(301, 81);
40+
}

‎test/screenshot/spec/mdc-shape/variables/override.html

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2019 Google Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+
-->
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>Shape Global Overrides - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
29+
<link rel="stylesheet" href="../../../out/spec/mdc-shape/fixture.css">
30+
31+
<!-- Global site tag (gtag.js) - Google Analytics -->
32+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
33+
<script>
34+
window.dataLayer = window.dataLayer || [];
35+
function gtag(){dataLayer.push(arguments);}
36+
gtag('js', new Date());
37+
gtag('config', 'UA-118996389-2');
38+
</script>
39+
</head>
40+
41+
<body class="test-container">
42+
<main class="test-viewport test-viewport--mobile">
43+
<div class="test-layout">
44+
<div class="test-cell test-cell--fab">
45+
<button class="mdc-fab" aria-label="Favorite">
46+
<span class="mdc-fab__icon material-icons">favorite_border</span>
47+
</button>
48+
</div>
49+
50+
<div class="test-cell test-cell--fab">
51+
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
52+
<span class="material-icons mdc-fab__icon">add</span>
53+
<span class="mdc-fab__label">Create</span>
54+
</button>
55+
</div>
56+
<div class="test-cell test-cell--button">
57+
<button class="mdc-button mdc-button--raised">
58+
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
59+
<span class="mdc-button__label">Font Icon</span>
60+
</button>
61+
</div>
62+
63+
<div class="test-cell test-cell--textfield">
64+
<div class="mdc-text-field">
65+
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
66+
<label class="mdc-floating-label" for="filled-text-field">Label</label>
67+
<div class="mdc-line-ripple"></div>
68+
</div>
69+
</div>
70+
71+
<div class="test-cell test-cell--textfield">
72+
<div class="mdc-text-field mdc-text-field--outlined">
73+
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
74+
<div class="mdc-notched-outline">
75+
<div class="mdc-notched-outline__leading"></div>
76+
<div class="mdc-notched-outline__notch">
77+
<label for="outlined-text-field" class="mdc-floating-label">Label</label>
78+
</div>
79+
<div class="mdc-notched-outline__trailing"></div>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="test-cell test-cell--select">
85+
<div class="mdc-select">
86+
<select class="mdc-select__native-control" id="my-select">
87+
<option selected></option>
88+
<option value="grains">
89+
Bread, Cereal, Rice, and Pasta
90+
</option>
91+
<option value="vegetables">
92+
Vegetables
93+
</option>
94+
<option value="fruit">
95+
Fruit
96+
</option>
97+
</select>
98+
<label class="mdc-floating-label" for="my-select">Pick a Food Group</label>
99+
<i class="mdc-select__dropdown-icon"></i>
100+
<div class="mdc-line-ripple"></div>
101+
</div>
102+
</div>
103+
104+
<div class="test-cell test-cell--select">
105+
<div class="mdc-select mdc-select--outlined">
106+
<select class="mdc-select__native-control" id="my-select2">
107+
<option selected></option>
108+
<option value="grains">
109+
Bread, Cereal, Rice, and Pasta
110+
</option>
111+
<option value="vegetables">
112+
Vegetables
113+
</option>
114+
<option value="fruit">
115+
Fruit
116+
</option>
117+
</select>
118+
<i class="mdc-select__dropdown-icon"></i>
119+
<div class="mdc-notched-outline">
120+
<div class="mdc-notched-outline__leading"></div>
121+
<div class="mdc-notched-outline__notch">
122+
<label class="mdc-floating-label" for="my-select2">Pick a Food Group</label>
123+
</div>
124+
<div class="mdc-notched-outline__trailing"></div>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
</main>
130+
131+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
132+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
133+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
134+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
135+
<script src="../../../out/material-components-web.js"></script>
136+
<script src="../../../out/spec/fixture.js"></script>
137+
<script src="../../../out/spec/mdc-shape/fixture.js"></script>
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)