feat(select): Add menu invalid class

BREAKING CHANGE: Added adapter method `addMenuClass`, `removeMenuClass` PiperOrigin-RevId: 314429861

Author: allan-chen

.stylelintrc.yaml

@@ -27,6 +27,7 @@ rules:
  no-extra-semicolons: true
  # In MDC, @keyframe's are defined in a separate file.
  # no-unknown-animations: true
+ number-leading-zero: never
  # Requires known-css-parser, not yet imported into third_party.
  # property-no-unknown: true
  rule-empty-line-before:

packages/mdc-select/adapter.ts

@@ -132,6 +132,16 @@ export interface MDCSelectAdapter {
  removeSelectAnchorAttr(attr: string): void;
 
  // Menu-related methods ======================================================
+ /**
+ * Adds class to the menu element.
+ */
+ addMenuClass(className: string): void;
+
+ /**
+ * Removes a class from the menu element.
+ */
+ removeMenuClass(className: string): void;
+
  /**
  * Opens the menu.
  */

packages/mdc-select/component.ts

@@ -356,6 +356,12 @@ export class MDCSelect extends MDCComponent<MDCSelectFoundation> {
  removeSelectAnchorAttr: (attr: string) => {
  this.selectAnchor.removeAttribute(attr);
  },
+ addMenuClass: (className: string) => {
+ this.menuElement.classList.add(className);
+ },
+ removeMenuClass: (className: string) => {
+ this.menuElement.classList.remove(className);
+ },
  openMenu: () => {
  this.menu.open = true;
  },

packages/mdc-select/constants.ts

@@ -26,6 +26,7 @@ const cssClasses = {
  DISABLED: 'mdc-select--disabled',
  FOCUSED: 'mdc-select--focused',
  INVALID: 'mdc-select--invalid',
+ MENU_INVALID: 'mdc-select__menu--invalid',
  OUTLINED: 'mdc-select--outlined',
  REQUIRED: 'mdc-select--required',
  ROOT: 'mdc-select',

packages/mdc-select/foundation.ts

@@ -70,6 +70,8 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
  getSelectAnchorAttr: () => '',
  setSelectAnchorAttr: () => undefined,
  removeSelectAnchorAttr: () => undefined,
+ addMenuClass: () => undefined,
+ removeMenuClass: () => undefined,
  openMenu: () => undefined,
  closeMenu: () => undefined,
  getAnchorElement: () => null,
@@ -363,8 +365,10 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
  this.adapter.setSelectAnchorAttr('aria-invalid', (!isValid).toString());
  if (isValid) {
  this.adapter.removeClass(cssClasses.INVALID);
+ this.adapter.removeMenuClass(cssClasses.MENU_INVALID);
  } else {
  this.adapter.addClass(cssClasses.INVALID);
+ this.adapter.addMenuClass(cssClasses.MENU_INVALID);
  }
  }
 

packages/mdc-select/test/foundation.test.ts

@@ -62,6 +62,8 @@ describe('MDCSelectFoundation', () => {
  'getSelectAnchorAttr',
  'setSelectAnchorAttr',
  'removeSelectAnchorAttr',
+ 'addMenuClass',
+ 'removeMenuClass',
  'openMenu',
  'closeMenu',
  'getAnchorElement',
@@ -753,13 +755,15 @@ describe('MDCSelectFoundation', () => {
  expect(mockAdapter.notifyChange).toHaveBeenCalledTimes(1);
  });
 
- it('#setValid true sets aria-invalid to false and removes invalid class',
+ it('#setValid true sets aria-invalid to false and removes invalid classes',
  () => {
  const {foundation, mockAdapter} = setupTest();
  foundation.setValid(true);
  expect(mockAdapter.setSelectAnchorAttr)
  .toHaveBeenCalledWith('aria-invalid', 'false');
  expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);
+ expect(mockAdapter.removeMenuClass)
+ .toHaveBeenCalledWith(cssClasses.MENU_INVALID);
  });
 
  it('#setValid false sets aria-invalid to true and adds invalid class', () => {
@@ -768,6 +772,8 @@ describe('MDCSelectFoundation', () => {
  expect(mockAdapter.setSelectAnchorAttr)
  .toHaveBeenCalledWith('aria-invalid', 'true');
  expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);
+ expect(mockAdapter.addMenuClass)
+ .toHaveBeenCalledWith(cssClasses.MENU_INVALID);
  });
 
  it('#isValid returns false if using default validity check and no index is selected',