@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/components/Toolbar/README.md

@@ -0,0 +1,359 @@
+# Toolbar
+
+The responsive Toolbar layout is a versatile tool that allows spacing, grouping,
+and aligning inline items.
+
+## Basic Usage
+
+To implement the Toolbar component, you need to import it first:
+
+```js
+import { Toolbar, ToolbarItem } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+<Toolbar>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Toolbar item</docoff-placeholder>
+  </ToolbarItem>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Toolbar item</docoff-placeholder>
+  </ToolbarItem>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Toolbar item</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+```
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+- **Toolbar is great for flexible inline layouts.** For stacking your content
+  vertically or building two-dimensional layouts head to the [Grid][grid]
+  layout.
+
+- **Wrap your items** into the ToolbarItem component. This ensures your content
+  is properly spaced and aligned with other Toolbar elements. Do **not** try to
+  put any custom HTML or React components directly into the Toolbar layout
+  without wrapping it with the ToolbarItem first.
+
+- **Be careful with using Toolbar with long or dynamic items in narrow
+  containers.** Toolbar intentionally prevents its items from shrinking using
+  `flex: none` which may cause overflow in case of lack of horizontal space.
+  Depending on your situation, consider turning on the `nowrap` option
+  (which allows shrinking of items but disables Toolbar from wrapping), using
+  the [Text][text] component to precisely control text wrapping, or switching to
+  the [Grid][grid] layout.
+
+## Alignment
+
+You can tweak your Toolbar layout using rich alignment options, both in
+horizontal and vertical direction.
+
+👉 At the current stage of development, React UI is **RTL aware** so switching
+to a fully RTL-compatible behavior in the future should be painless. That's why
+the justification values are called rather `start` than `left` and `end` instead
+of `right`.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [alignment, setAlignment] = React.useState('top');
+  const [justification, setJustification] = React.useState('start');
+  return (
+    <div>
+      <Toolbar>
+        <ToolbarGroup align="baseline">
+          <ToolbarItem>
+            <span id="alignment-label">Alignment:</span>
+          </ToolbarItem>
+          <ToolbarItem>
+            <ButtonGroup aria-labelledby="alignment-label" priority="outline">
+              <Button
+                aria-pressed={alignment === 'top'}
+                color={alignment === 'top' ? 'selected' : 'secondary'}
+                label="top"
+                onClick={() => setAlignment('top')}
+              />
+              <Button
+                aria-pressed={alignment === 'middle'}
+                color={alignment === 'middle' ? 'selected' : 'secondary'}
+                label="middle"
+                onClick={() => setAlignment('middle')}
+              />
+              <Button
+                aria-pressed={alignment === 'bottom'}
+                color={alignment === 'bottom' ? 'selected' : 'secondary'}
+                label="bottom"
+                onClick={() => setAlignment('bottom')}
+              />
+              <Button
+                aria-pressed={alignment === 'baseline'}
+                color={alignment === 'baseline' ? 'selected' : 'secondary'}
+                label="baseline"
+                onClick={() => setAlignment('baseline')}
+              />
+            </ButtonGroup>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup align="baseline">
+          <ToolbarItem>
+            <span id="justification-label">Justification:</span>
+          </ToolbarItem>
+          <ToolbarItem>
+            <ButtonGroup aria-labelledby="justification-label" priority="outline">
+              <Button
+                aria-pressed={justification === 'start'}
+                color={justification === 'start' ? 'selected' : 'secondary'}
+                label="start"
+                onClick={() => setJustification('start')}
+              />
+              <Button
+                aria-pressed={justification === 'center'}
+                color={justification === 'center' ? 'selected' : 'secondary'}
+                label="center"
+                onClick={() => setJustification('center')}
+              />
+              <Button
+                aria-pressed={justification === 'end'}
+                color={justification === 'end' ? 'selected' : 'secondary'}
+                label="end"
+                onClick={() => setJustification('end')}
+              />
+              <Button
+                aria-pressed={justification === 'space-between'}
+                color={justification === 'space-between' ? 'selected' : 'secondary'}
+                label="space-between"
+                onClick={() => setJustification('space-between')}
+              />
+            </ButtonGroup>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </Toolbar>
+      <Toolbar align={alignment} justify={justification}>
+        <ToolbarItem>
+          <docoff-placeholder bordered>First item</docoff-placeholder>
+        </ToolbarItem>
+        <ToolbarItem>
+          <docoff-placeholder bordered>
+            Second item<br />
+            is taller
+          </docoff-placeholder>
+        </ToolbarItem>
+        <ToolbarItem>
+          <docoff-placeholder bordered>Third item</docoff-placeholder>
+        </ToolbarItem>
+      </Toolbar>
+    </div>
+  );
+});
+```
+
+## Groups
+
+Toolbar items can be grouped which enables you aligning related items together.
+To provide the best possible flexibility for building your layout, the
+ToolbarGroup allows you to set many options similar to the Toolbar: vertical
+alignment, [dense spacing](#dense-layout), or [disable wrapping](#wrapping).
+
+```docoff-react-preview
+<Toolbar justify="space-between">
+  <ToolbarGroup>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarGroup align="middle">
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Item</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+```
+
+## Dense Layout
+
+Sometimes it's useful to get related items even closer together. This can be
+easily achieved through the `dense` option which can be applied on individual
+toolbar groups, or on the entire toolbar.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [isGroupDense, setIsGroupDense] = React.useState(false);
+  const [isToolbarDense, setIsToolbarDense] = React.useState(false);
+  return (
+    <div>
+      <Toolbar>
+        <ToolbarItem>
+          <CheckboxField
+            checked={isGroupDense}
+            label="Dense ToolbarGroup"
+            onChange={(e) => setIsGroupDense(e.target.checked)}
+          />
+        </ToolbarItem>
+        <ToolbarItem>
+          <CheckboxField
+            checked={isToolbarDense}
+            label="Dense Toolbar"
+            onChange={(e) => setIsToolbarDense(e.target.checked)}
+          />
+        </ToolbarItem>
+      </Toolbar>
+      <Toolbar dense={isToolbarDense}>
+        <ToolbarGroup dense={isGroupDense}>
+          <ToolbarItem>
+            <docoff-placeholder bordered>Group item</docoff-placeholder>
+          </ToolbarItem>
+          <ToolbarItem>
+            <docoff-placeholder bordered>Group item</docoff-placeholder>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem>
+          <docoff-placeholder bordered>Standalone item</docoff-placeholder>
+        </ToolbarItem>
+        <ToolbarItem>
+          <docoff-placeholder bordered>Standalone item</docoff-placeholder>
+        </ToolbarItem>
+      </Toolbar>
+    </div>
+  );
+});
+```
+
+## Wrapping
+
+By default, all toolbar items are queued up one after another in a row. The
+items automatically wrap and create a new row. To prevent this behavior, just
+set the `nowrap` option on the Toolbar or on individual ToolbarGroups. Note that
+ToolbarGroups can still wrap when the wrapping is disabled just on their parent
+Toolbar.
+
+```docoff-react-preview
+<p>Disabled wrapping on entire toolbar:</p>
+<Toolbar justify="space-between" nowrap>
+  <ToolbarGroup>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarGroup>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Item</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+<p>Disabled wrapping on toolbar groups:</p>
+<Toolbar justify="space-between">
+  <ToolbarGroup nowrap>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group A</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarGroup nowrap>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <docoff-placeholder bordered>Group B</docoff-placeholder>
+    </ToolbarItem>
+  </ToolbarGroup>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Item</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+```
+
+👉 Depending on your situation, you may need to further control wrapping of text
+content placed within Toolbar. The [Text][text] component is designed
+specifically for this kind of job.
+
+## Flexible Items
+
+Toolbar items can be made flexible to grow and shrink according to the available
+space. This is useful e.g. when you need to combine text with an action:
+
+```docoff-react-preview
+<Toolbar>
+  <ToolbarItem flexible>
+    <docoff-placeholder bordered>My Headline</docoff-placeholder>
+  </ToolbarItem>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Action</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+```
+
+Or to build a classic media layout with image on the left and text on the right:
+
+```docoff-react-preview
+<Toolbar>
+  <ToolbarItem>
+    <docoff-placeholder bordered>Media object</docoff-placeholder>
+  </ToolbarItem>
+  <ToolbarItem flexible>
+    <docoff-placeholder bordered>Media body</docoff-placeholder>
+  </ToolbarItem>
+</Toolbar>
+```
+
+## 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
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
+## API
+
+<docoff-react-props src="/components/Toolbar/Toolbar.jsx"></docoff-react-props>
+
+### ToolbarGroup API
+
+A wrapper for grouping ToolbarItems together.
+
+<docoff-react-props src="/components/Toolbar/ToolbarGroup.jsx"></docoff-react-props>
+
+### ToolbarItem API
+
+A wrapper for individual toolbar items.
+
+<docoff-react-props src="/components/Toolbar/ToolbarItem.jsx"></docoff-react-props>
+
+## Theming
+
+| Custom Property                                      | Description                                                  |
+|------------------------------------------------------|--------------------------------------------------------------|
+| `--rui-Toolbar__gap`                                 | Gap between toolbar items                                    |
+| `--rui-Toolbar__gap--dense`                          | Dense gap between toolbar items                              |
+
+[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

package/src/{lib/components → components}/Toolbar/_helpers/getAlignClassName.js

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

package/src/components/_helpers/getRootPriorityClassName.js

@@ -0,0 +1,15 @@
+export default (priority, styles) => {
+  if (priority === 'filled') {
+    return styles.isRootPriorityFilled;
+  }
+
+  if (priority === 'outline') {
+    return styles.isRootPriorityOutline;
+  }
+
+  if (priority === 'flat') {
+    return styles.isRootPriorityFlat;
+  }
+
+  return null;
+};

package/src/{lib/index.js → index.js}

@@ -1,3 +1,9 @@
+// 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';
+
 // Components
 export { Alert } from './components/Alert';
 export { Badge } from './components/Badge';

package/src/{lib/provider → provider}/RUIProvider.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {
+  useMemo,
+} from 'react';
 import defaultTranslations from '../translations/en';
 import RUIContext from './RUIContext';
 
@@ -7,16 +9,20 @@ const RUIProvider = ({
   children,
   globalProps,
   translations,
-}) => (
-  <RUIContext.Provider
-    value={{
-      globalProps,
-      translations,
-    }}
-  >
-    {children}
-  </RUIContext.Provider>
-);
+}) => {
+  const childProps = useMemo(() => ({
+    globalProps,
+    translations,
+  }), [globalProps, translations]);
+
+  return (
+    <RUIContext.Provider
+      value={childProps}
+    >
+      {children}
+    </RUIContext.Provider>
+  );
+};
 
 RUIProvider.defaultProps = {
   children: null,

package/src/{lib/styles → styles}/tools/_caret.scss

@@ -6,7 +6,7 @@
     height: 0.4375rem;
     border-width: 2px;
     border-style: none solid solid none;
-    border-color: currentColor;
+    border-color: currentcolor;
 }
 
 @mixin rotate($rotate: 0) {

package/src/{lib/styles → styles}/tools/form-fields/_box-field-elements.scss

@@ -7,7 +7,7 @@
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
-@use "../../tools/caret";
+@use "../caret";
 @use "../spacing";
 @use "../transition";
 

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

@@ -26,8 +26,12 @@
 //     Reverted for full-width fields.
 //
 // 8.  Grid settings are inherited from horizontal FormLayout and applied using `subgrid`.
-//     A fallback is supplied to browsers that don't support `subgrid` yet. See FormLayout styles
-//     for more.
+//     A fallback is supplied to browsers that don't support `subgrid` yet.
+//
+//     Chrome 117+ supports `subgrid` but it doesn't work for `<fieldset>`. This is why we always
+//     use the fallback for `<fieldset>`.
+//
+//     https://bugs.chromium.org/p/chromium/issues/detail?id=1473242
 //     https://github.com/react-ui-org/react-ui/issues/232
 //
 // 9.  Help texts and validation messages can take up full width of FormLayout. There is no reason
@@ -180,7 +184,7 @@
     }
 }
 
