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

package/src/lib/components/Toolbar/README.mdx

@@ -1,386 +0,0 @@
----
-name: Toolbar
-menu: 'Layouts'
-route: /components/toolbar
----
-
-# Toolbar
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import {
-  CheckboxField,
-  Button,
-  ButtonGroup,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-} from '../..'
-
-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:
-
-<Playground>
-  <Toolbar>
-    <ToolbarItem>
-      <Placeholder bordered>Toolbar item</Placeholder>
-    </ToolbarItem>
-    <ToolbarItem>
-      <Placeholder bordered>Toolbar item</Placeholder>
-    </ToolbarItem>
-    <ToolbarItem>
-      <Placeholder bordered>Toolbar item</Placeholder>
-    </ToolbarItem>
-  </Toolbar>
-</Playground>
-
-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`.
-
-<Playground>
-  {() => {
-    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>
-            <Placeholder bordered>First item</Placeholder>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Placeholder bordered>
-              Second item<br />
-              is taller
-            </Placeholder>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Placeholder bordered>Third item</Placeholder>
-          </ToolbarItem>
-        </Toolbar>
-      </div>
-    );
-  }}
-</Playground>
-
-## 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).
-
-<Playground>
-  <Toolbar justify="space-between">
-    <ToolbarGroup>
-      <ToolbarItem>
-        <Placeholder bordered>Group A</Placeholder>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Placeholder bordered>Group A</Placeholder>
-      </ToolbarItem>
-    </ToolbarGroup>
-    <ToolbarGroup align="middle">
-      <ToolbarItem>
-        <Placeholder bordered>Group B</Placeholder>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Placeholder bordered>Group B</Placeholder>
-      </ToolbarItem>
-    </ToolbarGroup>
-    <ToolbarItem>
-      <Placeholder bordered>Item</Placeholder>
-    </ToolbarItem>
-  </Toolbar>
-</Playground>
-
-## 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.
-
-<Playground>
-  {() => {
-    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>
-              <Placeholder bordered>Group item</Placeholder>
-            </ToolbarItem>
-            <ToolbarItem>
-              <Placeholder bordered>Group item</Placeholder>
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarItem>
-            <Placeholder bordered>Standalone item</Placeholder>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Placeholder bordered>Standalone item</Placeholder>
-          </ToolbarItem>
-        </Toolbar>
-      </div>
-    );
-  }}
-</Playground>
-
-## 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.
-
-📐 Try resizing the playground below to see how it works.
-
-<Playground>
-  <>
-    <p>Disabled wrapping on entire toolbar:</p>
-    <Toolbar justify="space-between" nowrap>
-      <ToolbarGroup>
-        <ToolbarItem>
-          <Placeholder bordered>Group A</Placeholder>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Placeholder bordered>Group A</Placeholder>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarGroup>
-        <ToolbarItem>
-          <Placeholder bordered>Group B</Placeholder>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Placeholder bordered>Group B</Placeholder>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarItem>
-        <Placeholder bordered>Item</Placeholder>
-      </ToolbarItem>
-    </Toolbar>
-    <p>Disabled wrapping on toolbar groups:</p>
-    <Toolbar justify="space-between">
-      <ToolbarGroup nowrap>
-        <ToolbarItem>
-          <Placeholder bordered>Group A</Placeholder>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Placeholder bordered>Group A</Placeholder>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarGroup nowrap>
-        <ToolbarItem>
-          <Placeholder bordered>Group B</Placeholder>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Placeholder bordered>Group B</Placeholder>
-        </ToolbarItem>
-      </ToolbarGroup>
-      <ToolbarItem>
-        <Placeholder bordered>Item</Placeholder>
-      </ToolbarItem>
-    </Toolbar>
-  </>
-</Playground>
-
-👉 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:
-
-<Playground>
-  <Toolbar>
-    <ToolbarItem flexible>
-      <Placeholder bordered>My Headline</Placeholder>
-    </ToolbarItem>
-    <ToolbarItem>
-      <Placeholder bordered>Action</Placeholder>
-    </ToolbarItem>
-  </Toolbar>
-</Playground>
-
-Or to build a classic media layout with image on the left and text on the right:
-
-<Playground>
-  <Toolbar>
-    <ToolbarItem>
-      <Placeholder bordered>Media object</Placeholder>
-    </ToolbarItem>
-    <ToolbarItem flexible>
-      <Placeholder bordered>Media body</Placeholder>
-    </ToolbarItem>
-  </Toolbar>
-</Playground>
-
-## 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
-
-<Props table of={Toolbar} />
-
-### ToolbarGroup API
-
-A wrapper for grouping ToolbarItems together.
-
-<Props table of={ToolbarGroup} />
-
-### ToolbarItem API
-
-A wrapper for individual toolbar items.
-
-<Props table of={ToolbarItem} />
-
-## Theming
-
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Toolbar__gap`                                 | Gap between toolbar items                                    |
-| `--rui-Toolbar__gap--dense`                          | Dense gap between toolbar items                              |
-
-[inline-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
-[block-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
-[grid]: /components/grid
-[spacing]: /css-helpers/spacing
-[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}/FormLayout/FormLayoutCustomField.jsx

@@ -13,9 +13,9 @@ const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {
     return (
       <label
+        className={styles.label}
         htmlFor={labelForId}
         id={id && `${id}__label`}
-        className={styles.label}
       >
         {label}
       </label>
@@ -25,8 +25,8 @@ const renderLabel = (id, label, labelForId) => {
   if (label) {
     return (
       <div
-        id={id && `${id}__label`}
         className={styles.label}
+        id={id && `${id}__label`}
       >
         {label}
       </div>
@@ -57,7 +57,6 @@ export const FormLayoutCustomField = ({
   return (
     <div
       {...transferProps(restProps)}
-      id={id}
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
@@ -67,11 +66,12 @@ export const FormLayoutCustomField = ({
         getRootSizeClassName(innerFieldSize, styles),
         getRootValidationStateClassName(validationState, styles),
       )}
+      id={id}
     >
       {renderLabel(id, label, labelForId)}
       <div
-        id={id && `${id}__field`}
         className={styles.field}
+        id={id && `${id}__field`}
       >
         {children}
       </div>

package/src/{lib/components → components}/Modal/ModalCloseButton.jsx

@@ -18,11 +18,11 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
   return (
     <button
       {...transferProps(restProps)}
-      type="button"
       className={styles.root}
       disabled={disabled}
       ref={ref}
       title={translations.ModalCloseButton.close}
+      type="button"
     >
       ×
     </button>