@react-ui-org/react-ui 0.48.0 → 0.50.0

package/src/lib/components/Toolbar/Toolbar.jsx

@@ -1,64 +1,35 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { getAlignClassName } from './_helpers/getAlignClassName';
+import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './Toolbar.scss';
 
 export const Toolbar = ({
   align,
   children,
   dense,
-  id,
   justify,
   nowrap,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
   }
 
-  const alignClass = (value) => {
-    if (value === 'top') {
-      return styles.isAlignedToTop;
-    }
-
-    if (value === 'middle') {
-      return styles.isAlignedToMiddle;
-    }
-
-    if (value === 'bottom') {
-      return styles.isAlignedToBottom;
-    }
-
-    return styles.isAlignedToBaseline;
-  };
-
-  const justifyClass = (value) => {
-    if (value === 'start') {
-      return styles.isJustifiedToStart;
-    }
-
-    if (value === 'center') {
-      return styles.isJustifiedToCenter;
-    }
-
-    if (value === 'end') {
-      return styles.isJustifiedToEnd;
-    }
-
-    return styles.isJustifiedToSpaceBetween;
-  };
-
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.toolbar,
-        dense && styles.isDense,
-        nowrap && styles.isNowrap,
-        alignClass(align),
-        justifyClass(justify),
+        dense && styles.isToolbarDense,
+        nowrap && styles.isToolbarNowrap,
+        getAlignClassName(align, styles, 'toolbar'),
+        getJustifyClassName(justify, styles),
       )}
-      id={id}
     >
       {children}
     </div>
@@ -69,7 +40,6 @@ Toolbar.defaultProps = {
   align: 'top',
   children: null,
   dense: false,
-  id: undefined,
   justify: 'start',
   nowrap: false,
 };
@@ -91,10 +61,6 @@ Toolbar.propTypes = {
    * If `true`, spacing of all toolbar items in the toolbar will be reduced.
    */
   dense: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Horizontal alignment (distribution) of toolbar items and groups.
    */

package/src/lib/components/Toolbar/Toolbar.scss

@@ -25,47 +25,59 @@
     min-width: 0;
 }
 
