@react-ui-org/react-ui 0.56.0 → 0.57.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.56.0",
+  "version": "0.57.0",
   "keywords": [
     "react",
     "ui",
@@ -71,7 +71,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
-    "@visionappscz/stylelint-config": "^4.0.0-beta1",
+    "@visionappscz/stylelint-config": "^4.0.0",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",

package/src/CNAME

@@ -0,0 +1 @@
+react-ui.io

package/src/components/Alert/Alert.jsx

@@ -70,7 +70,8 @@ Alert.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the alert.
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/components/Alert/Alert.module.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "settings";
 @use "theme";
-@use "tools";
 
 @layer components.alert {
     .root {
@@ -66,35 +66,13 @@
         top: -0.1em;
     }
 
-    .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: "Alert",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
     }
 }

package/src/components/Alert/README.md

@@ -31,8 +31,8 @@ See [API](#api) for all available options.
 
 ## Color Variants
 
-All [component colors](/docs/foundation/colors#component-colors) are supported by
-alert to cover all possible needs of your project.
+To cover all possible needs of your project, Alert is available in colors from
+[Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
 ### Success
 
@@ -208,9 +208,10 @@ convention looks as follows:
 
 Where:
 
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see alert [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), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.
 

package/src/components/Alert/_settings.scss

@@ -1,7 +1,12 @@
+@use "sass:list";
 @use "sass:map";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
 @use "theme";
 
 $font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties: color, foreground-color, background-color;

package/src/components/Alert/_theme.scss

@@ -4,46 +4,3 @@ $border-width: var(--rui-Alert__border-width);
 $border-radius: var(--rui-Alert__border-radius);
 $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
-
-$colors: (
-    success: (
-        color: var(--rui-Alert--success__color),
-        foreground-color: var(--rui-Alert--success__foreground-color),
-        background-color: var(--rui-Alert--success__background-color),
-    ),
-    warning: (
-        color: var(--rui-Alert--warning__color),
-        foreground-color: var(--rui-Alert--warning__foreground-color),
-        background-color: var(--rui-Alert--warning__background-color),
-    ),
-    danger: (
-        color: var(--rui-Alert--danger__color),
-        foreground-color: var(--rui-Alert--danger__foreground-color),
-        background-color: var(--rui-Alert--danger__background-color),
-    ),
-    info: (
-        color: var(--rui-Alert--info__color),
-        foreground-color: var(--rui-Alert--info__foreground-color),
-        background-color: var(--rui-Alert--info__background-color),
-    ),
-    help: (
-        color: var(--rui-Alert--help__color),
-        foreground-color: var(--rui-Alert--help__foreground-color),
-        background-color: var(--rui-Alert--help__background-color),
-    ),
-    note: (
-        color: var(--rui-Alert--note__color),
-        foreground-color: var(--rui-Alert--note__foreground-color),
-        background-color: var(--rui-Alert--note__background-color),
-    ),
-    light: (
-        color: var(--rui-Alert--light__color),
-        foreground-color: var(--rui-Alert--light__foreground-color),
-        background-color: var(--rui-Alert--light__background-color),
-    ),
-    dark: (
-        color: var(--rui-Alert--dark__color),
-        foreground-color: var(--rui-Alert--dark__foreground-color),
-        background-color: var(--rui-Alert--dark__background-color),
-    ),
-);

package/src/components/Badge/Badge.jsx

@@ -4,6 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';
 
 export const Badge = ({
@@ -16,7 +17,7 @@ export const Badge = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      priority === 'outline' && styles.isRootPriorityOutline,
+      getRootPriorityClassName(priority, styles),
       getRootColorClassName(color, styles),
     )}
   >
@@ -31,7 +32,8 @@ Badge.defaultProps = {
 
 Badge.propTypes = {
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   * Color to clarify importance and meaning of the badge. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/components/Badge/Badge.module.scss

@@ -2,14 +2,14 @@
 @use "sass:math";
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
-
-$_badge-size: 1.25rem;
+@use "../../styles/tools/collections";
+@use "settings";
 
 @layer components.badge {
     .root {
         display: inline-block;
-        min-width: $_badge-size;
-        height: $_badge-size;
+        min-width: settings.$badge-size;
+        height: settings.$badge-size;
         padding: 0.25rem 0.35rem;
         overflow: hidden;
         font-weight: map.get(typography.$font-weight-values, bold);
@@ -19,91 +19,46 @@ $_badge-size: 1.25rem;
         white-space: nowrap;
         vertical-align: baseline;
         color: var(--rui-local-color);
-        border-radius: math.div($_badge-size, 2);
-        background-color: var(--rui-local-background-color);
-        box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
-    }
-
-    .isRootColorSuccess {
-        --rui-local-color: var(--rui-color-feedback-on-success);
-        --rui-local-background-color: var(--rui-color-feedback-success);
-    }
-
-    .isRootColorWarning {
-        --rui-local-color: var(--rui-color-feedback-on-warning);
-        --rui-local-background-color: var(--rui-color-feedback-warning);
-    }
-
-    .isRootColorDanger {
-        --rui-local-color: var(--rui-color-feedback-on-danger);
-        --rui-local-background-color: var(--rui-color-feedback-danger);
-    }
-
-    .isRootColorHelp {
-        --rui-local-color: var(--rui-color-feedback-on-help);
-        --rui-local-background-color: var(--rui-color-feedback-help);
-    }
-
-    .isRootColorInfo {
-        --rui-local-color: var(--rui-color-feedback-on-info);
-        --rui-local-background-color: var(--rui-color-feedback-info);
+        border-radius: math.div(settings.$badge-size, 2);
     }
 
-    .isRootColorNote {
-        --rui-local-color: var(--rui-color-feedback-on-note);
-        --rui-local-background-color: var(--rui-color-feedback-note);
+    .isRootPriorityFilled {
+        background-color: var(--rui-local-background-color);
+        box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
     }
 
-    .isRootColorLight {
-        --rui-local-color: var(--rui-color-neutral-on-light);
-        --rui-local-background-color: var(--rui-color-neutral-light);
-        --rui-local-box-shadow: none;
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Badge",
+            $modifier-name: "priority",
+            $modifier-value: "filled",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties-filled,
+        );
     }
 
+    .isRootColorLight,
     .isRootColorDark {
-        --rui-local-color: var(--rui-color-neutral-on-dark);
-        --rui-local-background-color: var(--rui-color-neutral-dark);
         --rui-local-box-shadow: none;
     }
 
     .isRootPriorityOutline {
-        --rui-local-background-color: transparent;
-        --rui-local-box-shadow: none;
-
         padding-top: 0.1875rem;
         padding-bottom: 0.1875rem;
         border: borders.$width solid currentcolor;
     }
 
-    .isRootPriorityOutline.isRootColorSuccess {
-        --rui-local-color: var(--rui-color-feedback-success);
-    }
-
-    .isRootPriorityOutline.isRootColorWarning {
-        --rui-local-color: var(--rui-color-feedback-warning);
-    }
-
-    .isRootPriorityOutline.isRootColorDanger {
-        --rui-local-color: var(--rui-color-feedback-danger);
-    }
-
-    .isRootPriorityOutline.isRootColorHelp {
-        --rui-local-color: var(--rui-color-feedback-help);
-    }
-
-    .isRootPriorityOutline.isRootColorInfo {
-        --rui-local-color: var(--rui-color-feedback-info);
-    }
-
-    .isRootPriorityOutline.isRootColorNote {
-        --rui-local-color: var(--rui-color-feedback-note);
-    }
-
-    .isRootPriorityOutline.isRootColorLight {
-        --rui-local-color: var(--rui-color-neutral-light);
-    }
-
-    .isRootPriorityOutline.isRootColorDark {
-        --rui-local-color: var(--rui-color-neutral-dark);
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Badge",
+            $modifier-name: "priority",
+            $modifier-value: "outline",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties-outline,
+        );
     }
 }

package/src/components/Badge/README.md

@@ -29,8 +29,9 @@ lowest:
 1. filled
 2. outline
 
-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
 
@@ -102,5 +103,21 @@ helps to improve its accessibility.
 
 <docoff-react-props src="/components/Badge/Badge.jsx" />
 
+## Theming
+
+It's possible to adjust the theme of specific badge color variant. Naming
+convention looks as follows:
+
+`--rui-Badge--<PRIORITY>--<COLOR>__<PROPERTY>`
+
+Where:
+
+- `<PRIORITY>` is one of `filled` or `outline`,
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check [API](#api) to see which collections are supported),
+- `<PROPERTY>` is one of `color` (color of text) or `background-color` for the
+  filled priority, or just `color` for the outline priority.
+
 [div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Badge/_settings.scss

@@ -0,0 +1,8 @@
+@use "sass:list";
+@use "../../styles/settings/collections";
+
+$badge-size: 1.25rem;
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties-filled: color, background-color;
+$themeable-properties-outline: color;

package/src/components/Button/Button.jsx

@@ -4,11 +4,11 @@ import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
-import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
 import styles from './Button.module.scss';
 
@@ -133,7 +133,8 @@ Button.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the button.
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Action, Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(
     ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],

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

@@ -40,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
 
@@ -257,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.
@@ -431,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);