use data attributes (#1928)

shoelace-style · Mar 25, 2024 · ff2e048 · ff2e048
1 parent 4aa5e9c
commit ff2e048
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/components/button-group/button-group.component.ts b/src/components/button-group/button-group.component.ts
@@ -30,22 +30,22 @@ export default class SlButtonGroup extends ShoelaceElement {
 
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.add('sl-button-group__button--focus');
+    button?.toggleAttribute('data-sl-button-group__button--focus', true);
   }
 
   private handleBlur(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.remove('sl-button-group__button--focus');
+    button?.toggleAttribute('data-sl-button-group__button--focus', false);
   }
 
   private handleMouseOver(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.add('sl-button-group__button--hover');
+    button?.toggleAttribute('data-sl-button-group__button--hover', true);
   }
 
   private handleMouseOut(event: Event) {
     const button = findButton(event.target as HTMLElement);
-    button?.classList.remove('sl-button-group__button--hover');
+    button?.toggleAttribute('data-sl-button-group__button--hover', true);
   }
 
   private handleSlotChange() {
@@ -56,11 +56,11 @@ export default class SlButtonGroup extends ShoelaceElement {
       const button = findButton(el);
 
       if (button) {
-        button.classList.add('sl-button-group__button');
-        button.classList.toggle('sl-button-group__button--first', index === 0);
-        button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle('sl-button-group__button--last', index === slottedElements.length - 1);
-        button.classList.toggle('sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
+        button.toggleAttribute('data-sl-button-group__button', true);
+        button.toggleAttribute('data-sl-button-group__button--first', index === 0);
+        button.toggleAttribute('data-sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
+        button.toggleAttribute('data-sl-button-group__button--last', index === slottedElements.length - 1);
+        button.toggleAttribute('data-sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
       }
     });
   }

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
@@ -546,30 +546,30 @@ export default css`
    * buttons and we style them here instead.
    */
 
-  :host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button {
+  :host([data-sl-button-group__button--first]:not([data-sl-button-group__button--last])) .button {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
-  :host(.sl-button-group__button--inner) .button {
+  :host([data-sl-button-group__button--inner]) .button {
     border-radius: 0;
   }
 
-  :host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button {
+  :host([data-sl-button-group__button--last]:not([data-sl-button-group__button--first])) .button {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
   /* All except the first */
-  :host(.sl-button-group__button:not(.sl-button-group__button--first)) {
+  :host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
     margin-inline-start: calc(-1 * var(--sl-input-border-width));
   }
 
   /* Add a visual separator between solid buttons */
   :host(
-      .sl-button-group__button:not(
-          .sl-button-group__button--first,
-          .sl-button-group__button--radio,
+      [data-sl-button-group__button]:not(
+          [data-sl-button-group__button--first],
+          [data-sl-button-group__button--radio],
           [variant='default']
         ):not(:hover)
     )
@@ -584,13 +584,13 @@ export default css`
   }
 
   /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host(.sl-button-group__button--hover) {
+  :host([data-sl-button-group__button--hover]) {
     z-index: 1;
   }
 
   /* Focus and checked are always on top */
-  :host(.sl-button-group__button--focus),
-  :host(.sl-button-group__button[checked]) {
+  :host([data-sl-button-group__button--focus]),
+  :host([data-sl-button-group__button[checked]]) {
     z-index: 2;
   }
 `;