From 8d6ac228deaeae12d5b7f6b3169ac4b10cee10c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Thu, 6 Jun 2024 07:24:00 +0200 Subject: [PATCH] fixup! Re-implement `Modal` component using HTMLDialogElement (#461) --- src/components/Modal/Modal.module.scss | 3 +- src/components/Modal/README.md | 44 ++++++++++--------- src/components/Modal/__tests__/Modal.test.jsx | 2 +- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index 7f0d9598..e1763223 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -1,5 +1,5 @@ // 1. Modal uses 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. @@ -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; diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index d4be9543..30b1b2f1 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -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 diff --git a/src/components/Modal/__tests__/Modal.test.jsx b/src/components/Modal/__tests__/Modal.test.jsx index a1e74a4f..1a2cf233 100644 --- a/src/components/Modal/__tests__/Modal.test.jsx +++ b/src/components/Modal/__tests__/Modal.test.jsx @@ -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', () => {