diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss index e5cbeefe3cb..70e3113a950 100644 --- a/packages/mdc-layout-grid/mdc-layout-grid.scss +++ b/packages/mdc-layout-grid/mdc-layout-grid.scss @@ -64,7 +64,8 @@ @for $span from 1 through map-get($mdc-layout-grid-columns, $upper-breakpoint) { // Span classes. // stylelint-disable max-nesting-depth - @at-root .mdc-layout-grid__cell--span-#{$span}, .mdc-layout-grid__cell--span-#{$span}-#{$size} { + @at-root .mdc-layout-grid__cell--span-#{$span}, + .mdc-layout-grid__cell--span-#{$span}-#{$size} { @include mdc-layout-grid-cell-span_($size, $span, $gutter); } // stylelint-enable max-nesting-depth diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index da36c72a1df..3d6463c1eb5 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -462,7 +462,7 @@ If you are using a JavaScript framework, such as React or Angular, you can creat | `getSelectedIndex() => number` | Returns the index of the currently selected menu item. | | `setSelectedIndex(index: number) => void` | Handles setting the `mdc-select__selected-text` element and closing the menu. Also causes the label to float and outline to notch if needed. | | `getValue() => string` | Handles getting the value through the adapter. | -| `setValue(value: string) => void` | Sets the selected index to the index of the menu item with the given value. | +| `setValue() => string` | Sets the selected index to the index of the menu item with the given value. | | `setValid(isValid: boolean) => void` | Sets the valid state through the adapter. | | `isValid() => boolean` | Gets the valid state through the adapter's `checkValidity` API. | | `setRequired(isRequired: boolean) => void` | Sets the required state through the adapter. | diff --git a/packages/mdc-select/foundation.ts b/packages/mdc-select/foundation.ts index 80644e9fee6..0de97ac1bce 100644 --- a/packages/mdc-select/foundation.ts +++ b/packages/mdc-select/foundation.ts @@ -147,16 +147,13 @@ export class MDCSelectFoundation extends MDCFoundation { this.adapter_.closeMenu(); } - this.updateLabel_(); - this.updateValidity_(); + this.handleChange(); } setValue(value: string) { const index = this.menuItemValues_.indexOf(value); this.setSelectedIndex(index); - - this.updateLabel_(); - this.updateValidity_(); + this.handleChange(); } getValue() { @@ -232,8 +229,15 @@ export class MDCSelectFoundation extends MDCFoundation { */ handleChange() { this.updateLabel_(); - this.updateValidity_(); this.adapter_.notifyChange(this.getValue()); + + const isRequired = this.adapter_.hasClass(cssClasses.REQUIRED); + if (isRequired) { + this.setValid(this.isValid()); + if (this.helperText_) { + this.helperText_.setValidity(this.isValid()); + } + } } handleMenuItemAction(index: number) { @@ -398,9 +402,13 @@ export class MDCSelectFoundation extends MDCFoundation { } /** - * Updates the valid state when appropriate. + * Unfocuses the select component. */ - private updateValidity_() { + private blur_() { + this.adapter_.removeClass(cssClasses.FOCUSED); + this.updateLabel_(); + this.adapter_.deactivateBottomLine(); + const isRequired = this.adapter_.hasClass(cssClasses.REQUIRED); if (isRequired) { this.setValid(this.isValid()); @@ -409,16 +417,6 @@ export class MDCSelectFoundation extends MDCFoundation { } } } - - /** - * Unfocuses the select component. - */ - private blur_() { - this.adapter_.removeClass(cssClasses.FOCUSED); - this.updateLabel_(); - this.updateValidity_(); - this.adapter_.deactivateBottomLine(); - } } // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier. diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index dd9bee5ba7b..7f6a99aa2e0 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -451,7 +451,6 @@ $property-name: height, ); - // stylelint-disable-next-line max-line-length $resolved-radius: nth(mdc-shape-resolve-percentage-radius($height, mdc-shape-prop-value($radius)), 1); @if (length(mdc-shape-prop-value($radius)) > 1) { diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js index 7fe34ebeb17..c92c97e6e12 100644 --- a/test/unit/mdc-select/foundation.test.js +++ b/test/unit/mdc-select/foundation.test.js @@ -256,11 +256,11 @@ test('#handleChange does not call foundation.notchOutline() when there is no lab td.verify(foundation.notchOutline(td.matchers.anything()), {times: 0}); }); -test('#handleChange calls adapter.notifyChange()', () => { +test('#handleChange calls adapter.notifyChange() if didChange is true', () => { const {foundation, mockAdapter} = setupTest(); td.when(mockAdapter.getMenuItemAttr(td.matchers.anything(), strings.VALUE_ATTR)).thenReturn('value'); - foundation.handleChange(); + foundation.handleChange(/* didChange */ true); td.verify(mockAdapter.notifyChange(td.matchers.anything()), {times: 1}); });