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

package/src/lib/components/FileInputField/FileInputField.scss

@@ -1,67 +1,67 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include accessibility.focus-ring();
+    @include accessibility.focus-ring();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .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);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }

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

@@ -191,7 +191,7 @@ It's possible to disable the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={FileInputField} />

package/src/lib/components/FormLayout/FormLayout.jsx

@@ -1,21 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 
-export const FormLayout = (props) => {
-  const {
-    autoWidth,
-    children,
-    fieldLayout,
-    id,
-    labelWidth,
-  } = props;
-
-  if (!children) {
+export const FormLayout = ({
+  autoWidth,
+  children,
+  fieldLayout,
+  id,
+  labelWidth,
+}) => {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -48,12 +48,12 @@ export const FormLayout = (props) => {
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
         fieldLayoutClass(fieldLayout),
-        autoWidth ? styles.isRootAutoWidth : '',
-        fieldLayout === 'horizontal' ? labelWidthClass(labelWidth) : '',
-      ].join(' ')}
+        autoWidth && styles.isRootAutoWidth,
+        fieldLayout === 'horizontal' && labelWidthClass(labelWidth),
+      )}
       {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
     >
       <FormLayoutContext.Provider
@@ -88,6 +88,8 @@ FormLayout.propTypes = {
    * * `TextArea`
    * * `TextField`
    * * `Toggle`
+   *
+   * If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**
@@ -108,6 +110,6 @@ FormLayout.propTypes = {
   ]),
 };
 
-export const FormLayoutWithContext = withProviderContext(FormLayout, 'FormLayout');
+export const FormLayoutWithGlobalProps = withGlobalProps(FormLayout, 'FormLayout');
 
-export default FormLayoutWithContext;
+export default FormLayoutWithGlobalProps;

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

@@ -13,46 +13,46 @@
 //    (a global default which can be customised per use).
 //    https://github.com/react-ui-org/react-ui/issues/232
 
-@use '../../styles/settings/forms';
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/settings/forms";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .root {
-  --rui-local-field-width: 1fr;
+    --rui-local-field-width: 1fr;
 
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 }
 
 .rootFieldLayoutVertical,
 .rootFieldLayoutHorizontal {
-  display: grid;
-  grid-template-columns: var(--rui-local-field-width);
-  grid-row-gap: theme.$row-gap;
+    display: grid;
+    grid-template-columns: var(--rui-local-field-width);
+    grid-row-gap: theme.$row-gap;
 }
 
 .rootFieldLayoutHorizontal {
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
-  }
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
+    }
 }
 
 .hasRootLabelWidthDefault {
-  --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
+    --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
 }
 
 .hasRootLabelWidthAuto {
-  --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
 }
 
 .hasRootLabelWidthLimited {
-  --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
 }
 
 .hasRootLabelWidthCustom {
-  --rui-local-label-width: var(--rui-custom-label-width); // 3.
+    --rui-local-label-width: var(--rui-custom-label-width); // 3.
 }
 
 .isRootAutoWidth {
-  --rui-local-field-width: min-content;
+    --rui-local-field-width: min-content;
 }

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

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../provider';
-import styles from './FormLayoutCustomField.scss';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
+import styles from './FormLayoutCustomField.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {
@@ -46,18 +48,22 @@ export const FormLayoutCustomField = ({
 }) => {
   const context = useContext(FormLayoutContext);
 
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
+        fullWidth && styles.isRootFullWidth,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(innerFieldSize, styles),
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
     >
       {renderLabel(id, label, labelForId)}
       <div
@@ -84,7 +90,7 @@ FormLayoutCustomField.defaultProps = {
 
 FormLayoutCustomField.propTypes = {
   /**
-   * Custom HTML or React component(s).
+   * Custom HTML or React component(s). If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**
@@ -125,6 +131,6 @@ FormLayoutCustomField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
 };
 
-export const FormLayoutCustomFieldWithContext = withProviderContext(FormLayoutCustomField, 'FormLayoutCustomField');
+export const FormLayoutCustomFieldWithGlobalProps = withGlobalProps(FormLayoutCustomField, 'FormLayoutCustomField');
 
-export default FormLayoutCustomFieldWithContext;
+export default FormLayoutCustomFieldWithGlobalProps;

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,13 +50,11 @@ 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/checkbox-field),
@@ -73,17 +70,14 @@ 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/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:
+Vertical FormLayout works similar to single-column [Grid](/components/grid)
+layout while it also forces vertical layout mode on form fields. To use this
+layout, simply wrap your form fields with the FormLayout component:
 
 <Playground>
   <FormLayout>
@@ -148,7 +142,7 @@ with CSS custom properties.
             <span id="label-width-options-label">Label width:</span>
           </ToolbarItem>
           <ToolbarItem>
-            <ButtonGroup aria-labelledby="#label-width-options-label">
+            <ButtonGroup aria-labelledby="label-width-options-label">
               <Button
                 color={labelWidth === 'default' ? 'dark' : 'primary'}
                 label="default"
@@ -205,41 +199,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/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/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 +238,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 +398,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 +464,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 { withGlobalProps } from '../../provider';
+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;
   }
 
@@ -76,8 +77,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -92,8 +93,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -108,12 +109,12 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
-   * Items to be aligned in the grid.
+   * Items to be aligned in the grid. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**
@@ -128,8 +129,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -144,8 +145,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -164,8 +165,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -180,8 +181,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -196,8 +197,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -212,8 +213,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -223,6 +224,6 @@ Grid.propTypes = {
   tag: PropTypes.string,
 };
 
-export const GridWithContext = withProviderContext(Grid, 'Grid');
+export const GridWithGlobalProps = withGlobalProps(Grid, 'Grid');
 
-export default GridWithContext;
+export default GridWithGlobalProps;