Skip to content

Commit

Permalink
feat(dialog): use native <dialog> element
Browse files Browse the repository at this point in the history 
Related to #1865.
  • Loading branch information
@adamjohnson
adamjohnson committed Dec 4, 2024
1 parent 42aeb3c commit de89a75
Show file tree
Hide file tree
Showing 4 changed files with 255 additions and 156 deletions.
2 changes: 1 addition & 1 deletion elements/rh-dialog/demo/rh-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h2 slot="header">Modal dialog with a header</h2>
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<rh-cta>
<rh-cta slot="footer">
<a href="#bar">Learn more</a>
</rh-cta>
</rh-dialog>
Expand Down
18 changes: 17 additions & 1 deletion elements/rh-dialog/docs/40-accessibility.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,25 @@ Only the close button and any interactive elements are selectable.

### Backdrop

A dialog will not close by users clicking or tapping the backdrop or outside of the container.
A dialog will close by users clicking or tapping the backdrop or outside of the container.


## Accessible labels

Each dialog needs an accessible name. If a dialog has a heading tag in the `header` or default slot, this component will automatically apply an appropriate ID to the heading tag and an `aria-labelledby` attribute to the `<dialog>`.

Users can optionally provide an `accessible-label` attribute which overrides the built-in `aria-labelledby` functionality:

```html
<rh-dialog accessible-label="Page Properties" trigger="first-modal-trigger">
...
</rh-dialog>
```

The `accessible-label` attribute assigns an `aria-label` to the `<dialog>` element.

If neither an `accessible-label` nor any headings exist, the `aria-label` on the `<dialog>` will default to the text of the dialog's trigger.


## Additional guidelines

Expand Down
199 changes: 109 additions & 90 deletions elements/rh-dialog/rh-dialog.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
:host {
--rh-dialog-backdrop-background-color: rgba(3, 3, 3, 0.62);
--rh-dialog-overlay-background-color: transparent;

display: block;
position: relative;

--_spacer-align-top: var(--rh-space-md, 8px);
--_height-offset: min(var(--_spacer-align-top), var(--rh-space-3xl, 48px));
}

[hidden] {
display: none !important;
}

section {
display: flex;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
align-items: center;
justify-content: center;
z-index: 500;
}

#container {
position: relative;
max-height: inherit;
.visually-hidden {
block-size: 1px;
border: 0;
clip: rect(0, 0, 0, 0);
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}

/* NOTE: @deprecated, use `::backdrop` instead. Remove for RHDS v3. */
[part='overlay'] {
background-color:
var(--rh-dialog-overlay-background-color,
var(--rh-dialog-backdrop-background-color));
block-size: 100%;
inset-block-start: 0;
inset-inline-start: 0;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(3, 3, 3, 0.62);
inline-size: 100%;
}

::backdrop {
background-color: var(--rh-dialog-backdrop-background-color);
}

