fix: Resolve malformed outline and remove excessive whitespace on dia…

…log (#937)
Amsterdam · Dec 18, 2023 · 1fc264a · 1fc264a
1 parent 1582a19
commit 1fc264a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
@@ -68,7 +68,6 @@
   display: flex;
   flex-direction: column;
   grid-gap: var(--amsterdam-dialog-footer-gap);
-  padding-block: var(--amsterdam-dialog-footer-padding-block);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     flex-direction: row;

diff --git a/packages/css/src/components/visually-hidden/visually-hidden.scss b/packages/css/src/components/visually-hidden/visually-hidden.scss
@@ -3,15 +3,13 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-.amsterdam-visually-hidden {
-  clip: rect(1px, 1px, 1px, 1px);
+// Source: https://css-tricks.com/inclusively-hidden/
+.amsterdam-visually-hidden:not(:active, :focus) {
+  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
-  margin-block: -1px;
-  margin-inline: -1px;
   overflow: hidden;
-  padding-block: 0;
-  padding-inline: 0;
   position: absolute;
+  white-space: nowrap;
   width: 1px;
 }
diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx
@@ -10,10 +10,14 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw
 
 <Controls />
 
-## Scroll Content
+## With Scrollbar
 
-<Canvas of={DialogStories.ScrollContent} className="amsterdam-dialog-story" />
+Content that is taller than the dialog itself will scroll.
+
+<Canvas of={DialogStories.WithScrollbar} className="amsterdam-dialog-story" />
 
 ## Open Dialog Button
 
-<Canvas of={DialogStories.ShowDialog} />
+Click or tap the button to open a dialog.
+
+<Canvas of={DialogStories.TriggerButton} />
diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx
@@ -10,12 +10,11 @@ const meta = {
   title: 'Containers/Dialog',
   component: Dialog,
   args: {
-    title: 'Later verder gaan',
+    title: 'Weet u het zeker?',
     children: (
       <Paragraph>
-        U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan
-        met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan
-        met het formulier.
+        Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Alle niet-opgeslagen data zal worden
+        verwijderd.
       </Paragraph>
     ),
     actions: (
@@ -27,6 +26,18 @@ const meta = {
       </>
     ),
   },
+  argTypes: {
+    actions: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   parameters: {
     backgrounds: {
       default: 'dark',
@@ -43,13 +54,13 @@ export const Default: Story = {
     open: true,
   },
   render: (args) => (
-    <div style={{ minHeight: '500px' }}>
+    <div style={{ minHeight: '32rem' }}>
       <Dialog {...args} />
     </div>
   ),
 }
 
-export const ScrollContent: Story = {
+export const WithScrollbar: Story = {
   args: {
     open: true,
     title: 'Privacyverklaring gemeente Amsterdam',
@@ -91,9 +102,9 @@ export const ScrollContent: Story = {
   ),
 }
 
-export const ShowDialog: Story = {
+export const TriggerButton: Story = {
   args: {
-    id: 'showdialog',
+    id: 'openDialog',
     actions: (
       <>
         <Button variant="tertiary" autoFocus onClick={(event) => event.currentTarget.closest('dialog')?.close()}>
@@ -106,7 +117,7 @@ export const ShowDialog: Story = {
   decorators: [
     (Story) => (
       <article>
-        <Button onClick={() => (document.querySelector('#showdialog') as HTMLDialogElement)?.showModal()}>
+        <Button onClick={() => (document.querySelector('#openDialog') as HTMLDialogElement)?.showModal()}>
           Open Dialog
         </Button>
         <Story />