@react-ui-org/react-ui 0.48.0 → 0.50.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "keywords": [
     "react",
     "ui",

package/src/lib/components/Alert/Alert.jsx

@@ -4,6 +4,7 @@ import {
   RUIContext,
   withGlobalProps,
 } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.scss';
@@ -14,11 +15,13 @@ export const Alert = ({
   icon,
   id,
   onClose,
+  ...restProps
 }) => {
   const { translations } = useContext(RUIContext);
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         getRootColorClassName(color, styles),

package/src/lib/components/Alert/Alert.scss

@@ -65,42 +65,42 @@
     top: -0.1em;
 }
 
-.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);
 }

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

@@ -204,6 +204,17 @@ click on the close button:
   }}
 </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={Alert} />
@@ -235,3 +246,6 @@ Where:
   (see alert [color variants](#color-variants) and [API](#api)),
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), 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

package/src/lib/components/Badge/Badge.jsx

@@ -1,23 +1,24 @@
 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 './Badge.scss';
 
 export const Badge = ({
   color,
-  id,
   label,
   priority,
+  ...restProps
 }) => (
   <div
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      priority === 'outline' && styles.rootPriorityOutline,
+      priority === 'outline' && styles.isRootPriorityOutline,
       getRootColorClassName(color, styles),
     )}
-    id={id}
   >
     {label}
   </div>
