fix(pie-button): DSW-3684 apply width 100% to host when isFullWidth is set

Author: raoufswe

.changeset/empty-pots-collect.md

@@ -0,0 +1,8 @@
+---
+"@justeattakeaway/pie-button": patch
+"@justeattakeaway/pie-cookie-banner": patch
+"@justeattakeaway/pie-modal": patch
+"@justeattakeaway/pie-notification": patch
+---
+
+[Fixed] - Applied `width: 100%` to the `pie-button` host element when `isFullWidth` is set, ensuring buttons span full width in flex, grid, and block layouts. Updated `pie-cookie-banner`, `pie-modal`, and `pie-notification` to reset button width on desktop.

apps/pie-storybook/stories/pie-modal.stories.ts

@@ -58,6 +58,7 @@ const modalStoryMeta: ModalStoryMeta = {
             control: 'boolean',
         },
         hasStackedActions: {
+            description: 'When true, the actions will expand to full width and stack vertically. Only available below the mid breakpoint.',
             control: 'boolean',
         },
         isHeadingEmphasised: {

apps/pie-storybook/stories/testing/pie-button.test.stories.ts

@@ -7,6 +7,7 @@ import {
     type ButtonProps as ButtonPropsBase, defaultProps, iconPlacements, responsiveSizes, sizes, types, variants,
 } from '@justeattakeaway/pie-webc/components/button';
 import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js';
+import '@justeattakeaway/pie-css/dist/helpers/typography.css';
 
 import {
     createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML,
@@ -496,3 +497,55 @@ export const DestructiveGhostVariations = createVariantStory<ButtonProps>(Templa
     ...sharedPropMatrix,
     variant: ['destructive-ghost'],
 }, { multiColumn: true });
+
+const IsFullWidthLayoutTemplate: TemplateFunction<ButtonProps> = () => html`
+    <style>
+        .layout-container {
+            margin-block-end: var(--dt-spacing-d);
+            padding: var(--dt-spacing-b);
+            border: 1px solid var(--dt-color-border-default);
+        }
+        .layout-label {
+            margin-block-end: var(--dt-spacing-b);
+        }
+        .flex-container {
+            display: flex;
+        }
+        .grid-container {
+            display: grid;
+        }
+        .block-container {
+            display: block;
+        }
+    </style>
+
+    <div class="layout-container">
+        <p class="layout-label u-font-body-strong-l">Flex container (display: flex)</p>
+        <div class="flex-container">
+            <pie-button isFullWidth data-test-id="pie-button-flex">Full Width in Flex</pie-button>
+        </div>
+    </div>
+
+    <div class="layout-container">
+        <p class="layout-label u-font-body-strong-l">Grid container (display: grid)</p>
+        <div class="grid-container">
+            <pie-button isFullWidth data-test-id="pie-button-grid">Full Width in Grid</pie-button>
+        </div>
+    </div>
+
+    <div class="layout-container">
+        <p class="layout-label u-font-body-strong-l">Block container (display: block)</p>
+        <div class="block-container">
+            <pie-button isFullWidth data-test-id="pie-button-block">Full Width in Block</pie-button>
+        </div>
+    </div>
+
+    <div class="layout-container">
+        <p class="layout-label u-font-body-strong-l">Flex container without isFullWidth (for comparison)</p>
+        <div class="flex-container">
+            <pie-button data-test-id="pie-button-flex-no-fullwidth">Without Full Width in Flex</pie-button>
+        </div>
+    </div>
+`;
+
+export const IsFullWidthLayoutVariations = createStory<ButtonProps>(IsFullWidthLayoutTemplate, defaultArgs)();

apps/pie-storybook/stories/testing/pie-modal.test.stories.ts

@@ -52,6 +52,7 @@ const modalStoryMeta: ModalStoryMeta = {
             control: 'boolean',
         },
         hasStackedActions: {
+            description: 'When true, the actions will expand to full width and stack vertically. Only available below the mid breakpoint.',
             control: 'boolean',
         },
         isHeadingEmphasised: {

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

@@ -10,6 +10,7 @@ $prefix: 'o-btn';
 
 :host([isfullwidth]) {
     display: block;
+    width: 100%;
 }
 
 // Base button styles

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

@@ -16,3 +16,14 @@ variants.forEach((variant) => {
         await percySnapshot(page, `PIE Button - Variant: ${variant}`, { widths: [1280] });
     });
 });
+
+test('should render isFullWidth correctly in different layout contexts', async ({ page }) => {
+    // Arrange
+    const buttonPage = new BasePage(page, 'button--is-full-width-layout-variations');
+    const buttonComponent = new ButtonComponent(page);
+    await buttonPage.load();
+
+    // Assert
+    await expect.soft(buttonComponent.componentLocator.first()).toBeVisible();
+    await percySnapshot(page, 'PIE Button - isFullWidth in different layouts', { widths: [1280] });
+});

packages/components/pie-cookie-banner/src/cookie-banner.scss

@@ -125,6 +125,10 @@ $breakpoint-wide: 700px;
 
         justify-content: flex-start;
         align-items: center;
+
+        > pie-button {
+            width: auto;
+        }
     }
 }
 

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

@@ -257,6 +257,12 @@
             @include media('<md') {
                 flex-direction: column;
             }
+
+            @include media('>=md') {
+                > pie-button {
+                    width: auto;
+                }
+            }
         }
     }
 

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

@@ -119,10 +119,16 @@
             margin-inline-start: auto;
         }
 
-        @include media('<md') {
-            &.c-notification-footer--stacked {
+        &.c-notification-footer--stacked {
+            @include media('<md') {
                 flex-direction: column-reverse;
             }
+
+            @include media('>=md') {
+                > pie-button {
+                    width: auto;
+                }
+            }
         }
     }
 }