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

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)}
       />
     );
   }}
@@ -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>
   <>

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;
+};

package/src/lib/index.js

@@ -1,60 +1,59 @@
-// Layout components
-export { default as Center } from './components/layout/Center';
+// Components
+export { default as Alert } from './components/Alert';
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { ButtonGroup } from './components/ButtonGroup';
+export {
+  Card,
+  CardBody,
+  CardFooter,
+} from './components/Card';
+export { default as Center } from './components/Center';
+export { default as CheckboxField } from './components/CheckboxField';
 export {
   CTA,
   CTACenter,
   CTAEnd,
   CTAStart,
-} from './components/layout/CTA';
+} from './components/CTA';
+export { default as FileInputField } from './components/FileInputField';
 export {
   FormLayout,
   FormLayoutCustomField,
-} from './components/layout/FormLayout';
+} from './components/FormLayout';
 export {
   Grid,
   GridSpan,
-} from './components/layout/Grid';
+} from './components/Grid';
+export { default as Link } from './components/Link';
 export {
   List,
   ListItem,
-} from './components/layout/List';
+} from './components/List';
 export {
   Media,
   MediaBody,
   MediaObject,
-} from './components/layout/Media';
+} from './components/Media';
+export { default as Modal } from './components/Modal';
+export { default as Paper } from './components/Paper';
+export { default as Radio } from './components/Radio';
+export { default as ScrollView } from './components/ScrollView';
+export { default as SelectField } from './components/SelectField';
+export {
+  Tabs,
+  TabsItem,
+} from './components/Tabs';
+export { default as Table } from './components/Table';
+export { default as Text } from './components/Text';
+export { default as TextArea } from './components/TextArea';
+export { default as TextField } from './components/TextField';
+export { default as Toggle } from './components/Toggle';
 export {
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
-} from './components/layout/Toolbar';
-
-// UI components
-export { default as Alert } from './components/ui/Alert';
-export { default as Badge } from './components/ui/Badge';
-export { default as Button } from './components/ui/Button';
-export { default as ButtonGroup } from './components/ui/ButtonGroup';
-export {
-  Card,
-  CardBody,
-  CardFooter,
-} from './components/ui/Card';
-export { default as CheckboxField } from './components/ui/CheckboxField';
-export { default as FileInputField } from './components/ui/FileInputField';
-export { default as Modal } from './components/ui/Modal';
-export { default as Paper } from './components/ui/Paper';
-export { default as Radio } from './components/ui/Radio';
-export { default as ScrollView } from './components/ui/ScrollView';
-export { default as SelectField } from './components/ui/SelectField';
-export {
-  Tabs,
-  TabsItem,
-} from './components/ui/Tabs';
-export { default as Table } from './components/ui/Table';
-export { default as Text } from './components/ui/Text';
-export { default as TextArea } from './components/ui/TextArea';
-export { default as TextField } from './components/ui/TextField';
-export { default as Toggle } from './components/ui/Toggle';
+} from './components/Toolbar';
 
 // Provider
 export { RUIProvider } from './provider';

package/src/lib/styles/tools/_accessibility.scss

@@ -17,6 +17,15 @@
   border: 0;
 }
 
+@mixin unhide-text() {
+  position: unset;
+  width: unset;
+  height: unset;
+  overflow: unset;
+  clip: unset;
+  white-space: unset;
+}
+
 // 2.
 @mixin min-tap-target($size: theme.$tap-target-size, $center: true) {
   position: relative;

package/src/lib/theme.scss

@@ -155,6 +155,11 @@
   --rui-spacing-bottom-headings: var(--rui-spacing-5);
   --rui-spacing-bottom-layouts: var(--rui-spacing-5);
 
+  // Disabled state
+  --rui-disabled-background-color: var(--rui-color-gray-50);
+  --rui-disabled-opacity: 0.5;
+  --rui-disabled-cursor: not-allowed;
+
   //
   // Elements
   // ========
@@ -193,11 +198,11 @@
   // Grid
   // ====
 
-  --rui-Grid__auto-flow: initial;
   --rui-Grid__columns: 1fr;
   --rui-Grid__column-gap: var(--rui-spacing-4);
   --rui-Grid__rows: auto;
   --rui-Grid__row-gap: var(--rui-spacing-4);
+  --rui-Grid__auto-flow: initial;
   --rui-Grid__align-content: initial;
   --rui-Grid__align-items: initial;
   --rui-Grid__justify-content: initial;
@@ -292,8 +297,10 @@
   --rui-Button__text-transform: none;
   --rui-Button__border-width: var(--rui-border-width);
   --rui-Button__border-radius: var(--rui-border-radius);
-  --rui-Button--disabled__opacity: 0.5;
-  --rui-Button--disabled__cursor: not-allowed;
+  --rui-Button--disabled__opacity: var(--rui-disabled-opacity);
+  --rui-Button--disabled__cursor: var(--rui-disabled-cursor);
+  --rui-Button--feedback__opacity: 1;
+  --rui-Button--feedback__cursor: var(--rui-disabled-cursor);
 
   // Buttons: filled priority
 
@@ -674,8 +681,8 @@
   --rui-Card__border-radius: var(--rui-border-radius);
   --rui-Card--dense__padding: var(--rui-spacing-2);
   --rui-Card--raised__box-shadow: var(--rui-elevation-1);
-  --rui-Card--disabled__background-color: var(--rui-color-gray-50);
-  --rui-Card--disabled__opacity: 0.6;
+  --rui-Card--disabled__background-color: var(--rui-disabled-background-color);
+  --rui-Card--disabled__opacity: var(--rui-disabled-opacity);
 
   // Card: variant: primary
   --rui-Card--primary__color: var(--rui-page-color);
@@ -758,8 +765,8 @@
   --rui-FormField--horizontal--full-width__label__width: fit-content(50%);
 
   // Forms fields: disabled state
-  --rui-FormField--disabled__cursor: not-allowed;
-  --rui-FormField--disabled__opacity: 0.5;
+  --rui-FormField--disabled__cursor: var(--rui-disabled-cursor);
+  --rui-FormField--disabled__opacity: var(--rui-disabled-opacity);
 
   // Form fields: validation states: invalid
   --rui-FormField--invalid--default__border-color: var(--rui-color-danger);
@@ -851,6 +858,15 @@
   --rui-FormField--check--checked__border-color: var(--rui-color-active);
   --rui-FormField--check--checked__check-background-color: var(--rui-color-active);
 
+  //
+  // Link
+  // ====
+
+  --rui-Link__color: var(--rui-link-color);
+  --rui-Link__text-decoration: var(--rui-link-decoration);
+  --rui-Link--hover__color: var(--rui-link-hover-color);
+  --rui-Link--hover__text-decoration: var(--rui-link-hover-decoration);
+
   //
   // Modal
   // =====
@@ -878,6 +894,8 @@
   --rui-Paper__border-color: transparent;
   --rui-Paper__border-radius: var(--rui-border-radius);
   --rui-Paper__background-color: var(--rui-color-white);
+  --rui-Paper--muted__background-color: var(--rui-disabled-background-color);
+  --rui-Paper--muted__opacity: var(--rui-disabled-opacity);
   --rui-Paper--raised__box-shadow: var(--rui-elevation-1);
 
   //