Use crazy long button labels to demonstrate vertical stacking

Amsterdam · May 17, 2024 · 722b8a9 · 722b8a9
1 parent b17dc67
commit 722b8a9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx
@@ -33,6 +33,6 @@ const closeDialog = (e: MouseEvent<HTMLButtonElement>) => e.currentTarget.closes
 ## Vertically Stacked Buttons
 
 If the buttons don’t fit next to each other, they will stack vertically and stretch to the full width.
-View this example in a narrow window, enlarge your browser’s text size, or [use the ‘Phone’ size of the preview](?path=/story/components-containers-dialog--vertical-buttons&globals=viewport:phone).
+This can occur with a narrow Dialog, long Button labels, a large text size or zooming in.
 
 <Canvas of={DialogStories.VerticalButtons} />
diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
@@ -132,9 +132,9 @@ export const VerticalButtons: Story = {
   args: {
     actions: (
       <>
-        <Button type="submit">Ja, ik wil doorgaan</Button>
+        <Button type="submit">Lange teksten op deze knoppen</Button>
         <Button onClick={closeDialog} variant="tertiary">
-          Nee, toch maar terug
+          Om verticaal stapelen te demonstreren
         </Button>
       </>
     ),
@@ -152,6 +152,5 @@ export const VerticalButtons: Story = {
     docs: {
       story: { height: '32em' },
     },
-    viewport: { defaultViewport: 'phone' },
   },
 }