Skip to content

Commit

Permalink
fixup! Re-implement Modal component using HTMLDialogElement (#461)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bedrich-schindler
bedrich-schindler committed Jun 6, 2024
1 parent 77224ee commit 8d6ac22
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 23 deletions.
3 changes: 2 additions & 1 deletion src/components/Modal/Modal.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// 1. Modal uses <dialog> element that uses the browser's built-in dialog functionality, so that:
// * visibility of thw .root element and its backdrop is managed by the browser
// * visibility of the .root element and its backdrop is managed by the browser
// * positioning of the .root element and its backdrop is managed by the browser
// * z-index of the .root element and its backdrop is not needed as dialog is rendered in browser's Top layer
// 2. When dialogs are stacked, only the topmost dialog should have a backdrop.
Expand All @@ -26,6 +26,7 @@
padding: 0;
overflow-y: auto;
overscroll-behavior: contain;
border-width: 0;
border-radius: settings.$border-radius;
background: theme.$background;
box-shadow: theme.$box-shadow;
Expand Down
44 changes: 23 additions & 21 deletions src/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1065,27 +1065,29 @@ accessibility.

## Theming

| Custom Property | Description |
|------------------------------------------------------|---------------------------------------------------------------|
| `--rui-Modal__padding-x` | Inline padding of individual modal components |
| `--rui-Modal__padding-y` | Block padding of individual modal components |
| `--rui-Modal__background` | Modal background (including `url()` or gradient) |
| `--rui-Modal__box-shadow` | Modal box shadow |
| `--rui-Modal__separator__width` | Width of separator between modal header, body, and footer |
| `--rui-Modal__separator__color` | Color of separator between modal header, body, and footer |
| `--rui-Modal__outer-spacing-xs` | Spacing around modal, `xs` screen size |
| `--rui-Modal__outer-spacing-sm` | Spacing around modal, `sm` screen size and bigger |
| `--rui-Modal__header__gap` | Modal header gap between children |
| `--rui-Modal__footer__background` | Modal footer background (including `url()` or gradient) |
| `--rui-Modal__footer__gap` | Modal footer gap between children |
| `--rui-Modal__backdrop__background` | Modal backdrop background (including `url()` or gradient) |
| `--rui-Modal--auto__min-width` | Min width of auto-sized modal (when enough screen estate) |
| `--rui-Modal--auto__max-width` | Max width of auto-sized modal (when enough screen estate) |
| `--rui-Modal--small__width` | Width of small modal |
| `--rui-Modal--medium__width` | Width of medium modal |
| `--rui-Modal--large__width` | Width of large modal |
| `--rui-Modal--fullscreen__width` | Width of fullscreen modal |
| `--rui-Modal--fullscreen__height` | Height of fullscreen modal |
| Custom Property | Description |
|------------------------------------------------------|-------------------------------------------------------------|
| `--rui-Modal__padding-x` | Inline padding of individual modal components |
| `--rui-Modal__padding-y` | Block padding of individual modal components |
| `--rui-Modal__background` | Modal background (including `url()` or gradient) |
| `--rui-Modal__box-shadow` | Modal box shadow |
| `--rui-Modal__separator__width` | Width of separator between modal header, body, and footer |
| `--rui-Modal__separator__color` | Color of separator between modal header, body, and footer |
| `--rui-Modal__outer-spacing-xs` | Spacing around modal, `xs` screen size |
| `--rui-Modal__outer-spacing-sm` | Spacing around modal, `sm` screen size and bigger |
| `--rui-Modal__header__gap` | Modal header gap between children |
| `--rui-Modal__footer__background` | Modal footer background (including `url()` or gradient) |
| `--rui-Modal__footer__gap` | Modal footer gap between children |
| `--rui-Modal__backdrop__background` | Modal backdrop background (including `url()` or gradient) |
| `--rui-Modal--auto__min-width` | Min width of auto-sized modal (when enough screen estate) |
| `--rui-Modal--auto__max-width` | Max width of auto-sized modal (when enough screen estate) |
| `--rui-Modal--small__width` | Width of small modal |
| `--rui-Modal--medium__width` | Width of medium modal |
| `--rui-Modal--large__width` | Width of large modal |
| `--rui-Modal--fullscreen__width` | Width of fullscreen modal |
| `--rui-Modal--fullscreen__height` | Height of fullscreen modal |
| `--rui-Modal__animation__duration` | Duration of animation used (when opening modal) |


[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/__tests__/Modal.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { ModalContent } from '../ModalContent';
import { ModalFooter } from '../ModalFooter';
import { ModalHeader } from '../ModalHeader';

// Test suites skipped due tu missing implementation of HTMLDialogElement in jsdom
// Test suites skipped due to missing implementation of HTMLDialogElement in jsdom
// See https://github.com/jsdom/jsdom/issues/3294

describe.skip('rendering', () => {
Expand Down

0 comments on commit 8d6ac22

Please sign in to comment.