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

package/src/theme.scss

@@ -306,6 +306,70 @@
         --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark);
         --rui-Alert--dark__background-color: var(--rui-color-background-dark);
 
+        //
+        // Badge
+        // =====
+
+        // Badge: filled priority
+
+        // Badge: filled priority: success variant
+        --rui-Badge--filled--success__color: var(--rui-color-feedback-on-success);
+        --rui-Badge--filled--success__background-color: var(--rui-color-feedback-success);
+
+        // Badge: filled priority: warning variant
+        --rui-Badge--filled--warning__color: var(--rui-color-feedback-on-warning);
+        --rui-Badge--filled--warning__background-color: var(--rui-color-feedback-warning);
+
+        // Badge: filled priority: danger variant
+        --rui-Badge--filled--danger__color: var(--rui-color-feedback-on-danger);
+        --rui-Badge--filled--danger__background-color: var(--rui-color-feedback-danger);
+
+        // Badge: filled priority: help variant
+        --rui-Badge--filled--help__color: var(--rui-color-feedback-on-help);
+        --rui-Badge--filled--help__background-color: var(--rui-color-feedback-help);
+
+        // Badge: filled priority: info variant
+        --rui-Badge--filled--info__color: var(--rui-color-feedback-on-info);
+        --rui-Badge--filled--info__background-color: var(--rui-color-feedback-info);
+
+        // Badge: filled priority: note variant
+        --rui-Badge--filled--note__color: var(--rui-color-feedback-on-note);
+        --rui-Badge--filled--note__background-color: var(--rui-color-feedback-note);
+
+        // Badge: filled priority: light variant
+        --rui-Badge--filled--light__color: var(--rui-color-neutral-on-light);
+        --rui-Badge--filled--light__background-color: var(--rui-color-neutral-light);
+
+        // Badge: filled priority: dark variant
+        --rui-Badge--filled--dark__color: var(--rui-color-neutral-on-dark);
+        --rui-Badge--filled--dark__background-color: var(--rui-color-neutral-dark);
+
+        // Badge: outline priority
+
+        // Badge: outline priority: success variant
+        --rui-Badge--outline--success__color: var(--rui-color-feedback-success);
+
+        // Badge: outline priority: warning variant
+        --rui-Badge--outline--warning__color: var(--rui-color-feedback-warning);
+
+        // Badge: outline priority: danger variant
+        --rui-Badge--outline--danger__color: var(--rui-color-feedback-danger);
+
+        // Badge: outline priority: help variant
+        --rui-Badge--outline--help__color: var(--rui-color-feedback-help);
+
+        // Badge: outline priority: info variant
+        --rui-Badge--outline--info__color: var(--rui-color-feedback-info);
+
+        // Badge: outline priority: note variant
+        --rui-Badge--outline--note__color: var(--rui-color-feedback-note);
+
+        // Badge: outline priority: light variant
+        --rui-Badge--outline--light__color: var(--rui-color-neutral-light);
+
+        // Badge: outline priority: dark variant
+        --rui-Badge--outline--dark__color: var(--rui-color-neutral-dark);
+
         //
         // Button
         // ======

package/src/utils/mergeDeep.js

@@ -0,0 +1,28 @@
+const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
+
+/**
+ * Performs a deep merge of objects and returns new object.
+ *
+ * @param {...object} objects
+ * @returns {object}
+ */
+export const mergeDeep = (...objects) => objects.reduce((prev, obj) => {
+  if (obj == null) {
+    return prev;
+  }
+
+  const newObject = { ...prev };
+
+  Object.keys(obj).forEach((key) => {
+    const previousVal = prev[key];
+    const currentVal = obj[key];
+
+    if (isObject(previousVal) && isObject(currentVal)) {
+      newObject[key] = mergeDeep(previousVal, currentVal);
+    } else {
+      newObject[key] = currentVal;
+    }
+  });
+
+  return newObject;
+}, {});

package/src/{components/_helpers → utils}/transferProps.js

@@ -1,12 +1,4 @@
 /**
- * Controls passing of props from the React component to the HTML element
- *
- * Sometimes it is useful to have a mechanism to pass props from the React component to a rendered HTML element.
- * It enables making the component interactive and helps improve its accessibility. However some props should
- * never be passed to the HTML element as it would break things. This function is used to filter out such props.
- *
- * When run in development mode, the function will log the error to the console if any invalid props are passed.
- *
  * @param props The props that were passed to the React component and were not used by it
  * @returns The props to be passed to the HTML element
  */

package/src/components/Alert/_tools.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "theme";
-
-@mixin color($color) {
-    $color-variant-properties: map.get(theme.$colors, $color);
-
-    --rui-local-color: #{map.get($color-variant-properties, color)};
-    --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
-    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
-}

