-
```
-> For usage within a text field see [here](../mdc-textfield/README.md#outlined).
+> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when
+> used together with MDC Notched Outline.
+
+> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and
+> [MDC Select](../mdc-select/README.md#outlined-select) documentation for
+> information on using Notched Outline in the context of those components.
### Styles
@@ -67,59 +73,24 @@ CSS Class | Description
--- | ---
`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
`mdc-notched-outline--notched` | Class to open notch outline.
-`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
-`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
+`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).
+`mdc-notched-outline__notch` | Mandatory. Element representing the notch.
+`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).
### Sass Mixins
Mixin | Description
--- | ---
`mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
-`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
`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.
-Consider the following example HTML:
-
-```html
-
-
-
-
-
-
-```
-In order to customize any "non-idle" part of notched-outline, use the .foo__child CSS selector:
-```scss
-.foo__child {
- @include mdc-notched-outline-color($fooColor);
-}
-```
-But in order to customize any "idle" part of the notched-outline, you must use the .foo__parent CSS selector:
-```scss
-.foo__parent {
- @include mdc-notched-outline-idle-color($fooColor);
-}
-```
+`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.
## `MDCNotchedOutline` Properties and Methods
Method Signature | Description
--- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Updates notched outline to open notch in outline path.
+`notch(notchWidth: number) => void` | Updates notched outline to open notch in outline path.
`closeNotch() => void` | Updates the notched outline to close notch in outline path.
## Usage Within Frameworks
@@ -130,17 +101,13 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
Method Signature | Description
--- | ---
-`getWidth() => number` | Returns the width of the notched outline element.
-`getHeight() => number` | Returns the height of the notched outline element.
`addClass(className: string) => void` | Adds a class to the notched outline element.
`removeClass(className: string) => void` | Removes a class from the notched outline element.
-`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the notched outline element's SVG path.
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
+`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.
### `MDCNotchedOutlineFoundation`
Method Signature | Description
--- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
+`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
`closeNotch() => void` | Removes the outline notched selector.
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
diff --git a/packages/mdc-notched-outline/_functions.scss b/packages/mdc-notched-outline/_functions.scss
deleted file mode 100644
index 8c56af470ab..00000000000
--- a/packages/mdc-notched-outline/_functions.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// 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/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index 3939c44e204..16128444358 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -22,31 +22,56 @@
@import "@material/theme/mixins";
@import "@material/shape/mixins";
-
-@mixin mdc-notched-outline-idle-color($color) {
- .mdc-notched-outline__idle {
- @include mdc-theme-prop(border-color, $color);
- }
-}
+@import "@material/rtl/mixins";
+@import "./variables";
@mixin mdc-notched-outline-color($color) {
- .mdc-notched-outline__path {
- @include mdc-theme-prop(stroke, $color);
+ .mdc-notched-outline__leading,
+ .mdc-notched-outline__notch,
+ .mdc-notched-outline__trailing {
+ @include mdc-theme-prop(border-color, $color);
}
}
@mixin mdc-notched-outline-stroke-width($width) {
- .mdc-notched-outline__path {
- stroke-width: $width;
+ .mdc-notched-outline__leading,
+ .mdc-notched-outline__notch,
+ .mdc-notched-outline__trailing {
+ border-width: $width;
}
}
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
- @include mdc-shape-radius($radius, $rtl-reflexive);
+ $radius: mdc-shape-prop-value($radius);
+
+ .mdc-notched-outline__leading {
+ @include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
+
+ @if ($radius > $mdc-notched-outline-leading-width) {
+ width: $radius;
+ }
+ }
+
+ .mdc-notched-outline__trailing {
+ @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
+ }
}
-@mixin mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive: false) {
- .mdc-notched-outline__idle {
- @include mdc-shape-radius($radius, $rtl-reflexive);
+@mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
+ @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1);
+
+ .mdc-floating-label--float-above {
+ font-size: ($scale * 1rem);
+ }
+
+ // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
+ &.mdc-notched-outline--upgraded,
+ .mdc-notched-outline--upgraded {
+ @include mdc-floating-label-float-position($positionY, $positionX, $scale);
+
+ // stylelint-disable-next-line no-descending-specificity
+ .mdc-floating-label--float-above {
+ font-size: 1rem;
+ }
}
}
diff --git a/packages/mdc-notched-outline/_variables.scss b/packages/mdc-notched-outline/_variables.scss
index d8b4ce16f4f..655703837b2 100644
--- a/packages/mdc-notched-outline/_variables.scss
+++ b/packages/mdc-notched-outline/_variables.scss
@@ -26,3 +26,8 @@ $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;
+$mdc-notched-outline-leading-width: 12px;
+$mdc-notched-outline-padding: 4px;
+// This variable keeps the before/after JS label centered in the notch when the font-size is changed.
+$mdc-notched-outline-label-adjust: 14%;
+
diff --git a/packages/mdc-notched-outline/adapter.js b/packages/mdc-notched-outline/adapter.js
index 5c552f72610..27e5194c95c 100644
--- a/packages/mdc-notched-outline/adapter.js
+++ b/packages/mdc-notched-outline/adapter.js
@@ -34,18 +34,6 @@
* @record
*/
class MDCNotchedOutlineAdapter {
- /**
- * Returns the width of the root element.
- * @return {number}
- */
- getWidth() {}
-
- /**
- * Returns the height of the root element.
- * @return {number}
- */
- getHeight() {}
-
/**
* Adds a class to the root element.
* @param {string} className
@@ -59,18 +47,10 @@ class MDCNotchedOutlineAdapter {
removeClass(className) {}
/**
- * Sets the "d" attribute of the outline element's SVG path.
- * @param {string} value
- */
- setOutlinePathAttr(value) {}
-
- /**
- * Returns the idle outline element's computed style value of the given css property `propertyName`.
- * We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
- * @param {string} propertyName
- * @return {string}
+ * Sets the width style property of the notch element.
+ * @param {number} width
*/
- getIdleOutlineStyleValue(propertyName) {}
+ setNotchWidthProperty(width) {}
}
export default MDCNotchedOutlineAdapter;
diff --git a/packages/mdc-notched-outline/constants.js b/packages/mdc-notched-outline/constants.js
index adfa32ea541..8fae939f521 100644
--- a/packages/mdc-notched-outline/constants.js
+++ b/packages/mdc-notched-outline/constants.js
@@ -23,19 +23,20 @@
/** @enum {string} */
const strings = {
- PATH_SELECTOR: '.mdc-notched-outline__path',
- IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
+ NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',
+};
+
+/** @enum {number} */
+const numbers = {
+ // This should stay in sync with $mdc-notched-outline-padding * 2.
+ NOTCH_ELEMENT_PADDING: 8,
};
/** @enum {string} */
const cssClasses = {
OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+ OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',
+ NO_LABEL: 'mdc-notched-outline--no-label',
};
-/** @enum {number} */
-const numbers = {
- NOTCH_GUTTER_SIZE: 4,
- MIN_LEADING_STROKE_EDGE_POSITION: 12,
-};
-
-export {cssClasses, strings, numbers};
+export {cssClasses, numbers, strings};
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
index 67f181b0251..e2e6ad166ad 100644
--- a/packages/mdc-notched-outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -52,12 +52,9 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
*/
static get defaultAdapter() {
return /** @type {!MDCNotchedOutlineAdapter} */ ({
- getWidth: () => {},
- getHeight: () => {},
addClass: () => {},
removeClass: () => {},
- setOutlinePathAttr: () => {},
- getIdleOutlineStyleValue: () => {},
+ setNotchWidthProperty: () => {},
});
}
@@ -70,14 +67,18 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
/**
* Adds the outline notched selector and updates the notch width
- * calculated based off of notchWidth and isRtl.
+ * calculated based off of notchWidth.
* @param {number} notchWidth
- * @param {boolean=} isRtl
*/
- notch(notchWidth, isRtl = false) {
+ notch(notchWidth) {
const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+
+ if (notchWidth > 0) {
+ notchWidth += numbers.NOTCH_ELEMENT_PADDING; // Add padding from left/right.
+ }
+
+ this.adapter_.setNotchWidthProperty(notchWidth);
this.adapter_.addClass(OUTLINE_NOTCHED);
- this.updateSvgPath_(notchWidth, isRtl);
}
/**
@@ -86,54 +87,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
closeNotch() {
const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
this.adapter_.removeClass(OUTLINE_NOTCHED);
- }
-
- /**
- * Updates the SVG path of the focus outline element based on the notchWidth
- * and the RTL context.
- * @param {number} notchWidth
- * @param {boolean=} isRtl
- * @private
- */
- updateSvgPath_(notchWidth, isRtl) {
- // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
- const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
- this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
- const radius = parseFloat(radiusStyleValue);
- const width = this.adapter_.getWidth();
- const height = this.adapter_.getHeight();
- const cornerWidth = radius + 1.2;
- 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 + 2 * numbers.NOTCH_GUTTER_SIZE;
- }
-
- // The right, bottom, and left sides of the outline follow the same SVG path.
- const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
- + 'v' + (height - (2 * cornerWidth))
- + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius
- + 'h' + (-width + (2 * cornerWidth))
- + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius
- + 'v' + (-height + (2 * cornerWidth))
- + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
-
- let path;
- if (!isRtl) {
- path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
- + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
- + pathMiddle
- + 'h' + leadingStrokeLength;
- } else {
- path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
- + 'h' + leadingStrokeLength
- + pathMiddle
- + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
- }
-
- this.adapter_.setOutlinePathAttr(path);
+ this.adapter_.setNotchWidthProperty(0);
}
}
diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.js
index f144a37da86..f7bd729c1b3 100644
--- a/packages/mdc-notched-outline/index.js
+++ b/packages/mdc-notched-outline/index.js
@@ -25,7 +25,8 @@ import MDCComponent from '@material/base/component';
import MDCNotchedOutlineAdapter from './adapter';
import MDCNotchedOutlineFoundation from './foundation';
-import {strings} from './constants';
+import {MDCFloatingLabelFoundation} from '@material/floating-label/index';
+import {cssClasses, strings} from './constants';
/**
* @extends {MDCComponent}
@@ -39,15 +40,34 @@ class MDCNotchedOutline extends MDCComponent {
static attachTo(root) {
return new MDCNotchedOutline(root);
}
+ /** @param {...?} args */
+ constructor(...args) {
+ super(...args);
+ /** @private {Element} */
+ this.notchElement_;
+ }
+
+ initialSyncWithDOM() {
+ const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
+ this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR);
+
+ if (label) {
+ label.style.transitionDuration = '0s';
+ this.root_.classList.add(cssClasses.OUTLINE_UPGRADED);
+ requestAnimationFrame(() => {
+ label.style.transitionDuration = '';
+ });
+ } else {
+ this.root_.classList.add(cssClasses.NO_LABEL);
+ }
+ }
/**
* Updates outline selectors and SVG path to open notch.
* @param {number} notchWidth The notch width in the outline.
- * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
- * will be right justified in outline path, otherwise left justified.
*/
- notch(notchWidth, isRtl) {
- this.foundation_.notch(notchWidth, isRtl);
+ notch(notchWidth) {
+ this.foundation_.notch(notchWidth);
}
/**
@@ -61,20 +81,12 @@ class MDCNotchedOutline extends MDCComponent {
* @return {!MDCNotchedOutlineFoundation}
*/
getDefaultFoundation() {
- return new MDCNotchedOutlineFoundation({
- getWidth: () => this.root_.offsetWidth,
- getHeight: () => this.root_.offsetHeight,
- addClass: (className) => this.root_.classList.add(className),
- removeClass: (className) => this.root_.classList.remove(className),
- setOutlinePathAttr: (value) => {
- const path = this.root_.querySelector(strings.PATH_SELECTOR);
- path.setAttribute('d', value);
- },
- getIdleOutlineStyleValue: (propertyName) => {
- const idleOutlineElement = this.root_.parentNode.querySelector(strings.IDLE_OUTLINE_SELECTOR);
- return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
- },
- });
+ return new MDCNotchedOutlineFoundation(
+ /** @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'),
+ })));
}
}
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index 911f42e4cb4..3b97fba0ec1 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -28,58 +28,68 @@
// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-notched-outline") {
- .mdc-notched-outline,
- .mdc-notched-outline__idle {
+ .mdc-notched-outline {
+ display: flex;
position: absolute;
- top: 0;
+ right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
- }
-
- .mdc-notched-outline {
- transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
- opacity: 0;
/* @noflip */
text-align: left;
- overflow: hidden;
+ pointer-events: none;
@include mdc-rtl {
/* @noflip */
text-align: right;
}
- // stylelint-disable selector-max-type
- svg {
- position: absolute;
- width: 100%;
+ &__leading,
+ &__notch,
+ &__trailing {
+ box-sizing: border-box;
height: 100%;
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ pointer-events: none;
}
- // stylelint-enable selector-max-type
- }
- .mdc-notched-outline__idle {
- transition:
- opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
- border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
- border: 1px solid;
- opacity: 1;
- }
+ &__leading {
+ @include mdc-rtl-reflexive-property(border, 1px solid, none);
+
+ width: $mdc-notched-outline-leading-width;
+ }
+
+ &__trailing {
+ @include mdc-rtl-reflexive-property(border, none, 1px solid);
- .mdc-notched-outline__path {
- stroke-width: 1px;
- transition:
- stroke $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
- stroke-width $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
- fill: transparent;
+ flex-grow: 1;
+ }
+
+ &__notch {
+ width: auto;
+ }
+
+ .mdc-floating-label {
+ display: inline-block;
+ position: relative;
+ top: 17px;
+ bottom: auto;
+ }
}
.mdc-notched-outline--notched {
- opacity: 1;
+ .mdc-notched-outline__notch {
+ @include mdc-rtl-reflexive-box(padding, right, 8px);
+
+ border-top: none;
+ }
}
- .mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
- opacity: 0;
+ .mdc-notched-outline--no-label {
+ .mdc-notched-outline__notch {
+ padding: 0;
+ }
}
}
diff --git a/packages/mdc-notched-outline/package.json b/packages/mdc-notched-outline/package.json
index dc463877f56..38940a5b3a9 100644
--- a/packages/mdc-notched-outline/package.json
+++ b/packages/mdc-notched-outline/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"@material/animation": "^0.41.0",
"@material/base": "^0.41.0",
+ "@material/floating-label": "^0.41.0",
"@material/rtl": "^0.40.1",
"@material/shape": "^0.41.0",
"@material/theme": "^0.41.0"
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index b316d9b347b..f30eb1254a7 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -186,13 +186,13 @@ same.
```html
-
-
+
+
+
+
+
-
```
@@ -436,11 +436,10 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
| `activateBottomLine() => void` | Activates the bottom line component. |
| `deactivateBottomLine() => void` | Deactivates the bottom line component. |
| `getValue() => string` | Returns the value selected `option` on the `select` element and the `data-value` of the selected list item on the enhanced select. |
-| `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |
| `floatLabel(value: boolean) => void` | Floats or defloats label. |
| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |
| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |
-| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
+| `notchOutline(labelWidth: number) => void` | Switches the notched outline element to its "notched state." |
| `closeOutline() => void` | Switches the notched outline element to its closed state. |
| `openMenu() => void` | Causes the menu element in the enhanced select to open. |
| `closeMenu() => void` | Causes the menu element in the enhanced select to close. |
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
index 1e613544610..fe49101a998 100644
--- a/packages/mdc-select/_mixins.scss
+++ b/packages/mdc-select/_mixins.scss
@@ -26,7 +26,7 @@
@import "@material/shape/functions";
@import "@material/line-ripple/mixins";
@import "@material/notched-outline/mixins";
-@import "@material/notched-outline/functions";
+@import "@material/notched-outline/variables";
@import "./icon/mixins";
@import "./variables";
@@ -108,29 +108,27 @@
}
@mixin mdc-select-outline-shape-radius($radius, $rtl-reflexive: false) {
- // NOTE: idle and notched state border radius mixins
- // are broken into 2 different mixins, otherwise
- // we would be overly specific (big no, no). The cause of
- // 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($resolved-radius, $rtl-reflexive);
}
- @include mdc-notched-outline-idle-shape-radius($resolved-radius, $rtl-reflexive);
-
- &__native-control {
+ .mdc-select__native-control {
@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;
+ $radius-pixels: mdc-shape-prop-value($resolved-radius);
- @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y, -1 * ($labelPositionOffset));
+ @if ($radius-pixels > $mdc-notched-outline-leading-width) {
+ .mdc-select__native-control {
+ @include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, $mdc-select-arrow-padding);
+ }
+
+ + .mdc-select-helper-text {
+ @include mdc-rtl-reflexive-property(margin, $radius-pixels + $mdc-notched-outline-padding, $mdc-select-outline-label-offset);
+ }
+ }
}
// Private
@@ -190,19 +188,12 @@
}
@mixin mdc-select-outline-color_($color) {
- // NOTE: outlined version of select wants the "idle" and
- // "notched" outline to have the same color. This covers two cases:
- // 1) text field renders with NO value in the "idle" state
- // 2) text field renders with a value in the "notched" state
- @include mdc-notched-outline-idle-color($color);
@include mdc-notched-outline-color($color);
}
@mixin mdc-select-hover-outline-color_($color) {
&:not(.mdc-select--focused) .mdc-select__native-control:hover ~,
&:not(.mdc-select--focused) .mdc-select__selected-text:hover ~ {
- @include mdc-notched-outline-idle-color($color);
-
.mdc-notched-outline {
@include mdc-notched-outline-color($color);
}
@@ -213,27 +204,46 @@
@include mdc-select-focused-outline_ {
@include mdc-notched-outline-color($color);
}
-
- @include mdc-select-focused-outline-idle_ {
- @include mdc-notched-outline-idle-color($color);
- }
}
@mixin mdc-select-floating-label_ {
.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, $mdc-select-outline-label-offset);
- bottom: 12px;
- line-height: 1.75rem;
+ top: 21px;
pointer-events: none;
}
+
+ &.mdc-select--with-leading-icon {
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-select-icon-padding);
+ }
+ }
+
+ &.mdc-select--outlined {
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+
+ top: 17px;
+ }
+
+ &.mdc-select--with-leading-icon {
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-select-icon-padding - $mdc-notched-outline-leading-width);
+
+ &--float-above {
+ @include mdc-rtl-reflexive-position(left, $mdc-select-icon-padding - $mdc-notched-outline-leading-width);
+ }
+ }
+ }
+ }
}
@mixin mdc-select-with-leading-icon_ {
- @include mdc-select-icon-horizontal-position_(16px, 48px);
+ @include mdc-select-icon-horizontal-position_(16px, $mdc-select-icon-padding);
&.mdc-select--outlined {
- @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y, $mdc-select-outlined-with-leading-icon-label-position-x);
+ @include mdc-notched-outline-floating-label-float-position($mdc-select-outlined-label-position-y, $mdc-select-outlined-with-leading-icon-label-position-x);
@include mdc-floating-label-shake-animation(select-outlined-leading-icon);
@include mdc-rtl {
@@ -341,6 +351,7 @@
@include mdc-select-outline-shape-radius(medium);
@include mdc-states-base-color(transparent);
@include mdc-select-container-fill-color(transparent);
+ @include mdc-notched-outline-floating-label-float-position($mdc-select-outlined-label-position-y, 0);
border: none;
overflow: visible;
@@ -366,7 +377,6 @@
}
.mdc-floating-label {
- bottom: 20px;
line-height: 1.15rem;
pointer-events: auto;
}
diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
index cd847d154d7..f9af967415a 100644
--- a/packages/mdc-select/_variables.scss
+++ b/packages/mdc-select/_variables.scss
@@ -23,9 +23,10 @@
@import "@material/animation/variables";
@import "@material/theme/variables";
-$mdc-select-arrow-padding: 26px;
+$mdc-select-arrow-padding: 52px;
$mdc-select-label-padding: 16px;
$mdc-select-height: 56px;
+$mdc-select-icon-padding: 48px;
$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
$mdc-select-dropdown-color: mdc-theme-prop-value(on-surface);
@@ -52,7 +53,7 @@ $mdc-select-disabled-dropdown-opacity: .37;
$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-label-position-y: 70%;
$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/adapter.js b/packages/mdc-select/adapter.js
index 63c272e01c6..be1ab512076 100644
--- a/packages/mdc-select/adapter.js
+++ b/packages/mdc-select/adapter.js
@@ -94,12 +94,6 @@ class MDCSelectAdapter {
*/
getValue() {}
- /**
- * Returns true if the direction of the root element is set to RTL.
- * @return {boolean}
- */
- isRtl() {}
-
/**
* Floats label determined based off of the shouldFloat argument.
* @param {boolean} shouldFloat
@@ -119,12 +113,10 @@ class MDCSelectAdapter {
hasOutline() {}
/**
- * Updates SVG Path and outline element based on the
- * label element width and RTL context, if the outline exists.
+ * Only implement if outline element exists.
* @param {number} labelWidth
- * @param {boolean=} isRtl
*/
- notchOutline(labelWidth, isRtl) {}
+ notchOutline(labelWidth) {}
/**
* Closes notch in outline element, if the outline exists.
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 914fb22911a..541aee3748c 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -63,11 +63,10 @@ class MDCSelectFoundation extends MDCFoundation {
deactivateBottomLine: () => {},
setValue: () => {},
getValue: () => {},
- isRtl: () => false,
floatLabel: (/* value: boolean */) => {},
getLabelWidth: () => {},
hasOutline: () => false,
- notchOutline: (/* labelWidth: number, isRtl: boolean */) => {},
+ notchOutline: (/* labelWidth: number, */) => {},
closeOutline: () => {},
openMenu: () => {},
closeMenu: () => {},
@@ -227,8 +226,7 @@ class MDCSelectFoundation extends MDCFoundation {
if (openNotch) {
const labelScale = numbers.LABEL_SCALE;
const labelWidth = this.adapter_.getLabelWidth() * labelScale;
- const isRtl = this.adapter_.isRtl();
- this.adapter_.notchOutline(labelWidth, isRtl);
+ this.adapter_.notchOutline(labelWidth);
} else if (!isFocused) {
this.adapter_.closeOutline();
}
diff --git a/packages/mdc-select/icon/_mixins.scss b/packages/mdc-select/icon/_mixins.scss
index cfcb5769aa4..354612e3dd5 100644
--- a/packages/mdc-select/icon/_mixins.scss
+++ b/packages/mdc-select/icon/_mixins.scss
@@ -68,8 +68,4 @@
.mdc-select__selected-text {
@include mdc-rtl-reflexive-property(padding, $inputPadding /* left */, $mdc-select-icon-right-padding /* right */);
}
-
- .mdc-floating-label {
- @include mdc-rtl-reflexive-position(left, $inputPadding);
- }
}
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index ee7dae50476..288b22c8540 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -542,7 +542,6 @@ class MDCSelect extends MDCComponent {
* addClass: function(string): void,
* removeClass: function(string): void,
* hasClass: function(string): void,
- * isRtl: function(): boolean,
* setRippleCenter: function(number): void,
* activateBottomLine: function(): void,
* deactivateBottomLine: function(): void,
@@ -555,7 +554,6 @@ class MDCSelect extends MDCComponent {
addClass: (className) => this.root_.classList.add(className),
removeClass: (className) => this.root_.classList.remove(className),
hasClass: (className) => this.root_.classList.contains(className),
- isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
setRippleCenter: (normalizedX) => this.lineRipple_ && this.lineRipple_.setRippleCenter(normalizedX),
activateBottomLine: () => this.lineRipple_ && this.lineRipple_.activate(),
deactivateBottomLine: () => this.lineRipple_ && this.lineRipple_.deactivate(),
@@ -576,9 +574,9 @@ class MDCSelect extends MDCComponent {
getOutlineAdapterMethods_() {
return {
hasOutline: () => !!this.outline_,
- notchOutline: (labelWidth, isRtl) => {
+ notchOutline: (labelWidth) => {
if (this.outline_) {
- this.outline_.notch(labelWidth, isRtl);
+ this.outline_.notch(labelWidth);
}
},
closeOutline: () => {
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 896ea9338a0..27d0df72f26 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -6,6 +6,11 @@ iconId: text_field
path: /catalog/input-controls/text-field/
-->
+## Important - Deprecation Notice
+
+The dense variant of the text field will be removed in an upcoming release.
+See [github issue](https://github.com/material-components/material-components-web/issues/4142) for details.
+
# Text Field
Text fields allow users to input, edit, and select text.
@@ -92,13 +97,13 @@ included as part of the DOM structure of a full width text field.
```html
-
-
+
+
+
+
+
-
```
@@ -277,9 +282,8 @@ Method Signature | Description
`deregisterValidationAttributeChangeHandler(!MutationObserver) => void` | Disconnects a validation attribute observer on the input element.
`getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape.
`isFocused() => boolean` | Returns whether the input is focused.
-`isRtl() => boolean` | Returns whether the direction of the root element is set to RTL.
`hasOutline() => boolean` | Returns whether there is an outline element.
-`notchOutline(labelWidth: number, isRtl: boolean) => void` | Updates the notched outline path to open the notch and update the notch width for the label element.
+`notchOutline(labelWidth: number) => void` | Updates the notched outline path to open the notch and update the notch width for the label element.
`closeOutline() => void` | Closes the notch in the notched outline element.
#### `MDCTextFieldAdapter.getNativeInput()`
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 2c30ebb7fa0..0d6743779cf 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -23,7 +23,7 @@
@import "@material/floating-label/mixins";
@import "@material/line-ripple/mixins";
@import "@material/notched-outline/mixins";
-@import "@material/notched-outline/functions";
+@import "@material/notched-outline/variables";
@import "@material/theme/mixins";
@import "@material/shape/mixins";
@import "@material/shape/functions";
@@ -44,31 +44,7 @@
}
@mixin mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive: false) {
- @include mdc-shape-radius($radius, $rtl-reflexive);
-
- .mdc-floating-label {
- // Bottom corners are square to prevent weird edge cases
- // where text would be visible outside of the curve.
- $masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);
-
- @include mdc-shape-radius($masked-radius, $rtl-reflexive);
- }
-
- .mdc-text-field__input {
- // The input element is required to have 2 pixels shaved off
- // of the radius of its parent. This prevents an ugly space of
- // background between the two borders in each corner when the
- // textarea is focused. This also means we need to guard against
- // invalid output.
- $radius-value: mdc-shape-prop-value($radius);
- $trimmed-radius-value: ();
-
- @each $corner in $radius-value {
- $trimmed-radius-value: append($trimmed-radius-value, max($corner - 2, 0));
- }
-
- @include mdc-shape-radius($trimmed-radius-value, $rtl-reflexive);
- }
+ @include mdc-notched-outline-shape-radius($radius, $rtl-reflexive);
}
@mixin mdc-text-field-ink-color($color) {
@@ -92,12 +68,6 @@
@mixin mdc-text-field-textarea-fill-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-textarea-fill-color_($color);
-
- // Automatically add label background color the same color as well to ensure
- // the label can be seen if the input scrolls behind the label
- .mdc-floating-label {
- @include mdc-floating-label-fill-color($color);
- }
}
}
@@ -133,7 +103,7 @@
@mixin mdc-text-field-outline-color($color) {
&:not(.mdc-text-field--disabled) {
- @include mdc-text-field-outline-color_($color);
+ @include mdc-notched-outline-color($color);
}
}
@@ -221,49 +191,71 @@
.mdc-floating-label {
font-size: .813rem;
+
+ &--float-above {
+ font-size: .813rem;
+ }
}
}
@mixin mdc-required-text-field-label-asterisk_() {
- .mdc-text-field__input:required + .mdc-floating-label::after {
- @content;
+ .mdc-text-field__input:required ~ {
+ .mdc-floating-label::after,
+ .mdc-notched-outline .mdc-floating-label::after {
+ @content;
+ }
}
}
@mixin mdc-text-field-outline-shape-radius($radius, $rtl-reflexive: false) {
- // NOTE: idle and notched state border radius mixins
- // are broken into 2 different mixins, otherwise
- // we would be overly specific (big no, no). The cause of
- // 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-text-field-height, $radius);
.mdc-notched-outline {
@include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
}
- @include mdc-notched-outline-idle-shape-radius($resolved-radius, $rtl-reflexive);
+ $radius-pixels: mdc-shape-prop-value($resolved-radius);
- $cornerSize: mdc-shape-prop-value($resolved-radius);
- $positionX: mdc-notched-outline-get-notch-padded-position($cornerSize);
- $labelPositionOffset: - $mdc-text-field-outline-label-offset + $positionX;
+ @if ($radius-pixels > $mdc-notched-outline-leading-width) {
+ .mdc-text-field__input {
+ @include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, 0);
+ }
- @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, -1 * ($labelPositionOffset));
+ + .mdc-text-field-helper-text {
+ @include mdc-rtl-reflexive-property(margin, $radius-pixels + $mdc-notched-outline-padding, $mdc-text-field-label-offset);
+ }
+ }
}
@mixin mdc-text-field-floating-label_ {
.mdc-floating-label {
- @include mdc-rtl-reflexive-position(left, 12px);
+ @include mdc-rtl-reflexive-position(left, $mdc-text-field-label-offset);
- bottom: 20px;
+ top: 18px;
pointer-events: none;
}
- &:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
+ &--textarea {
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+ }
+ }
+
+ &--outlined {
.mdc-floating-label {
- // @include mdc-floating-label-max-width(calc(100% - #{$mdc-text-field-icon-padding}));
- max-width: calc(100% - #{$mdc-text-field-icon-padding});
+ @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+
+ top: 17px;
+ }
+
+ &--with-leading-icon {
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width));
+
+ &--float-above {
+ @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding);
+ }
+ }
}
}
}
@@ -271,7 +263,7 @@
// Outlined
@mixin mdc-text-field-outlined-disabled_ {
- @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);
+ @include mdc-notched-outline-color($mdc-text-field-outlined-disabled-border);
@include mdc-text-field-fill-color_(transparent);
.mdc-text-field__input {
@@ -290,7 +282,7 @@
}
@mixin mdc-text-field-outlined-dense_ {
- @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+ @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
@include mdc-floating-label-shake-animation(text-field-outlined-dense);
height: 48px;
@@ -300,7 +292,7 @@
}
.mdc-floating-label {
- bottom: 16px;
+ top: 14px;
}
.mdc-text-field__icon {
@@ -314,6 +306,7 @@
@include mdc-text-field-focused-outline-color(primary);
@include mdc-floating-label-shake-animation(text-field-outlined);
@include mdc-text-field-outline-shape-radius(small);
+ @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y);
@include mdc-states-base-color(transparent);
@include mdc-text-field-fill-color(transparent);
@@ -331,35 +324,12 @@
.mdc-text-field__icon {
z-index: 2;
}
-
- .mdc-floating-label {
- @include mdc-rtl-reflexive-position(left, $mdc-text-field-outline-label-offset);
-
- width: auto;
- }
-}
-
-@mixin mdc-text-field-outline-color_($color) {
- // NOTE: outlined version of text-field wants the "idle" and
- // "notched" outline to have the same color. This covers two cases:
- // 1) text field renders with NO value in the "idle" state
- // 2) text field renders with a value in the "notched" state
- @include mdc-notched-outline-idle-color($color);
- @include mdc-notched-outline-color($color);
}
@mixin mdc-text-field-hover-outline-color_($color) {
&:not(.mdc-text-field--focused) {
.mdc-text-field__input:hover ~,
.mdc-text-field__icon:hover ~ {
- @include mdc-notched-outline-idle-color($color);
-
- // tldr; this doesn't break BEM:
- // We need to wrap this mixin with the .mdc-notched-outline
- // selector, because of the sibling selector '~'. The notched
- // outline html structure has .mdc-notched-outline
- // and .mdc-notched-outline__idle as siblings, while
- // .mdc-notched-outline__path is a child of .mdc-notched-outline
.mdc-notched-outline {
@include mdc-notched-outline-color($color);
}
@@ -377,28 +347,45 @@
@mixin mdc-text-field-with-leading-icon_ {
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
+ }
}
@mixin mdc-text-field-dense-with-leading-icon_ {
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
+
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
+ }
}
@mixin mdc-text-field-outlined-with-leading-icon_ {
- @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+ @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+ @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 32px);
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
@include mdc-rtl {
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
}
+
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding - $mdc-notched-outline-leading-width);
+ }
}
@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
- @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+ @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
@include mdc-rtl {
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
}
+
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding - $mdc-notched-outline-leading-width);
+ }
}
@mixin mdc-text-field-with-trailing-icon_ {
@@ -444,70 +431,55 @@
// Textarea
@mixin mdc-text-field-textarea-disabled_ {
- @include mdc-text-field-textarea-stroke-color_($mdc-textarea-disabled-border-color);
+ @include mdc-text-field-outlined-disabled_;
@include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
-
- border-bottom-width: 1px;
- border-style: solid;
-
- .mdc-text-field__input {
- border: 1px solid transparent;
- }
-
- .mdc-floating-label {
- @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
- }
}
@mixin mdc-text-field-textarea-invalid_ {
- @include mdc-text-field-textarea-stroke-color($mdc-text-field-error);
+ @include mdc-text-field-outline-color($mdc-text-field-error);
+ @include mdc-text-field-hover-outline-color($mdc-text-field-error);
+ @include mdc-text-field-focused-outline-color($mdc-text-field-error);
}
@mixin mdc-text-field-textarea_ {
- @include mdc-text-field-textarea-shape-radius(small);
- @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
-
- // Translate above the top of the input, and compensate for the amount of offset needed
- // to position the label within the bounds of the inset padding.
- @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
- @include mdc-floating-label-shake-animation(textarea);
+ // Note: The refactor to add the filled textarea style will result in a lot of the specificity issues that the
+ // textarea has being resolved by using the same --outlined variant class as the text field.
+ @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-shake-animation(text-field-outlined);
+ @include mdc-text-field-outline-shape-radius(small);
@include mdc-states-base-color(transparent);
@include mdc-text-field-fill-color(transparent);
+ @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 0%);
$padding-inset: 16px;
- $label-offset-y: $padding-inset + 2;
- $label-offset-x: $padding-inset;
- display: flex;
+ display: inline-flex;
width: auto;
height: auto;
transition: none;
- border: 1px solid;
- overflow: hidden;
+ overflow: visible;
.mdc-text-field__input {
align-self: auto;
- box-sizing: content-box;
+ box-sizing: border-box;
height: auto;
- margin: 0;
- padding: $padding-inset;
- padding-top: $padding-inset * 2;
- border: 1px solid transparent;
+ margin: $padding-inset/2 1px 1px 0;
+ padding: 0 $padding-inset $padding-inset;
+ border: none;
}
.mdc-floating-label {
- @include mdc-floating-label-fill-color($mdc-textarea-background);
- @include mdc-rtl-reflexive(left, 1px, right, 0);
- @include mdc-rtl-reflexive-property(margin, 8px, 0);
-
- top: $label-offset-y;
+ top: 17px;
bottom: auto;
width: auto;
- margin-top: 2px;
- padding: 12px 8px 8px 8px;
- line-height: 1.15;
pointer-events: none;
}
+
+ &.mdc-text-field--focused {
+ @include mdc-text-field-outlined-focused_;
+ }
}
// Customization
@@ -523,11 +495,7 @@
}
@mixin mdc-text-field-textarea-stroke-color_($color) {
- @include mdc-theme-prop(border-color, $color);
-
- .mdc-text-field__input:focus {
- @include mdc-theme-prop(border-color, $color);
- }
+ @include mdc-notched-outline-color($color);
}
@mixin mdc-text-field-textarea-fill-color_($color) {
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index 91b27093ede..e1861f8153a 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -53,13 +53,12 @@ $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-label-offset: 16px;
$mdc-text-field-dense-label-position-y: 70%;
-$mdc-text-field-dense-label-scale: .923;
+$mdc-text-field-dense-label-scale: .8;
$mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 110%;
-$mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
+$mdc-text-field-outlined-dense-label-position-y: 120%;
+$mdc-text-field-outlined-with-leading-icon-label-position-x: 0;
$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
-$mdc-text-field-textarea-label-position-y: 50%;
+$mdc-text-field-textarea-label-position-y: 130%;
// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
-$mdc-text-field-textarea-label-scale: .923;
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 171da0532a1..3850edf59eb 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -140,12 +140,6 @@ class MDCTextFieldAdapter {
*/
isFocused() {}
- /**
- * Returns true if the direction of the root element is set to RTL.
- * @return {boolean}
- */
- isRtl() {}
-
/**
* Activates the line ripple.
*/
@@ -197,12 +191,9 @@ class MDCTextFieldAdapter {
/**
* Only implement if outline element exists.
- * Updates SVG Path and outline element based on the
- * label element width and RTL context.
* @param {number} labelWidth
- * @param {boolean=} isRtl
*/
- notchOutline(labelWidth, isRtl) {}
+ notchOutline(labelWidth) {}
/**
* Only implement if outline element exists.
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 130ee00c34c..708b0320522 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -86,7 +86,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
deregisterValidationAttributeChangeHandler: () => {},
getNativeInput: () => {},
isFocused: () => {},
- isRtl: () => {},
activateLineRipple: () => {},
deactivateLineRipple: () => {},
setLineRippleTransformOrigin: () => {},
@@ -213,8 +212,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
const isDense = this.adapter_.hasClass(cssClasses.DENSE);
const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
const labelWidth = this.adapter_.getLabelWidth() * labelScale;
- const isRtl = this.adapter_.isRtl();
- this.adapter_.notchOutline(labelWidth, isRtl);
+ this.adapter_.notchOutline(labelWidth);
} else {
this.adapter_.closeOutline();
}
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 1679e4d353c..e64a0fee5d3 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -78,13 +78,13 @@ In outlined text field:
event
-
-
+
+
+
+
+
-
```
@@ -106,14 +106,14 @@ In outlined text field:
```html
@@ -71,7 +83,13 @@
class="mdc-text-field__input test-text-field__input"
rows="2"
disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.
-
+
@@ -69,7 +81,13 @@
class="mdc-text-field__input test-text-field__input"
rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.
-
+
@@ -71,7 +83,13 @@
class="mdc-text-field__input test-text-field__input"
rows="2"
required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.
-
+