feat(checkbox): Toggle selected class with state (#4612)

Author: patrickrodee

packages/mdc-checkbox/constants.ts

@@ -31,6 +31,7 @@ export const cssClasses = {
   CHECKED: 'mdc-checkbox--checked',
   DISABLED: 'mdc-checkbox--disabled',
   INDETERMINATE: 'mdc-checkbox--indeterminate',
+  SELECTED: 'mdc-checkbox--selected',
   UPGRADED: 'mdc-checkbox--upgraded',
 };
 

packages/mdc-checkbox/foundation.ts

@@ -117,6 +117,14 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
 
     this.updateAriaChecked_();
 
+    const {TRANSITION_STATE_UNCHECKED} = strings;
+    const {SELECTED} = cssClasses;
+    if (newState === TRANSITION_STATE_UNCHECKED) {
+      this.adapter_.removeClass(SELECTED);
+    } else {
+      this.adapter_.addClass(SELECTED);
+    }
+
     // Check to ensure that there isn't a previously existing animation class, in case for example
     // the user interacted with the checkbox before the animation was finished.
     if (this.currentAnimationClass_.length > 0) {

test/unit/mdc-checkbox/foundation.test.js

@@ -241,6 +241,58 @@ testChangeHandler('no transition classes applied when no state change', [
   },
 ], cssClasses.ANIM_UNCHECKED_CHECKED, {times: 1});
 
+test('changing from unchecked to checked adds selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  change({
+    checked: true,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.addClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from unchecked to indeterminate adds selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  change({
+    checked: false,
+    indeterminate: true,
+  });
+  td.verify(mockAdapter.addClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from checked to unchecked removes selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: true,
+    indeterminate: false,
+  });
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.removeClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from indeterminate to unchecked removes selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: true,
+  });
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.removeClass(cssClasses.SELECTED), {times: 1});
+});
+
 test('animation end handler removes animation class after short delay', () => {
   const clock = installClock();
   const {ANIM_UNCHECKED_CHECKED} = cssClasses;