@react-ui-org/react-ui 0.54.0 → 0.55.0

package/src/components/Toggle/Toggle.module.scss

@@ -0,0 +1,63 @@
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+
+@layer components.toggle {
+    // Foundation
+    .root {
+        @include foundation.root();
+        @include inline-field-layout.root();
+        @include inline-field-elements.min-tap-target($type: toggle);
+        @include variants.visual(check);
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .field {
+        @include inline-field-layout.field($type: toggle);
+    }
+
+    .input {
+        @include inline-field-elements.check-input($type: toggle);
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Invisible label
+    .isLabelHidden {
+        @include accessibility.hide-text();
+    }
+
+    // Layouts
+    .hasRootLabelBefore {
+        @include inline-field-layout.has-label-before();
+    }
+
+    .isRootInFormLayout {
+        @include inline-field-layout.in-form-layout();
+    }
+}

package/src/components/Toolbar/README.md

@@ -322,13 +322,15 @@ Or to build a classic media layout with image on the left and text on the right:
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -353,7 +355,7 @@ A wrapper for individual toolbar items.
 | `--rui-Toolbar__gap`                                 | Gap between toolbar items                                    |
 | `--rui-Toolbar__gap--dense`                          | Dense gap between toolbar items                              |
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [grid]: /components/Grid
 [text]: /components/Text
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Toolbar/Toolbar.jsx

@@ -6,7 +6,7 @@ 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';
+import styles from './Toolbar.module.scss';
 
 export const Toolbar = ({
   align,

package/src/components/Toolbar/Toolbar.module.scss

@@ -0,0 +1,85 @@
+// 1. Get rid of unwanted spacing of inline elements by invocation of flex layout.
+
+@use "../../styles/tools/spacing";
+@use "theme";
+
+@layer components.toolbar {
+    .toolbar,
+    .group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme.$gap;
+    }
+
+    .toolbar {
+        @include spacing.bottom(layouts);
+    }
+
+    .item {
+        display: flex; // 1.
+        flex: none;
+        flex-direction: column; // 1.
+    }
+
+    .isItemFlexible {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .isToolbarAlignedToTop,
+    .isGroupAlignedToTop {
+        align-items: flex-start;
+    }
+
+    .isToolbarAlignedToMiddle,
+    .isGroupAlignedToMiddle {
+        align-items: center;
+    }
+
+    .isToolbarAlignedToBottom,
+    .isGroupAlignedToBottom {
+        align-items: flex-end;
+    }
+
+    .isToolbarAlignedToBaseline,
+    .isGroupAlignedToBaseline {
+        align-items: baseline;
+    }
+
+    .isToolbarJustifiedToStart,
+    .isGroupJustifiedToStart {
+        justify-content: flex-start;
+    }
+
+    .isToolbarJustifiedToCenter,
+    .isGroupJustifiedToCenter {
+        justify-content: center;
+    }
+
+    .isToolbarJustifiedToEnd,
+    .isGroupJustifiedToEnd {
+        justify-content: flex-end;
+    }
+
+    .isToolbarJustifiedToSpaceBetween,
+    .isGroupJustifiedToSpaceBetween {
+        justify-content: space-between;
+    }
+
+    .isToolbarDense,
+    .isGroupDense,
+    .isToolbarDense .group,
+    .isGroupDense .group {
+        gap: theme.$gap-dense;
+    }
+
+    .isToolbarNowrap,
+    .isGroupNowrap {
+        flex-wrap: nowrap;
+    }
+
+    .isToolbarNowrap > .item:not(.isItemFlexible),
+    .isGroupNowrap > .item:not(.isItemFlexible) {
+        flex: 0 1 auto;
+    }
+}

package/src/components/Toolbar/ToolbarGroup.jsx

@@ -5,7 +5,7 @@ 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';
+import styles from './Toolbar.module.scss';
 
 export const ToolbarGroup = ({
   align,

package/src/components/Toolbar/ToolbarItem.jsx

@@ -4,7 +4,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import styles from './Toolbar.scss';
+import styles from './Toolbar.module.scss';
 
 export const ToolbarItem = ({
   children,

package/src/components/_helpers/transferProps.js

@@ -1,7 +1,47 @@
-export const transferProps = ({
-  children,
-  className,
-  ref,
-  staticContext,
-  ...restProps
-}) => restProps;
+/**
+ * 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
+ */
+export const transferProps = (props) => {
+  const {
+    children,
+    className,
+    contentEditable,
+    dangerouslySetInnerHTML,
+    ref,
+    staticContext,
+    style,
+    suppressContentEditableWarning,
+    ...restProps
+  } = props;
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('props', props);
+    const invalidProps = [
+      'children', // It is always either handled by the component itself or not supported.
+      'className', // Classes are set by component authors, changing it arbitrarily might break things.
+      'contentEditable', // Components are either interactive or not, changing it arbitrarily might break things.
+      'dangerouslySetInnerHTML', // This might break things and allow for XSS attacks.
+      'ref', // Forwarding `ref` is hardcoded and documented for each component.
+      'staticContext', // In `react-router` (v4, v5) this is used during server side rendering, it makes no sense to pass it to a component.
+      'style', // Styles are set by component authors, changing it arbitrarily might break things.
+      'suppressContentEditableWarning', // Since setting `contentEditable` is not allowed, this is not needed.
+    ]
+      .filter((key) => props[key] !== undefined);
+
+    if (invalidProps.length > 0) {
+      // eslint-disable-next-line no-console
+      console.error(`Invalid prop(s) supplied to the "transferProps" function: "${invalidProps.join('", "')}"`);
+    }
+  }
+
+  return restProps;
+};

package/src/foundation.scss

@@ -1,28 +1,33 @@
 // Mandatory themeable CSS layer to prepare ground for components.
-// Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
+
+@use "sass:meta";
 
 //
-// 1. Generic
-// ==========
+// Generic
+// =======
 //
 // Ground-zero styles.
 
-@use "styles/generic/box-sizing";
-@use "normalize.css/normalize.css";
-@use "styles/generic/focus";
-@use "styles/generic/forms";
-@use "styles/generic/reset";
-@use "styles/generic/shared";
+@layer foundation.generic {
+    @include meta.load-css("styles/generic/box-sizing");
+    @include meta.load-css("normalize.css/normalize.css");
+    @include meta.load-css("styles/generic/focus");
+    @include meta.load-css("styles/generic/forms");
+    @include meta.load-css("styles/generic/reset");
+    @include meta.load-css("styles/generic/shared");
+}
 
 //
-// 2. Elements
-// ===========
+// Elements
+// ========
 //
 // Unclassed HTML elements (type selectors).
 
-@use "styles/elements/code";
-@use "styles/elements/links";
-@use "styles/elements/lists";
-@use "styles/elements/page";
-@use "styles/elements/rulers";
-@use "styles/elements/small";
+@layer foundation.elements {
+    @include meta.load-css("styles/elements/code");
+    @include meta.load-css("styles/elements/links");
+    @include meta.load-css("styles/elements/lists");
+    @include meta.load-css("styles/elements/page");
+    @include meta.load-css("styles/elements/rulers");
+    @include meta.load-css("styles/elements/small");
+}

package/src/helpers.scss

@@ -1,22 +1,26 @@
 // Optional layer with helper CSS classes to easily adjust visual details.
-// Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
-// This file should be imported as the very last of your stylesheets.
+
+@use "sass:meta";
 
 //
-// 1. Helpers
-// ==========
+// Helpers
+// =======
 //
 // General purpose helpers for common situations. They can compose multiple CSS rules to do a bit
 // more complicated tasks.
 
-@use "styles/helpers/animation";
+@layer helpers {
+    @include meta.load-css("styles/helpers/animation");
+}
 
 //
-// 2. Utilities
-// ============
+// Utilities
+// =========
 //
 // Utility classes to tweak small details like typography, margins or padding. They do just one
 // thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it.
 // Also they are often responsive (can be adjusted for individual breakpoints).
 
-@use "styles/utilities";
+@layer utilities {
+    @include meta.load-css("styles/utilities");
+}

package/src/index.js

@@ -1,8 +1,7 @@
 // Global definitions
-// These need to be imported here to be placed in the distribution CSS file
-import './theme.scss';
-import './foundation.scss';
-import './helpers.scss';
+// The styles need to be imported here to be placed in the distribution CSS file.
+// Component styles are imported in the components themselves below.
+import './index.scss';
 
 // Components
 export { Alert } from './components/Alert';

package/src/index.scss

@@ -0,0 +1,7 @@
+// First establish cascade layers:
+@forward "layers"; // ⚠️ Must come first for the cascade layers to work as intended.
+
+// Then import the rest of the files, already organized by layer:
+@forward "theme";
+@forward "foundation";
+@forward "helpers";

package/src/layers.scss

@@ -0,0 +1,4 @@
+// Establish CSS cascade layers.
+// ⚠️ WARNING: This file must be called before other React UI styles for the cascade layers to work as intended.
+
+@layer theme, foundation, helpers, components, utilities;

package/src/styles/elements/_page.scss

@@ -2,8 +2,6 @@
 @use "../theme/typography";
 
 html {
-    width: 100%;
-    height: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-weight: typography.$font-weight-base;
@@ -13,8 +11,6 @@ html {
 }
 
 body {
-    width: 100%;
-    min-height: 100%;
     font-size: 1em;
     color: page.$color;
     background-color: page.$background;

package/src/styles/helpers/_animation.scss

@@ -12,10 +12,10 @@ $_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
     }
 }
 
-:global(.animation-spin-clockwise) {
+.animation-spin-clockwise {
     animation: spin $_spin-duration $_spin-easing infinite;
 }
 
-:global(.animation-spin-counterclockwise) {
+.animation-spin-counterclockwise {
     animation: spin $_spin-duration $_spin-easing infinite reverse;
 }

package/src/styles/tools/_utilities.scss

@@ -20,7 +20,7 @@
         // Don't prefix if value key is null (e.g. with shadow class)
         $property-class-modifier: if($key, "-" + $key, "");
 
-        :global(.#{$property-class + $infix + $property-class-modifier}) {
+        .#{$property-class + $infix + $property-class-modifier} {
             @each $property in $properties {
                 // stylelint-disable-next-line declaration-no-important
                 #{$property}: $value !important;