Merge pull request #66 from prezly/feature/dev-11397-long-text-with-b…

…utton-causes-the-button-overflow-outside-the-container [DEV-11397] Long text with button causes the button overflow outside the story container in themes
prezly · Aug 17, 2023 · f15bfcb · f15bfcb
2 parents 1a1faa1 + 166658e
commit f15bfcb
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 0 deletions.
diff --git a/...erence/chrome_iphone7_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png b/...erence/chrome_iphone7_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png
diff --git a/...eference/chrome_iphone7_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png b/...eference/chrome_iphone7_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png
diff --git a/...ference/chrome_iphone7_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png b/...ference/chrome_iphone7_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png
diff --git a/...eference/chrome_iphone7_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png b/...eference/chrome_iphone7_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png
diff --git a/...ference/chrome_laptop_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png b/...ference/chrome_laptop_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png
diff --git a/...reference/chrome_laptop_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png b/...reference/chrome_laptop_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png
diff --git a/...eference/chrome_laptop_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png b/...eference/chrome_laptop_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png
diff --git a/...reference/chrome_laptop_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png b/...reference/chrome_laptop_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png
diff --git a/...ference/chrome_narrow_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png b/...ference/chrome_narrow_Elements_ButtonBlock_With_Center_Layout_But_Long_Text.png
diff --git a/...reference/chrome_narrow_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png b/...reference/chrome_narrow_Elements_ButtonBlock_With_Left_Layout_But_Long_Text.png
diff --git a/...eference/chrome_narrow_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png b/...eference/chrome_narrow_Elements_ButtonBlock_With_Right_Layout_But_Long_Text.png
diff --git a/...reference/chrome_narrow_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png b/...reference/chrome_narrow_Elements_ButtonBlock_With_Wide_Layout_But_Long_Text.png
diff --git a/src/elements/ButtonBlock/ButtonBlock.slate.stories.tsx b/src/elements/ButtonBlock/ButtonBlock.slate.stories.tsx
@@ -123,3 +123,67 @@ export const WithoutHref: Story = () => (
         ]}
     />
 );
+
+export const WithCenterLayoutButLongText: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'button-block',
+                href: 'https://prezly.com',
+                new_tab: true,
+                layout: ButtonBlockNode.Layout.CENTER,
+                uuid: TEST_UUID,
+                label: 'Some long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long text',
+                variant: ButtonBlockNode.Variant.DEFAULT,
+            },
+        ]}
+    />
+);
+
+export const WithWideLayoutButLongText: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'button-block',
+                href: 'https://prezly.com',
+                new_tab: true,
+                layout: ButtonBlockNode.Layout.WIDE,
+                uuid: TEST_UUID,
+                label: 'Some long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long text',
+                variant: ButtonBlockNode.Variant.DEFAULT,
+            },
+        ]}
+    />
+);
+
+export const WithRightLayoutButLongText: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'button-block',
+                href: 'https://prezly.com',
+                new_tab: true,
+                layout: ButtonBlockNode.Layout.RIGHT,
+                uuid: TEST_UUID,
+                label: 'Some long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long text',
+                variant: ButtonBlockNode.Variant.DEFAULT,
+            },
+        ]}
+    />
+);
+
+export const WithLeftLayoutButLongText: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'button-block',
+                href: 'https://prezly.com',
+                new_tab: true,
+                layout: ButtonBlockNode.Layout.LEFT,
+                uuid: TEST_UUID,
+                label: 'Some long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long textSome long text',
+                variant: ButtonBlockNode.Variant.DEFAULT,
+            },
+        ]}
+    />
+);
diff --git a/src/elements/ButtonBlock/ButtonBlockNode.scss b/src/elements/ButtonBlock/ButtonBlockNode.scss
@@ -16,6 +16,7 @@ $white: #fff;
     font-size: $font-size-m;
     line-height: $line-height;
     font-weight: 600;
+    max-width: 100%;
 
     &--outlined {
         background-color: $white;
@@ -25,17 +26,21 @@ $white: #fff;
 
     &--wide {
         width: auto;
+        text-align: justify;
     }
 
     &--left {
         margin-right: auto;
+        text-align: left;
     }
 
     &--right {
         margin-left: auto;
+        text-align: right;
     }
 
     &--center {
         margin: $block-spacing-vertical auto;
+        text-align: center;
     }
 }