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

Commit ee93c61

Browse files
williamernestwilliamernest
authored
fix(notched-outline): Add alignment (#3349)
Prevent parent element text-align: center from causing the notched outline to center.
1 parent c8af69b commit ee93c61

File tree

4 files changed

+75
-0
lines changed

4 files changed

+75
-0
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
@import "@material/animation/variables";
1818
@import "@material/base/mixins";
19+
@import "@material/rtl/mixins";
1920
@import "./mixins";
2021
@import "./variables";
2122

@@ -29,8 +30,13 @@
2930
height: calc(100% - 2px);
3031
transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
3132
opacity: 0;
33+
text-align: left;
3234
overflow: hidden;
3335

36+
@include mdc-rtl {
37+
text-align: right;
38+
}
39+
3440
// stylelint-disable selector-max-type
3541
svg {
3642
position: absolute;

‎packages/mdc-notched-outline/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"@material/animation": "^0.34.0",
2222
"@material/base": "^0.35.0",
23+
"@material/rtl": "^0.36.0",
2324
"@material/theme": "^0.38.0"
2425
}
2526
}

‎test/screenshot/golden.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -769,6 +769,15 @@
769769
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/09/19_34_31_396/spec/mdc-textfield/classes/textarea.html.windows_ie_11.png"
770770
}
771771
},
772+
"spec/mdc-textfield/issues/3332.html": {
773+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/08/14/18_11_32_299/spec/mdc-textfield/issues/3332.html",
774+
"screenshots": {
775+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/08/14/18_11_32_299/spec/mdc-textfield/issues/3332.html.windows_chrome_68.png",
776+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/08/14/18_11_32_299/spec/mdc-textfield/issues/3332.html.windows_edge_17.png",
777+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/08/14/18_11_32_299/spec/mdc-textfield/issues/3332.html.windows_firefox_61.png",
778+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/08/14/18_11_32_299/spec/mdc-textfield/issues/3332.html.windows_ie_11.png"
779+
}
780+
},
772781
"spec/mdc-typography/classes/baseline-large.html": {
773782
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/03/00_19_30_622/spec/mdc-typography/classes/baseline-large.html",
774783
"screenshots": {

‎test/screenshot/spec/mdc-textfield/issues/3332.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html lang="en">
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Issue 3332 - MDC Web Screenshot Test</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="stylesheet" href="../../../out/mdc.textfield.css">
23+
<link rel="stylesheet" href="../../../out/mdc.typography.css">
24+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
25+
<link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">
26+
</head>
27+
28+
<body class="test-container mdc-typography">
29+
<main class="test-viewport test-viewport--mobile">
30+
<div class="test-layout">
31+
32+
<!--This test sets `text-align: center` on the parent container to assert that the svg outline will render appropriately when focused. -->
33+
<!-- See https://github.com/material-components/material-components-web/issues/3332 -->
34+
<div class="test-cell test-cell--issues" style="text-align: center;">
35+
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
36+
<!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
37+
<input type="text" id="outlined-text-field" class="mdc-text-field__input" value=" ">
38+
<label for="outlined-text-field" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
39+
<div class="mdc-notched-outline">
40+
<svg>
41+
<path class="mdc-notched-outline__path"/>
42+
</svg>
43+
</div>
44+
<div class="mdc-notched-outline__idle"></div>
45+
</div>
46+
</div>
47+
48+
</div>
49+
</main>
50+
51+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
52+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
53+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
54+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
55+
<script src="../../../out/material-components-web.js"></script>
56+
<script src="../../../out/spec/fixture.js"></script>
57+
<script src="../../../out/spec/mdc-textfield/fixture.js"></script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)