@react-ui-org/react-ui 0.44.0 → 0.46.0

package/src/lib/components/Card/_theme.scss

@@ -9,54 +9,54 @@ $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
 
 $colors: (
-  primary: (
-    color: var(--rui-Card--primary__color),
-    border-color: var(--rui-Card--primary__border-color),
-    background-color: var(--rui-Card--primary__background-color),
-  ),
-  secondary: (
-    color: var(--rui-Card--secondary__color),
-    border-color: var(--rui-Card--secondary__border-color),
-    background-color: var(--rui-Card--secondary__background-color),
-  ),
-  success: (
-    color: var(--rui-Card--success__color),
-    border-color: var(--rui-Card--success__border-color),
-    background-color: var(--rui-Card--success__background-color),
-  ),
-  warning: (
-    color: var(--rui-Card--warning__color),
-    border-color: var(--rui-Card--warning__border-color),
-    background-color: var(--rui-Card--warning__background-color),
-  ),
-  danger: (
-    color: var(--rui-Card--danger__color),
-    border-color: var(--rui-Card--danger__border-color),
-    background-color: var(--rui-Card--danger__background-color),
-  ),
-  info: (
-    color: var(--rui-Card--info__color),
-    border-color: var(--rui-Card--info__border-color),
-    background-color: var(--rui-Card--info__background-color),
-  ),
-  help: (
-    color: var(--rui-Card--help__color),
-    border-color: var(--rui-Card--help__border-color),
-    background-color: var(--rui-Card--help__background-color),
-  ),
-  note: (
-    color: var(--rui-Card--note__color),
-    border-color: var(--rui-Card--note__border-color),
-    background-color: var(--rui-Card--note__background-color),
-  ),
-  light: (
-    color: var(--rui-Card--light__color),
-    border-color: var(--rui-Card--light__border-color),
-    background-color: var(--rui-Card--light__background-color),
-  ),
-  dark: (
-    color: var(--rui-Card--dark__color),
-    border-color: var(--rui-Card--dark__border-color),
-    background-color: var(--rui-Card--dark__background-color),
-  ),
+    primary: (
+        color: var(--rui-Card--primary__color),
+        border-color: var(--rui-Card--primary__border-color),
+        background-color: var(--rui-Card--primary__background-color),
+    ),
+    secondary: (
+        color: var(--rui-Card--secondary__color),
+        border-color: var(--rui-Card--secondary__border-color),
+        background-color: var(--rui-Card--secondary__background-color),
+    ),
+    success: (
+        color: var(--rui-Card--success__color),
+        border-color: var(--rui-Card--success__border-color),
+        background-color: var(--rui-Card--success__background-color),
+    ),
+    warning: (
+        color: var(--rui-Card--warning__color),
+        border-color: var(--rui-Card--warning__border-color),
+        background-color: var(--rui-Card--warning__background-color),
+    ),
+    danger: (
+        color: var(--rui-Card--danger__color),
+        border-color: var(--rui-Card--danger__border-color),
+        background-color: var(--rui-Card--danger__background-color),
+    ),
+    info: (
+        color: var(--rui-Card--info__color),
+        border-color: var(--rui-Card--info__border-color),
+        background-color: var(--rui-Card--info__background-color),
+    ),
+    help: (
+        color: var(--rui-Card--help__color),
+        border-color: var(--rui-Card--help__border-color),
+        background-color: var(--rui-Card--help__background-color),
+    ),
+    note: (
+        color: var(--rui-Card--note__color),
+        border-color: var(--rui-Card--note__border-color),
+        background-color: var(--rui-Card--note__background-color),
+    ),
+    light: (
+        color: var(--rui-Card--light__color),
+        border-color: var(--rui-Card--light__border-color),
+        background-color: var(--rui-Card--light__background-color),
+    ),
+    dark: (
+        color: var(--rui-Card--dark__color),
+        border-color: var(--rui-Card--dark__border-color),
+        background-color: var(--rui-Card--dark__background-color),
+    ),
 );

package/src/lib/components/Card/_tools.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'theme';
+@use "sass:map";
+@use "theme";
 
 @mixin color($color) {
-  $color-variant-properties: map.get(theme.$colors, $color);
+    $color-variant-properties: map.get(theme.$colors, $color);
 
-  --rui-local-color: #{map.get($color-variant-properties, color)};
-  --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
-  --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
+    --rui-local-color: #{map.get($color-variant-properties, color)};
+    --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
+    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
 }

package/src/lib/components/CheckboxField/CheckboxField.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
 import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './CheckboxField.scss';
@@ -26,19 +27,28 @@ export const CheckboxField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        context ? styles.isRootInFormLayout : '',
+        context && styles.isRootInFormLayout,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        labelPosition === 'before' && styles.hasRootLabelBefore,
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
       <div className={styles.field}>
+        <div
+          className={classNames(
+            styles.label,
+            !isLabelVisible && styles.isLabelHidden,
+          )}
+          id={id && `${id}__labelText`}
+        >
+          {label}
+        </div>
         <input
           {...transferProps(restProps)}
           checked={checked}
