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

package/src/lib/components/{ui/TextField → TextField}/TextField.jsx

@@ -1,22 +1,22 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
+import React, { useContext } from 'react';
+import getRootSizeClassName from '../../helpers/getRootSizeClassName';
+import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
+import { withProviderContext } from '../../provider';
+import transferProps from '../../utils/transferProps';
+import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
 
 export const TextField = ({
-  changeHandler,
   disabled,
   forwardedRef,
   fullWidth,
   helpText,
   id,
-  inFormLayout,
   inputSize,
   isLabelVisible,
   label,
@@ -31,6 +31,7 @@ export const TextField = ({
   variant,
   ...restProps
 }) => {
+  const context = useContext(FormLayoutContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
@@ -39,9 +40,11 @@ export const TextField = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         hasSmallInput ? styles.hasRootSmallInput : '',
-        inFormLayout ? styles.isRootInFormLayout : '',
         inputSize ? styles.hasRootCustomInputSize : '',
-        layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context ? styles.isRootInFormLayout : '',
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+          ? styles.rootLayoutHorizontal
+          : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',
         required ? styles.isRootRequired : '',
         getRootSizeClassName(size, styles),
@@ -68,7 +71,6 @@ export const TextField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            onChange={changeHandler}
             placeholder={placeholder}
             ref={forwardedRef}
             required={required}
@@ -102,13 +104,11 @@ export const TextField = ({
 };
 
 TextField.defaultProps = {
-  changeHandler: null,
   disabled: false,
   forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
-  inFormLayout: false,
   inputSize: null,
   isLabelVisible: true,
   layout: 'vertical',
@@ -123,10 +123,6 @@ TextField.defaultProps = {
 };
 
 TextField.propTypes = {
-  /**
-   * Function to call when the input has changed.
-   */
-  changeHandler: PropTypes.func,
   /**
    * If `true`, the input will be disabled.
    */
@@ -148,17 +144,16 @@ TextField.propTypes = {
    */
   helpText: PropTypes.node,
   /**
-   * ID of the input HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__label`, `<ID>__labelText`, `<ID>__helpText`, and `<ID>__validationText`.
+   * ID of the input HTML element. It also serves as a prefix for nested elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
    */
   id: PropTypes.string,
   /**
    * Treat the field differently when it's inside a FormLayout. Do not set manually!
    */
-  inFormLayout: PropTypes.bool,
-  /**
-   * Width of the input field. Translated as `size` attribute for input types other than `number`.
-   */
   inputSize: PropTypes.number,
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
@@ -171,6 +166,9 @@ TextField.propTypes = {
   label: PropTypes.string.isRequired,
   /**
    * Layout of the field.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**

package/src/lib/components/{ui/TextField → TextField}/TextField.scss

@@ -1,9 +1,9 @@
-@use '../../../styles/tools/form-fields/box-field-elements';
-@use '../../../styles/tools/form-fields/box-field-layout';
-@use '../../../styles/tools/form-fields/box-field-sizes';
-@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/box-field-sizes';
+@use '../../styles/tools/form-fields/foundation';
+@use '../../styles/tools/form-fields/variants';
+@use '../../styles/tools/accessibility';
 
 // Foundation
 .root {

package/src/lib/components/{ui/Toggle → Toggle}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Toggle
-menu: 'UI'
-route: /components/ui/toggle
+menu: 'Inputs'
+route: /components/toggle
 ---
 
 # Toggle
@@ -29,9 +29,9 @@ And use it:
     const [studioQuality, setStudioQuality] = React.useState(true);
     return (
       <Toggle
-        changeHandler={() => setStudioQuality(!studioQuality)}
         checked={studioQuality}
         label="Listen in studio quality"
+        onChange={() => setStudioQuality(!studioQuality)}
       />
     );
   }}
@@ -44,7 +44,7 @@ See [API](#api) for all available options.
 - Use the toggle only for boolean (true/false) input **with an immediate effect
   (without confirmation)**. To toggle things on or off in forms that require to
   be submitted by a button, use rather the
-  [CheckboxField](/components/ui/checkbox-field) component.
+  [CheckboxField](/components/checkbox-field) component.
 
 - **Use positive wording for the toggle label,** so that it's clear what will
   happen when the user turns on the toggle. Avoid negations such as “Don't send
@@ -63,7 +63,7 @@ See [API](#api) for all available options.
 - The toggle is designed for **switching things on and off.** Don't use it to
   switch between two different things that cannot be described as on or off
   using a single label, e.g. different viewing modes. In such cases, consider
-  using the [ButtonGroup](/components/ui/button-group) component.
+  using the [ButtonGroup](/components/button-group) component.
 
 ## Help Text
 
@@ -75,13 +75,13 @@ turning the toggle on or off.
     const [studioQuality, setStudioQuality] = React.useState(true);
     return (
       <Toggle
-        changeHandler={() => setStudioQuality(!studioQuality)}
         checked={studioQuality}
         helpText={
           'Unrivaled audio quality. Uses the MQA audio format. '
           + 'Transfers a lot of data.'
         }
         label="Listen in studio quality"
+        onChange={() => setStudioQuality(!studioQuality)}
       />
     );
   }}
@@ -97,10 +97,10 @@ remains accessible to assistive technologies.
     const [studioQuality, setStudioQuality] = React.useState(true);
     return (
       <Toggle
-        changeHandler={() => setStudioQuality(!studioQuality)}
         checked={studioQuality}
         isLabelVisible={false}
         label="You cannot see this"
+        onChange={() => setStudioQuality(!studioQuality)}
       />
     );
   }}
@@ -113,10 +113,10 @@ It's also possible to display the label before the input:
     const [studioQuality, setStudioQuality] = React.useState(true);
     return (
       <Toggle
-        changeHandler={() => setStudioQuality(!studioQuality)}
         checked={studioQuality}
         label="Listen in studio quality"
         labelPosition="before"
+        onChange={() => setStudioQuality(!studioQuality)}
       />
     );
   }}
@@ -137,15 +137,15 @@ have.
     return (
       <>
         <Toggle
-          changeHandler={() => setStudioQuality(!studioQuality)}
           checked={studioQuality}
           label="Listen in studio quality"
+          onChange={() => setStudioQuality(!studioQuality)}
           validationState="valid"
         />
         <Toggle
-          changeHandler={() => setStudioQuality(!studioQuality)}
           checked={studioQuality}
           label="Listen in studio quality"
+          onChange={() => setStudioQuality(!studioQuality)}
           validationState="warning"
           validationText={
             'Looks like you are connected over cellular network. '
@@ -153,9 +153,9 @@ have.
           }
         />
         <Toggle
-          changeHandler={() => setStudioQuality(!studioQuality)}
           checked={studioQuality}
           label="Listen in studio quality"
+          onChange={() => setStudioQuality(!studioQuality)}
           validationState="invalid"
           validationText="Please upgrade your plan to make this option available."
         />
@@ -179,9 +179,10 @@ Disabled state makes the input unavailable.
 
 ## API
 
-In addition to the options below, you can add any custom attributes that do not
-interfere with the API, and they will be passed to the `input` HTML element.
-This is useful mainly to improve component's accessibility.
+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
+interactive and helps improve its accessibility.
 
 <Props table of={Toggle} />
 
@@ -199,3 +200,5 @@ options. On top of that, the following options are available for Toggle.
 | `--rui-FormField--check__input--toggle--default__background-position` | Background position of unchecked input      |
 | `--rui-FormField--check__input--toggle--checked__background-image` | Background image of checked input              |
 | `--rui-FormField--check__input--toggle--checked__background-position` | Background position of checked input        |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/Toggle/Toggle.jsx

@@ -0,0 +1,163 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
+import { withProviderContext } from '../../provider';
+import transferProps from '../../utils/transferProps';
+import { FormLayoutContext } from '../FormLayout';
+import withForwardedRef from '../withForwardedRef';
+import styles from './Toggle.scss';
+
+export const Toggle = ({
+  checked,
+  disabled,
+  forwardedRef,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  labelPosition,
+  required,
+  validationState,
+  validationText,
+  value,
+  ...restProps
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <label
+      className={[
+        styles.root,
+        context ? styles.isRootInFormLayout : '',
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
+        disabled ? styles.isRootDisabled : '',
+        required ? styles.isRootRequired : '',
+        getRootValidationStateClassName(validationState, styles),
+      ].join(' ')}
+      htmlFor={id}
+      id={id && `${id}__label`}
+    >
+      <div className={styles.field}>
+        <input
+          {...transferProps(restProps)}
+          checked={checked}
+          className={styles.input}
+          disabled={disabled}
+          id={id}
+          name={id}
+          ref={forwardedRef}
+          required={required}
+          type="checkbox"
+          value={value}
+        />
+        <div
+          className={[
+            styles.label,
+            isLabelVisible ? '' : styles.isLabelHidden,
+          ].join(' ')}
+          id={id && `${id}__labelText`}
+        >
+          {label}
+        </div>
+      </div>
+      {helpText && (
+        <div
+          className={styles.helpText}
+          id={id && `${id}__helpText`}
+        >
+          {helpText}
+        </div>
+      )}
+      {validationText && (
+        <div
+          className={styles.validationText}
+          id={id && `${id}__validationText`}
+        >
+          {validationText}
+        </div>
+      )}
+    </label>
+  );
+};
+
+Toggle.defaultProps = {
+  checked: undefined,
+  disabled: false,
+  forwardedRef: undefined,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  labelPosition: 'after',
+  required: false,
+  validationState: null,
+  validationText: null,
+  value: undefined,
+};
+
+Toggle.propTypes = {
+  /**
+   * If `true`, the input will be checked.
+   */
+  checked: PropTypes.bool,
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Reference forwarded to the `input` element.
+   */
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  /**
+   * Optional help text.
+   */
+  helpText: PropTypes.node,
+  /**
+    * ID of the input HTML element. It also serves as a prefix for nested elements:
+    * * `<ID>__label`
+    * * `<ID>__labelText`
+    * * `<ID>__helpText`
+    * * `<ID>__validationText`
+    */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Toggle label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Placement of the label relative to the input.
+   */
+  labelPosition: PropTypes.oneOf(['before', 'after']),
+  /**
+   * If `true`, the input will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Alter the field to provide feedback based on validation result.
+   */
+  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
+  /**
+   * Validation message to be displayed.
+   */
+  validationText: PropTypes.node,
+  /**
+   * Value of the input.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+export const ToggleWithContext = withForwardedRef(withProviderContext(Toggle, 'Toggle'));
+
+export default ToggleWithContext;

package/src/lib/components/{ui/Toggle → Toggle}/Toggle.scss

@@ -1,8 +1,8 @@
-@use '../../../styles/tools/form-fields/foundation';
-@use '../../../styles/tools/form-fields/inline-field-elements';
-@use '../../../styles/tools/form-fields/inline-field-layout';
-@use '../../../styles/tools/form-fields/variants';
-@use '../../../styles/tools/accessibility';
+@use '../../styles/tools/form-fields/foundation';
+@use '../../styles/tools/form-fields/inline-field-elements';
+@use '../../styles/tools/form-fields/inline-field-layout';
+@use '../../styles/tools/form-fields/variants';
+@use '../../styles/tools/accessibility';
 
 // Foundation
 .root {

package/src/lib/components/{layout/Toolbar → Toolbar}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Toolbar
 menu: 'Layouts'
-route: /components/layout/toolbar
+route: /components/toolbar
 ---
 
 # Toolbar
@@ -10,10 +10,10 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
-import { CheckboxField } from '../../ui/CheckboxField/CheckboxField'
-import { Button } from '../../ui/Button/Button'
-import { ButtonGroup } from '../../ui/ButtonGroup/ButtonGroup'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
+import { CheckboxField } from '../CheckboxField/CheckboxField'
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 import { Toolbar } from './Toolbar'
 import { ToolbarGroup } from './ToolbarGroup'
 import { ToolbarItem } from './ToolbarItem'
@@ -90,24 +90,24 @@ of `right`.
             <ToolbarItem>
               <ButtonGroup aria-labelledby="#alignment-label">
                 <Button
-                  label="top"
-                  clickHandler={() => setAlignment('top')}
                   color={alignment === 'top' ? 'dark' : 'primary'}
+                  label="top"
+                  onClick={() => setAlignment('top')}
                 />
                 <Button
-                  label="middle"
-                  clickHandler={() => setAlignment('middle')}
                   color={alignment === 'middle' ? 'dark' : 'primary'}
+                  label="middle"
+                  onClick={() => setAlignment('middle')}
                 />
                 <Button
-                  label="bottom"
-                  clickHandler={() => setAlignment('bottom')}
                   color={alignment === 'bottom' ? 'dark' : 'primary'}
+                  label="bottom"
+                  onClick={() => setAlignment('bottom')}
                 />
                 <Button
-                  label="baseline"
-                  clickHandler={() => setAlignment('baseline')}
                   color={alignment === 'baseline' ? 'dark' : 'primary'}
+                  label="baseline"
+                  onClick={() => setAlignment('baseline')}
                 />
               </ButtonGroup>
             </ToolbarItem>
@@ -119,24 +119,24 @@ of `right`.
             <ToolbarItem>
               <ButtonGroup aria-labelledby="#justification-label">
                 <Button
-                  label="start"
-                  clickHandler={() => setJustification('start')}
                   color={justification === 'start' ? 'dark' : 'primary'}
+                  label="start"
+                  onClick={() => setJustification('start')}
                 />
                 <Button
-                  label="center"
-                  clickHandler={() => setJustification('center')}
                   color={justification === 'center' ? 'dark' : 'primary'}
+                  label="center"
+                  onClick={() => setJustification('center')}
                 />
                 <Button
-                  label="end"
-                  clickHandler={() => setJustification('end')}
                   color={justification === 'end' ? 'dark' : 'primary'}
+                  label="end"
+                  onClick={() => setJustification('end')}
                 />
                 <Button
-                  label="space-between"
-                  clickHandler={() => setJustification('space-between')}
                   color={justification === 'space-between' ? 'dark' : 'primary'}
+                  label="space-between"
+                  onClick={() => setJustification('space-between')}
                 />
               </ButtonGroup>
             </ToolbarItem>
@@ -207,16 +207,16 @@ toolbar groups, or on the entire toolbar.
         <Toolbar>
           <ToolbarItem>
             <CheckboxField
-              label="Dense ToolbarGroup"
-              changeHandler={(e) => setIsGroupDense(e.target.checked)}
               checked={isGroupDense}
+              label="Dense ToolbarGroup"
+              onChange={(e) => setIsGroupDense(e.target.checked)}
             />
           </ToolbarItem>
           <ToolbarItem>
             <CheckboxField
-              label="Dense Toolbar"
-              changeHandler={(e) => setIsToolbarDense(e.target.checked)}
               checked={isToolbarDense}
+              label="Dense Toolbar"
+              onChange={(e) => setIsToolbarDense(e.target.checked)}
             />
           </ToolbarItem>
         </Toolbar>
@@ -249,7 +249,7 @@ 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.
+📐 Try resizing the playground below to see how it works.
 
 <Playground>
   <>
@@ -329,7 +329,7 @@ A wrapper for individual 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/layout/grid
-[list]: /components/layout/list
+[grid]: /components/grid
+[list]: /components/list
 [spacing]: /css-helpers/spacing
-[text]: /components/ui/text
+[text]: /components/text

package/src/lib/components/{layout/Toolbar → Toolbar}/Toolbar.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Toolbar.scss';
 
 export const Toolbar = (props) => {

package/src/lib/components/{layout/Toolbar → Toolbar}/Toolbar.scss

@@ -1,6 +1,6 @@
 // 1. Get rid of unwanted spacing of inline elements by invocation of flex layout.
 
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/spacing';
 @use 'theme';
 
 .toolbar,

package/src/lib/components/{layout/Toolbar → Toolbar}/ToolbarGroup.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Toolbar.scss';
 
 export const ToolbarGroup = (props) => {

package/src/lib/components/{layout/Toolbar → Toolbar}/ToolbarItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Toolbar.scss';
 
 export const ToolbarItem = (props) => {

package/src/lib/helpers/resolveContextOrProp.js

@@ -0,0 +1,7 @@
+export const resolveContextOrProp = (contextValue, propValue) => {
+  if (contextValue != null) {
+    return contextValue;
+  }
+
+  return propValue;
+};