@react-ui-org/react-ui 0.44.0 → 0.46.0

package/src/lib/components/FormLayout/FormLayoutCustomField.scss

@@ -1,63 +1,63 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/variants';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/variants";
 
 // Foundation
 .root {
-  @include box-field-layout.in-form-layout();
-  @include variants.visual(custom);
+    @include box-field-layout.in-form-layout();
+    @include variants.visual(custom);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .rootLayoutVertical .field,
 .rootLayoutHorizontal .field {
-  width: auto;
+    width: auto;
 }
 
 .isRootFullWidth .field {
-  justify-self: stretch;
+    justify-self: stretch;
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small);
+    @include box-field-sizes.size(small);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium);
+    @include box-field-sizes.size(medium);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large);
+    @include box-field-sizes.size(large);
 }

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

@@ -22,7 +22,6 @@ import { SelectField } from '../SelectField/SelectField'
 import { TextArea } from '../TextArea/TextArea'
 import { TextField } from '../TextField/TextField'
 import { Toggle } from '../Toggle/Toggle'
-import { Center } from '../Center/Center'
 import { Toolbar } from '../Toolbar/Toolbar'
 import { ToolbarItem } from '../Toolbar/ToolbarItem'
 import { FormLayout } from './FormLayout'
@@ -51,19 +50,17 @@ See [API](#api) for all available options.
 Since all form fields in React UI are styled as inline blocks, they **queue up
 one after another in a row by default.** The FormLayout component is there to
 make building **vertical and horizontal forms** easy. It uses the right tool for
-the job: the
-[CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).
+the job: the [CSS grid layout][grid].
 
 - Put **only form field components** from React UI inside the FormLayout and
-  make sure they are **direct descendants** of it (React
-  [fragments](https://reactjs.org/docs/fragments.html)
-  are supported!). All React UI form components are ready for this use case and
+  make sure they are **direct descendants** of it (React [fragments] are
+  supported!). All React UI form components are ready for this use case and
   don't need to be wrapped in any `div`s. Namely, the FormLayout supports the
   following React UI components:
-  [CheckboxField](/components/ui/checkbox-field),
-  [Radio](/components/ui/radio), [SelectField](/components/ui/select-field),
-  [TextArea](/components/ui/text-area), [TextField](/components/ui/text-field),
-  and [Toggle](/components/ui/toggle).
+  [CheckboxField](/components/checkbox-field),
+  [Radio](/components/radio), [SelectField](/components/select-field),
+  [TextArea](/components/text-area), [TextField](/components/text-field),
+  and [Toggle](/components/toggle).
 
 - Use the [FormLayoutCustomField](#custom-fields) component when you need to
   place any **custom content** inside the FormLayout. This layout helper ensures
@@ -73,14 +70,12 @@ the job: the
 
 👉 For usage in auto-width Modal, you may need to turn on the `autoWidth` option
 for your FormLayout. This prevents FormLayout from unexpectedly growing in
-browsers that
-[don't support](https://github.com/react-ui-org/react-ui/issues/232)
-[CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
-in cases when there are longer validation messages or help texts.
+browsers that [don't support][rui-232] [CSS subgrid][subgrid] in cases when
+there are longer validation messages or help texts.
 
 ## Vertical Layout
 
-Vertical FormLayout works similar to the [List](/components/layout/list) layout
+Vertical FormLayout works similar to the [List](/components/list) layout
 except that no equivalent of ListItems is needed. It stacks the form fields
 vertically while it forces the vertical layout mode on them. To use this layout,
 simply wrap your form fields with the FormLayout component:
@@ -205,41 +200,18 @@ with CSS custom properties.
 
 ### Limitations
 
+#### Label Position
+
+Label position of inline form fields (CheckboxField, Toggle) is ignored in
+horizontal FormLayout.
+
 #### Modals
 
 Please note the `auto` and `limited` label width options may not function
 correctly in combination with other auto layout mechanisms, e.g. the auto-width
-[Modal](/components/ui/modal). It's just too much of magic that doesn't quite
+[Modal](/components/modal). It's just too much of magic that does not quite
 work together yet 🎩.
 
-#### Inline Form Fields
-
-CheckboxField and Toggle always display their labels after inputs inside
-FormLayout. In other words, their labels never appear in a column with other
-fields' labels even when they have `labelPosition` set to `before`. This feature
-[will be implemented](https://github.com/react-ui-org/react-ui/issues/232)
-once
-[CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
-is fully supported in
-[browsers that we support](/getting-started/browsers-and-devices).
-
-## Alignment
-
-To align whole FormLayout to center of a container, simply wrap it with the
-[Center](/components/layout/center) layout.
-
-<Playground>
-  <Placeholder bordered height="24rem">
-    <Center>
-      <FormLayout autoWidth>
-        <TextField label="A form element" />
-        <TextField label="Another form element" />
-        <TextField label="Yet another one" />
-      </FormLayout>
-    </Center>
-  </Placeholder>
-</Playground>
-
 ## Custom Fields
 
 You can even place any content you need into the FormLayout — just wrap it with
@@ -267,11 +239,10 @@ as API options as such are **not** inherited.
 
 If you are in a situation with one or more box form fields inside your
 FormLayoutCustomField, you may want to have its label aligned with the fields
-inside. Since it's
-[not quite possible to do this automatically](https://github.com/react-ui-org/react-ui/issues/265)
-due to limited browser support, there is `innerFieldSize` option which accepts
-any of existing box field sizes (small, medium, or large) and is intended right
-for this task.
+inside. Since it's [not quite possible to do this automatically][rui-265] due to
+limited browser support, there is `innerFieldSize` option which accepts any of
+existing box field sizes (small, medium, or large) and is intended right for
+this task.
 
 <Playground>
   <FormLayout fieldLayout="horizontal" labelWidth="auto">
@@ -428,6 +399,7 @@ This is a demo of all components supported by FormLayout.
             </FormLayoutCustomField>
             <CheckboxField
               checked={isDeliveryAddress}
+              helpText="Uncheck if you wish to deliver to a different address."
               label="This is my delivery address"
               onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
             />
@@ -493,3 +465,9 @@ FormLayoutCustomField can be styled using a small subset of
 |------------------------------------------------------|--------------------------------------------------------------|
 | `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state              |
 | `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state       |
+
+[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
+[fragments]: https://reactjs.org/docs/fragments.html
+[rui-232]: https://github.com/react-ui-org/react-ui/issues/232
+[rui-265]: https://github.com/react-ui-org/react-ui/issues/265

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

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
-import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
 export const Grid = ({
@@ -19,7 +20,7 @@ export const Grid = ({
   tag: Tag,
   ...other
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -113,7 +114,7 @@ Grid.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,
   /**

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,34 +20,43 @@
 //
 // 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.
 }
 
 .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
+dl.root,
+ol.root,
+ul.root {
+    padding-left: 0;
+    margin-left: 0;
+}
+// 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 { 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,
   /**

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: 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),
 );

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/List/List.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './List.scss';
 
 export const List = ({
@@ -8,11 +10,11 @@ export const List = ({
   autoWidth,
   children,
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
-  let alignClass = '';
+  let alignClass;
 
   if (align === 'start') {
     alignClass = styles.alignStart;
@@ -20,7 +22,7 @@ export const List = ({
     alignClass = styles.alignEnd;
   }
 
-  let autoWidthClass = '';
+  let autoWidthClass;
 
   if (autoWidth) {
     autoWidthClass = styles.isAutoWidth;
@@ -28,16 +30,16 @@ export const List = ({
 
   return (
     <div
-      className={`
-        ${styles.root}
-        ${autoWidthClass}
-      `.trim()}
+      className={classNames(
+        styles.root,
+        autoWidthClass,
+      )}
     >
       <ul
-        className={`
-          ${styles.list}
-          ${alignClass}
-        `.trim()}
+        className={classNames(
+          styles.list,
+          alignClass,
+        )}
       >
         {children}
       </ul>
@@ -61,7 +63,7 @@ List.propTypes = {
    */
   autoWidth: PropTypes.bool,
   /**
-   * Individual ListItems.
+   * Individual ListItems. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
 };

package/src/lib/components/List/List.scss

@@ -1,53 +1,53 @@
-@use '../../styles/tools/reset';
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .root {
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 }
 
 .list {
-  @include reset.list();
+    @include reset.list();
 
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .item {
-  width: 100%;
-  margin-bottom: theme.$row-gap;
+    width: 100%;
+    margin-bottom: theme.$row-gap;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .alignStart {
-  align-items: flex-start;
-  text-align: left;
+    align-items: flex-start;
+    text-align: left;
 }
 
 .alignEnd {
-  align-items: flex-end;
-  text-align: right;
+    align-items: flex-end;
+    text-align: right;
 }
 
 [dir="rtl"] .alignStart {
-  text-align: right;
+    text-align: right;
 }
 
 [dir="rtl"] .alignEnd {
-  text-align: left;
+    text-align: left;
 }
 
 .isAutoWidth .list {
-  display: inline-flex;
+    display: inline-flex;
 }
 
 .isAutoWidth .item {
-  width: auto;
+    width: auto;
 }
 
 .item .root {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }

package/src/lib/components/List/ListItem.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './List.scss';
 
 export const ListItem = ({ children }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -21,7 +22,7 @@ ListItem.defaultProps = {
 
 ListItem.propTypes = {
   /**
-   * Content of the list item.
+   * Content of the list item. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
 };

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

@@ -49,7 +49,7 @@ See [API](#api) for all available options.
   **not** try to put any custom HTML or React components directly into the
   List layout without wrapping it with the ListItem first.
 
-- For forms, use rather the [FormLayout](/components/layout/form-layout)
+- For forms, use rather the [FormLayout](/components/form-layout)
   component which is designed specifically for that purpose.
 
 ## List Alignment

package/src/lib/components/Media/Media.jsx

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const Media = (props) => {
-  const {
-    children,
-  } = props;
+export const Media = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
     <div className={styles.media}>
@@ -15,13 +16,19 @@ export const Media = (props) => {
   );
 };
 
+Media.defaultProps = {
+  children: null,
+};
+
 Media.propTypes = {
   /**
    * Nested elements. Supported types are:
    * * `MediaBody`
    * * `MediaObject`
+   *
+   * If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaWithContext = withProviderContext(Media, 'Media');