fix(notched-outline): Auto position the notch and floating label base…

…d on corner size (#3929)
material-components · Oct 18, 2018 · 06daf52 · 06daf52
1 parent e728494
commit 06daf52
Show file tree

Hide file tree

Showing 18 changed files with 207 additions and 29 deletions.
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
@@ -80,6 +80,13 @@ Mixin | Description
 `mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element in idle state with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 
+
+### Sass Functions
+
+Function | Description
+--- | ---
+`mdc-notched-outline-get-notch-padded-position($cornerSize)` | Returns the notch padded position based on given radius. This is 'x' position where the floating label starts.
+
 #### Calling Mixins with Parent Selectors
 
 Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.

diff --git a/packages/mdc-notched-outline/_functions.scss b/packages/mdc-notched-outline/_functions.scss
@@ -0,0 +1,35 @@
+//
+// Copyright 2018 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+@import "./variables";
+
+//
+// Returns the notch padded position based on given radius. This is 'x' position where the floating label starts.
+//
+// Examples:
+//
+// mdc-notched-outline-get-notch-padded-position(4px) => 21.2px
+//
+@function mdc-notched-outline-get-notch-padded-position($cornerSize) {
+  $leadingStrokeLength: max(0, $mdc-notched-outline-min-leading-stroke-edge-position - $cornerSize - 1.2);
+  @return $cornerSize + $leadingStrokeLength + $mdc-notched-outline-notch-gutter-size + 1.2;
+}
diff --git a/packages/mdc-notched-outline/_variables.scss b/packages/mdc-notched-outline/_variables.scss
@@ -21,3 +21,8 @@
 //
 
 $mdc-notched-outline-transition-duration: 150ms;
+// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION
+$mdc-notched-outline-min-leading-stroke-edge-position: 12px;
+// The gap between the stroke end and floating label
+// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE
+$mdc-notched-outline-notch-gutter-size: 4px;
diff --git a/packages/mdc-notched-outline/constants.js b/packages/mdc-notched-outline/constants.js
@@ -32,4 +32,10 @@ const cssClasses = {
   OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
 };
 
-export {cssClasses, strings};
+/** @enum {number} */
+const numbers = {
+  NOTCH_GUTTER_SIZE: 4,
+  MIN_LEADING_STROKE_EDGE_POSITION: 12,
+};
+
+export {cssClasses, strings, numbers};
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
@@ -23,7 +23,7 @@
 
 import MDCFoundation from '@material/base/foundation';
 import MDCNotchedOutlineAdapter from './adapter';
-import {cssClasses, strings} from './constants';
+import {cssClasses, strings, numbers} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
@@ -40,6 +40,11 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     return cssClasses;
   }
 
+  /** @return enum {number} */
+  static get numbers() {
+    return numbers;
+  }
+
   /**
    * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
    * types.
@@ -98,12 +103,12 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     const width = this.adapter_.getWidth();
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
-    const leadingStrokeLength = Math.abs(12 - cornerWidth);
+    const leadingStrokeLength = Math.max(0, numbers.MIN_LEADING_STROKE_EDGE_POSITION - radius - 1.2);
 
     // If the notchWidth is 0, the the notched outline doesn't need to add padding.
     let paddedNotchWidth = 0;
     if (notchWidth > 0) {
-      paddedNotchWidth = notchWidth + 8;
+      paddedNotchWidth = notchWidth + 2 * numbers.NOTCH_GUTTER_SIZE;
     }
 
     // The right, bottom, and left sides of the outline follow the same SVG path.

diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -26,6 +26,7 @@
 @import "@material/shape/functions";
 @import "@material/line-ripple/mixins";
 @import "@material/notched-outline/mixins";
+@import "@material/notched-outline/functions";
 @import "./variables";
 
 // Public
@@ -112,15 +113,21 @@
   // this is because .mdc-notched-outline and .mdc-notched-outline__idle
   // are siblings. .mdc-notched-outline__idle needs to be a child of
   // .mdc-notched-outline in order to remedy this issue.
+  $resolved-radius: mdc-shape-resolve-percentage-radius($mdc-select-height, $radius);
   .mdc-notched-outline {
-    @include mdc-notched-outline-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
+    @include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
   }
 
-  @include mdc-notched-outline-idle-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
+  @include mdc-notched-outline-idle-shape-radius($resolved-radius, $rtl-reflexive);
 
   &__native-control {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
+    @include mdc-shape-radius($resolved-radius, $rtl-reflexive);
   }
+
+  $cornerSize: mdc-shape-prop-value($resolved-radius);
+  $positionX: mdc-notched-outline-get-notch-padded-position($cornerSize);
+  $labelPositionOffset: - $mdc-select-outline-label-offset + $positionX;
+  @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y, -1 * ($labelPositionOffset));
 }
 
 // Private
@@ -198,7 +205,7 @@
 
 @mixin mdc-select-floating-label_ {
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, 16px);
+    @include mdc-rtl-reflexive-position(left, $mdc-select-outline-label-offset);
 
     bottom: 12px;
     line-height: 1.75rem;

diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
@@ -49,5 +49,6 @@ $mdc-select-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .16
 $mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87);
 
 $mdc-select-label-position-y: 40%;
+$mdc-select-outline-label-offset: 16px;
 $mdc-select-outlined-label-position-y: 130%;
 $mdc-select-outlined-dense-label-position-y: 110%;
diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -121,7 +121,6 @@
   @include mdc-select-outline-color($mdc-select-outlined-idle-border);
   @include mdc-select-hover-outline-color($mdc-select-outlined-hover-border);
   @include mdc-select-focused-outline-color(primary);
-  @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
   @include mdc-select-outline-shape-radius(medium);
   @include mdc-states-base-color(transparent);

diff --git a/packages/mdc-shape/README.md b/packages/mdc-shape/README.md
@@ -64,6 +64,7 @@ Function | Description
 `mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.
 `mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.
 `mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.
+`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.
 
 ### Additional Information
 

diff --git a/packages/mdc-shape/_functions.scss b/packages/mdc-shape/_functions.scss
@@ -104,9 +104,9 @@
 //
 // Examples:
 //
-// mdc-shape-prop-value_(small) => 4px
+// mdc-shape-prop-value(small) => 4px
 //
-@function mdc-shape-prop-value_($radius) {
+@function mdc-shape-prop-value($radius) {
   @if type-of($radius) == "list" {
     @if length($radius) > 4 {
       @error "Invalid radius: '#{$radius}' is more than 4 values";

diff --git a/packages/mdc-shape/_mixins.scss b/packages/mdc-shape/_mixins.scss
@@ -24,7 +24,7 @@
 @import "./functions";
 
 @mixin mdc-shape-radius($radius, $rtl-reflexive: false) {
-  border-radius: mdc-shape-prop-value_($radius);
+  border-radius: mdc-shape-prop-value($radius);
 
   @if ($rtl-reflexive) {
     @include mdc-rtl {

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -23,6 +23,7 @@
 @import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
 @import "@material/notched-outline/mixins";
+@import "@material/notched-outline/functions";
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
 @import "@material/shape/functions";
@@ -246,13 +247,19 @@
   }
 
   @include mdc-notched-outline-idle-shape-radius($resolved-radius, $rtl-reflexive);
+
+  $cornerSize: mdc-shape-prop-value($resolved-radius);
+  $positionX: mdc-notched-outline-get-notch-padded-position($cornerSize);
+  $labelPositionOffset: - $mdc-text-field-outline-label-offset + $positionX;
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, -1 * ($labelPositionOffset));
 }
 
 @mixin mdc-text-field-floating-label_ {
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, 16px);
+    @include mdc-rtl-reflexive-position(left, 12px);
 
     bottom: 20px;
+    pointer-events: none;
   }
 
   &:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
@@ -307,7 +314,6 @@
   @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
   @include mdc-text-field-outline-shape-radius(small);
   @include mdc-states-base-color(transparent);
@@ -329,7 +335,7 @@
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, 16px);
+    @include mdc-rtl-reflexive-position(left, $mdc-text-field-outline-label-offset);
 
     width: auto;
   }

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -53,6 +53,7 @@ $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
 
 $mdc-text-field-height: 56px;
 $mdc-text-field-label-position-y: 50%;
+$mdc-text-field-outline-label-offset: 16px;
 $mdc-text-field-dense-label-position-y: 70%;
 $mdc-text-field-dense-label-scale: .923;
 $mdc-text-field-outlined-label-position-y: 130%;

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -74,13 +74,6 @@
   height: $mdc-text-field-height;
   overflow: hidden;
   will-change: opacity, transform, color;
-
-  // stylelint-disable-next-line plugin/selector-bem-pattern
-  .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, 12px);
-
-    pointer-events: none;
-  }
 }
 
 .mdc-text-field__input {

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -863,12 +863,12 @@
     }
   },
   "spec/mdc-select/mixins/shape-radius.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/24/15_50_35_891/spec/mdc-select/mixins/shape-radius.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-select/mixins/shape-radius.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/24/15_50_35_891/spec/mdc-select/mixins/shape-radius.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/24/15_50_35_891/spec/mdc-select/mixins/shape-radius.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/24/15_50_35_891/spec/mdc-select/mixins/shape-radius.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/24/15_50_35_891/spec/mdc-select/mixins/shape-radius.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-select/mixins/shape-radius.html.windows_chrome_69.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-select/mixins/shape-radius.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-select/mixins/shape-radius.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-select/mixins/shape-radius.html.windows_ie_11.png"
     }
   },
   "spec/mdc-switch/classes/baseline.html": {
@@ -1299,6 +1299,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/01/23_31_41_483/spec/mdc-textfield/issues/3332.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/10/18/16_27_05_631/spec/mdc-textfield/mixins/outline-shape-radius.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-textfield/mixins/outline-shape-radius.html.windows_chrome_69.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-textfield/mixins/outline-shape-radius.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-textfield/mixins/outline-shape-radius.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/18/16_27_05_631/spec/mdc-textfield/mixins/outline-shape-radius.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-typography/classes/baseline-large.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-typography/classes/baseline-large.html?utm_source=golden_json",
     "screenshots": {

diff --git a/test/screenshot/spec/mdc-select/fixture.scss b/test/screenshot/spec/mdc-select/fixture.scss
@@ -45,13 +45,13 @@
 }
 
 .custom-select-shape-radius {
-  @include mdc-select-shape-radius(10px);
+  @include mdc-select-shape-radius(50%);
 }
 
 .custom-select-outline-color {
   @include mdc-select-outline-color(green);
 }
 
 .custom-select-outline-shape-radius {
-  @include mdc-select-outline-shape-radius(10px);
+  @include mdc-select-outline-shape-radius(50%);
 }
diff --git a/test/screenshot/spec/mdc-textfield/fixture.scss b/test/screenshot/spec/mdc-textfield/fixture.scss
@@ -32,6 +32,14 @@
   @include test-cell-size(301, 181);
 }
 
+.test-shaped-text-field {
+  @include mdc-text-field-shape-radius(50%);
+}
+
+.test-shaped-text-field--outline {
+  @include mdc-text-field-outline-shape-radius(50%);
+}
+
 // Work around MS Edge rendering bug.
 // TODO(acdvorak): Create and link to GitHub issue
 @supports (-ms-ime-align:auto) {