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

Commit a1c0930

Browse files
williamernestwilliamernest
authored
fix(select): Fix outlined select not changing color without label (#3433)
1 parent 325317c commit a1c0930

File tree

7 files changed

+142
-4
lines changed

7 files changed

+142
-4
lines changed

‎packages/mdc-notched-outline/foundation.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,12 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
9999
const height = this.adapter_.getHeight();
100100
const cornerWidth = radius + 1.2;
101101
const leadingStrokeLength = Math.abs(12 - cornerWidth);
102-
const paddedNotchWidth = notchWidth + 8;
102+
103+
// If the notchWidth is 0, the the notched outline doesn't need to add padding.
104+
let paddedNotchWidth = 0;
105+
if (notchWidth > 0) {
106+
paddedNotchWidth = notchWidth + 8;
107+
}
103108

104109
// The right, bottom, and left sides of the outline follow the same SVG path.
105110
const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius

‎packages/mdc-select/foundation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class MDCSelectFoundation extends MDCFoundation {
121121
* @param {boolean} openNotch
122122
*/
123123
notchOutline(openNotch) {
124-
if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
124+
if (!this.adapter_.hasOutline()) {
125125
return;
126126
}
127127

‎test/screenshot/golden.json

+9
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,15 @@
395395
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png"
396396
}
397397
},
398+
"spec/mdc-select/issues/3230.html": {
399+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html",
400+
"screenshots": {
401+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_chrome_68.png",
402+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_edge_17.png",
403+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_firefox_61.png",
404+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_ie_11.png"
405+
}
406+
},
398407
"spec/mdc-switch/classes/baseline.html": {
399408
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/23/18_31_44_533/spec/mdc-switch/classes/baseline.html",
400409
"screenshots": {

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* @license
3+
* Copyright 2018 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+
[].forEach.call(document.querySelectorAll('.mdc-select'), (el) => {
26+
mdc.select.MDCSelect.attachTo(el);
27+
});
28+
});

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//
2+
// Copyright 2018 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+
.test-cell--select {
24+
width: 301px;
25+
height: 121px;
26+
}

‎test/screenshot/spec/mdc-select/issues/3230.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 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>Issue 3230 - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/mdc.select.css">
29+
<link rel="stylesheet" href="../../../out/mdc.typography.css">
30+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
31+
<link rel="stylesheet" href="../../../out/spec/mdc-select/fixture.css">
32+
</head>
33+
34+
<body class="test-container mdc-typography">
35+
<main class="test-viewport test-viewport--mobile">
36+
<div class="test-layout">
37+
38+
<!-- This tests that the outlined select will still turn the primary color when it does not have a floating label -->
39+
<!-- See https://github.com/material-components/material-components-web/issues/3230 -->
40+
<div class="test-cell test-cell--select">
41+
<div class="mdc-select mdc-select--outlined">
42+
<select class="mdc-select__native-control" id="my-select" autofocus>
43+
<option value="grains" selected>
44+
Bread, Cereal, Rice, and Pasta
45+
</option>
46+
<option value="vegetables" disabled>
47+
Vegetables
48+
</option>
49+
</select>
50+
<div class="mdc-notched-outline mdc-notched-outline--notched">
51+
<svg>
52+
<path class="mdc-notched-outline__path"/>
53+
</svg>
54+
</div>
55+
<div class="mdc-notched-outline__idle"></div>
56+
</div>
57+
</div>
58+
59+
</div>
60+
</main>
61+
62+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
63+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
64+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
65+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
66+
<script src="../../../out/material-components-web.js"></script>
67+
<script src="../../../out/spec/fixture.js"></script>
68+
<script src="../../../out/spec/mdc-select/fixture.js"></script>
69+
</body>
70+
</html>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ $custom-switch-color: $material-color-red-500;
3232

3333
.custom-switch--thumb-color {
3434
@include mdc-switch-toggled-on-thumb-color($custom-switch-color);
35-
@include mdc-switch-toggled-off-thumb-color($custom-switch-color)
35+
@include mdc-switch-toggled-off-thumb-color($custom-switch-color);
3636
}
3737

3838
.custom-switch--track-color {
3939
@include mdc-switch-toggled-on-track-color($custom-switch-color);
40-
@include mdc-switch-toggled-off-track-color($custom-switch-color)
40+
@include mdc-switch-toggled-off-track-color($custom-switch-color);
4141
}

0 commit comments

Comments
 (0)