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

feat!: Improve sizing behaviour of Dialog #1329

Merged
merged 9 commits into from
Jul 12, 2024
Merged

feat!: Improve sizing behaviour of Dialog #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
27e3fcd
Extract reset mixin
VincentSmedinga Jul 5, 2024
36ead97
Use grid space as margin to limit width and height
VincentSmedinga Jul 5, 2024
0cd48d0
Constrain form to dialog’s dimensions
VincentSmedinga Jul 5, 2024
a47cf11
Merge branch 'develop' into feature/DES-785-dialog-margin
VincentSmedinga Jul 10, 2024
f1d5ef4
Set display mode on open dialogs only
VincentSmedinga Jul 11, 2024
8acfdc1
Use percentages rather than viewport lengths
VincentSmedinga Jul 12, 2024
35045ad
Disallow bidirectional inset shorthand like we do for margin and padding
VincentSmedinga Jul 12, 2024
d6db0de
Remove browsers’ default styles
VincentSmedinga Jul 12, 2024
4054c47
Remove unnecesary flex container
VincentSmedinga Jul 12, 2024
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: 1 addition & 0 deletions .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
[
"contain-intrinsic-height",
"contain-intrinsic-width",
"inset",
"margin",
"padding",
"scroll-margin-bottom",
Expand Down
3 changes: 2 additions & 1 deletion packages/css/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
a::after {
content: "";
display: block;
inset: 0;
inset-block: 0;
inset-inline: 0;
position: absolute;
}
}
Expand Down
20 changes: 11 additions & 9 deletions packages/css/src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
* Copyright Gemeente Amsterdam
*/

@mixin reset-dialog {
inset-block: 0;
padding-block: 0;
padding-inline: 0;
}

.ams-dialog {
background-color: var(--ams-dialog-background-color);
border: var(--ams-dialog-border);
inset: 0;
inline-size: var(--ams-dialog-inline-size);
max-block-size: var(--ams-dialog-max-block-size);
max-inline-size: var(--ams-dialog-max-inline-size);
padding-block: 0;
padding-inline: 0;
position: fixed;

@include reset-dialog;

/* no token because dialog does not inherit from any element */
&::backdrop {
Expand All @@ -21,18 +27,14 @@
.ams-dialog__form {
display: grid;
gap: var(--ams-dialog-form-gap);
grid-template-rows: auto 1fr auto;
max-block-size: var(--ams-dialog-form-max-block-size);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This broke the scrolling inside the Dialog (while keeping the action buttons in view).


// TODO Decide on these widths
padding-block: var(--ams-dialog-form-padding-block);
padding-inline: var(--ams-dialog-form-padding-inline);
}

.ams-dialog__article {
display: grid;
gap: var(--ams-space-md); /* Until we have a consistent way of spacing text elements */
max-block-size: 100%; /* safari */
max-block-size: 100%; /* Safari */
overflow-y: auto;
overscroll-behavior-y: contain;
}
Expand Down
7 changes: 4 additions & 3 deletions proprietary/tokens/src/components/ams/dialog.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
"dialog": {
"background-color": { "value": "{ams.color.primary-white}" },
"border": { "value": "0" },
"max-inline-size": { "value": "min(87.69vw, 45rem)" },
"inline-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" },
"max-block-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" },
"max-inline-size": { "value": "48rem" },
"form": {
"gap": { "value": "{ams.space.md}" },
"padding-block": { "value": "{ams.space.grid.md}" },
"padding-inline": { "value": "{ams.space.grid.lg}" },
"max-block-size": { "value": "75vh" }
"padding-inline": { "value": "{ams.space.grid.lg}" }
},
"header": {
"gap": { "value": "{ams.space.md}" }
Expand Down