@react-ui-org/react-ui 0.55.1 → 0.57.0

package/src/components/Button/Button.module.scss

@@ -1,2 +1,183 @@
-@use "base";
-@use "priorities";
+// 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 "../../styles/tools/collections";
+@use "settings";
+@use "theme";
+@use "tools";
+
+@layer components.button {
+    .root {
+        @include tools.button();
+    }
+
+    .label {
+        display: block;
+    }
+
+    .beforeLabel,
+    .afterLabel,
+    .startCorner,
+    .endCorner,
+    .feedbackIcon {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+    }
+
+    .startCorner,
+    .endCorner {
+        position: absolute;
+        top: -0.35rem;
+        z-index: 2;
+    }
+
+    .startCorner {
+        left: 0;
+        margin-left: -0.35rem;
+    }
+
+    .endCorner {
+        right: 0;
+        margin-right: -0.35rem;
+    }
+
+    .feedbackIcon {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        align-items: center;
+    }
+
+    .isRootSizeSmall {
+        @include tools.button-size(small);
+    }
+
+    .isRootSizeMedium {
+        @include tools.button-size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include tools.button-size(large);
+    }
+
+    .isRootBlock {
+        width: 100%;
+    }
+
+    .hasRootFeedback:disabled {
+        opacity: theme.$feedback-opacity;
+        cursor: theme.$feedback-cursor;
+    }
+
+    .hasRootFeedback .label,
+    .hasRootFeedback .beforeLabel,
+    .hasRootFeedback .afterLabel {
+        color: transparent;
+    }
+
+    .isRootInButtonGroup,
+    .isRootInInputGroup {
+        z-index: map.get(settings.$group-z-indexes, button);
+
+        &:not(:first-child) {
+            border-start-start-radius: var(--rui-local-inner-border-radius);
+            border-end-start-radius: var(--rui-local-inner-border-radius);
+        }
+
+        &:not(:last-child) {
+            border-start-end-radius: var(--rui-local-inner-border-radius);
+            border-end-end-radius: var(--rui-local-inner-border-radius);
+        }
+    }
+
+    .isRootInButtonGroup:not(:first-child) {
+        margin-inline-start: var(--rui-local-gap); // 1.
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: calc(-1 * #{theme.$border-width});
+            bottom: calc(-1 * #{theme.$border-width});
+            left: calc(-1 * #{theme.$border-width});
+            z-index: map.get(settings.$group-z-indexes, separator);
+            border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
+            transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
+        }
+    }
+
+    .isRootInButtonGroup:focus,
+    .isRootInButtonGroup:not(:disabled):hover {
+        z-index: map.get(settings.$group-z-indexes, button-hover);
+    }
+
+    .isRootInButtonGroup .startCorner,
+    .isRootInInputGroup .startCorner,
+    .isRootInButtonGroup .endCorner,
+    .isRootInInputGroup .endCorner {
+        z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
+    }
+
+    .hasLabelHidden,
+    .hasLabelVisibleSm,
+    .hasLabelVisibleMd,
+    .hasLabelVisibleLg,
+    .hasLabelVisibleXl,
+    .hasLabelVisibleX2l,
+    .hasLabelVisibleX3l {
+        @include tools.hide-label();
+    }
+
+    .hasLabelVisibleSm {
+        @include breakpoint.up(sm) {
+            @include tools.show-label();
+        }
+    }
+
+    .hasLabelVisibleMd {
+        @include breakpoint.up(md) {
+            @include tools.show-label();
+        }
+    }
+
+    .hasLabelVisibleLg {
+        @include breakpoint.up(lg) {
+            @include tools.show-label();
+        }
+    }
+
+    .hasLabelVisibleXl {
+        @include breakpoint.up(xl) {
+            @include tools.show-label();
+        }
+    }
+
+    .hasLabelVisibleX2l {
+        @include breakpoint.up(x2l) {
+            @include tools.show-label();
+        }
+    }
+
+    .hasLabelVisibleX3l {
+        @include breakpoint.up(x3l) {
+            @include tools.show-label();
+        }
+    }
+
+    @each $priority in map.keys(settings.$themeable-properties) {
+        @each $color in settings.$colors {
+            @include collections.generate-class(
+                $prefix: "rui-",
+                $component-name: "Button",
+                $modifier-name: "priority",
+                $modifier-value: $priority,
+                $variant-name: "color",
+                $variant-value: $color,
+                $generate-interaction-states: true,
+                $properties: map.get(settings.$themeable-properties, $priority),
+            );
+        }
+    }
+}

package/src/components/Button/README.md

@@ -23,10 +23,13 @@ See [API](#api) for all available options.
 - Use **short yet comprehensible labels** to make buttons fit small screens.
 
 - Since buttons are there to take actions, **use a verb** to make it obvious
-  what your buttons do.
+    what your buttons do.
 
 - **Don't overwhelm your UI** with too many high-emphasis actions. There should
-  always be one but chances are that having more of them is not necessary.
+    always be one but chances are that having more of them is not necessary.
+
+- Ensure the **button action is well recognazible** across your target audience.
+    This is especially important when using the button [with an icon only](#icon-buttons).
 
 ## Priorities
 
@@ -37,8 +40,9 @@ lowest:
 2. outline
 3. flat
 
-All priorities come in supported
-[component colors](/docs/foundation/colors#component-colors).
+All priorities are available in colors from supported
+[color collections](/docs/foundation/collections#colors).
+Check [API](#api) to see which collections are supported.
 
 ### Filled
 
@@ -144,8 +148,11 @@ before or after the button's label.
 
 ### Icon Buttons
 
-For clear and simple actions, buttons can visually consist just of an icon.
-Label remains mandatory to keep the button accessible.
+With a common and well-known icon, buttons can visually consist just of an icon.
+Label remains mandatory to keep the button accessible when using assistive
+technologies.
+
+👉 Use `labelVisibility="xs"` to make label always visible.
 
 ```docoff-react-preview
   <Button
@@ -161,6 +168,11 @@ of your choice and display label once you know there is enough room for it.
 📐 Try resizing your browser to see how label visibility changes.
 
 ```docoff-react-preview
+  <Button
+    label="Label always visible"
+    labelVisibility="xs"
+    beforeLabel={<rui-icon icon="pencil" />}
+  />
   <Button
     label="Label visible from sm up"
     labelVisibility="sm"
@@ -181,16 +193,6 @@ of your choice and display label once you know there is enough room for it.
     labelVisibility="xl"
     beforeLabel={<rui-icon icon="pencil" />}
   />
-  <Button
-    label="Label visible from x2l up"
-    labelVisibility="x2l"
-    beforeLabel={<rui-icon icon="pencil" />}
-  />
-  <Button
-    label="Label visible from x3l up"
-    labelVisibility="x3l"
-    beforeLabel={<rui-icon icon="pencil" />}
-  />
 ```
 
 ## Buttons with Badges
@@ -256,7 +258,7 @@ Disabled state makes the action unavailable.
 
 When user's action triggers an asynchronous process on background, the button's
 feedback state (not to be mistaken with
-[feedback colors](/docs/foundation/colors#component-colors)) can be indicated by
+[feedback colors](/docs/foundation/colors#feedback-colors)) can be indicated by
 showing an icon. The icon replaces button's label while retaining original
 dimensions of the button. Buttons in feedback state are automatically disabled
 to prevent unwanted interaction.
@@ -388,10 +390,11 @@ animation is made.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-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 `<button>` HTML
-element. 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 and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<button>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 
@@ -429,9 +432,10 @@ Where:
 
 - `<PRIORITY>` is one of `filled`, `outline`, or `flat` (see
   [Priorities](#priorities) and [API](#api)),
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see color variants of [each priority](#priorities) and [API](#api)),
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check color variants of [each priority](#priorities) and [API](#api) to see
+  which collections are supported),
 - `<INTERACTION STATE>` is one of `default`, `hover`, `active`, or `disabled`
   (the last one being optional),
 - `<PROPERTY>` is one of:

package/src/components/Button/_settings.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/spacing";
 
@@ -12,9 +14,12 @@ $group-z-indexes: (
     button-overflowing-elements: 3,
 );
 
-$themeable-variants: (primary, secondary, selected, success, warning, danger, help, info, note, light, dark);
-$themeable-states: (default, hover, active, disabled);
-$themeable-priority-properties: (
+$colors:
+    list.join(
+        list.join(collections.$action-colors, collections.$feedback-colors),
+        collections.$neutral-colors
+    );
+$themeable-properties: (
     filled: (color, border-color, background, box-shadow),
     outline: (color, border-color, background),
     flat: (color, background),

package/src/components/Button/_theme.scss

@@ -1,6 +1,3 @@
-// Priority and variant specific theme options are obtained dynamically because there is way too
-// many of them to maintain manually. See `_tools.scss` for details.
-
 $font-weight: var(--rui-Button__font-weight);
 $letter-spacing: var(--rui-Button__letter-spacing);
 $text-transform: var(--rui-Button__text-transform);

package/src/components/Button/_tools.scss

@@ -1,71 +1,23 @@
-// 1. Due to complexity, it's easier and safer to resolve variant custom properties dynamically with
-//    a mixin. This way it's also easier to make theming adjustments to all supported modifications
-//    in one place. This applies to the following button priorities:
+// 1. Get ready for position of corner elements and group separator.
 //
-//    - filled
-//    - outline
-//    - flat
+// 2. Icon buttons should appear as squares, that's why width and height is equal here.
 //
-// 2. Disabled state theming is optional so `default` theme options are used if no `disabled`
-//    styling is provided for specific variant.
-//
-// 3. Get ready for position of corner elements and group separator.
-//
-// 4. Icon buttons should appear as squares, that's why width and height is equal here.
-//
-// 5. Use original padding to restore square buttons back to their size.
+// 3. Use original padding to restore square buttons back to their size.
 
 @use "sass:list";
 @use "sass:map";
-@use "sass:math";
 @use "../../styles/tools/accessibility";
-@use "../../styles/tools/breakpoint";
 @use "../../styles/tools/transition";
 @use "settings";
 @use "theme";
 
-// 1.
-@mixin _get-themeable-properties($priority, $color, $state) {
-    @if not list.index(map.keys(settings.$themeable-priority-properties), $priority) {
-        @error "Invalid priority specified! #{$priority} doesn't exist. "
-            + "Choose one of #{settings.$themeable-priority-properties}.";
-    }
-
-    @if not list.index(settings.$themeable-variants, $color) {
-        @error "Invalid variant specified! #{$color} doesn't exist. "
-            + "Choose one of #{settings.$themeable-variants}.";
-    }
-
-    @if not list.index(settings.$themeable-states, $state) {
-        @error "Invalid state specified! #{$state} doesn't exist. "
-            + "Choose one of #{settings.$themeable-states}.";
-    }
-
-    $properties: map.get(settings.$themeable-priority-properties, $priority);
-
-    // 2.
-    @if $state == "disabled" {
-        @each $property in $properties {
-            --rui-local-#{$property}:
-                var(
-                    --rui-Button--#{$priority}--#{$color}--#{$state}__#{$property},
-                    var(--rui-Button--#{$priority}--#{$color}--default__#{$property})
-                );
-        }
-    } @else {
-        @each $property in $properties {
-            --rui-local-#{$property}: var(--rui-Button--#{$priority}--#{$color}--#{$state}__#{$property});
-        }
-    }
-}
-
-// 4.
+// 2.
 @mixin _button-square() {
     --rui-local-padding: 0;
     --rui-local-width: var(--rui-local-height);
 }
 
-// 5.
+// 3.
 @mixin _button-size-restore() {
     --rui-local-padding: var(--rui-local-padding-original);
     --rui-local-width: unset;
@@ -74,7 +26,7 @@
 @mixin button() {
     @include transition.add((opacity, color, border-color, background-color, box-shadow));
 
-    position: relative; // 3.
+    position: relative; // 1.
     display: inline-flex;
     column-gap: settings.$icon-spacing;
     align-items: center;
@@ -112,26 +64,10 @@
 
     --rui-local-height: #{map.get($properties, height)};
     --rui-local-padding: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)};
-    --rui-local-padding-original: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)}; // 5.
+    --rui-local-padding-original: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)}; // 3.
     --rui-local-font-size: #{map.get($properties, font-size)};
 }
 
-@mixin button-color($priority, $color) {
-    @include _get-themeable-properties($priority, $color, default);
-
-    &:disabled {
-        @include _get-themeable-properties($priority, $color, disabled);
-    }
-
-    &:not(:disabled):hover {
-        @include _get-themeable-properties($priority, $color, hover);
-    }
-
-    &:not(:disabled):active {
-        @include _get-themeable-properties($priority, $color, active);
-    }
-}
-
 @mixin hide-label() {
     @include _button-square();
 

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -4,9 +4,9 @@ import React, {
 } from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
+import { transferProps } from '../../utils/transferProps';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 

package/src/components/ButtonGroup/README.md

@@ -249,10 +249,11 @@ and communicating the state of individual options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-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.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Card/Card.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.module.scss';
 
@@ -44,7 +44,8 @@ Card.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the card.
+   * Color to clarify importance and meaning of the card. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/components/Card/Card.module.scss

@@ -1,7 +1,8 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
+@use "../../styles/tools/collections";
+@use "settings";
 @use "theme";
-@use "tools";
 
 @layer components.card {
     .root {
@@ -33,36 +34,14 @@
         box-shadow: theme.$raised-box-shadow;
     }
 
-    .isRootColorSuccess {
-        @include tools.color(success);
-    }
-
-    .isRootColorWarning {
-        @include tools.color(warning);
-    }
-
-    .isRootColorDanger {
-        @include tools.color(danger);
-    }
-
-    .isRootColorHelp {
-        @include tools.color(help);
-    }
-
-    .isRootColorInfo {
-        @include tools.color(info);
-    }
-
-    .isRootColorNote {
-        @include tools.color(note);
-    }
-
-    .isRootColorLight {
-        @include tools.color(light);
-    }
-
-    .isRootColorDark {
-        @include tools.color(dark);
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Card",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
     }
 
     .isRootDisabled {

package/src/components/Card/CardBody.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import styles from './Card.module.scss';
 
 export const CardBody = ({

package/src/components/Card/CardFooter.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import styles from './Card.module.scss';
 
 export const CardFooter = ({

package/src/components/Card/README.md

@@ -147,9 +147,8 @@ for card content.
 
 ## Color Variants
 
-Card supports all
-[component colors](/docs/foundation/colors#component-colors) to cover different needs
-of your app.
+To cover all possible needs of your project, Card is available in colors from
+[Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
 ```docoff-react-preview
 <Card color="success">
@@ -255,10 +254,11 @@ its interactive elements to disallow user's interaction.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-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.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 
@@ -306,9 +306,10 @@ looks as follows:
 
 Where:
 
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see [color variants](#color-variants) and [API](#api)),
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check [color variants](#color-variants) and [API](#api) to see which
+  collections are supported),
 - `<PROPERTY>` is one of `color` (color of text), `border-color`, or
   `background-color`.
 

package/src/components/Card/_settings.scss

@@ -0,0 +1,5 @@
+@use "sass:list";
+@use "../../styles/settings/collections";
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties: color, border-color, background-color;

package/src/components/Card/_theme.scss

@@ -7,46 +7,3 @@ $raised-box-shadow: var(--rui-Card--raised__box-shadow);
 
 $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
-
-$colors: (
-    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/components/CheckboxField/CheckboxField.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './CheckboxField.module.scss';
 
@@ -114,7 +114,7 @@ CheckboxField.propTypes = {
   /**
    * Checkbox field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Placement of the label relative to the input.
    */