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

package/src/components/Button/_priorities.scss

@@ -3,145 +3,147 @@
 @use "theme";
 @use "tools";
 
-.isRootPriorityFilled.isRootColorPrimary {
-    @include tools.button-color(filled, primary);
-}
-
-.isRootPriorityFilled.isRootColorSecondary {
-    @include tools.button-color(filled, secondary);
-}
-
-.isRootPriorityFilled.isRootColorSelected {
-    @include tools.button-color(filled, selected);
-}
-
-.isRootPriorityFilled.isRootColorSuccess {
-    @include tools.button-color(filled, success);
-}
-
-.isRootPriorityFilled.isRootColorWarning {
-    @include tools.button-color(filled, warning);
-}
-
-.isRootPriorityFilled.isRootColorDanger {
-    @include tools.button-color(filled, danger);
-}
-
-.isRootPriorityFilled.isRootColorHelp {
-    @include tools.button-color(filled, help);
-}
-
-.isRootPriorityFilled.isRootColorInfo {
-    @include tools.button-color(filled, info);
-}
-
-.isRootPriorityFilled.isRootColorNote {
-    @include tools.button-color(filled, note);
-}
-
-.isRootPriorityFilled.isRootColorLight {
-    @include tools.button-color(filled, light);
-}
-
-.isRootPriorityFilled.isRootColorDark {
-    @include tools.button-color(filled, dark);
-}
-
-.isRootPriorityOutline.isRootColorPrimary {
-    @include tools.button-color(outline, primary);
-}
-
-.isRootPriorityOutline.isRootColorSecondary {
-    @include tools.button-color(outline, secondary);
-}
-
-.isRootPriorityOutline.isRootColorSelected {
-    @include tools.button-color(outline, selected);
-}
-
-.isRootPriorityOutline.isRootColorSuccess {
-    @include tools.button-color(outline, success);
-}
+@layer components.button {
+    .isRootPriorityFilled.isRootColorPrimary {
+        @include tools.button-color(filled, primary);
+    }
 
-.isRootPriorityOutline.isRootColorWarning {
-    @include tools.button-color(outline, warning);
-}
-
-.isRootPriorityOutline.isRootColorDanger {
-    @include tools.button-color(outline, danger);
-}
+    .isRootPriorityFilled.isRootColorSecondary {
+        @include tools.button-color(filled, secondary);
+    }
 
-.isRootPriorityOutline.isRootColorHelp {
-    @include tools.button-color(outline, help);
-}
+    .isRootPriorityFilled.isRootColorSelected {
+        @include tools.button-color(filled, selected);
+    }
 
-.isRootPriorityOutline.isRootColorInfo {
-    @include tools.button-color(outline, info);
-}
+    .isRootPriorityFilled.isRootColorSuccess {
+        @include tools.button-color(filled, success);
+    }
 
-.isRootPriorityOutline.isRootColorNote {
-    @include tools.button-color(outline, note);
-}
+    .isRootPriorityFilled.isRootColorWarning {
+        @include tools.button-color(filled, warning);
+    }
 
-.isRootPriorityOutline.isRootColorLight {
-    @include tools.button-color(outline, light);
-}
+    .isRootPriorityFilled.isRootColorDanger {
+        @include tools.button-color(filled, danger);
+    }
 
-.isRootPriorityOutline.isRootColorDark {
-    @include tools.button-color(outline, dark);
-}
+    .isRootPriorityFilled.isRootColorHelp {
+        @include tools.button-color(filled, help);
+    }
 
-.isRootPriorityFlat.isRootColorPrimary {
-    @include tools.button-color(flat, primary);
-}
-
-.isRootPriorityFlat.isRootColorSecondary {
-    @include tools.button-color(flat, secondary);
-}
-
-.isRootPriorityFlat.isRootColorSelected {
-    @include tools.button-color(flat, selected);
-}
-
-.isRootPriorityFlat.isRootColorSuccess {
-    @include tools.button-color(flat, success);
-}
-
-.isRootPriorityFlat.isRootColorWarning {
-    @include tools.button-color(flat, warning);
-}
-
-.isRootPriorityFlat.isRootColorDanger {
-    @include tools.button-color(flat, danger);
-}
-
-.isRootPriorityFlat.isRootColorHelp {
-    @include tools.button-color(flat, help);
-}
-
-.isRootPriorityFlat.isRootColorInfo {
-    @include tools.button-color(flat, info);
-}
-
-.isRootPriorityFlat.isRootColorNote {
-    @include tools.button-color(flat, note);
-}
-
-.isRootPriorityFlat.isRootColorLight {
-    @include tools.button-color(flat, light);
-}
-
-.isRootPriorityFlat.isRootColorDark {
-    @include tools.button-color(flat, dark);
-}
+    .isRootPriorityFilled.isRootColorInfo {
+        @include tools.button-color(filled, info);
+    }
 
-.isRootInButtonGroup:not(:first-child)::before {
-    content: "";
-    position: absolute;
-    top: calc(-1 * #{theme.$border-width});
-    bottom: calc(-1 * #{theme.$border-width});
-    left: calc(-1 * #{theme.$border-width});
-    z-index: map.get(settings.$group-z-indexes, separator);
-    border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
-    transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
+    .isRootPriorityFilled.isRootColorNote {
+        @include tools.button-color(filled, note);
+    }
+
+    .isRootPriorityFilled.isRootColorLight {
+        @include tools.button-color(filled, light);
+    }
+
+    .isRootPriorityFilled.isRootColorDark {
+        @include tools.button-color(filled, dark);
+    }
+
+    .isRootPriorityOutline.isRootColorPrimary {
+        @include tools.button-color(outline, primary);
+    }
+
+    .isRootPriorityOutline.isRootColorSecondary {
+        @include tools.button-color(outline, secondary);
+    }
+
+    .isRootPriorityOutline.isRootColorSelected {
+        @include tools.button-color(outline, selected);
+    }
+
+    .isRootPriorityOutline.isRootColorSuccess {
+        @include tools.button-color(outline, success);
+    }
+
+    .isRootPriorityOutline.isRootColorWarning {
+        @include tools.button-color(outline, warning);
+    }
+
+    .isRootPriorityOutline.isRootColorDanger {
+        @include tools.button-color(outline, danger);
+    }
+
+    .isRootPriorityOutline.isRootColorHelp {
+        @include tools.button-color(outline, help);
+    }
+
+    .isRootPriorityOutline.isRootColorInfo {
+        @include tools.button-color(outline, info);
+    }
+
+    .isRootPriorityOutline.isRootColorNote {
+        @include tools.button-color(outline, note);
+    }
+
+    .isRootPriorityOutline.isRootColorLight {
+        @include tools.button-color(outline, light);
+    }
+
+    .isRootPriorityOutline.isRootColorDark {
+        @include tools.button-color(outline, dark);
+    }
+
+    .isRootPriorityFlat.isRootColorPrimary {
+        @include tools.button-color(flat, primary);
+    }
+
+    .isRootPriorityFlat.isRootColorSecondary {
+        @include tools.button-color(flat, secondary);
+    }
+
+    .isRootPriorityFlat.isRootColorSelected {
+        @include tools.button-color(flat, selected);
+    }
+
+    .isRootPriorityFlat.isRootColorSuccess {
+        @include tools.button-color(flat, success);
+    }
+
+    .isRootPriorityFlat.isRootColorWarning {
+        @include tools.button-color(flat, warning);
+    }
+
+    .isRootPriorityFlat.isRootColorDanger {
+        @include tools.button-color(flat, danger);
+    }
+
+    .isRootPriorityFlat.isRootColorHelp {
+        @include tools.button-color(flat, help);
+    }
+
+    .isRootPriorityFlat.isRootColorInfo {
+        @include tools.button-color(flat, info);
+    }
+
+    .isRootPriorityFlat.isRootColorNote {
+        @include tools.button-color(flat, note);
+    }
+
+    .isRootPriorityFlat.isRootColorLight {
+        @include tools.button-color(flat, light);
+    }
+
+    .isRootPriorityFlat.isRootColorDark {
+        @include tools.button-color(flat, dark);
+    }
+
+    .isRootInButtonGroup:not(:first-child)::before {
+        content: "";
+        position: absolute;
+        top: calc(-1 * #{theme.$border-width});
+        bottom: calc(-1 * #{theme.$border-width});
+        left: calc(-1 * #{theme.$border-width});
+        z-index: map.get(settings.$group-z-indexes, separator);
+        border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
+        transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
+    }
 }

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -7,7 +7,7 @@ import { classNames } from '../../utils/classNames';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ButtonGroup.scss';
+import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
 export const ButtonGroup = ({

package/src/components/ButtonGroup/ButtonGroup.module.scss

@@ -0,0 +1,35 @@
+// 1. ButtonGroup gap is implemented using the `margin` property on buttons so the buttons can overlap and reduce
+//    duplicate borders.
+
+@use "theme";
+
+@layer components.button-group {
+    .root {
+        --rui-local-inner-border-radius: #{theme.$inner-border-radius};
+
+        display: inline-flex; // 1.
+    }
+
+    .isRootPriorityFilled {
+        --rui-local-gap: #{theme.$filled-gap};
+        --rui-local-separator-width: #{theme.$filled-separator-width};
+        --rui-local-separator-color: #{theme.$filled-separator-color};
+    }
+
+    .isRootPriorityOutline {
+        --rui-local-gap: #{theme.$outline-gap};
+        --rui-local-separator-width: #{theme.$outline-separator-width};
+        --rui-local-separator-color: #{theme.$outline-separator-color};
+    }
+
+    .isRootPriorityFlat {
+        --rui-local-gap: #{theme.$flat-gap};
+        --rui-local-separator-width: #{theme.$flat-separator-width};
+        --rui-local-separator-color: #{theme.$flat-separator-color};
+    }
+
+    .isRootBlock {
+        display: flex;
+        width: 100%;
+    }
+}

package/src/components/ButtonGroup/README.md

@@ -249,13 +249,15 @@ and communicating the state of individual options.
 ## 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
 
@@ -276,7 +278,7 @@ its accessibility.
 | `--rui-ButtonGroup--flat__separator__width`                        | Separator width for `flat` buttons             |
 | `--rui-ButtonGroup--flat__separator__color`                        | Separator color for `flat` 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
-[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
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Card/Card.jsx

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

package/src/components/Card/Card.module.scss

@@ -0,0 +1,72 @@
+// 1. Retain equal card widths in flex and grid layouts independently on their content.
+
+@use "theme";
+@use "tools";
+
+@layer components.card {
+    .root {
+        --rui-local-padding: #{theme.$padding};
+
+        display: flex;
+        flex-direction: column;
+        min-width: 0; // 1.
+        color: var(--rui-local-color);
+        border: theme.$border-width solid var(--rui-local-border-color);
+        border-radius: theme.$border-radius;
+        background-color: var(--rui-local-background-color);
+    }
+
+    .body {
+        flex: 1 0 auto;
+        padding: var(--rui-local-padding);
+    }
+
+    .footer {
+        padding: var(--rui-local-padding);
+    }
+
+    .isRootDense {
+        --rui-local-padding: #{theme.$dense-padding};
+    }
+
+    .isRootRaised {
+        box-shadow: theme.$raised-box-shadow;
+    }
+
+    .isRootColorSuccess {
+        @include tools.color(success);
+    }
+
+    .isRootColorWarning {
+        @include tools.color(warning);
+    }
+
+    .isRootColorDanger {
+        @include tools.color(danger);
+    }
+
+    .isRootColorHelp {
+        @include tools.color(help);
+    }
+
+    .isRootColorInfo {
+        @include tools.color(info);
+    }
+
+    .isRootColorNote {
+        @include tools.color(note);
+    }
+
+    .isRootColorLight {
+        @include tools.color(light);
+    }
+
+    .isRootColorDark {
+        @include tools.color(dark);
+    }
+
+    .isRootDisabled {
+        background-color: theme.$disabled-background-color;
+        opacity: theme.$disabled-opacity;
+    }
+}

package/src/components/Card/CardBody.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 './Card.scss';
+import styles from './Card.module.scss';
 
 export const CardBody = ({
   children,

package/src/components/Card/CardFooter.jsx

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

package/src/components/Card/README.md

@@ -255,13 +255,15 @@ its interactive elements to disallow user's interaction.
 ## 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
 
@@ -310,5 +312,5 @@ Where:
 - `<PROPERTY>` is one of `color` (color of text), `border-color`, or
   `background-color`.
 
-[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/CheckboxField/CheckboxField.jsx

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './CheckboxField.scss';
+import styles from './CheckboxField.module.scss';
 
 export const CheckboxField = React.forwardRef((props, ref) => {
   const {

package/src/components/CheckboxField/CheckboxField.module.scss

@@ -0,0 +1,63 @@
+@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";
+
+@layer components.checkbox-field {
+    // Foundation
+    .root {
+        @include foundation.root();
+        @include inline-field-layout.root();
+        @include inline-field-elements.min-tap-target($type: checkbox);
+        @include variants.visual(check);
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .field {
+        @include inline-field-layout.field($type: checkbox);
+    }
+
+    .input {
+        @include inline-field-elements.check-input($type: checkbox);
+    }
+
+    .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);
+    }
+
+    // Invisible label
+    .isLabelHidden {
+        @include accessibility.hide-text();
+    }
+
+    // Layouts
+    .hasRootLabelBefore {
+        @include inline-field-layout.has-label-before();
+    }
+
+    .isRootInFormLayout {
+        @include inline-field-layout.in-form-layout();
+    }
+}

package/src/components/CheckboxField/README.md

@@ -172,13 +172,15 @@ Disabled state makes the input unavailable.
 ## 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>`. 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
-[checkbox] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -198,6 +200,6 @@ options. On top of that, the following options are available for CheckboxField.
 | `--rui-FormField--check__input--checkbox__border-radius`             | Input corner radius                          |
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[checkbox-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_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/FileInputField/FileInputField.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 './FileInputField.scss';
+import styles from './FileInputField.module.scss';
 
 export const FileInputField = React.forwardRef((props, ref) => {
   const {

package/src/components/FileInputField/FileInputField.module.scss

@@ -0,0 +1,65 @@
+@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/variants";
+@use "../../styles/tools/accessibility";
+
+@layer components.file-input-field {
+    // Foundation
+    .root {
+        @include foundation.root();
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .inputContainer {
+        @include box-field-elements.input-container();
+    }
+
+    .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);
+    }
+
+    // Invisible label
+    .isLabelHidden {
+        @include accessibility.hide-text();
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical();
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootFullWidth {
+        @include box-field-layout.full-width();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout();
+    }
+}