-.isAlignedToTop {
+.isToolbarAlignedToTop,
+.isGroupAlignedToTop {
     align-items: flex-start;
 }
 
-.isAlignedToMiddle {
+.isToolbarAlignedToMiddle,
+.isGroupAlignedToMiddle {
     align-items: center;
 }
 
-.isAlignedToBottom {
+.isToolbarAlignedToBottom,
+.isGroupAlignedToBottom {
     align-items: flex-end;
 }
 
-.isAlignedToBaseline {
+.isToolbarAlignedToBaseline,
+.isGroupAlignedToBaseline {
     align-items: baseline;
 }
 
-.isJustifiedToStart {
+.isToolbarJustifiedToStart,
+.isGroupJustifiedToStart {
     justify-content: flex-start;
 }
 
-.isJustifiedToCenter {
+.isToolbarJustifiedToCenter,
+.isGroupJustifiedToCenter {
     justify-content: center;
 }
 
-.isJustifiedToEnd {
+.isToolbarJustifiedToEnd,
+.isGroupJustifiedToEnd {
     justify-content: flex-end;
 }
 
-.isJustifiedToSpaceBetween {
+.isToolbarJustifiedToSpaceBetween,
+.isGroupJustifiedToSpaceBetween {
     justify-content: space-between;
 }
 
-.isDense,
-.isDense .group {
+.isToolbarDense,
+.isGroupDense,
+.isToolbarDense .group,
+.isGroupDense .group {
     gap: theme.$gap-dense;
 }
 
-.isNowrap {
+.isToolbarNowrap,
+.isGroupNowrap {
     flex-wrap: nowrap;
 }
 
-.isNowrap > .item:not(.isItemFlexible) {
+.isToolbarNowrap > .item:not(.isItemFlexible),
+.isGroupNowrap > .item:not(.isItemFlexible) {
     flex: 0 1 auto;
 }

package/src/lib/components/Toolbar/ToolbarGroup.jsx

@@ -1,46 +1,32 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { getAlignClassName } from './_helpers/getAlignClassName';
 import styles from './Toolbar.scss';
 
 export const ToolbarGroup = ({
   align,
   children,
   dense,
-  id,
   nowrap,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
   }
 
-  const alignClass = (value) => {
-    if (value === 'top') {
-      return styles.isAlignedToTop;
-    }
-
-    if (value === 'middle') {
-      return styles.isAlignedToMiddle;
-    }
-
-    if (value === 'bottom') {
-      return styles.isAlignedToBottom;
-    }
-
-    return styles.isAlignedToBaseline;
-  };
-
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.group,
-        dense && styles.isDense,
-        nowrap && styles.isNowrap,
-        alignClass(align),
+        dense && styles.isGroupDense,
+        nowrap && styles.isGroupNowrap,
+        getAlignClassName(align, styles, 'group'),
       )}
-      id={id}
     >
       {children}
     </div>
@@ -51,7 +37,6 @@ ToolbarGroup.defaultProps = {
   align: 'top',
   children: null,
   dense: false,
-  id: undefined,
   nowrap: false,
 };
 
@@ -68,10 +53,6 @@ ToolbarGroup.propTypes = {
    * If `true`, spacing of toolbar items in the group will be reduced.
    */
   dense: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * If set, the toolbar group will not wrap.
    */

package/src/lib/components/Toolbar/ToolbarItem.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
@@ -8,7 +9,7 @@ import styles from './Toolbar.scss';
 export const ToolbarItem = ({
   children,
   flexible,
-  id,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -16,11 +17,11 @@ export const ToolbarItem = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.item,
         flexible && styles.isItemFlexible,
       )}
-      id={id}
     >
       {children}
     </div>
@@ -30,7 +31,6 @@ export const ToolbarItem = ({
 ToolbarItem.defaultProps = {
   children: null,
   flexible: false,
-  id: undefined,
 };
 
 ToolbarItem.propTypes = {
@@ -42,10 +42,6 @@ ToolbarItem.propTypes = {
    * Allow item to grow and shrink if needed.
    */
   flexible: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
 };
 
 export const ToolbarItemWithGlobalProps = withGlobalProps(ToolbarItem, 'ToolbarItem');

package/src/lib/components/Toolbar/_helpers/getAlignClassName.js

@@ -0,0 +1,19 @@
+export const getAlignClassName = (value, styles, type) => {
+  if (value === 'top') {
+    if (type === 'group') return styles.isGroupAlignedToTop;
+    return styles.isToolbarAlignedToTop;
+  }
+
+  if (value === 'middle') {
+    if (type === 'group') return styles.isGroupAlignedToMiddle;
+    return styles.isToolbarAlignedToMiddle;
+  }
+
+  if (value === 'bottom') {
+    if (type === 'group') return styles.isGroupAlignedToBottom;
+    return styles.isToolbarAlignedToBottom;
+  }
+
+  if (type === 'group') return styles.isGroupAlignedToBaseline;
+  return styles.isToolbarAlignedToBaseline;
+};

package/src/lib/components/Toolbar/_helpers/getJustifyClassName.js

@@ -0,0 +1,16 @@
+export const getJustifyClassName = (value, styles) => {
+  if (value === 'start') {
+    return styles.isToolbarJustifiedToStart;
+  }
+
+  if (value === 'center') {
+    return styles.isToolbarJustifiedToCenter;
+  }
+
+  if (value === 'end') {
+    return styles.isToolbarJustifiedToEnd;
+  }
+
+  return styles.isToolbarJustifiedToSpaceBetween;
+};
+

package/src/lib/components/_helpers/getRootColorClassName.js

@@ -1,42 +1,42 @@
 export const getRootColorClassName = (variant, styles) => {
   if (variant === 'primary') {
-    return styles.rootColorPrimary;
+    return styles.isRootColorPrimary;
   }
 
   if (variant === 'secondary') {
-    return styles.rootColorSecondary;
+    return styles.isRootColorSecondary;
   }
 
   if (variant === 'success') {
-    return styles.rootColorSuccess;
+    return styles.isRootColorSuccess;
   }
 
   if (variant === 'warning') {
-    return styles.rootColorWarning;
+    return styles.isRootColorWarning;
   }
 
   if (variant === 'danger') {
-    return styles.rootColorDanger;
+    return styles.isRootColorDanger;
   }
 
   if (variant === 'help') {
-    return styles.rootColorHelp;
+    return styles.isRootColorHelp;
   }
 
   if (variant === 'info') {
-    return styles.rootColorInfo;
+    return styles.isRootColorInfo;
   }
 
   if (variant === 'note') {
-    return styles.rootColorNote;
+    return styles.isRootColorNote;
   }
 
   if (variant === 'light') {
-    return styles.rootColorLight;
+    return styles.isRootColorLight;
   }
 
   if (variant === 'dark') {
-    return styles.rootColorDark;
+    return styles.isRootColorDark;
   }
 
   return null;

package/src/lib/components/_helpers/getRootSizeClassName.js

@@ -1,14 +1,14 @@
 export const getRootSizeClassName = (size, styles) => {
   if (size === 'small') {
-    return styles.rootSizeSmall;
+    return styles.isRootSizeSmall;
   }
 
   if (size === 'medium') {
-    return styles.rootSizeMedium;
+    return styles.isRootSizeMedium;
   }
 
   if (size === 'large') {
-    return styles.rootSizeLarge;
+    return styles.isRootSizeLarge;
   }
 
   return null;

package/src/lib/styles/generic/_forms.scss

@@ -1,9 +1,13 @@
-// Remove focus outline as we implement custom appearance of focus state.
-button:focus,
-input:focus,
-select:focus,
-textarea:focus {
-    outline: 0;
+@use "../tools/accessibility";
+
+// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
+// override normalize.css.
+:where(button, input, select, textarea):focus {
+    outline: none;
+}
+
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+    @include accessibility.focus-ring();
 }
 
 // Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` on fieldsets.

package/src/lib/styles/theme/_accessibility.scss

@@ -1,2 +1,4 @@
 $tap-target-size: var(--rui-tap-target-size);
+$focus-outline: var(--rui-focus-outline);
+$focus-outline-offset: var(--rui-focus-outline-offset);
 $focus-box-shadow: var(--rui-focus-box-shadow);

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

@@ -13,6 +13,7 @@ $label-font-size: var(--rui-FormField__label__font-size);
 $help-text-font-size: var(--rui-FormField__help-text__font-size);
 $help-text-font-style: var(--rui-FormField__help-text__font-style);
 $help-text-color: var(--rui-FormField__help-text__color);
+$required-label-color: var(--rui-FormField--required__label__color);
 $required-sign: var(--rui-FormField--required__sign);
 $required-sign-color: var(--rui-FormField--required__sign__color);
 

package/src/lib/styles/tools/_accessibility.scss

@@ -46,6 +46,8 @@
 
 @mixin focus-ring() {
     &:focus-visible {
+        outline: theme.$focus-outline;
+        outline-offset: theme.$focus-outline-offset;
         box-shadow: theme.$focus-box-shadow;
     }
 }

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

@@ -169,12 +169,12 @@
     }
 
     @include breakpoint.up(forms.$horizontal-breakpoint) {
-        &.rootLayoutHorizontal {
+        &.isRootLayoutHorizontal {
             display: grid;
             grid-template-columns: theme.$horizontal-full-width-label-width 1fr; // 6.
         }
 
-        &.rootLayoutHorizontal .field {
+        &.isRootLayoutHorizontal .field {
             justify-self: stretch; // 7.
         }
     }
@@ -192,8 +192,8 @@
             width: auto; // 11.
         }
 
-        &.rootLayoutHorizontal,
-        &.rootLayoutHorizontal.hasRootSmallInput {
+        &.isRootLayoutHorizontal,
+        &.isRootLayoutHorizontal.hasRootSmallInput {
             grid: inherit; // 8.
             grid-template-columns: subgrid; // 8.
             grid-column: span 2; // 8.
@@ -203,26 +203,26 @@
             }
         }
 
-        &.rootLayoutHorizontal.isRootFullWidth {
+        &.isRootLayoutHorizontal.isRootFullWidth {
             grid-template-columns: subgrid; // 8.
         }
 
-        &.rootLayoutHorizontal .label,
-        &.rootLayoutHorizontal .field,
-        &.rootLayoutHorizontal .inputContainer,
-        &.rootLayoutHorizontal .helpText,
-        &.rootLayoutHorizontal .validationText {
+        &.isRootLayoutHorizontal .label,
+        &.isRootLayoutHorizontal .field,
+        &.isRootLayoutHorizontal .inputContainer,
+        &.isRootLayoutHorizontal .helpText,
+        &.isRootLayoutHorizontal .validationText {
             grid-area: unset; // 8.
         }
 
-        &.rootLayoutHorizontal .field,
-        &.rootLayoutHorizontal .inputContainer,
-        &.rootLayoutHorizontal .helpText,
-        &.rootLayoutHorizontal .validationText {
+        &.isRootLayoutHorizontal .field,
+        &.isRootLayoutHorizontal .inputContainer,
+        &.isRootLayoutHorizontal .helpText,
+        &.isRootLayoutHorizontal .validationText {
             grid-column-start: 2; // 8.
         }
 
-        &.rootLayoutHorizontal.hasRootSmallInput .field {
+        &.isRootLayoutHorizontal.hasRootSmallInput .field {
             display: block; // 5.
         }
     }

package/src/lib/styles/tools/form-fields/_foundation.scss

@@ -12,6 +12,8 @@
 }
 
 @mixin label-required() {
+    color: var(--rui-local-surrounding-text-color, #{theme.$required-label-color});
+
     &::after {
         content: theme.$required-sign;
         color: theme.$required-sign-color;

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

@@ -99,7 +99,7 @@
             }
         }
 
-        &.isRootInFormLayout.rootLayoutHorizontal::before {
+        &.isRootInFormLayout.isRootLayoutHorizontal::before {
             grid-column-start: 2;
 
             // 4.

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

@@ -69,7 +69,7 @@
     width: auto; // 2., 3.
 
     @include breakpoint.up(forms.$horizontal-breakpoint) {
-        &.rootLayoutHorizontal {
+        &.isRootLayoutHorizontal {
             grid: inherit;
             grid-template-columns: subgrid;
             grid-column: span 2;
@@ -79,11 +79,11 @@
             }
         }
 
-        &.rootLayoutHorizontal .field {
+        &.isRootLayoutHorizontal .field {
             display: contents;
         }
 
-        &.rootLayoutHorizontal .label {
+        &.isRootLayoutHorizontal .label {
             grid-column-start: 1;
             width: auto;
             padding-right: settings.$horizontal-inner-gap;
@@ -91,14 +91,14 @@
             text-align: theme.$horizontal-label-text-align;
         }
 
-        &.rootLayoutHorizontal .input,
-        &.rootLayoutHorizontal .helpText,
-        &.rootLayoutHorizontal .validationText {
+        &.isRootLayoutHorizontal .input,
+        &.isRootLayoutHorizontal .helpText,
+        &.isRootLayoutHorizontal .validationText {
             grid-column-start: 2;
         }
 
-        &.rootLayoutHorizontal .helpText,
-        &.rootLayoutHorizontal .validationText {
+        &.isRootLayoutHorizontal .helpText,
+        &.isRootLayoutHorizontal .validationText {
             width: auto;
             max-width: 100%;
 
@@ -107,7 +107,7 @@
             }
         }
 
-        &.rootLayoutHorizontal.hasRootLabelBefore .label {
+        &.isRootLayoutHorizontal.hasRootLabelBefore .label {
             margin-right: 0;
         }
     }

package/src/lib/theme.scss

@@ -149,7 +149,9 @@
 
     // Accessibility
     --rui-tap-target-size: 10mm;
-    --rui-focus-box-shadow: 0 0 0 0.2em var(--rui-color-active-focus);
+    --rui-focus-outline: 0.2em solid var(--rui-color-active-focus);
+    --rui-focus-outline-offset: 1px;
+    --rui-focus-box-shadow: none;
 
     // Bottom spacings
     --rui-spacing-bottom-default: var(--rui-spacing-5);
@@ -738,6 +740,7 @@
     --rui-FormField__help-text__font-size: var(--rui-typography-size-small);
     --rui-FormField__help-text__font-style: normal;
     --rui-FormField__help-text__color: var(--rui-color-gray-500);
+    --rui-FormField--required__label__color: inherit;
     --rui-FormField--required__sign: "\00a0*"; // 2.
     --rui-FormField--required__sign__color: var(--rui-color-gray-500);