@@ -50,15 +60,6 @@ export const CheckboxField = ({
           type="checkbox"
           value={value}
         />
-        <div
-          className={[
-            styles.label,
-            isLabelVisible ? '' : styles.isLabelHidden,
-          ].join(' ')}
-          id={id && `${id}__labelText`}
-        >
-          {label}
-        </div>
       </div>
       {helpText && (
         <div

package/src/lib/components/CheckboxField/CheckboxField.scss

@@ -1,61 +1,61 @@
-@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/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";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include inline-field-layout.root();
-  @include inline-field-elements.min-tap-target($type: checkbox);
-  @include variants.visual(check);
+    @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();
+    @include foundation.label();
 }
 
 .field {
-  @include inline-field-layout.field();
+    @include inline-field-layout.field($type: checkbox);
 }
 
 .input {
-  @include inline-field-elements.check-input($type: checkbox);
+    @include inline-field-elements.check-input($type: checkbox);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .hasRootLabelBefore {
-  @include inline-field-layout.has-label-before();
+    @include inline-field-layout.has-label-before();
 }
 
 .isRootInFormLayout {
-  @include inline-field-layout.in-form-layout();
+    @include inline-field-layout.in-form-layout();
 }

package/src/lib/components/CheckboxField/README.mdx

@@ -44,13 +44,13 @@ See [API](#api) for all available options.
 - Use the CheckboxField when there are lists of options and the user may
   **select any number of choices,** including zero, one, or several. For
   selecting just a single option from the list, use either the
-  [Radio](/components/ui/radio) or [SelectField](/components/ui/select-field)
+  [Radio](/components/radio) or [SelectField](/components/select-field)
   component.
 
 - Use the CheckboxField for boolean (true/false) input **in forms that require
   to be confirmed** by a button to become active. To toggle things on or off
   with an immediate effect (without confirmation), use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - **Use positive wording for the checkbox label,** so that it's clear what will
   happen when the user turns on the checkbox. Avoid negations such as “Don't
@@ -185,7 +185,7 @@ Disabled state makes the input unavailable.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={CheckboxField} />

package/src/lib/components/FileInputField/FileInputField.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
 import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './FileInputField.scss';
@@ -26,25 +27,25 @@ export const FileInputField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
       <div
-        className={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}

package/src/lib/components/FileInputField/FileInputField.scss

@@ -1,67 +1,67 @@
-@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';
+@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";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include accessibility.focus-ring();
+    @include accessibility.focus-ring();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }

package/src/lib/components/FileInputField/README.mdx

@@ -191,7 +191,7 @@ It's possible to disable the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={FileInputField} />

package/src/lib/components/FormLayout/FormLayout.jsx

@@ -1,21 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 
-export const FormLayout = (props) => {
-  const {
-    autoWidth,
-    children,
-    fieldLayout,
-    id,
-    labelWidth,
-  } = props;
-
-  if (!children) {
+export const FormLayout = ({
+  autoWidth,
+  children,
+  fieldLayout,
+  id,
+  labelWidth,
+}) => {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -48,12 +48,12 @@ export const FormLayout = (props) => {
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
         fieldLayoutClass(fieldLayout),
-        autoWidth ? styles.isRootAutoWidth : '',
-        fieldLayout === 'horizontal' ? labelWidthClass(labelWidth) : '',
-      ].join(' ')}
+        autoWidth && styles.isRootAutoWidth,
+        fieldLayout === 'horizontal' && labelWidthClass(labelWidth),
+      )}
       {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
     >
       <FormLayoutContext.Provider
@@ -88,6 +88,8 @@ FormLayout.propTypes = {
    * * `TextArea`
    * * `TextField`
    * * `Toggle`
+   *
+   * If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**

package/src/lib/components/FormLayout/FormLayout.scss

@@ -13,46 +13,46 @@
 //    (a global default which can be customised per use).
 //    https://github.com/react-ui-org/react-ui/issues/232
 
-@use '../../styles/settings/forms';
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/settings/forms";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .root {
-  --rui-local-field-width: 1fr;
+    --rui-local-field-width: 1fr;
 
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 }
 
 .rootFieldLayoutVertical,
 .rootFieldLayoutHorizontal {
-  display: grid;
-  grid-template-columns: var(--rui-local-field-width);
-  grid-row-gap: theme.$row-gap;
+    display: grid;
+    grid-template-columns: var(--rui-local-field-width);
+    grid-row-gap: theme.$row-gap;
 }
 
 .rootFieldLayoutHorizontal {
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
-  }
+    @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.
+    --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
 }
 
 .hasRootLabelWidthAuto {
-  --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
 }
 
 .hasRootLabelWidthLimited {
-  --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
 }
 
 .hasRootLabelWidthCustom {
-  --rui-local-label-width: var(--rui-custom-label-width); // 3.
+    --rui-local-label-width: var(--rui-custom-label-width); // 3.
 }
 
 .isRootAutoWidth {
-  --rui-local-field-width: min-content;
+    --rui-local-field-width: min-content;
 }

package/src/lib/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
 import { withProviderContext } from '../../provider';
-import styles from './FormLayoutCustomField.scss';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
+import styles from './FormLayoutCustomField.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {
@@ -46,18 +48,22 @@ export const FormLayoutCustomField = ({
 }) => {
   const context = useContext(FormLayoutContext);
 
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
+        fullWidth && styles.isRootFullWidth,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(innerFieldSize, styles),
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
     >
       {renderLabel(id, label, labelForId)}
       <div
@@ -84,7 +90,7 @@ FormLayoutCustomField.defaultProps = {
 
 FormLayoutCustomField.propTypes = {
   /**
-   * Custom HTML or React component(s).
+   * Custom HTML or React component(s). If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**