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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "keywords": [
     "react",
     "ui",

package/src/lib/components/Button/Button.jsx

@@ -7,8 +7,9 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { ButtonGroupContext } from '../ButtonGroup';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
+import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import getRootPriorityClassName from './helpers/getRootPriorityClassName';
 import styles from './Button.scss';
 
 export const Button = React.forwardRef((props, ref) => {
@@ -28,8 +29,14 @@ export const Button = React.forwardRef((props, ref) => {
     color,
     ...restProps
   } = props;
+  const buttonGroupContext = useContext(ButtonGroupContext);
+  const inputGroupContext = useContext(InputGroupContext);
 
-  const context = useContext(ButtonGroupContext);
+  if (buttonGroupContext && inputGroupContext) {
+    throw new Error('Button cannot be placed both in `ButtonGroup` and `InputGroup`.');
+  }
+
+  const primaryContext = buttonGroupContext ?? inputGroupContext;
 
   return (
     /* No worries, `type` is always assigned correctly through props. */
@@ -39,20 +46,21 @@ export const Button = React.forwardRef((props, ref) => {
       className={classNames(
         styles.root,
         getRootPriorityClassName(
-          resolveContextOrProp(context && context.priority, priority),
+          resolveContextOrProp(buttonGroupContext && buttonGroupContext.priority, priority),
           styles,
         ),
         getRootColorClassName(color, styles),
         getRootSizeClassName(
-          resolveContextOrProp(context && context.size, size),
+          resolveContextOrProp(primaryContext && primaryContext.size, size),
           styles,
         ),
         getRootLabelVisibilityClassName(labelVisibility, styles),
-        resolveContextOrProp(context && context.block, block) && styles.isRootBlock,
-        context && styles.isRootGrouped,
+        resolveContextOrProp(buttonGroupContext && buttonGroupContext.block, block) && styles.isRootBlock,
+        buttonGroupContext && styles.isRootInButtonGroup,
+        inputGroupContext && styles.isRootInInputGroup,
         feedbackIcon && styles.hasRootFeedback,
       )}
-      disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
+      disabled={resolveContextOrProp(primaryContext && primaryContext.disabled, disabled) || !!feedbackIcon}
       id={id}
       ref={ref}
     >
@@ -171,8 +179,8 @@ Button.propTypes = {
   /**
    * Size of the button.
    *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
+   * Ignored if the component is rendered within `ButtonGroup` or `InputGroup` component as the value is inherited in
+   * such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**

package/src/lib/components/Button/_base.scss

@@ -1,3 +1,6 @@
+// 1. ButtonGroup gap is implemented using the `margin` property so the buttons can overlap and reduce duplicate
+//    borders.
+
 @use "sass:map";
 @use "../../styles/tools/breakpoint";
 @use "settings";
@@ -76,28 +79,34 @@
     color: transparent;
 }
 
-.isRootGrouped {
+.isRootInButtonGroup,
+.isRootInInputGroup {
     z-index: map.get(settings.$group-z-indexes, button);
 
     &:not(:first-child) {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
     &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
     }
+}
 
-    &:focus,
-    &:not(:disabled):hover {
-        z-index: map.get(settings.$group-z-indexes, button-hover);
-    }
+.isRootInButtonGroup:not(:first-child) {
+    margin-inline-start: var(--rui-local-gap); // 1.
+}
+
+.isRootInButtonGroup:focus,
+.isRootInButtonGroup:not(:disabled):hover {
+    z-index: map.get(settings.$group-z-indexes, button-hover);
 }
 
-.isRootGrouped .startCorner,
-.isRootGrouped .endCorner {
+.isRootInButtonGroup .startCorner,
+.isRootInInputGroup .startCorner,
+.isRootInButtonGroup .endCorner,
+.isRootInInputGroup .endCorner {
     z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 

package/src/lib/components/Button/_priorities.scss

@@ -135,8 +135,7 @@
     @include tools.button-color(flat, dark);
 }
 
-.isRootPriorityFilled.isRootGrouped:not(:first-child)::before,
-.isRootPriorityFlat.isRootGrouped:not(:first-child)::before {
+.isRootInButtonGroup:not(:first-child)::before {
     content: "";
     position: absolute;
     top: calc(-1 * #{theme.$border-width});
@@ -146,19 +145,3 @@
     border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
     transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
-
-.isRootPriorityFilled.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-filled-gap};
-    --rui-local-separator-width: #{theme.$group-filled-separator-width};
-    --rui-local-separator-color: #{theme.$group-filled-separator-color};
-}
-
-.isRootPriorityFlat.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-flat-gap};
-    --rui-local-separator-width: #{theme.$group-flat-separator-width};
-    --rui-local-separator-color: #{theme.$group-flat-separator-color};
-}
-
-.isRootPriorityOutline.isRootGrouped:not(:first-child) {
-    --rui-local-gap: #{theme.$group-outline-gap};
-}

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

@@ -12,16 +12,6 @@ $disabled-cursor: var(--rui-Button--disabled__cursor);
 $feedback-opacity: var(--rui-Button--feedback__opacity);
 $feedback-cursor: var(--rui-Button--feedback__cursor);
 
-$group-filled-gap: var(--rui-ButtonGroup--filled__gap);
-$group-filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
-$group-filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
-
-$group-flat-gap: var(--rui-ButtonGroup--flat__gap);
-$group-flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
-$group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
-
-$group-outline-gap: var(--rui-ButtonGroup--outline__gap);
-
 $sizes: (
     small: (
         height: var(--rui-Button--small__height),

package/src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 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';
@@ -20,13 +21,14 @@ export const ButtonGroup = ({
   }
 
   return (
-    <div
+    <fieldset
       {...transferProps(restProps)}
       className={classNames(
         styles.root,
         block && styles.isRootBlock,
+        getRootPriorityClassName(priority, styles),
       )}
-      role="group"
+      disabled={disabled}
     >
       <ButtonGroupContext.Provider
         value={{
@@ -38,7 +40,7 @@ export const ButtonGroup = ({
       >
         {children}
       </ButtonGroupContext.Provider>
-    </div>
+    </fieldset>
   );
 };
 

package/src/lib/components/ButtonGroup/ButtonGroup.scss

@@ -1,5 +1,30 @@
+// 1. ButtonGroup gap is implemented using the `margin` property on buttons so the buttons can overlap and reduce
+//    duplicate borders.
+
+@use "theme";
+
 .root {
-    display: inline-flex;
+    --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 {

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

@@ -59,6 +59,11 @@ See [API](#api) for all available options.
   the [SelectField](/components/select-field) or
   [Radio](/components/radio) components.
 
+- In the background, ButtonGroup uses the [`fieldset`][fieldset] element. Not
+  only it improves the [accessibility] of the group, it also allows you to make
+  use of its built-in features like disabling all nested inputs or pairing the
+  group with a form outside. Consult [the MDN docs][fieldset] to learn more.
+
 - Be careful with using `startCorner` and `endCorner` options for grouped
   buttons. Overflowing elements may cause undesired interaction problems.
 
@@ -266,13 +271,18 @@ its accessibility.
 
 | Custom Property                                                    | Description                                    |
 |--------------------------------------------------------------------|------------------------------------------------|
+| `--rui-ButtonGroup__inner-border-radius`                           | Inner border radius of buttons                 |
 | `--rui-ButtonGroup--filled__gap`                                   | Gap between `filled` buttons                   |
 | `--rui-ButtonGroup--filled__separator__width`                      | Separator width for `filled` buttons           |
 | `--rui-ButtonGroup--filled__separator__color`                      | Separator color for `filled` buttons           |
+| `--rui-ButtonGroup--outline__gap`                                  | Gap between `outline` buttons                  |
+| `--rui-ButtonGroup--outline__separator__width`                     | Separator width for `outline` buttons          |
+| `--rui-ButtonGroup--outline__separator__color`                     | Separator color for `outline` buttons          |
 | `--rui-ButtonGroup--flat__gap`                                     | Gap between `flat` buttons                     |
 | `--rui-ButtonGroup--flat__separator__width`                        | Separator width for `flat` buttons             |
 | `--rui-ButtonGroup--flat__separator__color`                        | Separator color for `flat` buttons             |
-| `--rui-ButtonGroup--outline__gap`                                  | Gap between `outline` 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

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

@@ -0,0 +1,13 @@
+$inner-border-radius: var(--rui-ButtonGroup__inner-border-radius);
+
+$filled-gap: var(--rui-ButtonGroup--filled__gap);
+$filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
+$filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
+
+$outline-gap: var(--rui-ButtonGroup--outline__gap);
+$outline-separator-width: var(--rui-ButtonGroup--outline__separator__width);
+$outline-separator-color: var(--rui-ButtonGroup--outline__separator__color);
+
+$flat-gap: var(--rui-ButtonGroup--flat__gap);
+$flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
+$flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);

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

@@ -27,6 +27,7 @@ import {
   ToolbarItem,
   FormLayout,
   FormLayoutCustomField,
+  InputGroup,
 } from '../..'
 
 ## Basic Usage
@@ -441,6 +442,10 @@ This is a demo of all components supported by FormLayout.
             options={options}
             value={fruit}
           />
+          <InputGroup label="Promo code">
+            <TextField label="Code" />
+            <Button label="Apply" color="secondary" priority="outline" />
+          </InputGroup>
         </FormLayout>
       </div>
     )

package/src/lib/components/InputGroup/InputGroup.jsx

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { Text } from '../Text';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
+import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from './InputGroupContext';
+import styles from './InputGroup.scss';
+
+export const InputGroup = ({
+  children,
+  disabled,
+  id,
+  isLabelVisible,
+  label,
+  layout,
+  size,
+  validationTexts,
+  ...restProps
+}) => {
+  const formLayoutContext = useContext(FormLayoutContext);
+
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  const validationState = children.reduce(
+    (state, child) => {
+      if (state === 'invalid' || (state === 'warning' && child.props.validationState === 'valid')) {
+        return state;
+      }
+      return child.props.validationState ?? state;
+    },
+    null,
+  );
+
+  return (
+    <fieldset
+      {...transferProps(restProps)}
+      id={id}
+      className={classNames(
+        styles.root,
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
+        disabled && styles.isRootDisabled,
+        getRootSizeClassName(size, styles),
+        getRootValidationStateClassName(validationState, styles),
+      )}
+      disabled={disabled}
+    >
+      <legend
+        className={styles.legend}
+        id={id && `${id}__label`}
+      >
+        {label}
+      </legend>
+      <div
+        aria-hidden
+        className={classNames(
+          styles.label,
+          !isLabelVisible && styles.isLabelHidden,
+        )}
+        id={id && `${id}__displayLabel`}
+      >
+        {label}
+      </div>
+      <div className={styles.field}>
+        <div
+          className={styles.inputGroup}
+          id={id && `${id}__group`}
+        >
+          <InputGroupContext.Provider
+            value={{
+              disabled,
+              layout,
+              size,
+            }}
+          >
+            {children}
+          </InputGroupContext.Provider>
+        </div>
+        {validationTexts && (
+          <ul
+            className={styles.validationText}
+            id={id && `${id}__validationTexts`}
+          >
+            {validationTexts.map((validationText) => (
+              <li key={validationText}>
+                <Text blockLevel>
+                  {validationText}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </fieldset>
+  );
+};
+
+InputGroup.defaultProps = {
+  children: null,
+  disabled: false,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  size: 'medium',
+  validationTexts: null,
+};
+
+InputGroup.propTypes = {
+  /**
+   * Supported elements to be grouped:
+   * * `Button`
+   * * `SelectField`
+   * * `TextField`
+   *
+   * If none are provided nothing is rendered.
+   */
+  children: PropTypes.node,
+  /**
+   * If `true`, the whole input group with all nested inputs and buttons will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__label`
+   * * `<ID>__displayLabel`
+   * * `<ID>__group`
+   * * `<ID>__validationTexts`
+   */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Input group label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Layout of the group.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
+   */
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Size of the `children` elements.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * An array of validation messages to be displayed.
+   */
+  validationTexts: PropTypes.node,
+};
+
+export const InputGroupWithGlobalProps = withGlobalProps(InputGroup, 'InputGroup');
+
+export default InputGroupWithGlobalProps;

package/src/lib/components/InputGroup/InputGroup.scss

@@ -0,0 +1,92 @@
+// 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";
+
+.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();
+}
+
+// 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();
+}
+
+.isRootLayoutVertical .field,
+.isRootLayoutHorizontal .field {
+    max-width: none; // 3.
+}
+
+.isRootLayoutHorizontal {
+    @include box-field-layout.horizontal();
+}
+
+.isRootInFormLayout {
+    @include box-field-layout.in-form-layout();
+}
+
+// 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/lib/components/InputGroup/InputGroupContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const InputGroupContext = React.createContext(null);