feat(pie-button): DSW-000 Changing styles to use classmap

.changeset/modern-melons-draw.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-button": minor
+---
+
+[Changed] - Styles now use classmap
+[Fixed] - Fixed background colour when button is in `xsmall` or `small` size and responsive mode is true, where the bg-color wasn't updating to orange as required

packages/components/pie-button/src/button.scss

@@ -1,14 +1,13 @@
 @use '@justeattakeaway/pie-css/scss' as p;
-
-$breakpoint-wide: 768px;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 /**
 * Mixin for adding the responsive behaviour.
 * Takes in the the particular settings for the wide breakpoint.
 */
 @mixin responsive-wide {
-    &[isResponsive] {
-        @media (min-width: $breakpoint-wide) {
+    &.o-btn--responsive {
+        @include media('>md') {
             @content;
         }
     }
@@ -94,12 +93,14 @@ $breakpoint-wide: 768px;
     // used to specify whether the button should be full width or not
     inline-size: var(--btn-inline-size);
 
-    // Variant
-    &[variant='primary'] {
+    // ************************
+    // Button Variant Modifiers
+    // ************************
+    &.o-btn--primary {
         @include p.button-interactive-states('--dt-color-interactive-brand');
 
-        &[size='xsmall'],
-        &[size='small-productive'] {
+        &.o-btn--xsmall,
+        &.o-btn--small-productive {
             /**
             * Where the font-size is smaller,
             * update the button backgrounds so that the text is accessible
@@ -108,16 +109,27 @@ $breakpoint-wide: 768px;
 
             @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }
+
+        // This is to handle the background colour change getting overridden above, but then being put in responsive mode
+        // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
+        &.o-btn--xsmall.o-btn--expressive,
+        &.o-btn--small-productive {
+            @include responsive-wide {
+                --btn-bg-color: var(--dt-color-interactive-brand);
+
+                @include p.button-interactive-states('--dt-color-interactive-brand');
+            }
+        }
     }
 
-    &[variant='secondary'] {
+    &.o-btn--secondary {
         --btn-bg-color: var(--dt-color-interactive-secondary);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
     }
 
-    &[variant='outline'] {
+    &.o-btn--outline {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
@@ -128,7 +140,7 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='ghost'] {
+    &.o-btn--ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
@@ -137,15 +149,15 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='inverse'] {
+    &.o-btn--inverse {
         --btn-bg-color: var(--dt-color-interactive-inverse);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
     }
 
-    &[variant='ghost-inverse'],
-    &[variant='outline-inverse'] {
+    &.o-btn--ghost-inverse,
+    &.o-btn--outline-inverse {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
@@ -154,17 +166,17 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-container-default', 'transparent');
     }
 
-    &[variant='outline-inverse']:not([disabled]) {
+    &.o-btn--outline-inverse:not([disabled]) {
         border: 1px solid var(--dt-color-border-strong);
     }
 
-    &[variant='destructive'] {
+    &.o-btn--destructive {
         --btn-bg-color: var(--dt-color-support-error);
 
         @include p.button-interactive-states('--dt-color-support-error');
     }
 
-    &[variant='destructive-ghost'] {
+    &.o-btn--destructive-ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-error);
 
@@ -173,65 +185,80 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    // Additional modifiers
-    &[isFullWidth] {
-        --btn-inline-size: 100%;
-    }
-
-    &[disabled] {
-        --btn-text-color: var(--dt-color-content-disabled) !important;
-
-        cursor: not-allowed;
-
-        // For every variant (except ghost variants) set the disabled background color
-        &:not([variant='ghost'], [variant='ghost-inverse'], [variant='destructive-ghost']) {
-            --btn-bg-color: var(--dt-color-disabled-01) !important;
-        }
-
-        // For outline variants, set the border to the disabled color
-        &[variant='outline'] {
-            border-color: var(--dt-color-disabled-01) !important;
-        }
-    }
-
-    &[size='xsmall'] {
+    // *********************
+    // Button Size Modifiers
+    // *********************
+    &.o-btn--xsmall {
         @include button-size(xsmall);
+
         @include responsive-wide {
             // productive is the default size when responsive is enabled
             @include button-size(small-productive);
 
-            &[responsiveSize='expressive'] {
+            &.o-btn--expressive {
                 @include button-size(small-expressive);
             }
         }
     }
 
-    &[size='small-expressive'] {
+    &.o-btn--small-expressive {
         @include button-size(small-expressive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='small-productive'] {
+    &.o-btn--small-productive {
         @include button-size(small-productive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='medium'] {
+    &.o-btn--medium {
         @include button-size(medium);
+
         @include responsive-wide {
             @include button-size(large);
         }
     }
 
-    &[size='large'] {
+    &.o-btn--large {
         @include button-size(large);
     }
 
-    &[isLoading] {
+    // ******************************
+    // Additional component modifiers
+    // ******************************
+    &.o-btn--fullWidth {
+        --btn-inline-size: 100%;
+    }
+
+    // **************
+    // Disabled state
+    // **************
+    &[disabled] {
+        --btn-text-color: var(--dt-color-content-disabled) !important;
+
+        cursor: not-allowed;
+
+        // For every variant (except ghost variants) set the disabled background color
+        &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
+            --btn-bg-color: var(--dt-color-disabled-01) !important;
+        }
+
+        // For outline variants, set the border to the disabled color
+        &.o-btn--outline {
+            border-color: var(--dt-color-disabled-01) !important;
+        }
+    }
+
+    // *************
+    // Loading state
+    // *************
+    &.is-loading {
         & > *:not(pie-spinner) {
             visibility: hidden;
         }
@@ -241,6 +268,9 @@ $breakpoint-wide: 768px;
         }
     }
 
+    // ************
+    // Focus styles
+    // ************
     &:focus-visible {
         @include p.focus;
     }

packages/components/pie-button/src/index.ts

@@ -1,8 +1,8 @@
 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } 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, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
     ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
@@ -226,18 +226,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
             responsiveSize,
         } = this;
 
+        const classes = {
+            'o-btn': true,
+            'o-btn--fullWidth': isFullWidth,
+            'o-btn--responsive': isResponsive,
+            [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
+            [`o-btn--${variant}`]: true,
+            [`o-btn--${size}`]: true,
+            'is-loading': isLoading,
+        };
+
         return html`
             <button
                 @click=${this._handleClick}
-                class="o-btn"
+                class=${classMap(classes)}
                 type=${type || 'submit'}
-                variant=${variant || 'primary'}
-                size=${size || 'medium'}
-                responsiveSize=${ifDefined(responsiveSize)}
-                ?disabled=${disabled}
-                ?isFullWidth=${isFullWidth}
-                ?isResponsive=${isResponsive}
-                ?isLoading=${isLoading}>
+                ?disabled=${disabled}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>

packages/components/pie-button/test/component/pie-button.spec.ts

@@ -555,7 +555,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass(/o-btn--responsive/);
             });
         });
         test.describe('when set to true', () => {
@@ -577,7 +577,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .toHaveClass(/o-btn--responsive/);
             });
 
             sizes.forEach(({ sizeName, responsiveSize }) => {
@@ -617,7 +617,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('responsiveSize', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass([/o-btn--productive/, /o-btn--expressive/]);
             });
         });
 
@@ -642,7 +642,7 @@ test.describe('props', () => {
                     );
 
                     await expect(component.locator('button'))
-                        .toHaveAttribute('responsiveSize', 'expressive');
+                        .toHaveClass([/o-btn--expressive/]);
                 });
             });
         });
@@ -667,7 +667,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('responsiveSize', 'productive');
+                    .toHaveClass(/o-btn--productive/);
             });
         });
     });

packages/tools/pie-css/scss/mixins/_buttonInteractiveStates.scss

@@ -28,7 +28,7 @@
     }
 
     &:active:not(:disabled),
-    &[isLoading]:not(:disabled) {
+    &.is-loading:not(:disabled) {
         @if $mode == 'alt' {
             --active-modifier: calc(-1 * var(--dt-color-active-02));
         } @else if $mode == 'inverse' {

packages/tools/pie-css/test/scss/unit/mixins/buttonInteractiveStates.spec.ts

@@ -24,7 +24,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-01));
           --btn-bg-color: hsl(var(primary-h), var(primary-s), calc(var(primary-l) + var(--active-modifier)));
         }
@@ -54,7 +54,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-02));
           --btn-bg-color: hsl(var(primary-h), var(primary-s), calc(var(primary-l) + var(--active-modifier)));
         }
@@ -85,7 +85,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-01));
           --active-modifier: var(--dt-color-active-01);
           --btn-bg-color: hsl(var(primary-h), var(primary-s), var(primary-l), var(--active-modifier));