@react-ui-org/react-ui 0.47.0 → 0.49.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.47.0",
+  "version": "0.49.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

@@ -12,8 +12,10 @@ import {
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
-import Button from '../Button'
-import { Alert } from './Alert'
+import {
+  Button,
+  Alert,
+} from '../..'
 
 Alert presents feedback or important information to users.
 
@@ -202,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} />
@@ -233,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/Alert/index.js

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

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

@@ -13,7 +13,7 @@ import {
   Props,
 } from 'docz'
 import Placeholder from '../../../docs/_components/Placeholder'
-import { Badge } from './Badge'
+import { Badge } from '../..'
 
 ## Basic Usage
 
@@ -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/Badge/index.js

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

package/src/lib/components/Button/Button.jsx

@@ -6,30 +6,29 @@ import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
-import withForwardedRef from '../withForwardedRef';
 import { ButtonGroupContext } from '../ButtonGroup';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
 import getRootPriorityClassName from './helpers/getRootPriorityClassName';
 import styles from './Button.scss';
 
-export const Button = ({
-  afterLabel,
-  beforeLabel,
-  block,
-  disabled,
-  endCorner,
-  feedbackIcon,
-  forwardedRef,
-  id,
-  label,
-  labelVisibility,
-  priority,
-  size,
-  startCorner,
-  type,
-  color,
-  ...restProps
-}) => {
+export const Button = React.forwardRef((props, ref) => {
+  const {
+    afterLabel,
+    beforeLabel,
+    block,
+    disabled,
+    endCorner,
+    feedbackIcon,
+    id,
+    label,
+    labelVisibility,
+    priority,
+    size,
+    startCorner,
+    color,
+    ...restProps
+  } = props;
+
   const context = useContext(ButtonGroupContext);
 
   return (
@@ -49,14 +48,13 @@ export const Button = ({
           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={forwardedRef}
-      type={type}
+      ref={ref}
     >
       {startCorner && (
         <span className={styles.startCorner}>
@@ -92,7 +90,7 @@ export const Button = ({
     </button>
     /* eslint-enable react/button-has-type */
   );
-};
+});
 
 Button.defaultProps = {
   afterLabel: null,
@@ -102,7 +100,6 @@ Button.defaultProps = {
   disabled: false,
   endCorner: null,
   feedbackIcon: null,
-  forwardedRef: undefined,
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
@@ -147,14 +144,6 @@ Button.propTypes = {
    * button is in feedback state.
    */
   feedbackIcon: PropTypes.node,
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * ID of the root HTML element.
    *
@@ -194,6 +183,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
-export const ButtonWithGlobalProps = withForwardedRef(withGlobalProps(Button, 'Button'));
+export const ButtonWithGlobalProps = withGlobalProps(Button, 'Button');
 
 export default ButtonWithGlobalProps;

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

@@ -12,8 +12,10 @@ import {
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
-import Badge from '../Badge'
-import { Button } from './Button'
+import {
+  Badge,
+  Button,
+} from '../..'
 
 Buttons allow users to take actions.
 
@@ -395,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} />
 
@@ -560,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();
     }