diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js index eb2fc063963..508590cd1c2 100644 --- a/packages/mdc-floating-label/index.js +++ b/packages/mdc-floating-label/index.js @@ -70,7 +70,7 @@ class MDCFloatingLabel extends MDCComponent { return new MDCFloatingLabelFoundation({ addClass: (className) => this.root_.classList.add(className), removeClass: (className) => this.root_.classList.remove(className), - getWidth: () => this.root_.offsetWidth, + getWidth: () => this.root_.scrollWidth, registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler), deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler), }); diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md index d11d0523372..d719a82522e 100644 --- a/packages/mdc-notched-outline/README.md +++ b/packages/mdc-notched-outline/README.md @@ -104,6 +104,7 @@ Method Signature | Description `addClass(className: string) => void` | Adds a class to the notched outline element. `removeClass(className: string) => void` | Removes a class from the notched outline element. `setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels. +`removeNotchWidthProperty() => void` | Removes the width property from the notch element. ### `MDCNotchedOutlineFoundation` diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss index 16128444358..c29df8f8c8d 100644 --- a/packages/mdc-notched-outline/_mixins.scss +++ b/packages/mdc-notched-outline/_mixins.scss @@ -52,6 +52,12 @@ } } + @if ($radius > $mdc-notched-outline-leading-width) { + .mdc-notched-outline__notch { + max-width: calc(100% - #{$radius} * 2); + } + } + .mdc-notched-outline__trailing { @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true); } diff --git a/packages/mdc-notched-outline/adapter.js b/packages/mdc-notched-outline/adapter.js index 27e5194c95c..9c2b84c1088 100644 --- a/packages/mdc-notched-outline/adapter.js +++ b/packages/mdc-notched-outline/adapter.js @@ -51,6 +51,11 @@ class MDCNotchedOutlineAdapter { * @param {number} width */ setNotchWidthProperty(width) {} + + /** + * Removes the width style property from the notch element. + */ + removeNotchWidthProperty() {} } export default MDCNotchedOutlineAdapter; diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js index e2e6ad166ad..d01b059de76 100644 --- a/packages/mdc-notched-outline/foundation.js +++ b/packages/mdc-notched-outline/foundation.js @@ -55,6 +55,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation { addClass: () => {}, removeClass: () => {}, setNotchWidthProperty: () => {}, + removeNotchWidthProperty: () => {}, }); } @@ -87,7 +88,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation { closeNotch() { const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses; this.adapter_.removeClass(OUTLINE_NOTCHED); - this.adapter_.setNotchWidthProperty(0); + this.adapter_.removeNotchWidthProperty(); } } diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js index 7ecabb08ac3..d425cea6b90 100644 --- a/packages/mdc-notched-outline/index.js +++ b/packages/mdc-notched-outline/index.js @@ -85,7 +85,8 @@ class MDCNotchedOutline extends MDCComponent { /** @type {!MDCNotchedOutlineAdapter} */ (Object.assign({ addClass: (className) => this.root_.classList.add(className), removeClass: (className) => this.root_.classList.remove(className), - setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width > 0 ? width + 'px' : '0'), + setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'), + removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'), }))); } } diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss index 3b97fba0ec1..b228b55e0ae 100644 --- a/packages/mdc-notched-outline/mdc-notched-outline.scss +++ b/packages/mdc-notched-outline/mdc-notched-outline.scss @@ -35,6 +35,7 @@ left: 0; box-sizing: border-box; width: 100%; + max-width: 100%; height: 100%; /* @noflip */ text-align: left; @@ -68,7 +69,9 @@ } &__notch { + flex: 0 0 auto; width: auto; + max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2); } .mdc-floating-label { @@ -76,6 +79,15 @@ position: relative; top: 17px; bottom: auto; + max-width: 100%; + } + + .mdc-floating-label--float-above { + text-overflow: clip; + } + + &--upgraded .mdc-floating-label--float-above { + max-width: calc(100% / .75); } } diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 394a4799a55..5f6c63927e2 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -1729,6 +1729,15 @@ "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" } }, + "spec/mdc-textfield/issues/4170.html": { + "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", + "screenshots": { + "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", + "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", + "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", + "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" + } + }, "spec/mdc-textfield/mixins/outline-shape-radius.html": { "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", "screenshots": { diff --git a/test/screenshot/spec/mdc-select/classes/enhanced-helper-text-persistent.html b/test/screenshot/spec/mdc-select/classes/enhanced-helper-text-persistent.html index 7c0f8f76b6f..bf9a24c69af 100644 --- a/test/screenshot/spec/mdc-select/classes/enhanced-helper-text-persistent.html +++ b/test/screenshot/spec/mdc-select/classes/enhanced-helper-text-persistent.html @@ -155,7 +155,7 @@ -
+
Pick a Food Group diff --git a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent-validation-msg.html index 7f20e994c12..c526221523e 100644 --- a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent-validation-msg.html +++ b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent-validation-msg.html @@ -153,7 +153,7 @@
-
+
Pick a Food Group diff --git a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent.html b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent.html index 7baa24b97b8..7267472a5e3 100644 --- a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent.html +++ b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text-persistent.html @@ -153,7 +153,7 @@
-
+
Pick a Food Group diff --git a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text.html b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text.html index 13891f8b4ee..32b5f6de1da 100644 --- a/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text.html +++ b/test/screenshot/spec/mdc-select/classes/enhanced-invalid-helper-text.html @@ -153,7 +153,7 @@
-
+
Pick a Food Group diff --git a/test/screenshot/spec/mdc-textfield/issues/4170.html b/test/screenshot/spec/mdc-textfield/issues/4170.html new file mode 100644 index 00000000000..b87b226e633 --- /dev/null +++ b/test/screenshot/spec/mdc-textfield/issues/4170.html @@ -0,0 +1,105 @@ + + + + + + Textarea Text Field - Long Label - MDC Web Screenshot Test + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ + +
+
+
+ +
+
+
+ +
+
+ +
+
+ + + + + + + + + + diff --git a/test/unit/mdc-notched-outline/foundation.test.js b/test/unit/mdc-notched-outline/foundation.test.js index ca6d1f89d48..e9bf0ca63de 100644 --- a/test/unit/mdc-notched-outline/foundation.test.js +++ b/test/unit/mdc-notched-outline/foundation.test.js @@ -46,7 +46,7 @@ test('exports strings', () => { test('defaultAdapter returns a complete adapter implementation', () => { verifyDefaultAdapter(MDCNotchedOutlineFoundation, [ - 'addClass', 'removeClass', 'setNotchWidthProperty', + 'addClass', 'removeClass', 'setNotchWidthProperty', 'removeNotchWidthProperty', ]); }); @@ -60,9 +60,9 @@ test('#notch adds the notched class and sets the width of the element', () => { td.verify(mockAdapter.addClass(MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED)); }); -test('#closeNotch removes the notch selector and resets the width to 0', () => { +test('#closeNotch removes the notch selector and removes the width property', () => { const {foundation, mockAdapter} = setupTest(); foundation.closeNotch(); td.verify(mockAdapter.removeClass(MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED)); - td.verify(mockAdapter.setNotchWidthProperty(0)); + td.verify(mockAdapter.removeNotchWidthProperty()); }); diff --git a/test/unit/mdc-notched-outline/mdc-notched-outline.test.js b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js index 38cc5fe34e6..8b827f696a0 100644 --- a/test/unit/mdc-notched-outline/mdc-notched-outline.test.js +++ b/test/unit/mdc-notched-outline/mdc-notched-outline.test.js @@ -55,13 +55,15 @@ test('adapter#addClass adds a class to the root element', () => { test('adapter#removeClass removes a class to the root element', () => { const {root, component} = setupTest(); component.getDefaultFoundation().adapter_.removeClass('foo'); - assert.isFalse(root.classList.contains('foo')); + component.getDefaultFoundation().adapter_.setNotchWidthProperty(50); + component.getDefaultFoundation().adapter_.removeNotchWidthProperty(); + const path = root.querySelector('.mdc-notched-outline__notch'); + assert.equal('', path.style.width); }); test('#adapter.setNotchWidthProperty sets the width property on the notched element', () => { const {root, component} = setupTest(); - component.getDefaultFoundation().adapter_.setNotchWidthProperty(0); + component.getDefaultFoundation().adapter_.setNotchWidthProperty(50); const path = root.querySelector('.mdc-notched-outline__notch'); - assert.equal('0px', path.style.width); + assert.equal('50px', path.style.width); }); -