@react-ui-org/react-ui 0.58.0 → 0.59.0

package/src/index.js

@@ -61,6 +61,6 @@ export {
 export { GlobalPropsProvider } from './providers/globalProps';
 export { TranslationsProvider } from './providers/translations';
 
-// Utils
-export { classNames } from './utils/classNames';
-export { transferProps } from './utils/transferProps';
+// Helpers
+export { classNames } from './helpers/classNames';
+export { transferProps } from './helpers/transferProps';

package/src/styles/elements/_links.scss

@@ -1,17 +1,5 @@
-@use "../theme/links";
+@use "../tools/links";
 
 a {
-    text-decoration: links.$decoration;
-    text-underline-offset: links.$underline-offset;
-    color: links.$color;
-
-    &:hover {
-        text-decoration: links.$hover-decoration;
-        color: links.$hover-color;
-    }
-
-    &:active {
-        text-decoration: links.$active-decoration;
-        color: links.$active-color;
-    }
+    @include links.base();
 }

package/src/styles/generic/_focus.scss

@@ -6,6 +6,6 @@
     outline: none;
 }
 
-:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]):focus-visible {
     @include accessibility.focus-ring();
 }

package/src/styles/theme/_form-fields.scss

@@ -33,15 +33,15 @@ $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width_
 // Form fields: links in validation states
 $link-validation-colors: (
     invalid: (
+        default: var(--rui-color-feedback-danger),
+        hover: var(--rui-color-feedback-danger-hover),
+        active: var(--rui-color-feedback-danger-active),
+    ),
+    valid: (
         default: var(--rui-color-feedback-success),
         hover: var(--rui-color-feedback-success-hover),
         active: var(--rui-color-feedback-success-active),
     ),
-    valid: (
-        default: var(--rui-color-feedback-valid),
-        hover: var(--rui-color-feedback-valid-hover),
-        active: var(--rui-color-feedback-valid-active),
-    ),
     warning: (
         default: var(--rui-color-feedback-warning),
         hover: var(--rui-color-feedback-warning-hover),

package/src/styles/tools/_accessibility.scss

@@ -45,9 +45,7 @@
 }
 
 @mixin focus-ring() {
-    &:focus-visible {
-        outline: theme.$focus-outline;
-        outline-offset: theme.$focus-outline-offset;
-        box-shadow: theme.$focus-box-shadow;
-    }
+    outline: theme.$focus-outline;
+    outline-offset: theme.$focus-outline-offset;
+    box-shadow: theme.$focus-box-shadow;
 }

package/src/styles/tools/_collections.scss

@@ -25,22 +25,6 @@
         + ")";
 }
 
-// Function to get the matching link color for a component variant.
-//
-// @param {String} $value - The value to get the link color for.
-
-@function _get-link-color-by-value($value) {
-    @if $value == "light" {
-        @return "dark";
-    }
-
-    @if $value == "dark" {
-        @return "light";
-    }
-
-    @return $value;
-}
-
 // Mixin to generate CSS custom properties for a component theme.
 //
 // 1. Generates a CSS custom property for each property in the `$properties` list.
@@ -133,11 +117,10 @@
 
 @mixin generate-link-properties($prefix, $variant-value) {
     $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
-    $resolved-variant-value: _get-link-color-by-value($variant-value);
 
-    --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$resolved-variant-value});
-    --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-hover);
-    --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-active);
+    --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$variant-value});
+    --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$variant-value}-hover);
+    --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$variant-value}-active);
 }
 
 // Mixin to generate CSS classes for a component variant.

package/src/styles/tools/_links.scss

@@ -0,0 +1,17 @@
+@use "../theme/links";
+
+@mixin base() {
+    text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
+    color: links.$color;
+
+    &:hover {
+        text-decoration: links.$hover-decoration;
+        color: links.$hover-color;
+    }
+
+    &:active {
+        text-decoration: links.$active-decoration;
+        color: links.$active-color;
+    }
+}

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

@@ -4,6 +4,7 @@
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
 // 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
+// 6. Pull out the focused input from the group.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -18,24 +19,29 @@
     max-width: 100%; // 3.
 }
 
