Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Resolve malformed outline and remove excessive whitespace on dialog #937

Merged
merged 5 commits into from
Dec 18, 2023
Merged

fix: Resolve malformed outline and remove excessive whitespace on dialog #937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3b9166e
Remove excessive padding from dialog footer
VincentSmedinga Dec 13, 2023
dbf190c
Prevent a malformed focus outline in Safari
VincentSmedinga Dec 14, 2023
6b9b7c5
Iterate on dialog docs
VincentSmedinga Dec 13, 2023
52a2a9a
Update ‘visually hidden’ styles to prevent a malformed focus outline …
VincentSmedinga Dec 18, 2023
8e735ef
Merge branch 'develop' into fix/dialog-visual-design
VincentSmedinga Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/css/src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 4 additions & 6 deletions packages/css/src/components/visually-hidden/visually-hidden.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
10 changes: 7 additions & 3 deletions storybook/storybook-react/src/Dialog/Dialog.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
29 changes: 20 additions & 9 deletions storybook/storybook-react/src/Dialog/Dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand All @@ -27,6 +26,18 @@ const meta = {
</>
),
},
argTypes: {
actions: {
table: {
disable: true,
},
},
children: {
table: {
disable: true,
},
},
},
parameters: {
backgrounds: {
default: 'dark',
Expand All @@ -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',
Expand Down Expand Up @@ -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()}>
Expand All @@ -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 />
Expand Down