fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Re-implement Modal component using HTMLDialogElement (#461)

Author: bedrich-schindler

src/components/Modal/Modal.module.scss

@@ -38,12 +38,18 @@
 
     .root[open] {
         display: flex;
-        animation: fade-in theme.$animation-duration ease-out;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: fade-in theme.$animation-duration ease-out;
+        }
     }
 
     .root[open]::backdrop {
         background: theme.$backdrop-background;
-        animation: inherit;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: inherit;
+        }
     }
 
     .isRootSizeSmall {
@@ -68,7 +74,6 @@
     }
 
     .isRootSizeAuto {
-        width: auto;
         min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)});
         max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)});
     }

src/components/Modal/README.md

@@ -727,7 +727,7 @@ elements manually, set the `autoFocus` prop on Modal to `false`.
 
 ### Interaction blocking
 
-Modal can be used to block user interaction while some action is being
+Modal can be used to block user interaction while an action is being
 performed.
 
 ```docoff-react-preview
@@ -798,10 +798,10 @@ React.createElement(() => {
 Modal can be used to display forms. It is recommended to use
 [FormLayout](/components/FormLayout) component to layout form fields.
 
-While we support only controlled components, and we encourage you to use them,
-it is possible to use native form and its functionality inside the modal.
-This might be useful when you need to use native form features like validation,
-submission, etc.
+While we support only [controlled components][controlled-components],
+and we encourage you to use them, it is possible to use native form and its
+functionality inside the modal. This might be useful when you need to use
+native form features like validation, submission, etc.
 
 To do so, you need to set `allowPrimaryActionOnEnterKey` to `false` and remove
 `onClick` from the primary button. Then, you need to set `form` attribute on the
@@ -1208,6 +1208,7 @@ accessibility.
 | `--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
+[controlled-components]: /docs/getting-started/usage#foundation-css
 [dialog-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#attributes
 [div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [heading-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes