@react-ui-org/react-ui 0.54.0 → 0.55.0

package/src/components/Modal/ModalFooter.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalFooter.scss';
+import styles from './ModalFooter.module.scss';
 
 export const ModalFooter = ({
   children,

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

@@ -0,0 +1,37 @@
+@use "settings";
+@use "theme";
+
+@layer components.modal {
+    .root {
+        display: flex;
+        flex: none;
+        flex-wrap: wrap;
+        gap: theme.$footer-gap;
+        align-items: center;
+        padding: theme.$padding-y theme.$padding-x;
+        border-top: theme.$separator-width solid theme.$separator-color;
+        border-bottom-right-radius: settings.$border-radius;
+        border-bottom-left-radius: settings.$border-radius;
+        background: theme.$footer-background;
+    }
+
+    .isRootJustifiedToStart {
+        justify-content: flex-start;
+    }
+
+    .isRootJustifiedToCenter {
+        justify-content: center;
+    }
+
+    .isRootJustifiedToEnd {
+        justify-content: flex-end;
+    }
+
+    .isRootJustifiedToSpaceBetween {
+        justify-content: space-between;
+    }
+
+    .isRootJustifiedToStretch {
+        display: block;
+    }
+}

package/src/components/Modal/ModalHeader.jsx

@@ -6,7 +6,7 @@ import {
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalHeader.scss';
+import styles from './ModalHeader.module.scss';
 
 export const ModalHeader = ({
   children,

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

@@ -0,0 +1,32 @@
+@use "theme";
+
+@layer components.modal {
+    .root {
+        display: flex;
+        flex: none;
+        gap: theme.$header-gap;
+        align-items: baseline;
+        padding: theme.$padding-y theme.$padding-x;
+        border-bottom: theme.$separator-width solid theme.$separator-color;
+    }
+
+    .isRootJustifiedToStart {
+        justify-content: flex-start;
+    }
+
+    .isRootJustifiedToCenter {
+        justify-content: center;
+    }
+
+    .isRootJustifiedToEnd {
+        justify-content: flex-end;
+    }
+
+    .isRootJustifiedToSpaceBetween {
+        justify-content: space-between;
+    }
+
+    .isRootJustifiedToStretch {
+        display: block;
+    }
+}

package/src/components/Modal/ModalTitle.jsx

@@ -4,7 +4,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalTitle.scss';
+import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({
   children,

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

@@ -0,0 +1,12 @@
+@use "settings";
+
+@layer components.modal {
+    .root {
+        margin-block: 0;
+        font-size: settings.$title-font-size;
+
+        &:not(:last-child) {
+            margin-bottom: 0;
+        }
+    }
+}

package/src/components/Modal/README.md

@@ -1015,22 +1015,25 @@ opened.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the:
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to:
 
-- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
-  root, but its first child which represents the modal window.
-- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
+- the `<div>` HTML element in case of the `Modal` component. This `<div>` is not
+  the root, but its first child which represents the modal window.
+- the root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
   and `ModalFooter` components.
-- heading HTML element, which level can be specified through `level` option, in
-  case of the `ModalTitle` component.
-- native HTML `<button>` in case of the `ModalCloseButton` component.
+- the heading (e.g. `<h1>`) HTML element in case of the `ModalTitle` component.
+- the native HTML `<button>` in case of the `ModalCloseButton` component.
 
 This enables making the component interactive and helps to improve its
 accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div], [heading] and [button] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [`<h1>`-`<h6>` HTML element attributes][heading-attributes]{:target="_blank"}
+- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -1084,7 +1087,7 @@ accessibility.
 | `--rui-Modal--fullscreen__width`                     | Width of fullscreen modal                                     |
 | `--rui-Modal--fullscreen__height`                    | Height of fullscreen modal                                    |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
-[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[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
+[heading-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Paper/Paper.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Paper.scss';
+import styles from './Paper.module.scss';
 
 export const Paper = ({
   children,

package/src/components/Paper/Paper.module.scss

@@ -0,0 +1,19 @@
+@use "theme";
+
+@layer components.paper {
+    .root {
+        padding: theme.$padding;
+        border: theme.$border-width solid theme.$border-color;
+        border-radius: theme.$border-radius;
+        background-color: theme.$background-color;
+    }
+
+    .isRootMuted {
+        background-color: theme.$muted-background-color;
+        opacity: theme.$muted-opacity;
+    }
+
+    .isRootRaised {
+        box-shadow: theme.$raised-box-shadow;
+    }
+}

package/src/components/Paper/README.md

@@ -54,13 +54,15 @@ Dim background and add transparency to visually suppress the Paper.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -79,5 +81,5 @@ its accessibility.
 | `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Popover/Popover.jsx

@@ -6,7 +6,7 @@ import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
-import styles from './Popover.scss';
+import styles from './Popover.module.scss';
 
 export const Popover = React.forwardRef((props, ref) => {
   const {

package/src/components/Popover/Popover.module.scss

@@ -0,0 +1,238 @@
+// 1. Reset positioning for controlled variant.
+// 2. Shift Popover so there is space for the arrow between Popover and reference element.
+// 3. Add top offset in case it's not defined by external library.
+
+@use "theme";
+
+@layer components.popover {
+    .root {
+        position: absolute;
+        width: max-content;
+        max-width: theme.$max-width;
+        padding: theme.$padding;
+        text-align: left;
+        white-space: normal;
+        word-break: normal;
+        word-wrap: break-word;
+        color: theme.$color;
+        border: theme.$border-width solid theme.$border-color;
+        border-radius: theme.$border-radius;
+        background-color: theme.$background-color;
+        box-shadow: theme.$box-shadow;
+    }
+
+    .arrow {
+        position: absolute;
+        width: theme.$arrow-width;
+        height: theme.$arrow-height;
+        transform-origin: center bottom;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            display: block;
+            border-style: solid;
+            border-color: transparent;
+        }
+
+        &::before {
+            bottom: 0;
+            border-width: theme.$arrow-height theme.$arrow-height 0;
+            border-top-color: theme.$border-color;
+        }
+
+        &::after {
+            bottom: theme.$border-width;
+            border-width: theme.$arrow-height theme.$arrow-height 0;
+            border-top-color: theme.$background-color;
+        }
+    }
+
+    // Sides
+    .isRootAtTop {
+        bottom: 100%;
+    }
+
+    .isRootAtBottom {
+        top: 100%;
+    }
+
+    .isRootAtLeft {
+        right: 100%;
+    }
+
+    .isRootAtRight {
+        left: 100%;
+    }
+
+    // Arrows
+    .isRootAtTop > .arrow {
+        top: 100%;
+    }
+
+    .isRootAtBottom > .arrow {
+        bottom: 100%;
+    }
+
+    .isRootAtLeft > .arrow {
+        left: 100%;
+    }
+
+    .isRootAtRight > .arrow {
+        right: 100%;
+    }
+
+    // Side alignments: top
+    .isRootAtTop.isRootAtCenter {
+        left: 50%;
+        transform: translate(-50%, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtStart {
+        left: 0;
+        transform: translate(0, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtEnd {
+        right: 0;
+        transform: translate(0, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtCenter > .arrow {
+        left: 50%;
+        transform: translate(-50%, 0) rotateZ(0);
+    }
+
+    .isRootAtTop.isRootAtStart > .arrow {
+        left: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(0);
+    }
+
+    .isRootAtTop.isRootAtEnd > .arrow {
+        right: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(0);
+    }
+
+    // Side alignments: bottom
+    .isRootAtBottom.isRootAtCenter {
+        left: 50%;
+        transform: translate(-50%, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtStart {
+        left: 0;
+        transform: translate(0, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtEnd {
+        right: 0;
+        transform: translate(0, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtCenter > .arrow {
+        left: 50%;
+        transform: translate(-50%, -100%) rotateZ(180deg);
+    }
+
+    .isRootAtBottom.isRootAtStart > .arrow {
+        left: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(180deg);
+    }
+
+    .isRootAtBottom.isRootAtEnd > .arrow {
+        right: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(180deg);
+    }
+
+    // Side alignments: left
+    .isRootAtLeft.isRootAtCenter {
+        top: 50%;
+        transform: translate(#{-1 * theme.$arrow-height}, -50%);
+    }
+
+    .isRootAtLeft.isRootAtStart {
+        top: 0;
+        transform: translate(#{-1 * theme.$arrow-height}, 0);
+    }
+
+    .isRootAtLeft.isRootAtEnd {
+        bottom: 0;
+        transform: translate(#{-1 * theme.$arrow-height}, 0);
+    }
+
+    .isRootAtLeft.isRootAtCenter > .arrow {
+        top: 50%;
+        transform: translate(0, -100%) rotateZ(-90deg);
+    }
+
+    .isRootAtLeft.isRootAtStart > .arrow {
+        top: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(-90deg);
+    }
+
+    .isRootAtLeft.isRootAtEnd > .arrow {
+        bottom: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(-90deg);
+    }
+
+    // Side alignments: right
+    .isRootAtRight.isRootAtCenter {
+        top: 50%;
+        transform: translate(#{theme.$arrow-height}, -50%);
+    }
+
+    .isRootAtRight.isRootAtStart {
+        top: 0;
+        transform: translate(#{theme.$arrow-height}, 0);
+    }
+
+    .isRootAtRight.isRootAtEnd {
+        bottom: 0;
+        transform: translate(#{theme.$arrow-height}, 0);
+    }
+
+    .isRootAtRight.isRootAtCenter > .arrow {
+        top: 50%;
+        transform: translate(0, -100%) rotateZ(90deg);
+    }
+
+    .isRootAtRight.isRootAtStart > .arrow {
+        top: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(90deg);
+    }
+
+    .isRootAtRight.isRootAtEnd > .arrow {
+        bottom: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(90deg);
+    }
+
+    // Controlled placement
+    .isRootControlled.isRootAtTop,
+    .isRootControlled.isRootAtBottom,
+    .isRootControlled.isRootAtLeft,
+    .isRootControlled.isRootAtRight {
+        inset: unset; // 1.
+    }
+
+    .isRootControlled.isRootAtTop {
+        transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
+    }
+
+    .isRootControlled.isRootAtBottom {
+        transform: translate(0, #{theme.$arrow-height}); // 2.
+    }
+
+    .isRootControlled.isRootAtLeft {
+        transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
+    }
+
+    .isRootControlled.isRootAtRight {
+        transform: translate(#{theme.$arrow-height}, 0); // 2.
+    }
+
+    .isRootControlled.isRootAtLeft.isRootAtStart,
+    .isRootControlled.isRootAtRight.isRootAtStart {
+        top: 0; // 3.
+    }
+}

package/src/components/Popover/PopoverWrapper.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './PopoverWrapper.scss';
+import styles from './PopoverWrapper.module.scss';
 
 export const PopoverWrapper = ({
   children,
@@ -36,4 +36,3 @@ PopoverWrapper.propTypes = {
 export const PopoverWrapperWithContext = withGlobalProps(PopoverWrapper, 'PopoverWrapper');
 
 export default PopoverWrapperWithContext;
-

package/src/components/Popover/PopoverWrapper.module.scss

@@ -0,0 +1,5 @@
+@layer components.popover {
+    .root {
+        position: relative;
+    }
+}

package/src/components/Popover/README.md

@@ -287,13 +287,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -321,7 +323,7 @@ which enables [Advanced Positioning](#advanced-positioning).
 | `--rui-Popover__background-color`                    | Background color                                             |
 | `--rui-Popover__box-shadow`                          | Popover box shadow                                           |
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [Floating UI]: https://floating-ui.com/docs/react-dom
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/components/Radio/README.md

@@ -279,13 +279,15 @@ It's possible to disable just some options or the whole set.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>` elements. This enables making the component
-interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[radio] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="radio" />` HTML element attributes][radio-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -301,8 +303,8 @@ options. On top of that, the following options are available for Radio.
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
 
-[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
-[radio]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
+[radio-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Radio/Radio.jsx

@@ -6,7 +6,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './Radio.scss';
+import styles from './Radio.module.scss';
 
 export const Radio = ({
   disabled,

package/src/components/Radio/Radio.module.scss

@@ -0,0 +1,85 @@
+// 1. Legends are tricky to style, let's use a `div` instead.
+//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
+
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+
+@layer components.radio {
+    // Foundation
+    .root {
+        @include foundation.root();
+        @include foundation.fieldset();
+        @include variants.visual(check);
+    }
+
+    // 1.
+    .legend {
+        @include accessibility.hide-text();
+    }
+
+    // 1.
+    .label,
+    .optionLabel {
+        @include foundation.label();
+    }
+
+    .options {
+        @include reset.list();
+    }
+
+    .option {
+        @include inline-field-layout.field($type: radio);
+        @include inline-field-elements.min-tap-target($type: radio);
+    }
+
+    .input {
+        @include inline-field-elements.check-input($type: radio);
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical($has-list: true);
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal($has-min-tap-target: true);
+    }
+
+    .isRootFullWidth {
+        @include box-field-layout.full-width();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout($is-fieldset: true);
+    }
+}