@react-ui-org/react-ui 0.58.0 → 0.59.1

package/src/components/Modal/Modal.module.scss

@@ -1,9 +1,16 @@
+// 1. Modal uses <dialog> element that uses the browser's built-in dialog functionality, so that:
+//    * 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
+
 @use "sass:map";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
 @use "../../styles/tools/breakpoint";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "../../styles/tools/spacing";
+@use "animations";
 @use "settings";
 @use "theme";
 
@@ -13,18 +20,16 @@
         --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
         --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
 
-        position: fixed;
-        left: 50%;
-        z-index: settings.$z-index;
-        display: flex;
         flex-direction: column;
         max-width: var(--rui-local-max-width);
         max-height: var(--rui-local-max-height);
+        padding: 0;
         overflow-y: auto;
+        color: inherit;
+        border-width: 0;
         border-radius: settings.$border-radius;
         background: theme.$background;
         box-shadow: theme.$box-shadow;
-        transform: translateX(-50%);
         overscroll-behavior: contain;
 
         @include breakpoint.up(sm) {
@@ -32,14 +37,20 @@
         }
     }
 
-    .backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: settings.$backdrop-z-index;
-        width: 100vw;
-        height: 100vh;
+    .root[open] {
+        display: flex;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: fade-in theme.$animation-duration ease-out;
+        }
+    }
+
+    .root[open]::backdrop {
         background: theme.$backdrop-background;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: inherit;
+        }
     }
 
     .isRootSizeSmall {
@@ -64,17 +75,22 @@
     }
 
     .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)});
     }
 
-    .isRootPositionCenter {
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-
     .isRootPositionTop {
         top: var(--rui-local-outer-spacing);
+        bottom: auto;
+    }
+
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Modal",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
     }
 }

package/src/components/Modal/ModalBody.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
 import styles from './ModalBody.module.scss';

package/src/components/Modal/ModalBody.module.scss

@@ -1,6 +1,24 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
+@use "settings";
+
 @layer components.modal {
     .root {
         flex: 1 1 auto;
+        border-inline: settings.$border-width solid var(--rui-local-border-color); // 1.
+
+        &:first-child {
+            border-top: settings.$border-width solid var(--rui-local-border-color); // 1.
+            border-top-left-radius: settings.$border-radius;
+            border-top-right-radius: settings.$border-radius;
+        }
+
+        &:last-child {
+            border-bottom: settings.$border-width solid var(--rui-local-border-color); // 1.
+            border-bottom-right-radius: settings.$border-radius;
+            border-bottom-left-radius: settings.$border-radius;
+        }
     }
 
     .isRootScrollingAuto,

package/src/components/Modal/ModalCloseButton.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { TranslationsContext } from '../../providers/translations';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {

package/src/components/Modal/ModalContent.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ModalContent.module.scss';
 

package/src/components/Modal/ModalFooter.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalFooter.module.scss';
 

package/src/components/Modal/ModalFooter.module.scss

@@ -1,3 +1,6 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
 @use "settings";
 @use "theme";
 
@@ -9,10 +12,11 @@
         gap: theme.$footer-gap;
         align-items: center;
         padding: theme.$padding-y theme.$padding-x;
-        border-top: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color); // 1.
+        border-top: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
         border-bottom-right-radius: settings.$border-radius;
         border-bottom-left-radius: settings.$border-radius;
-        background: theme.$footer-background;
+        background: var(--rui-local-background-color, #{theme.$footer-background});
     }
 
     .isRootJustifiedToStart {

package/src/components/Modal/ModalHeader.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalHeader.module.scss';
 

package/src/components/Modal/ModalHeader.module.scss

@@ -1,3 +1,7 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
+@use "settings";
 @use "theme";
 
 @layer components.modal {
@@ -7,7 +11,10 @@
         gap: theme.$header-gap;
         align-items: baseline;
         padding: theme.$padding-y theme.$padding-x;
-        border-bottom: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color); // 1.
+        border-bottom: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
+        border-top-left-radius: settings.$border-radius;
+        border-top-right-radius: settings.$border-radius;
     }
 
     .isRootJustifiedToStart {

package/src/components/Modal/ModalTitle.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({