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

package/src/components/FileInputField/README.md

@@ -156,10 +156,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
 <FileInputField
@@ -173,8 +173,10 @@ helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[file] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="file" />` HTML element attributes][file-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -189,6 +191,6 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[file-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/components/FormLayout/FormLayout.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayout.scss';
+import styles from './FormLayout.module.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 

package/src/components/FormLayout/{FormLayout.scss → FormLayout.module.scss}

@@ -18,41 +18,43 @@
 @use "../../styles/tools/spacing";
 @use "theme";
 
-.root {
-    --rui-local-field-width: 1fr;
+@layer components.form-layout {
+    .root {
+        --rui-local-field-width: 1fr;
 
-    @include spacing.bottom(layouts);
-}
+        @include spacing.bottom(layouts);
+    }
 
-.isRootFieldLayoutVertical,
-.isRootFieldLayoutHorizontal {
-    display: grid;
-    grid-template-columns: var(--rui-local-field-width);
-    grid-row-gap: theme.$row-gap;
-}
+    .isRootFieldLayoutVertical,
+    .isRootFieldLayoutHorizontal {
+        display: grid;
+        grid-template-columns: var(--rui-local-field-width);
+        grid-row-gap: theme.$row-gap;
+    }
 
-.isRootFieldLayoutHorizontal {
-    @include breakpoint.up(forms.$horizontal-breakpoint) {
-        grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
+    .isRootFieldLayoutHorizontal {
+        @include breakpoint.up(forms.$horizontal-breakpoint) {
+            grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
+        }
     }
-}
 
-.hasRootLabelWidthDefault {
-    --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
-}
+    .hasRootLabelWidthDefault {
+        --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
+    }
 
-.hasRootLabelWidthAuto {
-    --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
-}
+    .hasRootLabelWidthAuto {
+        --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
+    }
 
-.hasRootLabelWidthLimited {
-    --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
-}
+    .hasRootLabelWidthLimited {
+        --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
+    }
 
-.hasRootLabelWidthCustom {
-    --rui-local-label-width: var(--rui-custom-label-width); // 3.
-}
+    .hasRootLabelWidthCustom {
+        --rui-local-label-width: var(--rui-custom-label-width); // 3.
+    }
 
-.isRootAutoWidth {
-    --rui-local-field-width: min-content;
+    .isRootAutoWidth {
+        --rui-local-field-width: min-content;
+    }
 }

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -7,7 +7,7 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayoutCustomField.scss';
+import styles from './FormLayoutCustomField.module.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {

package/src/components/FormLayout/FormLayoutCustomField.module.scss

@@ -0,0 +1,65 @@
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/variants";
+
+@layer components.form-layout {
+    // Foundation
+    .root {
+        @include box-field-layout.in-form-layout();
+        @include variants.visual(custom);
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .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();
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootLayoutVertical .field,
+    .isRootLayoutHorizontal .field {
+        width: auto;
+    }
+
+    .isRootFullWidth .field {
+        justify-self: stretch;
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+}

package/src/components/FormLayout/README.md

@@ -416,13 +416,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"}
 
 ## API
 
@@ -453,10 +455,10 @@ FormLayoutCustomField can be styled using a small subset of
 | `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state              |
 | `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state       |
 
-[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
-[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [fragments]: https://reactjs.org/docs/fragments.html
+[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

package/src/components/Grid/Grid.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
-import styles from './Grid.scss';
+import styles from './Grid.module.scss';
 
 const SPACING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7];
 

package/src/components/Grid/Grid.module.scss

@@ -0,0 +1,66 @@
+// 1. Read value of `--rui-local-<PROPERTY>-<BREAKPOINT>` that might have been defined by
+//    JavaScript and assign it to `--rui-local-<PROPERTY>` used in 2.
+//
+//    Fallback cascade containing fallbacks for all previous breakpoints recursively is included
+//    using CSS custom property fallback mechanism like this:
+//
+//    Fallback for `xs` breakpoint: `<INITIAL FALLBACK>`
+//    Fallback for `sm` breakpoint: `var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>)`
+//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INIT. FALLBACK>))`
+//
+//    … etc, up to the largest breakpoint.
+//
+//    A media query is then created for each breakpoint (with exception of `xs` which doesn't need a
+//    media query) and a corresponding responsive custom property variant is assigned to
+//    `--rui-local-<PROPERTY>` that is used later in CSS, see 2.
+//
+//    Example for `sm` breakpoint:
+//
+//    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
+//
+// 2. Apply custom property value that is defined within current breakpoint, see 1.
+
+@use "sass:map";
+@use "../../styles/tools/spacing";
+@use "settings";
+@use "tools";
+
+@layer components.grid {
+    .root {
+        @include tools.assign-responsive-custom-properties(settings.$grid-responsive-properties); // 1.
+        @include spacing.bottom(layouts);
+
+        display: grid;
+        grid-template-columns: var(--rui-local-columns); // 2.
+        grid-template-rows: var(--rui-local-rows); // 2.
+        grid-auto-flow: var(--rui-local-auto-flow); // 2.
+        grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
+        align-content: var(--rui-local-align-content); // 2.
+        align-items: var(--rui-local-align-items); // 2.
+        justify-content: var(--rui-local-justify-content); // 2.
+        justify-items: var(--rui-local-justify-items); // 2.
+    }
+
+    // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
+    .root > * {
+        margin-block: 0;
+    }
+
+    .span {
+        @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1.
+
+        grid-column: span var(--rui-local-column-span); // 2.
+        grid-row: span var(--rui-local-row-span); // 2.
+    }
+
+    // stylelint-disable selector-no-qualifying-type
+    dl.root,
+    ol.root,
+    ul.root {
+        padding-left: 0;
+        margin-left: 0;
+        list-style: none;
+    }
+
+    // stylelint-enable selector-no-qualifying-type
+}

