@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/components/Grid/Grid.scss

@@ -6,7 +6,7 @@
 //
 //    Fallback for `xs` breakpoint: `<INITIAL FALLBACK>`
 //    Fallback for `sm` breakpoint: `var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>)`
-//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
+//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INIT. FALLBACK>))`
 //
 //    … etc, up to the largest breakpoint.
 //
@@ -20,45 +20,49 @@
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
 
-@use 'sass:map';
-@use '../../styles/tools/spacing';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/tools/spacing";
+@use "theme";
+@use "tools";
 
 .root {
-  @include tools.assign-responsive-custom-properties(theme.$responsive-properties); // 1.
-  @include spacing.bottom(layouts);
+    @include tools.assign-responsive-custom-properties(theme.$responsive-properties); // 1.
+    @include spacing.bottom(layouts);
 
-  display: grid;
-  grid-template-columns: var(--rui-local-columns); // 2.
-  grid-template-rows: var(--rui-local-rows); // 2.
-  grid-auto-flow: var(--rui-local-auto-flow, #{map.get(theme.$responsive-properties, auto-flow)}); // 2.
-  grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
-  align-content: var(--rui-local-align-content, #{map.get(theme.$responsive-properties, align-content)}); // 2.
-  align-items: var(--rui-local-align-items, #{map.get(theme.$responsive-properties, align-items)}); // 2.
-  justify-content: var(--rui-local-justify-content, #{map.get(theme.$responsive-properties, justify-content)}); // 2.
-  justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
+    display: grid;
+    grid-template-columns: var(--rui-local-columns); // 2.
+    grid-template-rows: var(--rui-local-rows); // 2.
+    grid-auto-flow: var(--rui-local-auto-flow, #{map.get(theme.$responsive-properties, auto-flow)}); // 2.
+    grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
+    align-content: var(--rui-local-align-content, #{map.get(theme.$responsive-properties, align-content)}); // 2.
+    align-items: var(--rui-local-align-items, #{map.get(theme.$responsive-properties, align-items)}); // 2.
+    justify-content: var(--rui-local-justify-content, #{map.get(theme.$responsive-properties, justify-content)}); // 2.
+    justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
+}
+
+// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
+.root > * {
+    margin-block: 0;
 }
 
 .span {
-  $responsive-properties: (
-    column-span: 1,
-    row-span: 1,
-  );
+    $responsive-properties: (
+        column-span: 1,
+        row-span: 1,
+    );
 
-  @include tools.assign-responsive-custom-properties($responsive-properties); // 1.
+    @include tools.assign-responsive-custom-properties($responsive-properties); // 1.
 
-  grid-column: span var(--rui-local-column-span, 1); // 2.
-  grid-row: span var(--rui-local-row-span, 1); // 2.
+    grid-column: span var(--rui-local-column-span, 1); // 2.
+    grid-row: span var(--rui-local-row-span, 1); // 2.
 }
 
-/* stylelint-disable selector-no-qualifying-type */
-
+// stylelint-disable selector-no-qualifying-type
 dl.root,
 ol.root,
 ul.root {
-  padding-left: 0;
-  margin-left: 0;
+    padding-left: 0;
+    margin-left: 0;
+    list-style: none;
 }
-
-/* stylelint-enable selector-no-qualifying-type */
+// stylelint-enable selector-no-qualifying-type

package/src/lib/components/Grid/GridSpan.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
-import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
+import { withGlobalProps } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
 export const GridSpan = ({
@@ -12,7 +13,7 @@ export const GridSpan = ({
   tag: Tag,
   ...other
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -44,7 +45,7 @@ GridSpan.defaultProps = {
 
 GridSpan.propTypes = {
   /**
-   * Items to be aligned in the grid.
+   * Items to be aligned in the grid. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**
@@ -58,8 +59,8 @@ GridSpan.propTypes = {
       md: PropTypes.number,
       lg: PropTypes.number,
       xl: PropTypes.number,
-      xxl: PropTypes.number,
-      xxxl: PropTypes.number,
+      x2l: PropTypes.number,
+      x3l: PropTypes.number,
     }),
   ]),
   /**
@@ -77,8 +78,8 @@ GridSpan.propTypes = {
       md: PropTypes.number,
       lg: PropTypes.number,
       xl: PropTypes.number,
-      xxl: PropTypes.number,
-      xxxl: PropTypes.number,
+      x2l: PropTypes.number,
+      x3l: PropTypes.number,
     }),
   ]),
   /**
@@ -88,6 +89,6 @@ GridSpan.propTypes = {
   tag: PropTypes.string,
 };
 
-export const GridSpanWithContext = withProviderContext(GridSpan, 'GridSpan');
+export const GridSpanWithGlobalProps = withGlobalProps(GridSpan, 'GridSpan');
 
-export default GridSpanWithContext;
+export default GridSpanWithGlobalProps;

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

@@ -27,10 +27,7 @@ import { Grid } from '@react-ui-org/react-ui';
 And use it:
 
 <Playground>
-  <Grid columns="1fr 1fr 1fr">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
+  <Grid>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -41,7 +38,7 @@ See [API](#api) for all available options.
 
 ## General Guidelines
 
-- This component implements native [CSS grid layout][grid-layout], the right CSS
+- This component implements native [CSS grid layout][grid-layout], a powerful
   tool for two-dimensional layouts. You may use any value accepted by
   [grid-template-columns], [grid-template-rows], [grid-column-gap],
   [grid-row-gap], [grid-auto-flow], [align-content], [align-items],
@@ -53,20 +50,22 @@ See [API](#api) for all available options.
   markup** like GridItem or Cell is necessary for your items. But it's there
   when you really need it—see [Advanced Layouts](#advanced-layouts).
 
+- For forms, use rather the [FormLayout](/components/form-layout) component
+  which is designed specifically for that purpose.
+
 - The Grid component is so powerful that it enables you to build even very
   advanced layouts **without** having to write **a single line of custom CSS.**
   See [Advanced Layouts](#advanced-layouts) for more.
 
-👉 The default layout has one column, auto-sized rows and gaps of
-[size 4](/foundation/spacing). Defaults for all Grid API options can be
-[customized](/customize/theming/overview) with CSS custom properties.
+👉 Vertical margin of items inside Grid is reset to zero.
 
-## Columns and Rows
+## Columns
 
-Use `columns` and `rows` to specify your grid layout.
+Stack is the default outcome of Grid. Use the `columns` option to organize your
+items into grid.
 
 <Playground>
-  <Grid columns="1fr 2fr" rows="auto 200px auto">
+  <Grid columns="1fr 1fr 1fr">
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -106,6 +105,21 @@ responsive layouts. Resize the playground to see it in action.
 👉 If you need your items to have **equal height** even with content of varying
 length, it may be necessary to set `height: 100%` on them.
 
+## Rows
+
+Use `columns` and `rows` to specify a more complicated grid layout.
+
+<Playground>
+  <Grid columns="1fr 2fr" rows="auto 200px auto">
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+  </Grid>
+</Playground>
+
 ## Gaps
 
 Both column and row gaps can be customized.
@@ -141,13 +155,32 @@ Individual items and the entire grid content can be aligned and along both axes.
   </Grid>
 </Playground>
 
+## Custom HTML Tag
+
+To render as list for example, just change the output `tag` to `ul` or `ol` and
+wrap your items with `<li>`.
+
+<Playground>
+  <Grid tag="ul">
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+  </Grid>
+</Playground>
+
 ## Media Queries
 
 If you need to build more complicated layouts, you have full control over the
 grid definition. Just specify your grid layout for
 [breakpoints](/foundation/breakpoints) where a change of layout is needed.
 The Grid component is written with the mobile-first approach so values for small
-breakpoints are used until they're overriden by a bigger breakpoint. If `xs`
+breakpoints are used until they're overridden by a bigger breakpoint. If `xs`
 settings are omitted, theme defaults are used. Resize your browser to see how it
 works.
 
@@ -237,15 +270,8 @@ Wrapper for content that should span multiple rows or columns.
 
 | Custom Property                                      | Description                                                  |
 |------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Grid__columns`                                | Default columns layout                                       |
 | `--rui-Grid__column-gap`                             | Default column gap                                           |
-| `--rui-Grid__rows`                                   | Default rows layout                                          |
 | `--rui-Grid__row-gap`                                | Default row gap                                              |
-| `--rui-Grid__align-content`                          | Default vertical alignment of the layout                     |
-| `--rui-Grid__align-items`                            | Default vertical alignment of grid items                     |
-| `--rui-Grid__justify-content`                        | Default horizontal alignment of the layout                   |
-| `--rui-Grid__justify-items`                          | Default horizontal alignment of grid items                   |
-| `--rui-Grid__auto-flow`                              | Default auto-flow algorithm                                  |
 
 [grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 [grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
@@ -253,7 +279,7 @@ Wrapper for content that should span multiple rows or columns.
 [grid-column-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
 [grid-row-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
 [grid-auto-flow]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-[aling-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+[align-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 [align-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 [justify-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

package/src/lib/components/Grid/{helpers → _helpers}/generateResponsiveCustomProperties.js

@@ -12,5 +12,3 @@ export const generateResponsiveCustomProperties = (prop, infix) => {
     [`--rui-local-${infix}-${breakpoint}`]: prop[breakpoint],
   }), {});
 };
-
-export default generateResponsiveCustomProperties;

package/src/lib/components/Grid/_theme.scss

@@ -1,11 +1,11 @@
 $responsive-properties: (
-  columns: var(--rui-Grid__columns),
-  column-gap: var(--rui-Grid__column-gap),
-  rows: var(--rui-Grid__rows),
-  row-gap: var(--rui-Grid__row-gap),
-  auto-flow: var(--rui-Grid__auto-flow),
-  align-content: var(--rui-Grid__align-content),
-  align-items: var(--rui-Grid__align-items),
-  justify-content: var(--rui-Grid__justify-content),
-  justify-items: var(--rui-Grid__justify-items),
+    columns: 1fr,
+    column-gap: var(--rui-Grid__column-gap),
+    rows: auto,
+    row-gap: var(--rui-Grid__row-gap),
+    auto-flow: initial,
+    align-content: initial,
+    align-items: initial,
+    justify-content: initial,
+    justify-items: initial,
 );

package/src/lib/components/Grid/_tools.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-@use '../../styles/settings/breakpoints';
-@use '../../styles/tools/breakpoint';
+@use "sass:map";
+@use "../../styles/settings/breakpoints";
+@use "../../styles/tools/breakpoint";
 
 // Generate fallback cascade using `var()` function fallbacks.
 //
@@ -8,15 +8,15 @@
 // $initial-fallback: <string> Initial fallback value
 // $current-breakpoint: <one of $breakpoint-values> Generate cascade for breakpoints smaller than this one
 @function _generate-custom-property-fallback-cascade($property-name, $initial-fallback, $current-breakpoint) {
-  $fallback-cascade: $initial-fallback;
+    $fallback-cascade: $initial-fallback;
 
-  @each $breakpoint in map.keys(breakpoints.$values) {
-    @if $breakpoint == $current-breakpoint {
-      @return $fallback-cascade;
-    }
+    @each $breakpoint in map.keys(breakpoints.$values) {
+        @if $breakpoint == $current-breakpoint {
+            @return $fallback-cascade;
+        }
 
-    $fallback-cascade: var(--rui-local-#{$property-name}-#{$breakpoint}, $fallback-cascade);
-  }
+        $fallback-cascade: var(--rui-local-#{$property-name}-#{$breakpoint}, $fallback-cascade);
+    }
 }
 
 // Read custom properties within a given breakpoint and assign them to expected output custom
@@ -24,15 +24,15 @@
 //
 // $properties: <map of <<property name>: <initial fallback value>> pairs>
 @mixin assign-responsive-custom-properties($properties) {
-  @each $breakpoint in map.keys(breakpoints.$values) {
-    @include breakpoint.up($breakpoint) {
-      @each $property-name, $initial-fallback in $properties {
-        --rui-local-#{$property-name}:
-          var(
-            --rui-local-#{$property-name}-#{$breakpoint},
-            #{_generate-custom-property-fallback-cascade($property-name, $initial-fallback, $breakpoint)}
-          );
-      }
+    @each $breakpoint in map.keys(breakpoints.$values) {
+        @include breakpoint.up($breakpoint) {
+            @each $property-name, $initial-fallback in $properties {
+                --rui-local-#{$property-name}:
+                    var(
+                        --rui-local-#{$property-name}-#{$breakpoint},
+                        #{_generate-custom-property-fallback-cascade($property-name, $initial-fallback, $breakpoint)}
+                    );
+            }
+        }
     }
-  }
 }

package/src/lib/components/Modal/Modal.jsx

@@ -1,8 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import transferProps from '../../utils/transferProps';
-import { withProviderContext } from '../../provider';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
 import {
   Toolbar,
   ToolbarItem,
@@ -80,7 +84,6 @@ export class Modal extends React.Component {
       scrollView,
       size,
       title,
-      translations,
     } = this.props;
 
     const sizeClass = (modalSize) => {
@@ -125,10 +128,10 @@ export class Modal extends React.Component {
       if (scrollView) {
         return (
           <div
-            className={[
+            className={classNames(
               styles.body,
               styles.isBodyScrollable,
-            ].join(' ')}
+            )}
           >
             {React.cloneElement(scrollView, scrollView.props, content)}
           </div>
@@ -154,11 +157,11 @@ export class Modal extends React.Component {
         role="presentation"
       >
         <div
-          className={[
+          className={classNames(
             styles.root,
             sizeClass(size),
             positionClass(position),
-          ].join(' ')}
+          )}
           onClick={(e) => {
             e.stopPropagation();
           }}
@@ -172,15 +175,19 @@ export class Modal extends React.Component {
               {title}
             </h3>
             {onClose && (
-              <button
-                type="button"
-                className={styles.close}
-                onClick={onClose}
-                title={translations.close}
-                {...(id && { id: `${id}__closeModalHeaderButton` })}
-              >
-                ×
-              </button>
+              <RUIContext.Consumer>
+                {({ translations }) => (
+                  <button
+                    type="button"
+                    className={styles.close}
+                    onClick={onClose}
+                    title={translations.Modal.close}
+                    {...(id && { id: `${id}__closeModalHeaderButton` })}
+                  >
+                    ×
+                  </button>
+                )}
+              </RUIContext.Consumer>
             )}
           </div>
           {modalBody()}
@@ -204,12 +211,16 @@ export class Modal extends React.Component {
                 ))}
                 {onClose && (
                   <ToolbarItem>
-                    <Button
-                      label={translations.close}
-                      onClick={onClose}
-                      priority="flat"
-                      {...(id && { id: `${id}__closeModalFooterButton` })}
-                    />
+                    <RUIContext.Consumer>
+                      {({ translations }) => (
+                        <Button
+                          label={translations.Modal.close}
+                          onClick={onClose}
+                          priority="flat"
+                          {...(id && { id: `${id}__closeModalFooterButton` })}
+                        />
+                      )}
+                    </RUIContext.Consumer>
                   </ToolbarItem>
                 )}
               </Toolbar>
@@ -234,6 +245,7 @@ export class Modal extends React.Component {
 Modal.defaultProps = {
   actions: [],
   autoFocus: true,
+  children: null,
   id: undefined,
   onClose: null,
   portalId: null,
@@ -265,7 +277,7 @@ Modal.propTypes = {
   /**
    * Content of the modal.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * ID of the root HTML element. It also serves as a base for nested elements:
    * * `<ID>__content`
@@ -278,7 +290,7 @@ Modal.propTypes = {
    */
   onClose: PropTypes.func,
   /**
-   * If set, the modal is rendered in the React Portal with that ID.
+   * If set, modal is rendered in the React Portal with that ID.
    */
   portalId: PropTypes.string,
   /**
@@ -299,14 +311,8 @@ Modal.propTypes = {
    * Title displayed in modal header.
    */
   title: PropTypes.string.isRequired,
-  /**
-   * Translations required by the component.
-   */
-  translations: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }).isRequired,
 };
 
-export const ModalWithContext = withProviderContext(Modal, 'Modal');
+export const ModalWithGlobalProps = withGlobalProps(Modal, 'Modal');
 
-export default ModalWithContext;
+export default ModalWithGlobalProps;