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

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/ButtonGroup/ButtonGroup.jsx

@@ -11,7 +11,6 @@ export const ButtonGroup = ({
   block,
   disabled,
   children,
-  id,
   priority,
   size,
   ...restProps
@@ -27,7 +26,6 @@ export const ButtonGroup = ({
         styles.root,
         block && styles.isRootBlock,
       )}
-      id={id}
       role="group"
     >
       <ButtonGroupContext.Provider
@@ -48,7 +46,6 @@ ButtonGroup.defaultProps = {
   block: false,
   children: null,
   disabled: false,
-  id: undefined,
   priority: 'filled',
   size: 'medium',
 };
@@ -66,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

@@ -231,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} />
@@ -246,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

@@ -280,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} />
@@ -326,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

package/src/lib/components/CheckboxField/CheckboxField.jsx

@@ -9,7 +9,6 @@ import styles from './CheckboxField.scss';
 
 export const CheckboxField = React.forwardRef((props, ref) => {
   const {
-    checked,
     disabled,
     helpText,
     id,
@@ -19,7 +18,6 @@ export const CheckboxField = React.forwardRef((props, ref) => {
     required,
     validationState,
     validationText,
-    value,
     ...restProps
   } = props;
   const context = useContext(FormLayoutContext);
@@ -29,7 +27,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
-        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         labelPosition === 'before' && styles.hasRootLabelBefore,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
@@ -50,14 +48,12 @@ export const CheckboxField = React.forwardRef((props, ref) => {
         </div>
         <input
           {...transferProps(restProps)}
-          checked={checked}
           className={styles.input}
           disabled={disabled}
           id={id}
           ref={ref}
           required={required}
           type="checkbox"
-          value={value}
         />
       </div>
       {helpText && (
@@ -81,24 +77,17 @@ export const CheckboxField = React.forwardRef((props, ref) => {
 });
 
 CheckboxField.defaultProps = {
-  checked: undefined,
   disabled: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
-  ref: undefined,
   required: false,
   validationState: null,
   validationText: null,
-  value: undefined,
 };
 
 CheckboxField.propTypes = {
-  /**
-   * If `true`, the input will be checked.
-   */
-  checked: PropTypes.bool,
   /**
    * If `true`, the input will be disabled.
    */
@@ -130,14 +119,6 @@ CheckboxField.propTypes = {
    * Placement of the label relative to the input.
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -150,13 +131,6 @@ CheckboxField.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
 };
 
 export const CheckboxFieldWithGlobalProps = withGlobalProps(CheckboxField, 'CheckboxField');

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

@@ -181,12 +181,22 @@ Disabled state makes the input unavailable.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. 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
+[checkbox] input type.
 
-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.
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={CheckboxField} />
 
@@ -201,3 +211,5 @@ options. On top of that, the following options are available for CheckboxField.
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/FileInputField/FileInputField.jsx

@@ -32,8 +32,8 @@ export const FileInputField = React.forwardRef((props, ref) => {
         fullWidth && styles.isRootFullWidth,
         context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
-          ? styles.rootLayoutHorizontal
-          : styles.rootLayoutVertical,
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
@@ -90,7 +90,6 @@ FileInputField.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
-  ref: undefined,
   required: false,
   validationState: null,
   validationText: null,
@@ -136,14 +135,6 @@ FileInputField.propTypes = {
    *
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the input will be required.
    */

package/src/lib/components/FileInputField/FileInputField.scss

@@ -49,12 +49,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 

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

@@ -66,28 +66,6 @@ Full-width fields span the full width of a parent:
   />
 </Playground>
 
-## Forwarding HTML Attributes
-
-When you want to refine your file input fields even further, you
-can **add whatever HTML attribute you like.** All attributes that don't
-interfere with [component's API](#api) are forwarded to the native HTML input.
-
-<Playground>
-  <FileInputField
-    accept=".pdf,.jpg,.jpeg,.png"
-    helpText={`
-      Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
-      Size limit is 10 MB.
-    `}
-    label="Attachment"
-    multiple
-  />
-</Playground>
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
-type.
-
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the field label. The label
@@ -187,12 +165,34 @@ It's possible to disable the whole input.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
 
-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](#forwarding-html-attributes).
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. This enables making the component interactive and
+helps to improve its accessibility.
+
+<Playground>
+  <FileInputField
+    accept=".pdf,.jpg,.jpeg,.png"
+    helpText={`
+      Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
+      Size limit is 10 MB.
+    `}
+    label="Attachment"
+    multiple
+  />
+</Playground>
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[file] input type.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={FileInputField} />
 
@@ -202,3 +202,5 @@ Head to [Forms Theming](/customize/theming/forms) to see shared form theming
 options.
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/FormLayout/FormLayout.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
@@ -12,8 +13,8 @@ export const FormLayout = ({
   autoWidth,
   children,
   fieldLayout,
-  id,
   labelWidth,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -23,10 +24,10 @@ export const FormLayout = ({
 
   const fieldLayoutClass = (layout) => {
     if (layout === 'horizontal') {
-      return styles.rootFieldLayoutHorizontal;
+      return styles.isRootFieldLayoutHorizontal;
     }
 
-    return styles.rootFieldLayoutVertical;
+    return styles.isRootFieldLayoutVertical;
   };
 
   const labelWidthClass = (width) => {
@@ -47,7 +48,7 @@ export const FormLayout = ({
 
   return (
     <div
-      id={id}
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         fieldLayoutClass(fieldLayout),
@@ -69,7 +70,6 @@ FormLayout.defaultProps = {
   autoWidth: false,
   children: null,
   fieldLayout: 'vertical',
-  id: undefined,
   labelWidth: 'default',
 };
 
@@ -96,10 +96,6 @@ FormLayout.propTypes = {
    * Layout that is forced on children form fields.
    */
   fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Width of the column with form field labels. Only available if the `fieldLayout` is set to
    * `horizontal`.

package/src/lib/components/FormLayout/FormLayout.scss

@@ -24,14 +24,14 @@
     @include spacing.bottom(layouts);
 }
 
-.rootFieldLayoutVertical,
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutVertical,
+.isRootFieldLayoutHorizontal {
     display: grid;
     grid-template-columns: var(--rui-local-field-width);
     grid-row-gap: theme.$row-gap;
 }
 
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutHorizontal {
     @include breakpoint.up(forms.$horizontal-breakpoint) {
         grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
     }