refactor(pie-icon-button): DSW-2280 updated styles to use classmap (#…

…2106)
justeattakeaway · Dec 6, 2024 · c7482cf · c7482cf
1 parent 78d17bb
commit c7482cf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/.changeset/proud-chairs-agree.md b/.changeset/proud-chairs-agree.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icon-button": minor
+---
+
+[Changed] - Updated styles to use classmap
diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss
@@ -41,20 +41,20 @@
         width: var(--icon-size-override);
     }
 
-    &[variant='primary'] {
+    &.o-iconBtn--primary {
         /* Same as default styles */
 
         @include p.button-interactive-states('--dt-color-interactive-brand');
     }
 
-    &[variant='secondary'] {
+    &.o-iconBtn--secondary {
         --btn-bg-color: var(--dt-color-interactive-secondary);
         --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
     }
 
-    &[variant='outline'] {
+    &.o-iconBtn--outline {
         --btn-bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
@@ -63,28 +63,28 @@
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='ghost'] {
+    &.o-iconBtn--ghost {
         --btn-bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='ghost-secondary'] {
+    &.o-iconBtn--ghost-secondary {
         --btn-bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='inverse'] {
+    &.o-iconBtn--inverse {
         --btn-bg-color: var(--dt-color-interactive-inverse);
         --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
     }
 
-    &[variant='ghost-inverse'] {
+    &.o-iconBtn--ghost-inverse {
         --btn-bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-inverse);
 
@@ -97,30 +97,30 @@
         cursor: not-allowed;
 
         // For every variant (except ghost variants) set the disabled background color
-        &:not([variant='ghost'], [variant='ghost-secondary'], [variant='ghost-inverse']) {
+        &:not(.o-iconBtn--ghost, .o-iconBtn--ghost-secondary, .o-iconBtn--ghost-inverse) {
             --btn-bg-color: var(--dt-color-disabled-01);
         }
 
         // For outline variants, set the border to the disabled color
-        &[variant='outline'] {
+        &.o-iconBtn--outline {
             border-color: var(--dt-color-disabled-01);
         }
     }
 
-    &[size='xsmall'] {
+    &.o-iconBtn--xsmall {
         --btn-dimension: 32px;
         --icon-size-override: 20px;
     }
 
-    &[size='small'] {
+    &.o-iconBtn--small {
         --btn-dimension: 40px;
     }
 
-    &[size='medium'] {
+    &.o-iconBtn--medium {
         /* Same as default styles */
     }
 
-    &[size='large'] {
+    &.o-iconBtn--large {
         --btn-dimension: 56px;
         --icon-size-override: 28px;
     }

diff --git a/packages/components/pie-icon-button/src/index.ts b/packages/components/pie-icon-button/src/index.ts
@@ -1,6 +1,7 @@
 import {
     LitElement, html, unsafeCSS,
 } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -60,15 +61,19 @@ export class PieIconButton extends LitElement implements IconButtonProps {
             disabled, size, variant, isLoading, aria,
         } = this;
 
+        const classes = {
+            'o-iconBtn': true,
+            [`o-iconBtn--${size}`]: true,
+            [`o-iconBtn--${variant}`]: true,
+            'is-loading': isLoading,
+        };
+
         // The inline SVG is temporary until we have a proper icon integration
         return html`
             <button
-                class="o-iconBtn"
+                class="${classMap(classes)}"
                 data-test-id="pie-icon-button"
-                size="${size || 'medium'}"
-                variant="${variant || 'primary'}"
                 ?disabled="${disabled}"
-                ?isLoading="${isLoading}"
                 aria-label="${ifDefined(aria?.label)}"
                 aria-labelledby="${ifDefined(aria?.labelledby)}"
                 aria-describedby="${ifDefined(aria?.describedby)}"