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

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/_foundation.scss

@@ -18,12 +18,14 @@
     color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
 }
 
-@mixin label-required() {
+@mixin label-required($show-require-sign: true) {
     color: var(--rui-local-surrounding-text-color, #{theme.$required-label-color});
 
-    &::after {
-        content: theme.$required-sign;
-        color: theme.$required-sign-color;
+    @if $show-require-sign {
+        &::after {
+            content: theme.$required-sign;
+            color: theme.$required-sign-color;
+        }
     }
 }
 

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) {
@@ -70,7 +65,7 @@
             + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
 
-    $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+    $themeable-states: map.get(settings.$themeable-variant-states, $type, $variant);
 
     @if list.index($themeable-states, "hover") {
         @include _generate-custom-properties($type, $variant, "default");
@@ -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,11 +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)};
+
     @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",
@@ -109,7 +133,8 @@
         --rui-line-height-small: 1.25;
 
         // Text decorations
-        --rui-text-decoration-link: none;
+        --rui-underline-offset-link: 0.1875em;
+        --rui-text-decoration-link: underline;
         --rui-text-decoration-link-hover: underline;
         --rui-text-decoration-link-active: underline;
 
@@ -802,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);
@@ -1011,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/provider/RUIContext.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import defaultTranslations from '../translations/en';
-
-const RUIContext = React.createContext({
-  globalProps: {},
-  translations: defaultTranslations,
-});
-
-export default RUIContext;

package/src/provider/RUIProvider.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {
-  useContext,
-  useMemo,
-} from 'react';
-import defaultTranslations from '../translations/en';
-import { mergeDeep } from '../utils/mergeDeep';
-import RUIContext from './RUIContext';
-
-const RUIProvider = ({
-  children,
-  globalProps,
-  translations,
-}) => {
-  const context = useContext(RUIContext);
-  const childProps = useMemo(() => ({
-    globalProps: mergeDeep(context?.globalProps || {}, globalProps),
-    translations: mergeDeep(context?.translations || {}, translations),
-  }), [context, globalProps, translations]);
-
-  return (
-    <RUIContext.Provider
-      value={childProps}
-    >
-      {children}
-    </RUIContext.Provider>
-  );
-};
-
-RUIProvider.defaultProps = {
-  children: null,
-  globalProps: null,
-  translations: defaultTranslations,
-};
-
-RUIProvider.propTypes = {
-  children: PropTypes.node,
-  globalProps: PropTypes.shape({}),
-  translations: PropTypes.shape({}),
-};
-
-export default RUIProvider;

package/src/provider/index.js

@@ -1,3 +0,0 @@
-export { default as RUIProvider } from './RUIProvider';
-export { default as RUIContext } from './RUIContext';
-export { default as withGlobalProps } from './withGlobalProps';

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;
-};