package/src/components/Grid/GridSpan.jsx

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

package/src/components/Grid/README.md

@@ -248,13 +248,16 @@ property. Check [MDN][grid-auto-flow] to fully understand available 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 HTML element
-of your choice provided by `tag`, which is `<div>` by default. It 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 HTML element
+of your choice provided by `tag`, which is `<div>` by default. 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 or [any other][all-html-elements] element of your choice.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [any other HTML element][all-html-elements]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -276,6 +279,6 @@ Wrapper for content that should span multiple rows or columns.
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
 [repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
 [minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
-[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
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

package/src/components/InputGroup/InputGroup.jsx

@@ -13,7 +13,7 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from './InputGroupContext';
-import styles from './InputGroup.scss';
+import styles from './InputGroup.module.scss';
 
 export const InputGroup = ({
   children,
@@ -22,6 +22,7 @@ export const InputGroup = ({
   isLabelVisible,
   label,
   layout,
+  required,
   size,
   validationTexts,
   ...restProps
@@ -57,6 +58,7 @@ export const InputGroup = ({
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
       )}
@@ -112,6 +114,7 @@ InputGroup.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  required: false,
   size: 'medium',
   validationTexts: null,
 };
@@ -156,6 +159,11 @@ InputGroup.propTypes = {
    * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * If `true`, the `InputGroup`'s label appears as required. Underlying `<fieldset>`
+   * element does not take `required` attribute so there is no functional effect.
+   */
+  required: PropTypes.bool,
   /**
    * Size of the `children` elements.
    */

package/src/components/InputGroup/InputGroup.module.scss

@@ -0,0 +1,93 @@
+// 1. The class name is intentionally singular because it's targeted by other mixins too.
+// 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
+// 3. Prevent individual inputs from overlapping inside narrow containers.
+// 4. 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/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "theme";
+
+@layer components.input-group {
+    .root {
+        @include foundation.root();
+        @include foundation.fieldset();
+    }
+
+    // 4.
+    .legend {
+        @include accessibility.hide-text();
+    }
+
+    // 4.
+    .label {
+        @include foundation.label();
+    }
+
+    .inputGroup {
+        --rui-local-inner-border-radius: #{theme.$inner-border-radius};
+
+        display: flex; // 2.
+        gap: theme.$gap;
+    }
+
+    // 1.
+    .validationText {
+        @include reset.list();
+        @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();
+    }
+
+    .isRootLayoutVertical .field,
+    .isRootLayoutHorizontal .field {
+        max-width: none; // 3.
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout($is-fieldset: true);
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small, $has-input: false);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium, $has-input: false);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large, $has-input: false);
+    }
+}

package/src/components/InputGroup/README.md

@@ -176,9 +176,14 @@ not show any `validationText`, they only show their respective `validationState`
 Validation messages passed to input elements' `validationText` prop will be
 ignored.
 
+👉 While there is a `required` property to visually denote the whole input group
+is required, there is no functional effect as there is no such HTML attribute
+for the underlying `<fieldset>` element.
+
 ```docoff-react-preview
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "First name must be filled in.",
     "Last name must be filled in.",
@@ -187,17 +192,20 @@ ignored.
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="invalid"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="invalid"
   />
   <Button label="Submit" />
 </InputGroup>
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "Last name should not include any digits.",
   ]}
@@ -205,26 +213,33 @@ ignored.
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="warning"
     value="123Doe"
   />
   <Button label="Submit" />
 </InputGroup>
-<InputGroup label="First and last name">
+<InputGroup
+  label="First and last name"
+  required
+>
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="valid"
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="valid"
     value="Doe"
   />
@@ -235,13 +250,15 @@ ignored.
 ## 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 `<div>` HTML
-element which wraps elements to be grouped. 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 `<fieldset>` 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:
+
+- [`<fieldset>` HTML element attributes][fieldset-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -254,7 +271,7 @@ interactive and helps to improve its accessibility.
 | `--rui-InputGroup__gap`                                            | Gap between elements                           |
 | `--rui-InputGroup__inner-border-radius`                            | Inner border radius of elements                |
 
-[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
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Modal/Modal.jsx

@@ -8,7 +8,7 @@ import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';
 import { useModalScrollPrevention } from './_hooks/useModalScrollPrevention';
-import styles from './Modal.scss';
+import styles from './Modal.module.scss';
 
 const preRender = (
   children,