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

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

@@ -43,6 +43,13 @@ See [API](#api) for all available options.
 - Use button group to group **related actions** that a user can take. Buttons
   should not be grouped just to save space on the screen.
 
+- **Mixing multiple button priorities** and some other properties within a
+  button group is [not allowed](#shared-properties). The priority can only be
+  set for all buttons in the group at once.
+
+- In most use cases, **secondary action color** is probably the best option for
+  buttons in a group as it works good with the colors of the selected state.
+
 - Use **short labels or icons** so the buttons can fit small screens.
 
 - For toggling between on/off states, use rather the
@@ -52,17 +59,28 @@ 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.
 
 ### Shared Properties
 
 You can set the following properties directly on ButtonGroup to be shared for
-all buttons inside the group: size, priority, disabled state, and block width.
+all buttons inside the group:
+
+- `size`,
+- `priority`,
+- `disabled` state,
+- and `block` width.
+
 These properties are then passed over to individual buttons. At the same time,
-they **cannot be overridden** on the buttons' level. While technically possible,
-from the design point of view it's undesirable to group buttons of totally
-different types or sizes.
+they **cannot be overridden** on the buttons' level. While (in theory)
+technically possible, from the design point of view it's undesirable to group
+buttons of totally different types or sizes.
 
 ## Priorities
 
@@ -73,6 +91,9 @@ priorities of the [Button](/components/button) component:
 2. outline
 3. flat
 
+👉 To avoid undesired combinations, the visual priority of the button group
+**cannot be overridden** on the Button level.
+
 ### Filled
 
 The default, high-emphasis priority should be used for primary actions of your
@@ -80,9 +101,9 @@ app.
 
 <Playground>
   <ButtonGroup>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -93,9 +114,9 @@ in your app.
 
 <Playground>
   <ButtonGroup priority="outline">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -106,9 +127,9 @@ the content.
 
 <Playground>
   <ButtonGroup priority="flat">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -119,19 +140,19 @@ medium, and large.
 
 <Playground>
   <ButtonGroup size="small">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup size="large">
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -139,9 +160,9 @@ Block button groups span the full width of a parent:
 
 <Playground>
   <ButtonGroup block>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -153,19 +174,19 @@ Disables all buttons inside the group.
 
 <Playground>
   <ButtonGroup disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline" disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat" disabled>
-    <Button label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="secondary" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -176,42 +197,42 @@ state of individual buttons can be indicated by showing an icon.
 
 <Playground>
   <ButtonGroup>
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline">
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat">
-    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
-### Active State
+### Selected State
 
-To highlight the selected option, the active state can be achieved by setting
-a different button variant for the active item.
+To highlight the selected option, just apply the selected color variant for
+the desired item.
 
 <Playground>
   <ButtonGroup>
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="outline">
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
   <ButtonGroup priority="flat">
-    <Button color="dark" label="Week" />
-    <Button label="Month" />
-    <Button label="Year" />
+    <Button color="selected" label="Week" />
+    <Button color="secondary" label="Month" />
+    <Button color="secondary" label="Year" />
   </ButtonGroup>
 </Playground>
 
@@ -224,9 +245,9 @@ and communicating the state of individual options.
   <>
     <span id="period-label">Period:</span>
     <ButtonGroup aria-labelledby="period-label">
-      <Button label="Week" aria-pressed color="dark" />
-      <Button label="Month" aria-pressed={false} />
-      <Button label="Year" aria-pressed={false} />
+      <Button color="selected" label="Week" aria-pressed />
+      <Button color="secondary" label="Month" aria-pressed={false} />
+      <Button color="secondary" label="Year" aria-pressed={false} />
     </ButtonGroup>
   </>
 </Playground>
@@ -250,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/Card/Card.jsx

@@ -46,9 +46,7 @@ Card.propTypes = {
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the card.
    */
-  color: PropTypes.oneOf(
-    ['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
-  ),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**
    * Make the card more compact.
    */

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

@@ -1,6 +1,5 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
-@use "../../styles/theme/colors";
 @use "theme";
 @use "tools";
 
@@ -33,14 +32,6 @@
     box-shadow: theme.$raised-box-shadow;
 }
 
-.isRootColorPrimary {
-    @include tools.color(primary);
-}
-
-.isRootColorSecondary {
-    @include tools.color(secondary);
-}
-
 .isRootColorSuccess {
     @include tools.color(success);
 }

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

@@ -164,22 +164,6 @@ Card supports all
 of your app.
 
 <Playground>
-  <Card color="primary">
-    <CardBody>
-      Hello! I&apos;m primary variant of card.
-    </CardBody>
-    <CardFooter>
-      <Button label="Read more" priority="outline" />
-    </CardFooter>
-  </Card>
-  <Card color="secondary">
-    <CardBody>
-      Hello! I&apos;m secondary variant of card.
-    </CardBody>
-    <CardFooter>
-      <Button label="Read more" priority="outline" color="secondary" />
-    </CardFooter>
-  </Card>
   <Card color="success">
     <CardBody>
       Hello! I&apos;m success variant of card.

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

@@ -9,16 +9,6 @@ $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),

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

@@ -27,6 +27,7 @@ import {
   ToolbarItem,
   FormLayout,
   FormLayoutCustomField,
+  InputGroup,
 } from '../..'
 
 ## Basic Usage
@@ -144,24 +145,31 @@ with CSS custom properties.
             <span id="label-width-options-label">Label width:</span>
           </ToolbarItem>
           <ToolbarItem>
-            <ButtonGroup aria-labelledby="label-width-options-label">
+            <ButtonGroup
+              aria-labelledby="label-width-options-label"
+              priority="outline"
+            >
               <Button
-                color={labelWidth === 'default' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'default'}
+                color={labelWidth === 'default' ? 'selected' : 'secondary'}
                 label="default"
                 onClick={() => setLabelWidth('default')}
               />
               <Button
-                color={labelWidth === 'auto' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'auto'}
+                color={labelWidth === 'auto' ? 'selected' : 'secondary'}
                 label="auto"
                 onClick={() => setLabelWidth('auto')}
               />
               <Button
-                color={labelWidth === 'limited' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'limited'}
+                color={labelWidth === 'limited' ? 'selected' : 'secondary'}
                 label="limited"
                 onClick={() => setLabelWidth('limited')}
               />
               <Button
-                color={labelWidth === 'custom' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'custom'}
+                color={labelWidth === 'custom' ? 'selected' : 'secondary'}
                 label="custom"
                 onClick={() => setLabelWidth('custom')}
               />
@@ -351,14 +359,16 @@ This is a demo of all components supported by FormLayout.
       <div>
         <Toolbar>
           <ToolbarItem>
-            <ButtonGroup>
+            <ButtonGroup priority="outline">
               <Button
-                color={fieldLayout === 'vertical' ? 'dark' : 'primary'}
+                aria-pressed={fieldLayout === 'vertical'}
+                color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
                 label="Vertical layout"
                 onClick={() => setFieldLayout('vertical')}
               />
               <Button
-                color={fieldLayout === 'horizontal' ? 'dark' : 'primary'}
+                aria-pressed={fieldLayout === 'horizontal'}
+                color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
                 label="Horizontal layout"
                 onClick={() => setFieldLayout('horizontal')}
               />
@@ -432,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/Grid/_helpers/generateResponsiveCustomProperties.js

@@ -1,6 +1,6 @@
 const prepareValueByType = (value, type) => {
   if (type === 'spacing') {
-    return `var(--rui-spacing-${value})`;
+    return `var(--rui-dimension-space-${value})`;
   }
 
   return value;

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;