[part='dialog'] {
position: relative;
margin: 0 auto;
width: var(--_box-width, calc(100% - var(--rh-space-2xl, 32px)));
max-height: var(--_box-max-height, calc(100% - var(--rh-space-3xl, 48px)));
box-shadow:
0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
padding: var(--rh-space-xl, 24px);
margin-inline: var(--rh-space-lg, 16px);
background-color: var(--rh-color-surface-lightest, #ffffff);
max-width: min(90%, 1140px);
border-radius: var(--rh-border-radius-default, 3px);
border: 0;
box-shadow: var(--rh-box-shadow-xl, 0 8px 24px 3px rgba(21, 21, 21, 0.35));
box-sizing: border-box;
color: var(--rh-color-text-primary-on-light, #151515);
font-family: inherit;
inline-size: 100%;
margin-inline: auto;
max-block-size: var(--_box-max-block-size, calc(100vh - var(--rh-space-3xl, 48px)));
max-inline-size: var(--_box-width, min(90%, 1140px));
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--rh-space-xl, 24px);
padding-block-end: var(--rh-space-2xl, 32px); /* NOTE: don't cut off box-shadow at the bottom */
position: relative;
}

:host([width]) [part='dialog'],
Expand All @@ -73,122 +77,137 @@ section {
--_box-width: 70rem;
}

[part='content'] {
overflow-y: auto;
overscroll-behavior: contain;
max-height: var(--_box-max-height, calc(100vh - var(--rh-space-3xl, 48px)));
box-sizing: border-box;
border-radius: var(--rh-border-radius-default, 3px);
[part='header'] {
background-color: var(--rh-color-surface-lightest, #ffffff);
padding-block-end: var(--rh-space-sm, 6px);
position: sticky;
top: calc(-1 * var(--rh-space-xl, 24px));
}

[part='content'] ::slotted([slot='header']) {
margin-top: 0 !important;
[part='header'][hidden] + [part='body'] {
max-width: calc(100% - var(--rh-space-xl, 24px));
}

header {
position: sticky;
top: 0;
background-color: var(--rh-color-surface-lightest, #ffffff);
@media (min-width: 1200px) {
[part='dialog'] {
padding: var(--rh-space-2xl, 32px);
}

[part='header'] {
top: calc(-1 * var(--rh-space-2xl, 32px));
}

[part='header'][hidden] + [part='body'] {
max-width: calc(100% - var(--rh-space-2xl, 32px));
}
}

[part='content'] ::slotted([slot='header']) {
margin-top: 0 !important;
}

header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot='header']) {
[part='header'] ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot='header']) {
font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-heading-sm, 1.5rem);
font-weight: var(--rh-font-weight-body-text-regular, 400);
font-family: 'Red Hat Display', RedHatDisplay, Overpass, Helvetica, sans-serif;
}

[part='close-button'] {
color: var(--rh-color-icon-subtle, #707070);
background-color: transparent;
border: none;
margin: 0;
padding: 0;
text-align: left;
position: absolute;
cursor: pointer;
line-height: 24px;
padding-block: 0.375rem;
padding-inline: var(--rh-space-lg, 16px);
top: 0;
right: calc(var(--rh-space-xl, 24px) / -3);
display: block;
inset-block-start: var(--rh-length-xs, 4px);
inset-inline-end: var(--rh-length-xs, 4px);
position: absolute;
z-index: 500;
}

[part='close-button'] > svg {
font-size: 16px;
width: var(--rh-space-lg, 16px);
aspect-ratio: 1/1;
[part='close-button']::part(button) {
padding: var(--rh-space-xl, 24px);
}

[part='close-button']:is(:hover, :focus-within, :focus-visible) svg:is(svg, :hover) {
fill: var(--rh-color-icon-secondary-on-light, #151515);
@media (min-width: 1200px) {
[part='close-button']::part(button) {
padding: var(--rh-space-2xl, 32px);
}
}

:host([position='top']) #dialog {
align-self: start;
margin-block: var(--rh-space-2xl, 32px);
margin-inline: var(--rh-space-lg, 16px);
width: 100%;
max-width: calc(100% - min(var(--rh-space-2xl, 32px) * 2, var(--rh-space-2xl, 32px)));
max-height: calc(100% - var(--_height-offset) - var(--_spacer-align-top));
margin-block-start: 0;
max-inline-size: none;
inline-size: 100%;
}

footer {
display: flex;
:host([position='top']) #content {
margin-inline: 0;
max-inline-size: calc(100% - min(var(--rh-space-2xl, 32px) * 2, var(--rh-space-2xl, 32px)));
}

[part='footer'] {
align-items: center;
display: flex;
gap: var(--rh-space-md, 8px);
}

#rhds-wrapper {
display: contents;
font-family: 'Red Hat Text', RedHatText, Overpass, Helvetica, sans-serif;

--offset: var(--rh-space-md, 8px);
--offset-top: var(--offset);
--offset-right: var(--offset);
}

:host([type='video']) {
--rh-dialog-close-button-color: var(--rh-color-icon-secondary-on-dark, #ffffff);
display: contents;
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
}

:host([type='video']) [part='close-button'] {
top: var(--offset-top);
right: var(--offset-right);
padding: var(--rh-space-sm, 6px);
color: var(--rh-color-icon-secondary-on-dark, #ffffff);
inset-inline-end: var(--offset-right);
inset-block-start: var(--offset-top);
}

:host([type='video']) #close-button::part(button) {
padding-inline: var(--rh-space-md, 8px);
padding-block: var(--rh-space-lg, 16px);
}

:host([type='video']) #close-button::part(icon) {
filter: drop-shadow(1px 0 1px var(--rh-dialog-backdrop-background-color));
}

:host([type='video']) [part='content'] {
background-color: var(--rh-color-surface-darkest, #151515);
overflow: hidden;
padding: 0;
}

:host([type='video'][open]) [part='overlay'] {
:host([type='video']) {
--_gray-90-rgb: var(--rh-color-gray-90-rgb, 31 31 31);
--rh-dialog-backdrop-background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-60, 60%));

background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-60, 60%));
background-color:
var(--rh-dialog-overlay-background-color,
var(--rh-dialog-backdrop-background-color));
}

:host([type='video'][open]) [part='dialog'] {
--_aspect-ratio: var(--rh-dialog-video-aspect-ratio, 16/9);

aspect-ratio: var(--_aspect-ratio);
max-width: min(90%, calc(90vh * var(--_aspect-ratio) + var(--offset-top)));
max-inline-size: min(90%, calc(90vh * var(--_aspect-ratio) + var(--offset-top)));
padding: 0;
margin: 0;
}

:host([type='video']) #rhds-wrapper.mobile [part='close-button'] {
--offset-right: var(--rh-space-sm, 6px);
}

:host([type='video']) #container,
:host([type='video']) [part='content'],
:host([type='video']) ::slotted(:not([slot])) {
aspect-ratio: var(--rh-dialog-video-aspect-ratio, 16/9);
max-inline-size: none;
inline-size: 100%;
}

/* account for a 1px descrepency between dialog and container aspect ratio */
width: calc(100% + 1px);
position: absolute;
:host([type='video']) ::slotted(:not([slot])) {
inset: 0;
max-height: none;
position: absolute;
}
Loading

0 comments on commit de89a75

Please sign in to comment.