feat(select): Add menu invalid class

BREAKING CHANGE: Added adapter method `addMenuClass`, `removeMenuClass`

PiperOrigin-RevId: 314429861

.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',