From d345878de6a2ea54fd9c65a4e68cdc29d236fae1 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Thu, 19 Dec 2024 03:24:06 -0500
Subject: [PATCH] Remove `*--disabled` classes, use regular selectors

---
 src/components/color-picker/color-picker.css | 24 ++++++++++----------
 src/components/color-picker/color-picker.ts  |  3 +--
 src/components/icon-button/icon-button.css   |  8 +++----
 src/components/icon-button/icon-button.ts    |  1 -
 src/components/menu-item/menu-item.css       |  2 +-
 src/components/menu-item/menu-item.ts        |  1 -
 src/components/option/option.css             |  6 ++---
 src/components/option/option.ts              |  1 -
 src/components/radio/radio.ts                |  1 -
 src/components/rating/rating.css             |  7 +++---
 src/components/rating/rating.test.ts         |  1 -
 src/components/tab/tab.test.ts               |  1 -
 src/components/tab/tab.ts                    |  1 -
 src/components/tree-item/tree-item.css       |  2 +-
 src/components/tree-item/tree-item.test.ts   |  9 --------
 src/components/tree-item/tree-item.ts        |  1 -
 16 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index d66ad249e..3155426c9 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -246,19 +246,19 @@
     0.25rem 0.25rem;
 }
 
-.color-picker--disabled {
+:host([disabled]) {
   opacity: 0.5;
   cursor: not-allowed;
-}
 
-.color-picker--disabled .grid,
-.color-picker--disabled .grid-handle,
-.color-picker--disabled .slider,
-.color-picker--disabled .slider-handle,
-.color-picker--disabled .preview,
-.color-picker--disabled .swatch,
-.color-picker--disabled .swatch-color {
-  pointer-events: none;
+  .grid,
+  .grid-handle,
+  .slider,
+  .slider-handle,
+  .preview,
+  .swatch,
+  .swatch-color {
+    pointer-events: none;
+  }
 }
 
 /*
@@ -311,12 +311,12 @@
   outline: none;
 }
 
-.trigger:focus-visible:not(.trigger--disabled) {
+.trigger:focus-visible:not(.trigger:disabled) {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-:host(:disabled) :is(.label, .trigger) {
+:host([disabled]) :is(.label, .trigger) {
   opacity: 0.5;
   cursor: not-allowed;
 }
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 0be400611..fe149b4df 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -887,7 +887,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           'color-picker': true,
-          'color-picker--disabled': this.disabled,
         })}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex="-1"
@@ -1144,7 +1143,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             part="trigger form-control-input"
             class=${classMap({
               trigger: true,
-              'trigger--disabled': this.disabled,
               'trigger--empty': this.isEmpty,
               'transparent-bg': true,
               'form-control-input': true,
@@ -1155,6 +1153,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             type="button"
             aria-labelledby="form-control-label"
             aria-describedby="hint"
+            .disabled=${this.disabled}
           ></button>
 
           <slot
diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index 331153299..10c845416 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -20,13 +20,13 @@
   -webkit-appearance: none;
 }
 
-.icon-button:hover:not(.icon-button--disabled),
-.icon-button:focus-visible:not(.icon-button--disabled) {
+:host(:not([disabled])) .icon-button:hover,
+:host(:not([disabled])) .icon-button:focus-visible {
   background-color: var(--wa-color-neutral-fill-quiet);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
-.icon-button:active:not(.icon-button--disabled) {
+:host(:not([disabled])) .icon-button:active {
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 }
 
@@ -34,7 +34,7 @@
   outline: none;
 }
 
-.icon-button--disabled {
+:host([disabled]) .icon-button {
   opacity: 0.5;
   cursor: not-allowed;
 }
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 4c44436cf..ffde70379 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -111,7 +111,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           'icon-button': true,
-          'icon-button--disabled': !isLink && this.disabled,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}
diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css
index 2356926a1..6012cc1d0 100644
--- a/src/components/menu-item/menu-item.css
+++ b/src/components/menu-item/menu-item.css
@@ -25,7 +25,7 @@
   cursor: pointer;
 }
 
-.menu-item.menu-item--disabled {
+:host([disabled]) .menu-item {
   outline: none;
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 63adf8d2a..c9ea44bb8 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -174,7 +174,6 @@ export default class WaMenuItem extends WebAwesomeElement {
         class=${classMap({
           'menu-item': true,
           'menu-item--checked': this.checked,
-          'menu-item--disabled': this.disabled,
           'menu-item--loading': this.loading,
           'menu-item--has-submenu': this.isSubmenu(),
           'menu-item--submenu-expanded': isSubmenuExpanded,
diff --git a/src/components/option/option.css b/src/components/option/option.css
index b06dfa4e3..f7d329a9a 100644
--- a/src/components/option/option.css
+++ b/src/components/option/option.css
@@ -25,19 +25,19 @@
   cursor: pointer;
 }
 
-.option--hover:not(.option--current):not(.option--disabled) {
+:host(:not([disabled])) .option--hover:not(.option--current) {
   background-color: var(--background-color-hover);
   color: var(--text-color-hover);
 }
 
 .option--current,
-.option--current.option--disabled {
+:host([disabled]) .option--current {
   background-color: var(--background-color-current);
   color: var(--text-color-current);
   opacity: 1;
 }
 
-.option--disabled {
+:host([disabled]) .option {
   outline: none;
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index dc932fdf3..d1872e386 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -129,7 +129,6 @@ export default class WaOption extends WebAwesomeElement {
         class=${classMap({
           option: true,
           'option--current': this.current,
-          'option--disabled': this.disabled,
           'option--selected': this.selected,
           'option--hover': this.hasHover,
         })}
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 554904123..334cad676 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -126,7 +126,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
         class=${classMap({
           radio: true,
           'radio--checked': this.checked,
-          'radio--disabled': this.disabled,
         })}
       >
         <span part="control" class="control">
diff --git a/src/components/rating/rating.css b/src/components/rating/rating.css
index eb6f6e62e..0bf727bf6 100644
--- a/src/components/rating/rating.css
+++ b/src/components/rating/rating.css
@@ -61,21 +61,20 @@
   scale: 1.2;
 }
 
-.rating--disabled .symbols,
 .rating--readonly .symbols {
   cursor: default;
 }
 
-.rating--disabled .symbol--hover,
+:host([disabled]) .symbol--hover,
 .rating--readonly .symbol--hover {
   scale: none;
 }
 
-.rating--disabled {
+:host([disabled]) {
   opacity: 0.5;
 }
 
-.rating--disabled .symbols {
+:host([disabled]) .symbols {
   cursor: not-allowed;
 }
 
diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts
index b668928fb..7064019bb 100644
--- a/src/components/rating/rating.test.ts
+++ b/src/components/rating/rating.test.ts
@@ -38,7 +38,6 @@ describe('<wa-rating>', () => {
         const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
         expect(base.getAttribute('aria-disabled')).to.equal('true');
-        expect(base.getAttribute('class')).to.equal(' rating rating--disabled ');
       });
 
       it('should set max value by attribute', async () => {
diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts
index d17142683..65dc526a9 100644
--- a/src/components/tab/tab.test.ts
+++ b/src/components/tab/tab.test.ts
@@ -36,7 +36,6 @@ describe('<wa-tab>', () => {
 
         expect(el.disabled).to.equal(true);
         expect(el.getAttribute('aria-disabled')).to.equal('true');
-        expect(base.getAttribute('class')).to.equal(' tab tab--disabled ');
         expect(el.getAttribute('tabindex')).to.equal('-1');
       });
 
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 79ab023df..202b9a86f 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -77,7 +77,6 @@ export default class WaTab extends WebAwesomeElement {
         class=${classMap({
           tab: true,
           'tab--active': this.active,
-          'tab--disabled': this.disabled,
         })}
       >
         <slot></slot>
diff --git a/src/components/tree-item/tree-item.css b/src/components/tree-item/tree-item.css
index 832b2335f..eecfb8df7 100644
--- a/src/components/tree-item/tree-item.css
+++ b/src/components/tree-item/tree-item.css
@@ -93,7 +93,7 @@ slot:not([name])::slotted(wa-icon) {
   border-inline-start: solid 3px transparent;
 }
 
-.tree-item--disabled .item {
+:host([disabled]) .item {
   opacity: 0.5;
   outline: none;
   cursor: not-allowed;
diff --git a/src/components/tree-item/tree-item.test.ts b/src/components/tree-item/tree-item.test.ts
index 427009bb4..e0c92dc81 100644
--- a/src/components/tree-item/tree-item.test.ts
+++ b/src/components/tree-item/tree-item.test.ts
@@ -141,15 +141,6 @@ describe('<wa-tree-item>', () => {
           // Assert
           expect(leafItem).to.have.attribute('aria-disabled', 'true');
         });
-
-        it('should set item--disabled part', async () => {
-          // Act
-          leafItem.disabled = true;
-          await leafItem.updateComplete;
-
-          // Assert
-          expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--disabled')).to.be.true;
-        });
       });
 
       describe('when the item is expanded', () => {
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index e3d59b242..e2b34fab1 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -256,7 +256,6 @@ export default class WaTreeItem extends WebAwesomeElement {
           'tree-item': true,
           'tree-item--expanded': this.expanded,
           'tree-item--selected': this.selected,
-          'tree-item--disabled': this.disabled,
           'tree-item--leaf': this.isLeaf,
           'tree-item--has-expand-button': showExpandButton,
         })}"