-@mixin in-form-layout() {
+@mixin in-form-layout($is-fieldset: false) {
     justify-self: start; // 12.
 
     .field {
@@ -192,19 +196,27 @@
             width: auto; // 11.
         }
 
-        &.isRootLayoutHorizontal,
-        &.isRootLayoutHorizontal.hasRootSmallInput {
-            grid: inherit; // 8.
-            grid-template-columns: subgrid; // 8.
-            grid-column: span 2; // 8.
-
-            @supports not (grid-template-columns: subgrid) {
-                display: contents; // 8.
+        // 8.
+        @if $is-fieldset {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                display: contents;
+            }
+        } @else {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                grid: inherit;
+                grid-template-columns: subgrid;
+                grid-column: span 2;
+
+                @supports not (grid-template-columns: subgrid) {
+                    display: contents;
+                }
             }
-        }
 
-        &.isRootLayoutHorizontal.isRootFullWidth {
-            grid-template-columns: subgrid; // 8.
+            &.isRootLayoutHorizontal.isRootFullWidth {
+                grid-template-columns: subgrid;
+            }
         }
 
         &.isRootLayoutHorizontal .label,

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

@@ -11,7 +11,7 @@
 
 @use "../../theme/typography";
 @use "../../theme/form-fields" as theme;
-@use "../../tools/accessibility";
+@use "../accessibility";
 @use "../transition";
 
 @mixin check-input($type) {
@@ -26,7 +26,7 @@
     background-size: contain;
     background-repeat: no-repeat;
     background-color: var(--rui-local-check-background-color);
-    color-adjust: exact; // 1.
+    print-color-adjust: exact; // 1.
 
     &:focus,
     &:checked:focus {

package/src/{lib/theme.scss → theme.scss}

@@ -4,7 +4,8 @@
 @use "styles/theme-constants/colors";
 @use "styles/theme-constants/svg";
 
-:root {
+:root,
+:host {
     // ============================================================================================ //
     // GLOBAL TOKENS                                                                                //
     // ============================================================================================ //
@@ -717,7 +718,7 @@
     // ButtonGroup: filled buttons
     --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width));
     --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
-    --rui-ButtonGroup--filled__separator__color: currentColor;
+    --rui-ButtonGroup--filled__separator__color: currentcolor;
 
     // ButtonGroup: outline buttons
     --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
@@ -727,7 +728,7 @@
     // ButtonGroup: flat buttons
     --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
     --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
-    --rui-ButtonGroup--flat__separator__color: currentColor;
+    --rui-ButtonGroup--flat__separator__color: currentcolor;
 
     //
     // Card