From ce248dc3831a494bf70625d3f4b0b6ca895a2d97 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 1 Aug 2023 14:00:41 -0700
Subject: [PATCH] fix(checkbox)!: remove error property

BREAKING CHANGE: Design is still exploring error-state checkboxes. If needed, theme with an error color and set aria-invalid.

PiperOrigin-RevId: 552914338
---
 checkbox/demo/demo.ts              |  1 -
 checkbox/demo/stories.ts           |  9 +----
 checkbox/internal/_checkbox.scss   | 61 ------------------------------
 checkbox/internal/checkbox.ts      | 27 +------------
 checkbox/internal/checkbox_test.ts | 23 -----------
 tokens/_md-comp-checkbox.scss      | 32 ++++++++--------
 6 files changed, 20 insertions(+), 133 deletions(-)

diff --git a/checkbox/demo/demo.ts b/checkbox/demo/demo.ts
index 9bc5c4c6bc..c520af9d7f 100644
--- a/checkbox/demo/demo.ts
+++ b/checkbox/demo/demo.ts
@@ -16,7 +16,6 @@ const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Checkbox', [
       new Knob('checked', {defaultValue: false, ui: boolInput()}),
       new Knob('indeterminate', {defaultValue: false, ui: boolInput()}),
-      new Knob('error', {defaultValue: false, ui: boolInput()}),
       new Knob('disabled', {defaultValue: false, ui: boolInput()}),
     ]);
 
diff --git a/checkbox/demo/stories.ts b/checkbox/demo/stories.ts
index 1c9b2b261b..dab76724a8 100644
--- a/checkbox/demo/stories.ts
+++ b/checkbox/demo/stories.ts
@@ -13,19 +13,17 @@ import {css, html} from 'lit';
 export interface StoryKnobs {
   checked: boolean;
   disabled: boolean;
-  error: boolean;
   indeterminate: boolean;
 }
 
 const checkbox: MaterialStoryInit<StoryKnobs> = {
   name: 'Checkbox',
-  render({checked, disabled, error, indeterminate}) {
+  render({checked, disabled, indeterminate}) {
     return html`
       <md-checkbox
         aria-label="An example checkbox"
         ?checked=${checked}
         ?disabled=${disabled}
-        ?error=${error}
         ?indeterminate=${indeterminate}
       ></md-checkbox>
     `;
@@ -47,13 +45,12 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
       }
     `,
   ],
-  render({disabled, error}) {
+  render({disabled}) {
     return html`
       <div class="column" role="group" aria-label="Animals">
         <label role="presentation">
           <md-checkbox
             ?disabled=${disabled}
-            ?error=${error}
             aria-label="Cats"
           ></md-checkbox>
           <span aria-hidden="true">Cats</span>
@@ -62,7 +59,6 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
           <md-checkbox
             checked
             ?disabled=${disabled}
-            ?error=${error}
             aria-label="dogs"
           ></md-checkbox>
           <span aria-hidden="true">Dogs</span>
@@ -71,7 +67,6 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
           <md-checkbox
             indeterminate
             ?disabled=${disabled}
-            ?error=${error}
             aria-label="Birds"
           ></md-checkbox>
           <span aria-hidden="true">Birds</span>
diff --git a/checkbox/internal/_checkbox.scss b/checkbox/internal/_checkbox.scss
index c8fd7134a0..d6ba3a9dd7 100644
--- a/checkbox/internal/_checkbox.scss
+++ b/checkbox/internal/_checkbox.scss
@@ -195,17 +195,6 @@ $_checkmark-bottom-left: 7px, -14px;
     );
   }
 