-@mixin input() {
+@mixin base() {
     @include transition.add((opacity, color, border-color, background-color, box-shadow));
 
-    appearance: none;
     width: theme.$box-input-width;
     min-width: theme.$box-input-min-width;
     max-width: 100%; // 3.
     height: var(--rui-local-height);
     padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
+    color: var(--rui-local-color);
+    border: theme.$box-border-width solid var(--rui-local-border-color);
+    border-radius: theme.$box-border-radius;
+    background: var(--rui-local-background);
+}
+
+@mixin input() {
+    @include base();
+
+    appearance: none;
     font-weight: settings.$box-input-font-weight;
     font-size: var(--rui-local-font-size);
     line-height: settings.$box-input-line-height;
     font-family: settings.$box-input-font-family;
     vertical-align: middle;
-    color: var(--rui-local-color);
-    border: theme.$box-border-width solid var(--rui-local-border-color);
-    border-radius: theme.$box-border-radius;
-    background: var(--rui-local-background);
     box-shadow: var(--rui-local-box-shadow);
 
     &::placeholder {
@@ -124,17 +130,23 @@
     }
 }
 
-@mixin in-group-layout() {
+@mixin in-group-layout($input-element-selector: ".input") {
+    // 6.
+    &:focus-within {
+        isolation: isolate;
+        z-index: 1;
+    }
+
     .inputContainer {
         display: block; // 5.
     }
 
-    &:not(:first-child) .input {
+    &:not(:first-child) #{$input-element-selector} {
         border-start-start-radius: var(--rui-local-inner-border-radius);
         border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
-    &:not(:last-child) .input {
+    &:not(:last-child) #{$input-element-selector} {
         border-start-end-radius: var(--rui-local-inner-border-radius);
         border-end-end-radius: var(--rui-local-inner-border-radius);
     }

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

@@ -166,14 +166,14 @@
     }
 }
 
-@mixin full-width() {
+@mixin full-width($input-element-selector: ".input") {
     display: flex;
     flex-direction: column;
     width: 100%;
 
     .field,
     .inputContainer,
-    .input {
+    #{$input-element-selector} {
         width: 100%;
     }
 

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

@@ -1,22 +1,18 @@
 @use "sass:map";
 @use "../../theme/form-fields" as theme;
 
-@mixin size($size, $has-input: true, $is-multiline: false) {
+@mixin size($size, $is-multiline: false) {
     $size-properties: map.get(theme.$box-sizes, $size);
 
+    --rui-local-height: #{map.get($size-properties, height)};
     --rui-local-padding-y: #{map.get($size-properties, padding-y)};
     --rui-local-padding-x: #{map.get($size-properties, padding-x)};
+    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-    @if $has-input {
-        --rui-local-font-size: #{map.get($size-properties, font-size)};
-
+    @if $is-multiline {
         .input {
-            @if $is-multiline {
-                height: auto;
-                min-height: map.get($size-properties, height);
-            } @else {
-                --rui-local-height: #{map.get($size-properties, height)};
-            }
+            height: auto;
+            min-height: map.get($size-properties, height);
         }
     }
 }

package/src/styles/tools/form-fields/_variants.scss

@@ -13,11 +13,6 @@
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
 
-@mixin _disabled-state() {
-    opacity: theme.$disabled-opacity;
-    cursor: theme.$disabled-cursor;
-}
-
 // 1.
 @mixin _generate-custom-properties($type, $variant, $state) {
     @if not list.index(map.keys(map.get(settings.$themeable-variant-states, $type)), $variant) {
@@ -113,11 +108,16 @@
     }
 }
 
+@mixin disabled-state() {
+    opacity: theme.$disabled-opacity;
+    cursor: theme.$disabled-cursor;
+}
+
 @mixin visual($type, $variant: "default", $has-caret: false) {
     @include _get-theme($type, $variant);
 
     .input:disabled {
-        @include _disabled-state();
+        @include disabled-state();
     }
 
     @if $type == "box" and $variant == "filled" {
@@ -137,15 +137,15 @@
         }
 
         &.isRootDisabled .caret {
-            @include _disabled-state();
+            @include disabled-state();
         }
     }
 }
 
 @mixin validation($variant) {
-    --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
-    --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
-    --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
+    --rui-local-link-color: #{map.get(theme.$link-validation-colors, $variant, default)};
+    --rui-local-link-color-hover: #{map.get(theme.$link-validation-colors, $variant, hover)};
+    --rui-local-link-color-active: #{map.get(theme.$link-validation-colors, $variant, active)};
 
     @include _get-theme(validation, $variant);
 }

package/src/theme.scss

@@ -49,7 +49,31 @@
         // Font Families
         // =============
 
-        --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif;
+        // Native font stack inspired by Bootstrap.
+        // @see https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
+        // @see https://css-tricks.com/snippets/css/system-font-stack/
+        --rui-font-family-base:
+            /* Cross-platform generic font family (default user interface font) */
+            system-ui,
+            /* Safari for macOS and iOS (San Francisco)*/
+            -apple-system,
+            /* Windows*/
+            "Segoe UI",
+            /* Android*/
+            roboto,
+            /* Basic web fallback*/
+            "Helvetica Neue",
+            arial,
+            /* Linux*/
+            "Noto Sans",
+            "Liberation Sans",
+            /* Sans serif fallback*/
+            sans-serif,
+            /* Emoji fonts*/
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            "Segoe UI Symbol",
+            "Noto Color Emoji";
         --rui-font-family-monospace:
             "SFMono-Regular",
             "Menlo",
@@ -803,6 +827,7 @@
         --rui-Card__padding: var(--rui-dimension-space-4);
         --rui-Card__border-width: var(--rui-dimension-border-width-1);
         --rui-Card__border-radius: var(--rui-dimension-radius-2);
+        --rui-Card__background-color: var(--rui-color-background-layer-1);
         --rui-Card--dense__padding: var(--rui-dimension-space-2);
         --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
         --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
@@ -1012,6 +1037,31 @@
         --rui-Modal--large__width: 60rem;
         --rui-Modal--fullscreen__width: 100%;
         --rui-Modal--fullscreen__height: 100%;
+        --rui-Modal__animation__duration: 0.25s;
+
+        // Modal: success variant
+        --rui-Modal--success__border-color: var(--rui-color-feedback-success);
+        --rui-Modal--success__background-color: var(--rui-color-background-success);
+
+        // Modal: warning variant
+        --rui-Modal--warning__border-color: var(--rui-color-feedback-warning);
+        --rui-Modal--warning__background-color: var(--rui-color-background-warning);
+
+        // Modal: danger variant
+        --rui-Modal--danger__border-color: var(--rui-color-feedback-danger);
+        --rui-Modal--danger__background-color: var(--rui-color-background-danger);
+
+        // Modal: info variant
+        --rui-Modal--info__border-color: var(--rui-color-feedback-info);
+        --rui-Modal--info__background-color: var(--rui-color-background-info);
+
+        // Modal: help variant
+        --rui-Modal--help__border-color: var(--rui-color-feedback-help);
+        --rui-Modal--help__background-color: var(--rui-color-background-help);
+
+        // Modal: note variant
+        --rui-Modal--note__border-color: var(--rui-color-feedback-note);
+        --rui-Modal--note__background-color: var(--rui-color-background-note);
 
         //
         // Paper

package/src/translations/en.js

@@ -2,6 +2,11 @@ export default {
   Alert: {
     close: 'Close',
   },
+  FileInputField: {
+    browse: 'Browse',
+    drop: 'or drop file here',
+    filesSelected: 'files selected',
+  },
   ModalCloseButton: {
     close: 'Close',
   },

package/src/styles/settings/_z-indexes.scss

@@ -1,2 +0,0 @@
-$modal-backdrop: 2000;
-$modal: 2100;

package/src/utils/classNames.js

@@ -1,8 +0,0 @@
-export const classNames = (...classes) => {
-  const filteredClassNames = classes.filter(
-    (className) => typeof className === 'string'
-    && className.trim().length > 0,
-  );
-
-  return filteredClassNames.length > 0 ? filteredClassNames.join(' ') : undefined;
-};