Merge pull request #245 from PrestaShopCorp/bug/alert-incorrect-respo…

…nsive-behavior

fix: #241 - add min-content for alert container

packages/components/alert/src/alert.ts

@@ -37,6 +37,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonWrapLabel: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   isClosable: {
     type: Boolean,
     required: false,

packages/components/alert/src/alert.vue

@@ -32,6 +32,7 @@
       <PuikButton
         v-if="buttonLabel"
         :variant="variant"
+        :wrap-label="buttonWrapLabel"
         class="puik-alert__button"
         :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"

packages/components/alert/stories/alert.stories.ts

@@ -40,6 +40,14 @@ export default {
     buttonLabel: {
       description: 'Label of the button',
     },
+    buttonWrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
     isClosable: {
       description: 'Display a close button',
     },
@@ -59,6 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    buttonWrapLabel: false,
     isClosable: false,
   },
 } as Meta
@@ -125,6 +134,110 @@ export const Default = {
   },
 }
 
+export const buttonWrapLabel: StoryObj = {
+  render: () => ({
+    components: {
+      PuikAlert,
+    },
+    template: `
+      <div class="flex flex-col space-y-4">
+       <puik-alert title="buttonWrapLabel to true" button-label="Button with a very long label" button-wrap-Label>
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+       <puik-alert title="buttonWrapLabel to false (by default)" button-label="Button with a very long label">
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+      </div>
+    `,
+  }),
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-alert
+    title="buttonWrapLabel to true"
+    button-label="Button with a very long label"
+    button-wrap-Label
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <puik-alert
+    title="buttonWrapLabel to false (by default)"
+    button-label="Button with a very long label"
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <!--HTML/CSS Snippet-->
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">buttonWrapLabel to true</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">buttonWrapLabel to false (by default)</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const Success: StoryObj = {
   render: () => ({
     components: {

packages/components/alert/test/alert.spec.ts

@@ -40,6 +40,11 @@ describe('Alert tests', () => {
     expect(findAlert().classes()).toContain('puik-alert--warning')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ buttonLabel: 'Button', buttonWrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should display a button which emits the click event on click', () => {
     factory({ buttonLabel: 'Button' })
     expect(findButton().exists()).toBeTruthy()

packages/components/button/src/button.ts

@@ -38,6 +38,11 @@ export const buttonProps = buildProps({
     required: false,
     default: false,
   },
+  wrapLabel: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   disabled: {
     type: Boolean,
     required: false,

packages/components/button/src/button.vue

@@ -8,6 +8,7 @@
       `puik-button--${size}`,
       { 'puik-button--disabled': disabled },
       { 'puik-button--fluid': fluid },
+      { 'puik-button--no-wrap': !wrapLabel },
     ]"
     :disabled="disabled"
     :data-test="dataTest"

packages/components/button/stories/button.stories.ts

@@ -44,6 +44,14 @@ export default {
         },
       },
     },
+    wrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
     disabled: {
       description: 'Set the button as disabled',
       table: {
@@ -81,6 +89,7 @@ export default {
     variant: 'primary',
     size: 'md',
     fluid: false,
+    wrapLabel: true,
     disabled: false,
     leftIcon: '',
     rightIcon: '',
@@ -117,6 +126,7 @@ export const Default = {
     :size="$sizes"
     :variant="$variants"
     :fluid="true|false"
+    :wrap-label="true|false"
     :disabled="true|false"
     :left-icon="leftIcon"
     :right-icon="rightIcon"

packages/components/button/test/button.spec.ts

@@ -91,6 +91,11 @@ describe('Button tests', () => {
     expect(findButton().classes()).toContain('puik-button--fluid')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ wrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should be a router-link if to prop is defined', () => {
     factory({ to: '/test' })
     expect(findButton().element.tagName).toBe('ROUTER-LINK')

packages/tailwind-preset/theme.js

@@ -101,6 +101,11 @@ module.exports = {
     screens: {
       xs: '320px',
     },
+    minHeight: {
+      sm: '1.75rem',
+      md: '2.25rem',
+      lg: '3rem',
+    },
     opacity: {
       overlay: '0.8',
     },

packages/theme/src/alert.scss

@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-alert {
-  @apply relative flex flex-row p-4 border text-primary-800 items-start;
+  @apply relative min-w-fit flex flex-row items-start p-4 border text-primary-800;
   &--success {
     @apply bg-green-50 border border-green;
     .puik-alert__icon {
@@ -30,7 +30,7 @@
     @apply border-0;
   }
   &__container {
-    @apply flex flex-col md:flex-row w-full;
+    @apply flex flex-col md:flex-row md:items-start w-full;
   }
   &__content {
     @apply flex flex-row flex-grow;
@@ -46,7 +46,7 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply text-sm whitespace-nowrap px-4 py-3 mt-2 ml-9 md:m-0;
+    @apply mt-2 ml-9 md:m-0;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;

packages/theme/src/button.scss

@@ -6,22 +6,26 @@
 
   &--sm {
     @extend .puik-text-button-small;
-    @apply py-1 px-2 h-7;
+    @apply py-1 px-2 min-h-sm;
   }
 
   &--md {
-    @apply h-9;
+    @apply min-h-md;
   }
 
   &--lg {
     @extend .puik-text-button-large;
-    @apply py-3.5 px-4 gap-3 h-12;
+    @apply py-3.5 px-4 gap-3 min-h-lg;
   }
 
   &--fluid {
     @apply w-full;
   }
 
+  &--no-wrap {
+    @apply whitespace-nowrap;
+  }
+
   &:focus-visible {
     @apply outline-none ring ring-offset-2 ring-blue;
   }