feat: [button/alert] - wrap button label set tofalse by default

PrestaShopCorp · Nov 28, 2023 · 912ad53 · 912ad53
1 parent de8a269
commit 912ad53
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
@@ -40,7 +40,7 @@ export const alertProps = buildProps({
   buttonWrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   isClosable: {
     type: Boolean,

diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
@@ -44,7 +44,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },
@@ -67,7 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
-    buttonWrapLabel: true,
+    buttonWrapLabel: false,
     isClosable: false,
   },
 } as Meta
@@ -134,14 +134,25 @@ export const Default = {
   },
 }
 
-export const buttonWrapLabelToFalse: StoryObj = {
+export const buttonWrapLabel: StoryObj = {
   render: () => ({
     components: {
       PuikAlert,
     },
     template: `
       <div class="flex flex-col space-y-4">
-       <puik-alert title="Title" button-label="Button with a very long label" :button-wrap-Label="false">
+       <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.
@@ -162,9 +173,25 @@ export const buttonWrapLabelToFalse: StoryObj = {
         code: `
   <!--VueJS Snippet-->
   <puik-alert
-    title="Title"
-    button-label="No wrap button with a very long label"
-    :button-wrap-Label="false"
+    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.
@@ -183,7 +210,20 @@ export const buttonWrapLabelToFalse: StoryObj = {
   <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">Title</p>
+          <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-button--no-wrap 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>

diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
@@ -41,7 +41,7 @@ export const buttonProps = buildProps({
   wrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   disabled: {
     type: Boolean,

diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
@@ -48,7 +48,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },