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

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

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

package/src/components/Card/Card.jsx

@@ -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/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">
@@ -307,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/Grid/Grid.module.scss

@@ -19,6 +19,9 @@
 //    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
+//
+// 3. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values as
+//    empty. That makes the other value of the shorthand property unexpectedly used for both axes.
 
 @use "sass:map";
 @use "../../styles/tools/spacing";
@@ -35,8 +38,12 @@
         grid-template-rows: var(--rui-local-rows); // 2.
         grid-auto-flow: var(--rui-local-auto-flow); // 2.
         grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
-        place-content: var(--rui-local-align-content) var(--rui-local-justify-content); // 2.
-        place-items: var(--rui-local-align-items) var(--rui-local-justify-items); // 2.
+        // stylelint-disable declaration-block-no-redundant-longhand-properties -- 3.
+        align-content: var(--rui-local-align-content); // 2.
+        align-items: var(--rui-local-align-items); // 2.
+        justify-content: var(--rui-local-justify-content); // 2.
+        justify-items: var(--rui-local-justify-items); // 2.
+        // stylelint-enable declaration-block-no-redundant-longhand-properties
     }
 
     // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.

package/src/components/Popover/Popover.module.scss

@@ -51,52 +51,52 @@
 
     // Sides
     .isRootAtTop {
-        bottom: 100%;
+        bottom: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtBottom {
-        top: 100%;
+        top: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtLeft {
-        right: 100%;
+        right: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtRight {
-        left: 100%;
+        left: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     // Arrows
     .isRootAtTop > .arrow {
-        top: 100%;
+        top: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtBottom > .arrow {
-        bottom: 100%;
+        bottom: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtLeft > .arrow {
-        left: 100%;
+        left: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtRight > .arrow {
-        right: 100%;
+        right: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     // Side alignments: top
     .isRootAtTop.isRootAtCenter {
         left: 50%;
-        transform: translate(-50%, #{-1 * theme.$arrow-height});
+        transform: translate(-50%, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtStart {
         left: 0;
-        transform: translate(0, #{-1 * theme.$arrow-height});
+        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtEnd {
         right: 0;
-        transform: translate(0, #{-1 * theme.$arrow-height});
+        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtCenter > .arrow {
@@ -148,17 +148,17 @@
     // Side alignments: left
     .isRootAtLeft.isRootAtCenter {
         top: 50%;
-        transform: translate(#{-1 * theme.$arrow-height}, -50%);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), -50%);
     }
 
     .isRootAtLeft.isRootAtStart {
         top: 0;
-        transform: translate(#{-1 * theme.$arrow-height}, 0);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
     }
 
     .isRootAtLeft.isRootAtEnd {
         bottom: 0;
-        transform: translate(#{-1 * theme.$arrow-height}, 0);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
     }
 
     .isRootAtLeft.isRootAtCenter > .arrow {
@@ -216,7 +216,7 @@
     }
 
     .isRootControlled.isRootAtTop {
-        transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
+        transform: translate(0, calc(-1 * #{theme.$arrow-height})); // 2.
     }
 
     .isRootControlled.isRootAtBottom {
@@ -224,7 +224,7 @@
     }
 
     .isRootControlled.isRootAtLeft {
-        transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0); // 2.
     }
 
     .isRootControlled.isRootAtRight {

package/src/components/Popover/_theme.scss

@@ -11,6 +11,8 @@ $color: var(--rui-Popover__color);
 $background-color: var(--rui-Popover__background-color);
 $box-shadow: var(--rui-Popover__box-shadow);
 
-$arrow-width: 1rem;
-$arrow-height: math.div($arrow-width, 2); // 1.
+$arrow-safe-rendering-overlap: 1px;
+$arrow-gap: 1px;
+$arrow-width: calc(1rem + #{$arrow-safe-rendering-overlap * 2});
+$arrow-height: calc($arrow-width / 2); // 1.
 $arrow-corner-offset: 0.75rem;

package/src/components/_helpers/getRootPriorityClassName.js

@@ -1,4 +1,4 @@
-export default (priority, styles) => {
+export const getRootPriorityClassName = (priority, styles) => {
   if (priority === 'filled') {
     return styles.isRootPriorityFilled;
   }

package/src/styles/settings/_collections.scss

@@ -0,0 +1,9 @@
+$action-colors: primary, secondary, selected;
+$feedback-colors: success, warning, danger, info, help, note;
+$neutral-colors: light, dark;
+
+$colors: (
+    action: $action-colors,
+    feedback: $feedback-colors,
+    neutral: $neutral-colors,
+);

package/src/styles/tools/_collections.scss

@@ -0,0 +1,191 @@
+@use "string" as rui-string;
+
+// Mixin to generate CSS custom properties for a set of visual properties.
+//
+// 1. Generates a CSS custom property for each property in the `$properties` list.
+// 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
+//    fallback) if no `disabled` styling for the specific variant is provided by user.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $component-name - The name of the component.
+// @param {String} $modifier-value - The value of the modifier.
+// @param {String} $variant-value - The value of the variant.
+// @param {String} $interaction-state - The interaction state.
+// @param {List} $properties - The list of properties to generate CSS custom properties for.
+//
+// Example:
+//
+// @include generate-properties(
+//     $prefix: "rui-",
+//     $component-name: "Card",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $properties: color, border-color, background-color,
+// );
+//
+// … will output:
+//
+// --rui-local-color: var(--rui-Card--success__color);
+// --rui-local-border-color: var(--rui-Card--success__border-color);
+// --rui-local-background-color: var(--rui-Card--success__background-color);
+
+@mixin generate-properties(
+    $prefix,
+    $component-name,
+    $modifier-value: null,
+    $variant-value,
+    $interaction-state: null,
+    $properties,
+) {
+    @each $property in $properties {
+        $modifier: if($modifier-value, "--" + $modifier-value, "");
+        $state: if($interaction-state, "--" + $interaction-state, "");
+
+        // 1.
+        --#{$prefix}local-#{$property}:
+            var(
+                #{
+                    "--"
+                    + $prefix
+                    + $component-name
+                    + $modifier
+                    + "--"
+                    + $variant-value
+                    + $state
+                    + "__"
+                    + $property
+                }
+                #{if(
+                    $interaction-state and $interaction-state == "disabled",
+                    ", var(--"
+                    + $prefix
+                    + $component-name
+                    + $modifier
+                    + "--"
+                    + $variant-value
+                    + "--default__"
+                    + $property
+                    + ")",
+                    ""
+                )}
+            ); // 2.
+    }
+}
+
+// Mixin to generate CSS classes for a component variant.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $component-name - The name of the component.
+// @param {String} $modifier-name - Optional name of the class name modifier.
+// @param {String} $modifier-name - Optional value of the class name modifier.
+// @param {String} $variant-name - The name of the variant.
+// @param {String} $variant-value - The value of the variant.
+// @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
+// @param {List} $properties - The list of properties to generate CSS custom properties for.
+//
+// Examples:
+//
+// @include collections.generate-class(
+//     $prefix: "rui-",
+//     $component-name: "Card",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $properties: color, border-color, background-color,
+// );
+//
+// … will output:
+//
+// .isRootColorSuccess {
+//     --rui-local-color: var(--rui-Card--success__color);
+//     --rui-local-border-color: var(--rui-Card--success__border-color);
+//     --rui-local-background-color: var(--rui-Card--success__background-color);
+// }
+//
+// @include collections.generate-class(
+//     $prefix: "rui-",
+//     $component-name: "Button",
+//     $modifier-name: "priority",
+//     $modifier-value: "flat",
+//     $variant-name: "color",
+//     $variant-value: "success",
+//     $generate-interaction-states: true,
+//     $properties: color, background,
+// );
+//
+// … will output:
+//
+// .isRootPriorityFlat.isRootColorSuccess {
+//     --rui-local-color: var(--rui-Button--flat--success--default__color);
+//     --rui-local-background: var(--rui-Button--flat--success--default__background);
+// }
+// .isRootPriorityFlat.isRootColorSuccess:disabled {
+//     --rui-local-color:
+//         var(
+//             --rui-Button--flat--success--disabled__color,
+//             var(--rui-Button--flat--success--default__color)
+//         );
+//     --rui-local-background:
+//         var(
+//             --rui-Button--flat--success--disabled__background,
+//             var(--rui-Button--flat--success--default__background)
+//         );
+// }
+// .isRootPriorityFlat.isRootColorSuccess:not(:disabled):hover {
+//     --rui-local-color: var(--rui-Button--flat--success--hover__color);
+//     --rui-local-background: var(--rui-Button--flat--success--hover__background);
+// }
+// .isRootPriorityFlat.isRootColorSuccess:not(:disabled):active {
+//     --rui-local-color: var(--rui-Button--flat--success--active__color);
+//     --rui-local-background: var(--rui-Button--flat--success--active__background);
+// }
+
+@mixin generate-class(
+    $prefix,
+    $component-name,
+    $modifier-name: null,
+    $modifier-value: null,
+    $variant-name,
+    $variant-value,
+    $generate-interaction-states: false,
+    $properties,
+) {
+    $modifier-class-name:
+        if(
+            $modifier-name and $modifier-value,
+            ".isRoot#{rui-string.capitalize($modifier-name)}#{rui-string.capitalize($modifier-value)}",
+            ""
+        );
+    $variant-class-name: ".isRoot#{rui-string.capitalize($variant-name)}#{rui-string.capitalize($variant-value)}";
+
+    #{$modifier-class-name}#{$variant-class-name} {
+        @if $generate-interaction-states {
+            $interaction-state-selector-map: (
+                default: "&",
+                disabled: "&:disabled",
+                hover: "&:not(:disabled):hover",
+                active: "&:not(:disabled):active",
+            );
+
+            @each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
+                #{$interaction-state-selector} {
+                    @include generate-properties(
+                        $prefix: $prefix,
+                        $component-name: $component-name,
+                        $modifier-value: $modifier-value,
+                        $variant-value: $variant-value,
+                        $interaction-state: $interaction-state,
+                        $properties: $properties,
+                    );
+                }
+            }
+        } @else {
+            @include generate-properties(
+                $prefix: $prefix,
+                $component-name: $component-name,
+                $modifier-value: $modifier-value,
+                $variant-value: $variant-value,
+                $properties: $properties,
+            );
+        }
+    }
+}

package/src/styles/tools/_string.scss

@@ -1,7 +1,10 @@
-// Author: Hugo Giraudel
-
 @use "sass:string";
 
+@function capitalize($string) {
+    @return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+// Author: Hugo Giraudel
 @function replace($string, $search, $replace: "") {
     $index: string.index($string, $search);
 

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

@@ -55,6 +55,9 @@
 //
 // 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical
 //     alignment of each block can be changed by theme configuration.
+//
+// 14. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values
+//     as empty. That makes the other value of the shorthand property unexpectedly used for both axes.
 
 @use "../../settings/forms";
 @use "../../settings/form-fields" as settings;
@@ -125,7 +128,10 @@
 
         .field {
             grid-area: field;
-            place-self: theme.$horizontal-field-vertical-alignment start; // 13. / 7.
+            // stylelint-disable declaration-block-no-redundant-longhand-properties -- 14.
+            align-self: theme.$horizontal-field-vertical-alignment; // 13.
+            justify-self: start; // 7.
+            // stylelint-enable declaration-block-no-redundant-longhand-properties
         }
     }
 }