@react-ui-org/react-ui 0.51.0 → 0.52.0

package/src/lib/components/Radio/Radio.jsx

@@ -25,7 +25,8 @@ export const Radio = ({
   const context = useContext(FormLayoutContext);
 
   return (
-    <div
+    <fieldset
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
@@ -36,53 +37,59 @@ export const Radio = ({
         required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
       )}
+      disabled={disabled}
       id={id}
     >
+      <legend
+        className={styles.legend}
+        id={id && `${id}__label`}
+      >
+        {label}
+      </legend>
       <div
+        aria-hidden
         className={classNames(
           styles.label,
           !isLabelVisible && styles.isLabelHidden,
         )}
-        id={id && `${id}__labelText`}
+        id={id && `${id}__displayLabel`}
       >
         {label}
       </div>
       <div className={styles.field}>
-        <ul className={styles.list}>
+        <div className={styles.options}>
           {
             options.map((option) => {
               const key = option.key ?? option.value;
               return (
-                <li key={key}>
-                  <label
-                    className={styles.option}
-                    htmlFor={id && `${id}__item__${key}`}
-                    id={id && `${id}__item__${key}__label`}
+                <label
+                  className={styles.option}
+                  htmlFor={id && `${id}__item__${key}`}
+                  id={id && `${id}__item__${key}__label`}
+                  key={key}
+                >
+                  <input
+                    className={styles.input}
+                    checked={restProps.onChange
+                      ? (value === option.value) || false
+                      : undefined}
+                    disabled={disabled || option.disabled}
+                    id={id && `${id}__item__${key}`}
+                    name={id}
+                    type="radio"
+                    value={option.value}
+                  />
+                  <span
+                    className={styles.optionLabel}
+                    id={id && `${id}__item__${key}__labelText`}
                   >
-                    <input
-                      {...transferProps(restProps)}
-                      className={styles.input}
-                      checked={restProps.onChange
-                        ? (value === option.value) || false
-                        : undefined}
-                      disabled={disabled || option.disabled}
-                      id={id && `${id}__item__${key}`}
-                      name={id}
-                      type="radio"
-                      value={option.value}
-                    />
-                    <span
-                      className={styles.optionLabel}
-                      id={id && `${id}__item__${key}__labelText`}
-                    >
-                      { option.label }
-                    </span>
-                  </label>
-                </li>
+                    { option.label }
+                  </span>
+                </label>
               );
             })
           }
-        </ul>
+        </div>
         {helpText && (
           <div
             className={styles.helpText}
@@ -100,7 +107,7 @@ export const Radio = ({
           </div>
         )}
       </div>
-    </div>
+    </fieldset>
   );
 };
 
@@ -129,7 +136,8 @@ Radio.propTypes = {
    * ID of the root HTML element.
    *
    * Also serves as base for ids of nested elements:
-   * * `<ID>__labelText`
+   * * `<ID>__label`
+   * * `<ID>__displayLabel`
    * * `<ID>__helpText`
    * * `<ID>__validationText`
    *

package/src/lib/components/Radio/Radio.scss

@@ -1,3 +1,6 @@
+// 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";
@@ -11,15 +14,22 @@
 // Foundation
 .root {
     @include foundation.root();
+    @include foundation.fieldset();
     @include variants.visual(check);
 }
 
+// 1.
+.legend {
+    @include accessibility.hide-text();
+}
+
+// 1.
 .label,
 .optionLabel {
     @include foundation.label();
 }
 
-.list {
+.options {
     @include reset.list();
 }
 

package/src/lib/components/SelectField/SelectField.jsx

@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
 import styles from './SelectField.scss';
 
@@ -28,20 +29,25 @@ export const SelectField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const context = useContext(FormLayoutContext);
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
 
   return (
     <label
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
         required && styles.isRootRequired,
-        getRootSizeClassName(size, styles),
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
         variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
@@ -51,7 +57,7 @@ export const SelectField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -62,7 +68,7 @@ export const SelectField = React.forwardRef((props, ref) => {
           <select
             {...transferProps(restProps)}
             className={styles.input}
-            disabled={disabled}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
             ref={ref}
             required={required}
@@ -110,7 +116,7 @@ export const SelectField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={id && `${id}__validationText`}
@@ -169,6 +175,8 @@ SelectField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -224,6 +232,8 @@ SelectField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -232,6 +242,9 @@ SelectField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

package/src/lib/components/SelectField/SelectField.scss

@@ -102,3 +102,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

package/src/lib/components/TextField/TextField.jsx

@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
@@ -29,7 +30,8 @@ export const TextField = React.forwardRef((props, ref) => {
     variant,
     ...restProps
   } = props;
-  const context = useContext(FormLayoutContext);
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
@@ -39,13 +41,17 @@ export const TextField = React.forwardRef((props, ref) => {
         fullWidth && styles.isRootFullWidth,
         hasSmallInput && styles.hasRootSmallInput,
         inputSize && styles.hasRootCustomInputSize,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
         required && styles.isRootRequired,
-        getRootSizeClassName(size, styles),
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
         variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
@@ -56,7 +62,7 @@ export const TextField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -67,7 +73,7 @@ export const TextField = React.forwardRef((props, ref) => {
           <input
             {...transferProps(restProps)}
             className={styles.input}
-            disabled={disabled}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
             ref={ref}
             required={required}
@@ -86,7 +92,7 @@ export const TextField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={id && `${id}__validationText`}
@@ -143,6 +149,8 @@ TextField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -162,6 +170,8 @@ TextField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -174,6 +184,9 @@ TextField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

package/src/lib/components/TextField/TextField.scss

@@ -100,3 +100,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

package/src/lib/index.js

@@ -18,6 +18,7 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
+export { InputGroup } from './components/InputGroup';
 export {
   Modal,
   ModalBody,

package/src/lib/styles/theme/_borders.scss

@@ -1,2 +1,3 @@
 $width: var(--rui-dimension-border-width-1);
-$radius: var(--rui-dimension-radius-1);
+$radius-1: var(--rui-dimension-radius-1);
+$radius-2: var(--rui-dimension-radius-2);

package/src/lib/styles/tools/form-fields/_box-field-elements.scss

@@ -3,6 +3,7 @@
 //    result width across browsers.
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
+// 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -93,8 +94,8 @@
     align-items: center;
     justify-content: center;
     width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
-    border-top-right-radius: theme.$box-border-radius;
-    border-bottom-right-radius: theme.$box-border-radius;
+    border-start-end-radius: theme.$box-border-radius;
+    border-end-end-radius: theme.$box-border-radius;
     pointer-events: none;
 }
 
@@ -122,3 +123,19 @@
         transform: scaleX(1);
     }
 }
+
+@mixin in-group-layout() {
+    .inputContainer {
+        display: block; // 5.
+    }
+
+    &:not(:first-child) .input {
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
+    }
+
+    &:not(:last-child) .input {
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
+    }
+}

package/src/lib/styles/tools/form-fields/_box-field-sizes.scss

@@ -1,19 +1,22 @@
 @use "sass:map";
 @use "../../theme/form-fields" as theme;
 
-@mixin size($size, $is-multiline: false) {
+@mixin size($size, $has-input: true, $is-multiline: false) {
     $size-properties: map.get(theme.$box-sizes, $size);
 
     --rui-local-padding-y: #{map.get($size-properties, padding-y)};
     --rui-local-padding-x: #{map.get($size-properties, padding-x)};
-    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-    .input {
-        @if $is-multiline {
-            height: auto;
-            min-height: map.get($size-properties, height);
-        } @else {
-            --rui-local-height: #{map.get($size-properties, height)};
+    @if $has-input {
+        --rui-local-font-size: #{map.get($size-properties, font-size)};
+
+        .input {
+            @if $is-multiline {
+                height: auto;
+                min-height: map.get($size-properties, height);
+            } @else {
+                --rui-local-height: #{map.get($size-properties, height)};
+            }
         }
     }
 }

package/src/lib/styles/tools/form-fields/_foundation.scss

@@ -1,4 +1,5 @@
 // 1. Don't let text alignment be affected by a parent.
+// 2. Override foundation reset.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -7,6 +8,12 @@
     text-align: left; // 1.
 }
 
+@mixin fieldset() {
+    &:not(:last-child) {
+        margin-bottom: 0; // 2.
+    }
+}
+
 @mixin label() {
     color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
 }

package/src/lib/theme.scss

@@ -30,7 +30,8 @@
     --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
 
     // Radii
-    --rui-dimension-radius-1: 0.25rem;
+    --rui-dimension-radius-1: 0.125rem;
+    --rui-dimension-radius-2: 0.25rem;
 
     // Spacing
     --rui-dimension-space-0: 0;
@@ -259,7 +260,7 @@
     --rui-Alert__padding: var(--rui-dimension-space-3);
     --rui-Alert__font-weight: var(--rui-font-weight-base);
     --rui-Alert__border-width: var(--rui-dimension-border-width-1);
-    --rui-Alert__border-radius: var(--rui-dimension-radius-1);
+    --rui-Alert__border-radius: var(--rui-dimension-radius-2);
     --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
     --rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
 
@@ -312,7 +313,7 @@
     --rui-Button__letter-spacing: 0;
     --rui-Button__text-transform: none;
     --rui-Button__border-width: var(--rui-dimension-border-width-1);
-    --rui-Button__border-radius: var(--rui-dimension-radius-1);
+    --rui-Button__border-radius: var(--rui-dimension-radius-2);
     --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity);
     --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed);
     --rui-Button--feedback__opacity: 1;
@@ -711,26 +712,30 @@
     // ButtonGroup
     // ===========
 
+    --rui-ButtonGroup__inner-border-radius: 0;
+
     // ButtonGroup: filled buttons
     --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width));
     --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
     --rui-ButtonGroup--filled__separator__color: currentColor;
 
+    // ButtonGroup: outline buttons
+    --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
+    --rui-ButtonGroup--outline__separator__width: 0;
+    --rui-ButtonGroup--outline__separator__color: transparent;
+
     // ButtonGroup: flat buttons
     --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
     --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
     --rui-ButtonGroup--flat__separator__color: currentColor;
 
-    // ButtonGroup: outline buttons
-    --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
-
     //
     // Card
     // ====
 
     --rui-Card__padding: var(--rui-dimension-space-4);
     --rui-Card__border-width: var(--rui-dimension-border-width-1);
-    --rui-Card__border-radius: var(--rui-dimension-radius-1);
+    --rui-Card__border-radius: var(--rui-dimension-radius-2);
     --rui-Card--dense__padding: var(--rui-dimension-space-2);
     --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
     --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
@@ -834,7 +839,7 @@
 
     // Form fields: box fields
     --rui-FormField--box__border-width: var(--rui-dimension-border-width-1);
-    --rui-FormField--box__border-radius: var(--rui-dimension-radius-1);
+    --rui-FormField--box__border-radius: var(--rui-dimension-radius-2);
     --rui-FormField--box__input__width: auto; // 1.
     --rui-FormField--box__input__min-width: 240px; // 1.
     --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary);
@@ -910,6 +915,13 @@
     --rui-FormLayout--horizontal__label__width--auto: auto;
     --rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
 
+    //
+    // InputGroup
+    // =======
+
+    --rui-InputGroup__gap: var(--rui-dimension-space-1);
+    --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1);
+
     //
     // Modal
     // =====
@@ -941,7 +953,7 @@
     --rui-Paper__padding: var(--rui-dimension-space-4);
     --rui-Paper__border-width: 0;
     --rui-Paper__border-color: transparent;
-    --rui-Paper__border-radius: var(--rui-dimension-radius-1);
+    --rui-Paper__border-radius: var(--rui-dimension-radius-2);
     --rui-Paper__background-color: var(--rui-color-background-layer-1);
     --rui-Paper--muted__background-color: var(--rui-color-background-disabled);
     --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity);
@@ -955,7 +967,7 @@
     --rui-Popover__padding: var(--rui-dimension-space-3);
     --rui-Popover__border-width: 0;
     --rui-Popover__border-color: transparent;
-    --rui-Popover__border-radius: var(--rui-dimension-radius-1);
+    --rui-Popover__border-radius: var(--rui-dimension-radius-2);
     --rui-Popover__color: var(--rui-color-text-primary);
     --rui-Popover__background-color: var(--rui-color-background-layer-2);
     --rui-Popover__box-shadow: var(--rui-shadow-layer-2);
@@ -983,7 +995,7 @@
         var(--rui-color-border-secondary)
         transparent
         var(--rui-color-border-secondary);
-    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-1);
+    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-2);
     --rui-Tabs__item__background-color: var(--rui-color-background-layer-1);
     --rui-Tabs__item__box-shadow: none;
     --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2);