-  .error md-ripple {
-    @include ripple.theme(
-      (
-        hover-color: var(--_error-hover-state-layer-color),
-        hover-opacity: var(--_error-hover-state-layer-opacity),
-        pressed-color: var(--_error-pressed-state-layer-color),
-        pressed-opacity: var(--_error-pressed-state-layer-opacity),
-      )
-    );
-  }
-
   // Icon and icon marks
 
   .icon {
@@ -325,20 +314,6 @@ $_checkmark-bottom-left: 7px, -14px;
 
   // States
 
-  :where(.error) .outline {
-    border-color: var(--_error-outline-color);
-    // TODO(b/262410085): add once token is added
-    // border-width: var(--_error-outline-width);
-  }
-
-  :where(.error) .background {
-    background: var(--_selected-error-container-color);
-  }
-
-  :where(.error) .icon {
-    fill: var(--_selected-error-icon-color);
-  }
-
   :where(:hover) .outline {
     border-color: var(--_hover-outline-color);
     border-width: var(--_hover-outline-width);
@@ -352,18 +327,6 @@ $_checkmark-bottom-left: 7px, -14px;
     fill: var(--_selected-hover-icon-color);
   }
 
-  :where(.error:hover) .outline {
-    border-color: var(--_error-hover-outline-color);
-  }
-
-  :where(.error:hover) .background {
-    background: var(--_selected-error-hover-container-color);
-  }
-
-  :where(.error:hover) .icon {
-    fill: var(--_selected-error-hover-icon-color);
-  }
-
   :where(:focus-within) .outline {
     border-color: var(--_focus-outline-color);
     border-width: var(--_focus-outline-width);
@@ -377,18 +340,6 @@ $_checkmark-bottom-left: 7px, -14px;
     fill: var(--_selected-focus-icon-color);
   }
 
-  :where(.error:focus-within) .outline {
-    border-color: var(--_error-focus-outline-color);
-  }
-
-  :where(.error:focus-within) .background {
-    background: var(--_selected-error-focus-container-color);
-  }
-
-  :where(.error:focus-within) .icon {
-    fill: var(--_selected-error-focus-icon-color);
-  }
-
   :where(:active) .outline {
     border-color: var(--_pressed-outline-color);
     border-width: var(--_pressed-outline-width);
@@ -402,18 +353,6 @@ $_checkmark-bottom-left: 7px, -14px;
     fill: var(--_selected-pressed-icon-color);
   }
 
-  :where(.error:active) .outline {
-    border-color: var(--_error-pressed-outline-color);
-  }
-
-  :where(.error:active) .background {
-    background: var(--_selected-error-pressed-container-color);
-  }
-
-  :where(.error:active) .icon {
-    fill: var(--_selected-error-pressed-icon-color);
-  }
-
   // Don't animate to/from disabled states because the outline is hidden when
   // selected. Without this, there'd be a FOUC if the checkbox state is
   // programmatically  changed while disabled.
diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
index ee7a25dba5..e0b6a000aa 100644
--- a/checkbox/internal/checkbox.ts
+++ b/checkbox/internal/checkbox.ts
@@ -42,11 +42,6 @@ export class Checkbox extends LitElement {
    */
   @property({type: Boolean, reflect: true}) disabled = false;
 
-  /**
-   * Whether or not the checkbox is invalid.
-   */
-  @property({type: Boolean}) error = false;
-
   /**
    * Whether or not the checkbox is indeterminate.
    *
@@ -182,23 +177,6 @@ export class Checkbox extends LitElement {
     return this.internals.reportValidity();
   }
 
-  /**
-   * Checks the checkbox's native validation and returns whether or not the
-   * element is valid.
-   *
-   * If invalid, this method will dispatch the `invalid` event.
-   *
-   * The checkbox's `error` state will be set to true if invalid, or false if
-   * valid.
-   *
-   * @return true if the checkbox is valid, or false if not.
-   */
-  showValidity() {
-    const isValid = this.checkValidity();
-    this.error = !isValid;
-    return isValid;
-  }
-
   /**
    * Sets the checkbox's native validation error message. This is used to
    * customize `validationMessage`.
@@ -242,7 +220,6 @@ export class Checkbox extends LitElement {
       'unselected': !isChecked && !isIndeterminate,
       'checked': isChecked,
       'indeterminate': isIndeterminate,
-      'error': this.error && !this.disabled,
       'prev-unselected': prevNone,
       'prev-checked': prevChecked,
       'prev-indeterminate': prevIndeterminate,
@@ -250,7 +227,7 @@ export class Checkbox extends LitElement {
     });
 
     // Needed for closure conformance
-    const {ariaLabel} = this as ARIAMixinStrict;
+    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;
     return html`
       <div class="container ${containerClasses}">
         <div class="outline"></div>
@@ -266,7 +243,7 @@ export class Checkbox extends LitElement {
           id="input"
           aria-checked=${isIndeterminate ? 'mixed' : nothing}
           aria-label=${ariaLabel || nothing}
-          aria-invalid=${this.error || nothing}
+          aria-invalid=${ariaInvalid || nothing}
           ?disabled=${this.disabled}
           ?required=${this.required}
           .indeterminate=${this.indeterminate}
diff --git a/checkbox/internal/checkbox_test.ts b/checkbox/internal/checkbox_test.ts
index 574c9e306e..ebc8bc40b2 100644
--- a/checkbox/internal/checkbox_test.ts
+++ b/checkbox/internal/checkbox_test.ts
@@ -48,7 +48,6 @@ describe('checkbox', () => {
       expect(harness.element.checked).toEqual(false);
       expect(harness.element.indeterminate).toEqual(false);
       expect(harness.element.disabled).toEqual(false);
-      expect(harness.element.error).toEqual(false);
       expect(harness.element.value).toEqual('on');
     });
 
@@ -245,27 +244,5 @@ describe('checkbox', () => {
           .withContext('checkbox.validity.valueMissing')
           .toBeTrue();
     });
-
-    it('should set error to true when showValidity() is called and checkbox is invalid',
-       async () => {
-         const {harness} = await setupTest();
-         harness.element.required = true;
-
-         harness.element.showValidity();
-         expect(harness.element.error).withContext('checkbox.error').toBeTrue();
-       });
-
-    it('should set error to false when showValidity() is called and checkbox is valid',
-       async () => {
-         const {harness} = await setupTest();
-         harness.element.required = true;
-         harness.element.error = true;
-         harness.element.checked = true;
-
-         harness.element.showValidity();
-         expect(harness.element.error)
-             .withContext('checkbox.error')
-             .toBeFalse();
-       });
   });
 });
diff --git a/tokens/_md-comp-checkbox.scss b/tokens/_md-comp-checkbox.scss
index 0ed6955b3e..18c732305b 100644
--- a/tokens/_md-comp-checkbox.scss
+++ b/tokens/_md-comp-checkbox.scss
@@ -18,14 +18,6 @@ $supported-tokens: (
   'disabled-container-opacity',
   'disabled-outline-color',
   'disabled-outline-width',
-  'error-focus-outline-color',
-  'error-hover-outline-color',
-  'error-hover-state-layer-color',
-  'error-hover-state-layer-opacity',
-  'error-outline-color',
-  'error-pressed-outline-color',
-  'error-pressed-state-layer-color',
-  'error-pressed-state-layer-opacity',
   'focus-outline-color',
   'focus-outline-width',
   'hover-outline-color',
@@ -43,14 +35,6 @@ $supported-tokens: (
   'selected-disabled-container-color',
   'selected-disabled-container-opacity',
   'selected-disabled-icon-color',
-  'selected-error-container-color',
-  'selected-error-focus-container-color',
-  'selected-error-focus-icon-color',
-  'selected-error-hover-container-color',
-  'selected-error-hover-icon-color',
-  'selected-error-icon-color',
-  'selected-error-pressed-container-color',
-  'selected-error-pressed-icon-color',
   'selected-focus-container-color',
   'selected-focus-icon-color',
   'selected-hover-container-color',
@@ -69,11 +53,27 @@ $supported-tokens: (
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'error-focus-outline-color',
   'error-focus-state-layer-color',
   'error-focus-state-layer-opacity',
+  'error-hover-outline-color',
+  'error-hover-state-layer-color',
+  'error-hover-state-layer-opacity',
+  'error-outline-color',
+  'error-pressed-outline-color',
+  'error-pressed-state-layer-color',
+  'error-pressed-state-layer-opacity',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
   'selected-disabled-container-outline-width',
+  'selected-error-container-color',
+  'selected-error-focus-container-color',
+  'selected-error-focus-icon-color',
+  'selected-error-hover-container-color',
+  'selected-error-hover-icon-color',
+  'selected-error-icon-color',
+  'selected-error-pressed-container-color',
+  'selected-error-pressed-icon-color',
   'selected-focus-outline-width',
   'selected-focus-state-layer-color',
   'selected-focus-state-layer-opacity',