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

Commit 145db1f

Browse files
williamernestwilliamernest
authored
fix(notched-outline): Fix label overflow (#4171)
Fix the floating label from overflowing outside of the notched outline.
1 parent cb344c3 commit 145db1f

File tree

15 files changed

+156
-14
lines changed

15 files changed

+156
-14
lines changed

‎packages/mdc-floating-label/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ class MDCFloatingLabel extends MDCComponent {
7070
return new MDCFloatingLabelFoundation({
7171
addClass: (className) => this.root_.classList.add(className),
7272
removeClass: (className) => this.root_.classList.remove(className),
73-
getWidth: () => this.root_.offsetWidth,
73+
getWidth: () => this.root_.scrollWidth,
7474
registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
7575
deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
7676
});

‎packages/mdc-notched-outline/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ Method Signature | Description
104104
`addClass(className: string) => void` | Adds a class to the notched outline element.
105105
`removeClass(className: string) => void` | Removes a class from the notched outline element.
106106
`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.
107+
`removeNotchWidthProperty() => void` | Removes the width property from the notch element.
107108

108109
### `MDCNotchedOutlineFoundation`
109110

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@
5252
}
5353
}
5454

55+
@if ($radius > $mdc-notched-outline-leading-width) {
56+
.mdc-notched-outline__notch {
57+
max-width: calc(100% - #{$radius} * 2);
58+
}
59+
}
60+
5561
.mdc-notched-outline__trailing {
5662
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
5763
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ class MDCNotchedOutlineAdapter {
5151
* @param {number} width
5252
*/
5353
setNotchWidthProperty(width) {}
54+
55+
/**
56+
* Removes the width style property from the notch element.
57+
*/
58+
removeNotchWidthProperty() {}
5459
}
5560

5661
export default MDCNotchedOutlineAdapter;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
5555
addClass: () => {},
5656
removeClass: () => {},
5757
setNotchWidthProperty: () => {},
58+
removeNotchWidthProperty: () => {},
5859
});
5960
}
6061

@@ -87,7 +88,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
8788
closeNotch() {
8889
const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
8990
this.adapter_.removeClass(OUTLINE_NOTCHED);
90-
this.adapter_.setNotchWidthProperty(0);
91+
this.adapter_.removeNotchWidthProperty();
9192
}
9293
}
9394

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@ class MDCNotchedOutline extends MDCComponent {
8585
/** @type {!MDCNotchedOutlineAdapter} */ (Object.assign({
8686
addClass: (className) => this.root_.classList.add(className),
8787
removeClass: (className) => this.root_.classList.remove(className),
88-
setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width > 0 ? width + 'px' : '0'),
88+
setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'),
89+
removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'),
8990
})));
9091
}
9192
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
left: 0;
3636
box-sizing: border-box;
3737
width: 100%;
38+
max-width: 100%;
3839
height: 100%;
3940
/* @noflip */
4041
text-align: left;
@@ -68,14 +69,25 @@
6869
}
6970

7071
&__notch {
72+
flex: 0 0 auto;
7173
width: auto;
74+
max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
7275
}
7376

7477
.mdc-floating-label {
7578
display: inline-block;
7679
position: relative;
7780
top: 17px;
7881
bottom: auto;
82+
max-width: 100%;
83+
}
84+
85+
.mdc-floating-label--float-above {
86+
text-overflow: clip;
87+
}
88+
89+
&--upgraded .mdc-floating-label--float-above {
90+
max-width: calc(100% / .75);
7991
}
8092
}
8193

‎test/screenshot/golden.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1729,6 +1729,15 @@
17291729
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/13/21_05_36_273/spec/mdc-textfield/issues/3332.html.windows_ie_11.png"
17301730
}
17311731
},
1732+
"spec/mdc-textfield/issues/4170.html": {
1733+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/14/21_55_25_855/spec/mdc-textfield/issues/4170.html?utm_source=golden_json",
1734+
"screenshots": {
1735+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/14/21_55_25_855/spec/mdc-textfield/issues/4170.html.windows_chrome_71.png",
1736+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/14/21_55_25_855/spec/mdc-textfield/issues/4170.html.windows_edge_17.png",
1737+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/14/21_55_25_855/spec/mdc-textfield/issues/4170.html.windows_firefox_63.png",
1738+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/14/21_55_25_855/spec/mdc-textfield/issues/4170.html.windows_ie_11.png"
1739+
}
1740+
},
17321741
"spec/mdc-textfield/mixins/outline-shape-radius.html": {
17331742
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/30/05_20_17_198/spec/mdc-textfield/mixins/outline-shape-radius.html?utm_source=golden_json",
17341743
"screenshots": {

‎test/screenshot/spec/mdc-select/classes/enhanced-helper-text-persistent.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
</li>
156156
</ul>
157157
</div>
158-
<div class="mdc-notched-outline">
158+
<div class="mdc-notched-outline mdc-notched-outline--notched">
159159
<div class="mdc-notched-outline__leading"></div>
160160
<div class="mdc-notched-outline__notch">
161161
<span id="screenshot-select-label4" class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>

‎test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent-validation-msg.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
</li>
154154
</ul>
155155
</div>
156-
<div class="mdc-notched-outline">
156+
<div class="mdc-notched-outline mdc-notched-outline--notched">
157157
<div class="mdc-notched-outline__leading"></div>
158158
<div class="mdc-notched-outline__notch">
159159
<span id="screenshot-select-label4" class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>

0 commit comments

Comments
 (0)