package/src/components/Button/_base.scss

@@ -1,159 +0,0 @@
-// 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";
-@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;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 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.
-    }
-
-    .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();
-        }
-    }
-}

package/src/components/Button/_priorities.scss

@@ -1,149 +0,0 @@
-@use "sass:map";
-@use "settings";
-@use "theme";
-@use "tools";
-
-@layer components.button {
-    .isRootPriorityFilled.isRootColorPrimary {
-        @include tools.button-color(filled, primary);
-    }
-
-    .isRootPriorityFilled.isRootColorSecondary {
-        @include tools.button-color(filled, secondary);
-    }
-
-    .isRootPriorityFilled.isRootColorSelected {
-        @include tools.button-color(filled, selected);
-    }
-
-    .isRootPriorityFilled.isRootColorSuccess {
-        @include tools.button-color(filled, success);
-    }
-
-    .isRootPriorityFilled.isRootColorWarning {
-        @include tools.button-color(filled, warning);
-    }
-
-    .isRootPriorityFilled.isRootColorDanger {
-        @include tools.button-color(filled, danger);
-    }
-
-    .isRootPriorityFilled.isRootColorHelp {
-        @include tools.button-color(filled, help);
-    }
-
-    .isRootPriorityFilled.isRootColorInfo {
-        @include tools.button-color(filled, info);
-    }
-
-    .isRootPriorityFilled.isRootColorNote {
-        @include tools.button-color(filled, note);
-    }
-
-    .isRootPriorityFilled.isRootColorLight {
-        @include tools.button-color(filled, light);
-    }
-
-    .isRootPriorityFilled.isRootColorDark {
-        @include tools.button-color(filled, dark);
-    }
-
-    .isRootPriorityOutline.isRootColorPrimary {
-        @include tools.button-color(outline, primary);
-    }
-
-    .isRootPriorityOutline.isRootColorSecondary {
-        @include tools.button-color(outline, secondary);
-    }
-
-    .isRootPriorityOutline.isRootColorSelected {
-        @include tools.button-color(outline, selected);
-    }
-
-    .isRootPriorityOutline.isRootColorSuccess {
-        @include tools.button-color(outline, success);
-    }
-
-    .isRootPriorityOutline.isRootColorWarning {
-        @include tools.button-color(outline, warning);
-    }
-
-    .isRootPriorityOutline.isRootColorDanger {
-        @include tools.button-color(outline, danger);
-    }
-
-    .isRootPriorityOutline.isRootColorHelp {
-        @include tools.button-color(outline, help);
-    }
-
-    .isRootPriorityOutline.isRootColorInfo {
-        @include tools.button-color(outline, info);
-    }
-
-    .isRootPriorityOutline.isRootColorNote {
-        @include tools.button-color(outline, note);
-    }
-
-    .isRootPriorityOutline.isRootColorLight {
-        @include tools.button-color(outline, light);
-    }
-
-    .isRootPriorityOutline.isRootColorDark {
-        @include tools.button-color(outline, dark);
-    }
-
-    .isRootPriorityFlat.isRootColorPrimary {
-        @include tools.button-color(flat, primary);
-    }
-
-    .isRootPriorityFlat.isRootColorSecondary {
-        @include tools.button-color(flat, secondary);
-    }
-
-    .isRootPriorityFlat.isRootColorSelected {
-        @include tools.button-color(flat, selected);
-    }
-
-    .isRootPriorityFlat.isRootColorSuccess {
-        @include tools.button-color(flat, success);
-    }
-
-    .isRootPriorityFlat.isRootColorWarning {
-        @include tools.button-color(flat, warning);
-    }
-
-    .isRootPriorityFlat.isRootColorDanger {
-        @include tools.button-color(flat, danger);
-    }
-
-    .isRootPriorityFlat.isRootColorHelp {
-        @include tools.button-color(flat, help);
-    }
-
-    .isRootPriorityFlat.isRootColorInfo {
-        @include tools.button-color(flat, info);
-    }
-
-    .isRootPriorityFlat.isRootColorNote {
-        @include tools.button-color(flat, note);
-    }
-
-    .isRootPriorityFlat.isRootColorLight {
-        @include tools.button-color(flat, light);
-    }
-
-    .isRootPriorityFlat.isRootColorDark {
-        @include tools.button-color(flat, dark);
-    }
-
-    .isRootInButtonGroup:not(:first-child)::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%));
-    }
-}

package/src/components/Card/_tools.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "theme";
-
-@mixin color($color) {
-    $color-variant-properties: map.get(theme.$colors, $color);
-
-    --rui-local-color: #{map.get($color-variant-properties, color)};
-    --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
-    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
-}