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

package/src/lib/components/Button/_priorities.scss

@@ -3,128 +3,128 @@
 @use "theme";
 @use "tools";
 
-.rootPriorityFilled.rootColorPrimary {
+.isRootPriorityFilled.isRootColorPrimary {
     @include tools.button-color(filled, primary);
 }
 
-.rootPriorityFilled.rootColorSecondary {
+.isRootPriorityFilled.isRootColorSecondary {
     @include tools.button-color(filled, secondary);
 }
 
-.rootPriorityFilled.rootColorSuccess {
+.isRootPriorityFilled.isRootColorSuccess {
     @include tools.button-color(filled, success);
 }
 
-.rootPriorityFilled.rootColorWarning {
+.isRootPriorityFilled.isRootColorWarning {
     @include tools.button-color(filled, warning);
 }
 
-.rootPriorityFilled.rootColorDanger {
+.isRootPriorityFilled.isRootColorDanger {
     @include tools.button-color(filled, danger);
 }
 
-.rootPriorityFilled.rootColorHelp {
+.isRootPriorityFilled.isRootColorHelp {
     @include tools.button-color(filled, help);
 }
 
-.rootPriorityFilled.rootColorInfo {
+.isRootPriorityFilled.isRootColorInfo {
     @include tools.button-color(filled, info);
 }
 
-.rootPriorityFilled.rootColorNote {
+.isRootPriorityFilled.isRootColorNote {
     @include tools.button-color(filled, note);
 }
 
-.rootPriorityFilled.rootColorLight {
+.isRootPriorityFilled.isRootColorLight {
     @include tools.button-color(filled, light);
 }
 
-.rootPriorityFilled.rootColorDark {
+.isRootPriorityFilled.isRootColorDark {
     @include tools.button-color(filled, dark);
 }
 
-.rootPriorityOutline.rootColorPrimary {
+.isRootPriorityOutline.isRootColorPrimary {
     @include tools.button-color(outline, primary);
 }
 
-.rootPriorityOutline.rootColorSecondary {
+.isRootPriorityOutline.isRootColorSecondary {
     @include tools.button-color(outline, secondary);
 }
 
-.rootPriorityOutline.rootColorSuccess {
+.isRootPriorityOutline.isRootColorSuccess {
     @include tools.button-color(outline, success);
 }
 
-.rootPriorityOutline.rootColorWarning {
+.isRootPriorityOutline.isRootColorWarning {
     @include tools.button-color(outline, warning);
 }
 
-.rootPriorityOutline.rootColorDanger {
+.isRootPriorityOutline.isRootColorDanger {
     @include tools.button-color(outline, danger);
 }
 
-.rootPriorityOutline.rootColorHelp {
+.isRootPriorityOutline.isRootColorHelp {
     @include tools.button-color(outline, help);
 }
 
-.rootPriorityOutline.rootColorInfo {
+.isRootPriorityOutline.isRootColorInfo {
     @include tools.button-color(outline, info);
 }
 
-.rootPriorityOutline.rootColorNote {
+.isRootPriorityOutline.isRootColorNote {
     @include tools.button-color(outline, note);
 }
 
-.rootPriorityOutline.rootColorLight {
+.isRootPriorityOutline.isRootColorLight {
     @include tools.button-color(outline, light);
 }
 
-.rootPriorityOutline.rootColorDark {
+.isRootPriorityOutline.isRootColorDark {
     @include tools.button-color(outline, dark);
 }
 
-.rootPriorityFlat.rootColorPrimary {
+.isRootPriorityFlat.isRootColorPrimary {
     @include tools.button-color(flat, primary);
 }
 
-.rootPriorityFlat.rootColorSecondary {
+.isRootPriorityFlat.isRootColorSecondary {
     @include tools.button-color(flat, secondary);
 }
 
-.rootPriorityFlat.rootColorSuccess {
+.isRootPriorityFlat.isRootColorSuccess {
     @include tools.button-color(flat, success);
 }
 
-.rootPriorityFlat.rootColorWarning {
+.isRootPriorityFlat.isRootColorWarning {
     @include tools.button-color(flat, warning);
 }
 
-.rootPriorityFlat.rootColorDanger {
+.isRootPriorityFlat.isRootColorDanger {
     @include tools.button-color(flat, danger);
 }
 
-.rootPriorityFlat.rootColorHelp {
+.isRootPriorityFlat.isRootColorHelp {
     @include tools.button-color(flat, help);
 }
 
-.rootPriorityFlat.rootColorInfo {
+.isRootPriorityFlat.isRootColorInfo {
     @include tools.button-color(flat, info);
 }
 
-.rootPriorityFlat.rootColorNote {
+.isRootPriorityFlat.isRootColorNote {
     @include tools.button-color(flat, note);
 }
 
-.rootPriorityFlat.rootColorLight {
+.isRootPriorityFlat.isRootColorLight {
     @include tools.button-color(flat, light);
 }
 
-.rootPriorityFlat.rootColorDark {
+.isRootPriorityFlat.isRootColorDark {
     @include tools.button-color(flat, dark);
 }
 
-.rootPriorityFilled.rootGrouped:not(:first-child)::before,
-.rootPriorityFlat.rootGrouped:not(:first-child)::before {
+.isRootPriorityFilled.isRootGrouped:not(:first-child)::before,
+.isRootPriorityFlat.isRootGrouped:not(:first-child)::before {
     content: "";
     position: absolute;
     top: calc(-1 * #{theme.$border-width});
@@ -135,18 +135,18 @@
     transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
 
-.rootPriorityFilled.rootGrouped:not(:first-child) {
+.isRootPriorityFilled.isRootGrouped:not(:first-child) {
     --rui-local-gap: #{theme.$group-filled-gap};
     --rui-local-separator-width: #{theme.$group-filled-separator-width};
     --rui-local-separator-color: #{theme.$group-filled-separator-color};
 }
 
-.rootPriorityFlat.rootGrouped:not(:first-child) {
+.isRootPriorityFlat.isRootGrouped:not(:first-child) {
     --rui-local-gap: #{theme.$group-flat-gap};
     --rui-local-separator-width: #{theme.$group-flat-separator-width};
     --rui-local-separator-color: #{theme.$group-flat-separator-color};
 }
 
-.rootPriorityOutline.rootGrouped:not(:first-child) {
+.isRootPriorityOutline.isRootGrouped:not(:first-child) {
     --rui-local-gap: #{theme.$group-outline-gap};
 }

package/src/lib/components/Button/helpers/getRootLabelVisibilityClassName.js

@@ -2,31 +2,31 @@ export default (labelVisibility, styles) => {
   // Intentionally omitting `xs` which means label is visible on all screen sizes.
 
   if (labelVisibility === 'sm') {
-    return styles.withLabelVisibleSm;
+    return styles.hasLabelVisibleSm;
   }
 
   if (labelVisibility === 'md') {
-    return styles.withLabelVisibleMd;
+    return styles.hasLabelVisibleMd;
   }
 
   if (labelVisibility === 'lg') {
-    return styles.withLabelVisibleLg;
+    return styles.hasLabelVisibleLg;
   }
 
   if (labelVisibility === 'xl') {
-    return styles.withLabelVisibleXl;
+    return styles.hasLabelVisibleXl;
   }
 
   if (labelVisibility === 'x2l') {
-    return styles.withLabelVisibleX2l;
+    return styles.hasLabelVisibleX2l;
   }
 
   if (labelVisibility === 'x3l') {
-    return styles.withLabelVisibleX3l;
+    return styles.hasLabelVisibleX3l;
   }
 
   if (labelVisibility === 'none') {
-    return styles.withLabelHidden;
+    return styles.hasLabelHidden;
   }
 
   return null;

package/src/lib/components/Button/helpers/getRootPriorityClassName.js

@@ -1,14 +1,14 @@
 export default (priority, styles) => {
   if (priority === 'filled') {
-    return styles.rootPriorityFilled;
+    return styles.isRootPriorityFilled;
   }
 
   if (priority === 'outline') {
-    return styles.rootPriorityOutline;
+    return styles.isRootPriorityOutline;
   }
 
   if (priority === 'flat') {
-    return styles.rootPriorityFlat;
+    return styles.isRootPriorityFlat;
   }
 
   return null;

package/src/lib/components/Button/index.js

@@ -1 +1 @@
-export { default } from './Button';
+export { default as Button } from './Button';

package/src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -10,7 +11,6 @@ export const ButtonGroup = ({
   block,
   disabled,
   children,
-  id,
   priority,
   size,
   ...restProps
@@ -21,13 +21,12 @@ export const ButtonGroup = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         block && styles.isRootBlock,
       )}
-      id={id}
       role="group"
-      {...restProps}
     >
       <ButtonGroupContext.Provider
         value={{
@@ -47,7 +46,6 @@ ButtonGroup.defaultProps = {
   block: false,
   children: null,
   disabled: false,
-  id: undefined,
   priority: 'filled',
   size: 'medium',
 };
@@ -65,10 +63,6 @@ ButtonGroup.propTypes = {
    * If `true`, all buttons inside the group will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Visual priority to highlight or suppress the buttons.
    */

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

@@ -13,8 +13,10 @@ import {
   Props,
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
-import Button from '../Button'
-import { ButtonGroup } from './ButtonGroup'
+import {
+  Button,
+  ButtonGroup,
+} from '../..'
 
 ## Basic Usage
 
@@ -229,6 +231,17 @@ and communicating the state of individual options.
   </>
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
 ## API
 
 <Props table of={ButtonGroup} />
@@ -244,3 +257,6 @@ and communicating the state of individual options.
 | `--rui-ButtonGroup--flat__separator__width`                        | Separator width for `flat` buttons             |
 | `--rui-ButtonGroup--flat__separator__color`                        | Separator color for `flat` buttons             |
 | `--rui-ButtonGroup--outline__gap`                                  | Gap between `outline` buttons                  |
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/lib/components/Card/Card.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.scss';
@@ -9,19 +10,19 @@ export const Card = ({
   children,
   dense,
   disabled,
-  id,
   raised,
   color,
+  ...restProps
 }) => (
   <div
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       getRootColorClassName(color, styles),
-      dense && styles.rootDense,
-      raised && styles.rootRaised,
-      disabled && styles.isDisabled,
+      dense && styles.isRootDense,
+      raised && styles.isRootRaised,
+      disabled && styles.isRootDisabled,
     )}
-    id={id}
   >
     {children}
   </div>
@@ -31,7 +32,6 @@ Card.defaultProps = {
   color: 'light',
   dense: false,
   disabled: false,
-  id: undefined,
   raised: false,
 };
 
@@ -57,10 +57,6 @@ Card.propTypes = {
    * If `true`, the card will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Add shadow to pull the card above surface.
    */

package/src/lib/components/Card/Card.scss

@@ -25,55 +25,55 @@
     padding: var(--rui-local-padding);
 }
 
-.rootDense {
+.isRootDense {
     --rui-local-padding: #{theme.$dense-padding};
 }
 
-.rootRaised {
+.isRootRaised {
     box-shadow: theme.$raised-box-shadow;
 }
 
-.rootColorPrimary {
+.isRootColorPrimary {
     @include tools.color(primary);
 }
 
-.rootColorSecondary {
+.isRootColorSecondary {
     @include tools.color(secondary);
 }
 
-.rootColorSuccess {
+.isRootColorSuccess {
     @include tools.color(success);
 }
 
-.rootColorWarning {
+.isRootColorWarning {
     @include tools.color(warning);
 }
 
-.rootColorDanger {
+.isRootColorDanger {
     @include tools.color(danger);
 }
 
-.rootColorHelp {
+.isRootColorHelp {
     @include tools.color(help);
 }
 
-.rootColorInfo {
+.isRootColorInfo {
     @include tools.color(info);
 }
 
-.rootColorNote {
+.isRootColorNote {
     @include tools.color(note);
 }
 
-.rootColorLight {
+.isRootColorLight {
     @include tools.color(light);
 }
 
-.rootColorDark {
+.isRootColorDark {
     @include tools.color(dark);
 }
 
-.isDisabled {
+.isRootDisabled {
     background-color: theme.$disabled-background-color;
     opacity: theme.$disabled-opacity;
 }

package/src/lib/components/Card/CardBody.jsx

@@ -1,30 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Card.scss';
 
 export const CardBody = ({
   children,
-  id,
+  ...restProps
 }) => (
-  <div className={styles.body} id={id}>
+  <div
+    {...transferProps(restProps)}
+    className={styles.body}
+  >
     {children}
   </div>
 );
 
-CardBody.defaultProps = {
-  id: undefined,
-};
-
 CardBody.propTypes = {
   /**
    * Content of the card.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
 };
 
 export const CardBodyWithGlobalProps = withGlobalProps(CardBody, 'CardBody');

package/src/lib/components/Card/CardFooter.jsx

@@ -2,18 +2,22 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Card.scss';
 
 export const CardFooter = ({
   children,
-  id,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
   }
 
   return (
-    <div className={styles.footer} id={id}>
+    <div
+      {...transferProps(restProps)}
+      className={styles.footer}
+    >
       {children}
     </div>
   );
@@ -21,7 +25,6 @@ export const CardFooter = ({
 
 CardFooter.defaultProps = {
   children: null,
-  id: undefined,
 };
 
 CardFooter.propTypes = {
@@ -29,10 +32,6 @@ CardFooter.propTypes = {
    * Card actions, usually buttons.
    */
   children: PropTypes.node,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
 };
 
 export const CardFooterWithGlobalProps = withGlobalProps(CardFooter, 'CardFooter');

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

@@ -10,11 +10,13 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Button from '../Button'
-import ScrollView from '../ScrollView'
-import { Card } from './Card'
-import { CardBody } from './CardBody'
-import { CardFooter } from './CardFooter'
+import {
+  Button,
+  ScrollView,
+  Card,
+  CardBody,
+  CardFooter,
+} from '../..'
 
 Cards contain content and actions about a single subject.
 
@@ -278,6 +280,17 @@ its interactive elements to disallow user's interaction.
   </Card>
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
 ## API
 
 <Props table of={Card} />
@@ -324,3 +337,6 @@ Where:
   (see [color variants](#color-variants) and [API](#api)),
 - `<PROPERTY>` is one of `color` (color of text), `border-color`, or
   `background-color`.
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes