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

package/src/components/Table/_components/TableCell.module.scss

@@ -0,0 +1,28 @@
+@use "../settings";
+
+@layer components.table {
+    .tableCell,
+    .tableHeadCell,
+    .isTableCellSortingActive,
+    .isTableHeadCellSortingActive {
+        padding: settings.$cell-padding-y settings.$cell-padding-x;
+        text-align: left;
+        border-bottom: settings.$border-width solid settings.$border-color;
+    }
+
+    .tableHeadCell {
+        font-weight: settings.$head-font-weight;
+        border-bottom-width: 2px;
+    }
+
+    .tableHeadCellLayout {
+        display: flex;
+        gap: settings.$cell-padding-x;
+        align-items: center;
+    }
+
+    .isTableCellSortingActive,
+    .isTableHeadCellSortingActive {
+        background-color: settings.$sorted-background-color;
+    }
+}

package/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from '../../../Button';
-import styles from '../TableCell.scss';
+import styles from '../TableCell.module.scss';
 
 export const TableHeaderCell = ({
   column,

package/src/components/Tabs/README.md

@@ -157,14 +157,20 @@ 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 `<nav>` HTML
-element in case of `Tabs` component and to the `<a>` HTML element in
-case of `TabsItem`. 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:
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[nav] and [li] element.
+- the root `<nav>` HTML element in case of `Tabs` component
+- the `<a>` HTML element in case of `TabsItem`
+
+This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 For the full list of supported attributes refer to:
+
+- [`<nav>` HTML element attributes][nav-attributes]{:target="_blank"}
+- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -216,6 +222,6 @@ Where:
   `background-color`, `box-shadow`, `shift-y` (shifts vertically the whole
   item), or `label__shift-y` (tweaks vertical position of tab label).
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[nav]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
-[li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[nav-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

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

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,31 @@
+// 1. Use the `clip` value to prevent the content from unwanted vertical scrolling during keyboard navigation.
+// 2. Decorative bottom border.
+
+@use "../../styles/tools/reset";
+@use "theme";
+
+@layer components.tabs {
+    .list {
+        @include reset.list();
+
+        position: relative;
+        display: inline-flex;
+        min-width: 100%;
+        padding-right: theme.$padding-x;
+        padding-left: theme.$padding-x;
+        overflow-y: clip; // 1.
+        white-space: nowrap;
+
+        // 2.
+        &::after {
+            content: "";
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            height: theme.$border-bottom-width;
+            background-color: theme.$border-bottom-color;
+        }
+    }
+}

package/src/components/Tabs/TabsItem.jsx

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

package/src/components/Tabs/TabsItem.module.scss

@@ -0,0 +1,119 @@
+// 1. Keep inactive items under Tabs' decorative bottom border and pop active ones above it.
+
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/transition";
+@use "theme";
+
+@layer components.tabs {
+    .root {
+        @include transition.add(transform);
+
+        position: relative; // 1.
+        z-index: 1; // 1.
+        flex: none;
+        padding-top: calc(-1 * #{theme.$item-active-shift-y});
+        margin-bottom: theme.$item-active-shift-y;
+        transform: translateY(0);
+
+        &:hover,
+        &:focus-within {
+            transform: translateY(theme.$item-hover-shift-y);
+        }
+
+        &:not(:last-child) {
+            margin-right: theme.$gap-xs;
+        }
+
+        @include breakpoint.up(sm) {
+            &:not(:last-child) {
+                margin-right: theme.$gap-sm;
+            }
+        }
+
+        @include breakpoint.up(md) {
+            &:not(:last-child) {
+                margin-right: theme.$gap-md;
+            }
+        }
+    }
+
+    .link {
+        @include reset.link();
+        @include transition.add((color, border-color, background-color, box-shadow));
+
+        display: block;
+        padding: theme.$item-padding-xs;
+        font-weight: theme.$item-font-weight;
+        line-height: 1;
+        text-decoration: none;
+        color: theme.$item-color;
+        border: theme.$item-border-width solid;
+        border-color: theme.$item-border-color;
+        border-top-left-radius: theme.$item-border-radius;
+        border-top-right-radius: theme.$item-border-radius;
+        background-color: theme.$item-background-color;
+        box-shadow: theme.$item-box-shadow;
+
+        &:hover,
+        &:focus {
+            font-weight: theme.$item-hover-font-weight;
+            color: theme.$item-hover-color;
+            border-width: theme.$item-hover-border-width;
+            border-color: theme.$item-hover-border-color;
+            background-color: theme.$item-hover-background-color;
+            box-shadow: theme.$item-hover-box-shadow;
+        }
+
+        @include breakpoint.up(sm) {
+            padding: theme.$item-padding-sm;
+        }
+
+        @include breakpoint.up(md) {
+            padding: theme.$item-padding-md;
+        }
+    }
+
+    .linkContent {
+        @include transition.add(transform);
+
+        display: flex;
+        align-items: center;
+        transform: translateY(0);
+    }
+
+    .label:not(:first-child) {
+        margin-left: theme.$item-icon-gap;
+    }
+
+    .label:not(:last-child) {
+        margin-right: theme.$item-icon-gap;
+    }
+
+    .isRootActive,
+    .isRootActive:hover,
+    .isRootActive:focus-within {
+        z-index: 2; // 1.
+        transform: translateY(theme.$item-active-shift-y);
+    }
+
+    .isRootActive .link {
+        font-weight: theme.$item-active-font-weight;
+        color: theme.$item-active-color;
+        border-width: theme.$item-active-border-width;
+        border-color: theme.$item-active-border-color;
+        background-color: theme.$item-active-background-color;
+        box-shadow: theme.$item-active-box-shadow;
+    }
+
+    .link:hover .linkContent,
+    .link:focus .linkContent {
+        transform: translateY(theme.$item-hover-label-shift-y);
+    }
+
+    .isRootActive .link .linkContent,
+    .isRootActive .link:hover .linkContent,
+    .isRootActive .link:focus .linkContent {
+        transform: translateY(theme.$item-active-label-shift-y);
+    }
+}

package/src/components/Text/README.md

@@ -202,19 +202,25 @@ 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 either to the
-`<span>` or to the `<div>` HTML element in case that `blockLevel` is set to
-`true`. This enables making the component interactive and helps to improve its
+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:
+
+- `<span>` HTML element in case that `blockLevel` is set to `false`
+- `<div>` HTML element in case that `blockLevel` is set to `true`
+
+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
-[span] and [div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<span>` HTML element attributes][span-attributes]{:target="_blank"}
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Text/Text.jsx"></docoff-react-props>
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
-[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
+[span-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes

package/src/components/Text/Text.jsx

@@ -7,7 +7,7 @@ import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
 import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
-import styles from './Text.scss';
+import styles from './Text.module.scss';
 
 export const Text = ({
   blockLevel,

package/src/components/Text/Text.module.scss

@@ -0,0 +1,42 @@
+// 1. `word-break: break-word` is deprecated in favour of `overflow-wrap: anywhere`, but it's still
+//     required for Safari.
+//     https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
+//
+// 2. Different approaches are used for single and multiline texts because the latter approach
+//    doesn't always work for single-line texts.
+
+@layer components.text {
+    .isRootClampSingleLine {
+        display: block; // 2.
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
+    .isRootClampMultiLine {
+        display: -webkit-box; // 2.
+        -webkit-line-clamp: var(--rui-custom-lines);
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    // stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix
+
+    .isRootHyphensAuto {
+        hyphens: auto;
+    }
+
+    .isRootHyphensManual {
+        hyphens: manual;
+    }
+
+    .isRootWordWrappingAnywhere {
+        word-break: break-all;
+    }
+
+    .isRootWordWrappingLongWords {
+        word-break: break-word; // 1.
+        overflow-wrap: anywhere;
+    }
+}

package/src/components/TextArea/README.md

@@ -317,10 +317,10 @@ It's possible to disable the whole input.
 ## 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 `<textarea>`. This enables making the component interactive and
-to 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 `<textarea>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
 ```docoff-react-preview
 <TextArea
@@ -338,8 +338,10 @@ to helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[textarea] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<textarea>` HTML element attributes][textarea-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -354,6 +356,6 @@ If you provide [ref], it is forwarded to the native HTML `<textarea>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[textarea]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
+[textarea-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes

package/src/components/TextArea/TextArea.jsx

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

package/src/components/TextArea/TextArea.module.scss

@@ -0,0 +1,97 @@
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+
+@layer components.text-area {
+    // Foundation
+    .root {
+        @include foundation.root();
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .inputContainer {
+        @include box-field-elements.input-container();
+    }
+
+    .input {
+        @include box-field-elements.input();
+        @include box-field-elements.input-textarea();
+    }
+
+    .bottomLine {
+        @include box-field-elements.bottom-line();
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // Visual variants
+    .isRootVariantFilled {
+        @include variants.visual(box, $variant: filled);
+    }
+
+    .isRootVariantOutline {
+        @include variants.visual(box, $variant: outline);
+    }
+
+    // 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();
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small, $is-multiline: true);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium, $is-multiline: true);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large, $is-multiline: true);
+    }
+}

package/src/components/TextField/README.md

@@ -445,10 +445,10 @@ It's possible to disable the whole input.
 ## 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.
 
 ```docoff-react-preview
 <TextField
@@ -481,9 +481,14 @@ helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[text][input-text], [email][input-email], [number][input-number],
-[tel][input-tel], and [password][input-password] input types.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="text" />` HTML element attributes][input-text]{:target="_blank"}
+- [`<input type="email" />` HTML element attributes][input-email]{:target="_blank"}
+- [`<input type="number" />` HTML element attributes][input-number]{:target="_blank"}
+- [`<input type="tel" />` HTML element attributes][input-tel]{:target="_blank"}
+- [`<input type="password" />` HTML element attributes][input-password]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -508,5 +513,5 @@ Head to [Forms Theming][theming-forms] to see shared form theming options.
 [input-tel]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#additional_attributes
 [input-password]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#additional_attributes
 [theming-forms]: /docs/customize/theming/forms
-[React synthetic events]: https://reactjs.org/docs/events.html
+[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/TextField/TextField.jsx

@@ -8,7 +8,7 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
-import styles from './TextField.scss';
+import styles from './TextField.module.scss';
 
 const SMALL_INPUT_SIZE = 10;
 

package/src/components/TextField/TextField.module.scss

@@ -0,0 +1,109 @@
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+
+@layer components.text-field {
+    // Foundation
+    .root {
+        @include foundation.root();
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .inputContainer {
+        @include box-field-elements.input-container();
+    }
+
+    .input {
+        @include box-field-elements.input();
+    }
+
+    .bottomLine {
+        @include box-field-elements.bottom-line();
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .hasRootCustomInputSize .input {
+        @include box-field-elements.input-size();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // Variants
+    .isRootVariantFilled {
+        @include variants.visual(box, $variant: filled);
+    }
+
+    .isRootVariantOutline {
+        @include variants.visual(box, $variant: outline);
+    }
+
+    // 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();
+    }
+
+    .hasRootSmallInput.isRootLayoutHorizontal {
+        @include box-field-layout.horizontal-with-small-input();
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout();
+    }
+}

package/src/components/TextLink/README.md

@@ -47,13 +47,15 @@ It's common to use custom function for routing within SPAs. Use the
 ## 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 `<a>` HTML
-element. 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 `<a>` 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
-[a] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -70,5 +72,5 @@ accessibility.
 | `--rui-TextLink--active__color`           | Text color in the active state      |
 | `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
+[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props