@@ -25,7 +26,6 @@ export const Badge = ({
 
 Badge.defaultProps = {
   color: 'note',
-  id: undefined,
   priority: 'filled',
 };
 
@@ -36,10 +36,6 @@ Badge.propTypes = {
   color: PropTypes.oneOf(
     ['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
   ),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Text to be displayed.
    */

package/src/lib/components/Badge/Badge.scss

@@ -24,59 +24,59 @@ $_badge-size: 1.25rem;
     box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
 }
 
-.rootColorPrimary {
+.isRootColorPrimary {
     --rui-local-color: #{map.get(colors.$brand, on-primary)};
     --rui-local-background-color: #{map.get(colors.$brand, primary)};
 }
 
-.rootColorSecondary {
+.isRootColorSecondary {
     --rui-local-color: #{map.get(colors.$brand, on-secondary)};
     --rui-local-background-color: #{map.get(colors.$brand, secondary)};
 }
 
-.rootColorSuccess {
+.isRootColorSuccess {
     --rui-local-color: #{map.get(colors.$ui, on-success)};
     --rui-local-background-color: #{map.get(colors.$ui, success)};
 }
 
-.rootColorWarning {
+.isRootColorWarning {
     --rui-local-color: #{map.get(colors.$ui, on-warning)};
     --rui-local-background-color: #{map.get(colors.$ui, warning)};
 }
 
-.rootColorDanger {
+.isRootColorDanger {
     --rui-local-color: #{map.get(colors.$ui, on-danger)};
     --rui-local-background-color: #{map.get(colors.$ui, danger)};
 }
 
-.rootColorHelp {
+.isRootColorHelp {
     --rui-local-color: #{map.get(colors.$ui, on-help)};
     --rui-local-background-color: #{map.get(colors.$ui, help)};
 }
 
-.rootColorInfo {
+.isRootColorInfo {
     --rui-local-color: #{map.get(colors.$ui, on-info)};
     --rui-local-background-color: #{map.get(colors.$ui, info)};
 }
 
-.rootColorNote {
+.isRootColorNote {
     --rui-local-color: #{map.get(colors.$ui, on-note)};
     --rui-local-background-color: #{map.get(colors.$ui, note)};
 }
 
-.rootColorLight {
+.isRootColorLight {
     --rui-local-color: #{colors.$dark};
     --rui-local-background-color: #{colors.$light};
     --rui-local-box-shadow: none;
 }
 
-.rootColorDark {
+.isRootColorDark {
     --rui-local-color: #{colors.$light};
     --rui-local-background-color: #{colors.$dark};
     --rui-local-box-shadow: none;
 }
 
-.rootPriorityOutline {
+.isRootPriorityOutline {
     --rui-local-background-color: transparent;
     --rui-local-box-shadow: none;
 
@@ -85,42 +85,42 @@ $_badge-size: 1.25rem;
     border: borders.$width solid currentColor;
 }
 
-.rootPriorityOutline.rootColorPrimary {
+.isRootPriorityOutline.isRootColorPrimary {
     --rui-local-color: #{map.get(colors.$brand, primary)};
 }
 
-.rootPriorityOutline.rootColorSecondary {
+.isRootPriorityOutline.isRootColorSecondary {
     --rui-local-color: #{map.get(colors.$brand, secondary)};
 }
 
-.rootPriorityOutline.rootColorSuccess {
+.isRootPriorityOutline.isRootColorSuccess {
     --rui-local-color: #{map.get(colors.$ui, success)};
 }
 
-.rootPriorityOutline.rootColorWarning {
+.isRootPriorityOutline.isRootColorWarning {
     --rui-local-color: #{map.get(colors.$ui, warning)};
 }
 
-.rootPriorityOutline.rootColorDanger {
+.isRootPriorityOutline.isRootColorDanger {
     --rui-local-color: #{map.get(colors.$ui, danger)};
 }
 
-.rootPriorityOutline.rootColorHelp {
+.isRootPriorityOutline.isRootColorHelp {
     --rui-local-color: #{map.get(colors.$ui, help)};
 }
 
-.rootPriorityOutline.rootColorInfo {
+.isRootPriorityOutline.isRootColorInfo {
     --rui-local-color: #{map.get(colors.$ui, info)};
 }
 
-.rootPriorityOutline.rootColorNote {
+.isRootPriorityOutline.isRootColorNote {
     --rui-local-color: #{map.get(colors.$ui, note)};
 }
 
-.rootPriorityOutline.rootColorLight {
+.isRootPriorityOutline.isRootColorLight {
     --rui-local-color: #{colors.$light};
 }
 
-.rootPriorityOutline.rootColorDark {
+.isRootPriorityOutline.isRootColorDark {
     --rui-local-color: #{colors.$dark};
 }

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

@@ -115,6 +115,20 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
   <Badge priority="outline" label="Dark" color="dark" />
 </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={Badge} />
+
+[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/Button/Button.jsx

@@ -25,7 +25,6 @@ export const Button = React.forwardRef((props, ref) => {
     priority,
     size,
     startCorner,
-    type,
     color,
     ...restProps
   } = props;
@@ -49,14 +48,13 @@ export const Button = React.forwardRef((props, ref) => {
           styles,
         ),
         getRootLabelVisibilityClassName(labelVisibility, styles),
-        resolveContextOrProp(context && context.block, block) && styles.rootBlock,
-        context && styles.rootGrouped,
+        resolveContextOrProp(context && context.block, block) && styles.isRootBlock,
+        context && styles.isRootGrouped,
         feedbackIcon && styles.hasRootFeedback,
       )}
       disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
       id={id}
       ref={ref}
-      type={type}
     >
       {startCorner && (
         <span className={styles.startCorner}>
@@ -105,7 +103,6 @@ Button.defaultProps = {
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
-  ref: undefined,
   size: 'medium',
   startCorner: null,
   type: 'button',
@@ -169,14 +166,6 @@ Button.propTypes = {
    * as the value is inherited in such case.
    */
   priority: PropTypes.oneOf(['filled', 'outline', 'flat']),
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * Size of the button.
    *

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

@@ -397,12 +397,22 @@ Flat buttons in feedback state:
 👉 Visit the [CSS Helpers](/css-helpers/animation) section to see how the icon
 animation is made.
 
-## API
+## 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 native HTML
+`<button>`. 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
+[button] element.
 
-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 `<button>` HTML element. This enables making the component
-interactive and helps improve its accessibility.
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<button>` element.
+
+## API
 
 <Props table of={Button} />
 
@@ -562,3 +572,5 @@ feedback state.
 | `--rui-Button--feedback__cursor`  | Cursor to show on hovering buttons in feedback state |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

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

@@ -49,19 +49,19 @@
     align-items: center;
 }
 
-.rootSizeSmall {
+.isRootSizeSmall {
     @include tools.button-size(small);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include tools.button-size(medium);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include tools.button-size(large);
 }
 
-.rootBlock {
+.isRootBlock {
     width: 100%;
 }
 
@@ -76,7 +76,7 @@
     color: transparent;
 }
 
-.rootGrouped {
+.isRootGrouped {
     z-index: map.get(settings.$group-z-indexes, button);
 
     &:not(:first-child) {
@@ -96,52 +96,52 @@
     }
 }
 
-.rootGrouped .startCorner,
-.rootGrouped .endCorner {
+.isRootGrouped .startCorner,
+.isRootGrouped .endCorner {
     z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 
-.withLabelHidden,
-.withLabelVisibleSm,
-.withLabelVisibleMd,
-.withLabelVisibleLg,
-.withLabelVisibleXl,
-.withLabelVisibleX2l,
-.withLabelVisibleX3l {
+.hasLabelHidden,
+.hasLabelVisibleSm,
+.hasLabelVisibleMd,
+.hasLabelVisibleLg,
+.hasLabelVisibleXl,
+.hasLabelVisibleX2l,
+.hasLabelVisibleX3l {
     @include tools.hide-label();
 }
 
-.withLabelVisibleSm {
+.hasLabelVisibleSm {
     @include breakpoint.up(sm) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleMd {
+.hasLabelVisibleMd {
     @include breakpoint.up(md) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleLg {
+.hasLabelVisibleLg {
     @include breakpoint.up(lg) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleXl {
+.hasLabelVisibleXl {
     @include breakpoint.up(xl) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleX2l {
+.hasLabelVisibleX2l {
     @include breakpoint.up(x2l) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleX3l {
+.hasLabelVisibleX3l {
     @include breakpoint.up(x3l) {
         @include tools.show-label();
     }

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