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

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

@@ -1,12 +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 transferProps from '../../utils/transferProps';
+import { withProviderContext } from '../../provider';
 import {
   Toolbar,
   ToolbarItem,
-} from '../../layout/Toolbar';
+} from '../Toolbar';
 import Button from '../Button';
 import ScrollView from '../ScrollView';
 import styles from './Modal.scss';
@@ -54,18 +54,18 @@ export class Modal extends React.Component {
   keyPressHandler(e) {
     const {
       actions,
-      closeHandler,
+      onClose,
     } = this.props;
 
-    if (e.keyCode === 27 && closeHandler) {
-      closeHandler();
+    if (e.keyCode === 27 && onClose) {
+      onClose();
     }
 
     if (e.keyCode === 13 && e.target.nodeName !== 'BUTTON') {
       const submitAction = actions.find((action) => action.type === 'submit');
 
       if (submitAction && !submitAction.disabled) {
-        submitAction.clickHandler(e);
+        submitAction.onClick(e);
       }
     }
   }
@@ -74,8 +74,8 @@ export class Modal extends React.Component {
     const {
       actions,
       children,
-      closeHandler,
       id,
+      onClose,
       position,
       scrollView,
       size,
@@ -147,8 +147,8 @@ export class Modal extends React.Component {
         className={styles.backdrop}
         id={id}
         onClick={(e) => {
-          if (closeHandler) {
-            closeHandler(e);
+          if (onClose) {
+            onClose(e);
           }
         }}
         role="presentation"
@@ -171,11 +171,11 @@ export class Modal extends React.Component {
             >
               {title}
             </h3>
-            {closeHandler && (
+            {onClose && (
               <button
                 type="button"
                 className={styles.close}
-                onClick={closeHandler}
+                onClick={onClose}
                 title={translations.close}
                 {...(id && { id: `${id}__closeModalHeaderButton` })}
               >
@@ -184,29 +184,29 @@ export class Modal extends React.Component {
             )}
           </div>
           {modalBody()}
-          {(actions.length || closeHandler) && (
+          {(actions.length || onClose) && (
             <div className={styles.footer}>
               <Toolbar justify="center" dense>
                 {actions.map((action) => (
                   <ToolbarItem key={action.label}>
                     <Button
                       {...transferProps(action)}
-                      clickHandler={action.clickHandler}
                       color={action.color}
                       disabled={action.disabled}
+                      feedbackIcon={action.feedbackIcon}
+                      forwardedRef={this.submitButtonRef}
                       id={action.id || undefined}
                       label={action.label}
-                      loadingIcon={action.loadingIcon}
-                      forwardedRef={this.submitButtonRef}
+                      onClick={action.onClick}
                       type="button"
                     />
                   </ToolbarItem>
                 ))}
-                {closeHandler && (
+                {onClose && (
                   <ToolbarItem>
                     <Button
-                      clickHandler={closeHandler}
                       label={translations.close}
+                      onClick={onClose}
                       priority="flat"
                       {...(id && { id: `${id}__closeModalFooterButton` })}
                     />
@@ -234,8 +234,8 @@ export class Modal extends React.Component {
 Modal.defaultProps = {
   actions: [],
   autoFocus: true,
-  closeHandler: null,
   id: undefined,
+  onClose: null,
   portalId: null,
   position: 'center',
   scrollView: (<ScrollView
@@ -251,12 +251,12 @@ Modal.propTypes = {
    * Actions to be rendered in modal footer.
    */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    clickHandler: PropTypes.func.isRequired,
     color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
     disabled: PropTypes.bool,
+    feedbackIcon: PropTypes.node,
     id: PropTypes.string,
     label: PropTypes.string.isRequired,
-    loadingIcon: PropTypes.node,
+    onClick: PropTypes.func.isRequired,
   })),
   /**
    * If `true`, focus the first action in the footer when the modal is opened.
@@ -267,15 +267,16 @@ Modal.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * If a function is provided, the close buttons will be displayed.
+   * ID of the root HTML element. It also serves as a base for nested elements:
+   * * `<ID>__content`
+   * * `<ID>__closeModalHeaderButton`
+   * * `<ID>__closeModalFooterButton`
    */
-  closeHandler: PropTypes.func,
+  id: PropTypes.string,
   /**
-   * ID of the root HTML element. It also serves as a prefix for the element holding the content of
-   * the modal and for the close buttons: `<ID>__content`, `<ID>__closeModalHeaderButton`,
-   * `<ID>__closeModalFooterButton`.
+   * If a function is provided, the close buttons will be displayed.
    */
-  id: PropTypes.string,
+  onClose: PropTypes.func,
   /**
    * If set, the modal is rendered in the React Portal with that ID.
    */

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

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/spacing';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/spacing';
 @use 'settings';
 @use 'theme';
 

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

@@ -1,7 +1,7 @@
 ---
 name: Modal
-menu: 'UI'
-route: /components/ui/modal
+menu: 'Miscellaneous'
+route: /components/modal
 ---
 
 # Modal
@@ -34,20 +34,20 @@ And use it:
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Warning"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
+              title="Warning"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -96,48 +96,48 @@ Modals of any size automatically shrink when they cannot fit the screen width.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch small modal"
+          onClick={() => {
             setModalSize('small');
             setModalOpen(true);
           }}
-          label="Launch small modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch medium modal"
+          onClick={() => {
             setModalSize('medium');
             setModalOpen(true);
           }}
-          label="Launch medium modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch large modal"
+          onClick={() => {
             setModalSize('large');
             setModalOpen(true);
           }}
-          label="Launch large modal"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch fullscreen modal"
+          onClick={() => {
             setModalSize('fullscreen');
             setModalOpen(true);
           }}
-          label="Launch fullscreen modal"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               size={modalSize}
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -164,21 +164,21 @@ magic that doesn't work together yet 🎩.
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch auto-width modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
-                label: 'Delete',
                 color: 'danger',
+                label: 'Delete',
+                onClick: () => setModalOpen(false),
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               size="auto"
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -203,32 +203,32 @@ Modal can be aligned either to top or center of the screen.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch modal at center"
+          onClick={() => {
             setModalPosition('center');
             setModalOpen(true);
           }}
-          label="Launch modal at center"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch modal at top"
+          onClick={() => {
             setModalPosition('top');
             setModalOpen(true);
           }}
-          label="Launch modal at top"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Delete the user?"
               actions={[{
-                clickHandler: () => setModalOpen(false),
+                onClick: () => setModalOpen(false),
                 label: 'Delete',
                 color: 'danger',
               }]}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               position={modalPosition}
+              title="Delete the user?"
             >
               <p>
                 Do you really want to delete the user <code>admin</code>?
@@ -258,33 +258,33 @@ component.
     return (
       <>
         <Button
-          clickHandler={() => {
+          label="Launch modal with scrolling body"
+          onClick={() => {
             setModalScrollView(true);
             setModalOpen(true);
           }}
-          label="Launch modal with scrolling body"
           priority="outline"
         />
         <Button
-          clickHandler={() => {
+          label="Launch scrolling modal"
+          onClick={() => {
             setModalScrollView(false);
             setModalOpen(true);
           }}
-          label="Launch scrolling modal"
           priority="outline"
         />
         <div>
           {modalOpen && (
             <Modal
-              title="Modal with long content"
               actions={[{
-                clickHandler: () => setModalOpen(false),
                 label: 'OK',
+                onClick: () => setModalOpen(false),
               }]}
               autoFocus={false}
-              closeHandler={() => setModalOpen(false)}
+              onClose={() => setModalOpen(false)}
               scrollView={modalScrollView ? undefined : null}
               size="small"
+              title="Modal with long content"
             >
               <p>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
@@ -380,8 +380,8 @@ to prevent interaction. That's where blocking modals may come handy.
     return (
       <>
         <Button
-          clickHandler={() => setModalOpen(true)}
           label="Launch blocking modal"
+          onClick={() => setModalOpen(true)}
           priority="outline"
         />
         <div>
@@ -393,8 +393,8 @@ to prevent interaction. That's where blocking modals may come handy.
                 Don&apos;t turn off the device!
               </p>
               <Button
-                clickHandler={() => setModalOpen(false)}
                 label="Close the demo"
+                onClick={() => setModalOpen(false)}
                 priority="flat"
               />
             </Modal>

package/src/lib/components/{ui/Modal → Modal}/_settings.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../../styles/settings/z-indexes';
-@use '../../../styles/theme/borders';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/spacing';
+@use '../../styles/settings/z-indexes';
+@use '../../styles/theme/borders';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/spacing';
 
 $padding-x: spacing.of(5);
 $padding-y: spacing.of(3);

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

@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Paper.scss';
 
 export const Paper = ({
   children,
   id,
+  muted,
   raised,
 }) => (
   <div
     className={[
       styles.root,
+      muted ? styles.rootMuted : '',
       raised ? styles.rootRaised : '',
     ].join(' ')}
     id={id}
@@ -22,6 +24,7 @@ export const Paper = ({
 Paper.defaultProps = {
   children: null,
   id: undefined,
+  muted: false,
   raised: false,
 };
 
@@ -34,6 +37,10 @@ Paper.propTypes = {
    * ID of the root HTML element.
    */
   id: PropTypes.string,
+  /**
+   * Visually suppress Paper.
+   */
+  muted: PropTypes.bool,
   /**
    * Add shadow to pull the Paper above surface.
    */

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

@@ -7,6 +7,11 @@
   background-color: theme.$background-color;
 }
 
+.rootMuted {
+  background-color: theme.$muted-background-color;
+  opacity: theme.$muted-opacity;
+}
+
 .rootRaised {
   box-shadow: theme.$raised-box-shadow;
 }

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

@@ -1,7 +1,7 @@
 ---
 name: Paper
-menu: 'UI'
-route: /components/ui/paper
+menu: 'Miscellaneous'
+route: /components/paper
 ---
 
 # Paper
@@ -53,6 +53,16 @@ Add optional shadow to lift the paper above background.
   </Paper>
 </Playground>
 
+## Muted Paper
+
+Dim background and add transparency to visually suppress the Paper.
+
+<Playground>
+  <Paper muted>
+    Sssh! I&apos;m paper and I&apos;m muted.
+  </Paper>
+</Playground>
+
 ## API
 
 <Props table of={Paper} />
@@ -66,4 +76,6 @@ Add optional shadow to lift the paper above background.
 | `--rui-Paper__border-color`                          | Border color                                                 |
 | `--rui-Paper__border-radius`                         | Corner radius                                                |
 | `--rui-Paper__background-color`                      | Paper background color                                       |
+| `--rui-Paper--muted__background-color`               | Background color of muted paper                              |
+| `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |

package/src/lib/components/{ui/Paper → Paper}/_theme.scss

@@ -3,4 +3,6 @@ $border-width: var(--rui-Paper__border-width);
 $border-color: var(--rui-Paper__border-color);
 $border-radius: var(--rui-Paper__border-radius);
 $background-color: var(--rui-Paper__background-color);
+$muted-background-color: var(--rui-Paper--muted__background-color);
+$muted-opacity: var(--rui-Paper--muted__opacity);
 $raised-box-shadow: var(--rui-Paper--raised__box-shadow);

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

@@ -1,7 +1,7 @@
 ---
 name: Radio
-menu: 'UI'
-route: /components/ui/radio
+menu: 'Inputs'
+route: /components/radio
 ---
 
 # Radio
@@ -29,8 +29,8 @@ And use it:
     const [fruit, setFruit] = React.useState('apple');
     return (
       <Radio
-        changeHandler={(e) => setFruit(e.target.value)}
         label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
         options={[
           {
             label: 'Apple',
@@ -91,9 +91,9 @@ the input.
     const [frequency, setFrequency] = React.useState('weekly');
     return (
       <Radio
-        changeHandler={(e) => setFrequency(e.target.value)}
         isLabelVisible={false}
         label="Newsletter frequency"
+        onChange={(e) => setFrequency(e.target.value)}
         options={[
           {
             label: 'I want to subscribe to the weekly newsletter',
@@ -125,9 +125,9 @@ supports this kind of layout as well.
     const [frequency, setFrequency] = React.useState('weekly');
     return (
       <Radio
-        changeHandler={(e) => setFrequency(e.target.value)}
         label="Newsletter frequency"
         layout="horizontal"
+        onChange={(e) => setFrequency(e.target.value)}
         options={[
           {
             label: 'I want to subscribe to the weekly newsletter',
@@ -158,9 +158,9 @@ filled.
     const [fruit, setFruit] = React.useState('apple');
     return (
       <Radio
-        changeHandler={(e) => setFruit(e.target.value)}
         helpText="What do you prefer?"
         label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
         options={[
           {
             label: 'Apple',
@@ -210,8 +210,8 @@ have.
     return (
       <>
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="valid"
@@ -219,8 +219,8 @@ have.
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="warning"
@@ -228,8 +228,8 @@ have.
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="invalid"
@@ -266,15 +266,15 @@ It's possible to disable just some options or the whole set.
     return (
       <>
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           disabled
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value="apple"
         />
@@ -285,9 +285,10 @@ It's possible to disable just some options or the whole set.
 
 ## 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={Radio} />
 
@@ -300,3 +301,5 @@ options. On top of that, the following options are available for Radio.
 |--------------------------------------------------------------------|------------------------------------------------|
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
+
+[React synthetic events]: https://reactjs.org/docs/events.html