Skip to content

Commit

Permalink
Make transferProps available to users (#524)
Browse files Browse the repository at this point in the history
  • Loading branch information
dacerondrej authored and adamkudrna committed Jul 31, 2024
1 parent 698101c commit 6940731
Show file tree
Hide file tree
Showing 68 changed files with 203 additions and 142 deletions.
1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ nav:
- Typography: 'docs/css-helpers/typography.md'
- JS Helpers:
- Classnames: 'docs/js-helpers/classnames.md'
- Transferring Props: 'docs/js-helpers/transferProps.md'
- Guides:
- Customize:
- Theming:
Expand Down
2 changes: 1 addition & 1 deletion src/components/Alert/Alert.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import {
RUIContext,
withGlobalProps,
} from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
import styles from './Alert.module.scss';

Expand Down
9 changes: 5 additions & 4 deletions src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,10 +171,11 @@ React.createElement(() => {
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<div>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<div>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/Badge/Badge.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
import styles from './Badge.module.scss';

Expand Down
9 changes: 5 additions & 4 deletions src/components/Badge/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,11 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<div>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<div>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
import { transferProps } from '../_helpers/transferProps';
import { ButtonGroupContext } from '../ButtonGroup';
import { InputGroupContext } from '../InputGroup/InputGroupContext';
import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
Expand Down
9 changes: 5 additions & 4 deletions src/components/Button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -389,10 +389,11 @@ animation is made.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<button>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<button>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/ButtonGroup/ButtonGroup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import React, {
} from 'react';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { transferProps } from '../_helpers/transferProps';
import styles from './ButtonGroup.module.scss';
import { ButtonGroupContext } from './ButtonGroupContext';

Expand Down
9 changes: 5 additions & 4 deletions src/components/ButtonGroup/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,11 @@ and communicating the state of individual options.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<div>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<div>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/Card/Card.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
import styles from './Card.module.scss';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Card/CardBody.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { transferProps } from '../../utils/transferProps';
import styles from './Card.module.scss';

export const CardBody = ({
Expand Down
2 changes: 1 addition & 1 deletion src/components/Card/CardFooter.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { transferProps } from '../_helpers/transferProps';
import styles from './Card.module.scss';

export const CardFooter = ({
Expand Down
9 changes: 5 additions & 4 deletions src/components/Card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -255,10 +255,11 @@ its interactive elements to disallow user's interaction.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<div>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<div>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/CheckboxField/CheckboxField.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { transferProps } from '../_helpers/transferProps';
import { FormLayoutContext } from '../FormLayout';
import styles from './CheckboxField.module.scss';

Expand Down
9 changes: 5 additions & 4 deletions src/components/CheckboxField/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,11 @@ Disabled state makes the input unavailable.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<input>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
`<input>` HTML element. This enables making the component interactive and helps
to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/FileInputField/FileInputField.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
import { transferProps } from '../_helpers/transferProps';
import { FormLayoutContext } from '../FormLayout';
import styles from './FileInputField.module.scss';

Expand Down
9 changes: 5 additions & 4 deletions src/components/FileInputField/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,11 @@ It's possible to disable the whole input.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<input>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
`<input>` HTML element. This enables making the component interactive and helps
to improve its accessibility.

```docoff-react-preview
<FileInputField
Expand Down
2 changes: 1 addition & 1 deletion src/components/FormLayout/FormLayout.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { FormLayoutContext } from './FormLayoutContext';
import styles from './FormLayout.module.scss';
Expand Down
2 changes: 1 addition & 1 deletion src/components/FormLayout/FormLayoutCustomField.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
Expand Down
9 changes: 5 additions & 4 deletions src/components/FormLayout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -416,10 +416,11 @@ React.createElement(() => {
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<div>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<div>` HTML element. This enables making the component interactive and
helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/Grid/Grid.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { transferProps } from '../_helpers/transferProps';
import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
import styles from './Grid.module.scss';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Grid/GridSpan.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { transferProps } from '../_helpers/transferProps';
import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
import styles from './Grid.module.scss';

Expand Down
10 changes: 6 additions & 4 deletions src/components/Grid/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -248,10 +248,12 @@ property. Check [MDN][grid-auto-flow] to fully understand available options.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root HTML element
of your choice provided by `tag`, which is `<div>` by default. This enables
making the component interactive and helps to improve its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root HTML element of your choice provided by `tag`, which is `<div>` by
default. This enables making the component interactive and helps to improve its
accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/InputGroup/InputGroup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import React, {
import { Text } from '../Text';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
import { transferProps } from '../_helpers/transferProps';
import { FormLayoutContext } from '../FormLayout';
import { InputGroupContext } from './InputGroupContext';
import styles from './InputGroup.module.scss';
Expand Down
9 changes: 5 additions & 4 deletions src/components/InputGroup/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,10 +250,11 @@ for the underlying `<fieldset>` element.
## Forwarding HTML Attributes

In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to the root `<fieldset>` HTML
element. This enables making the component interactive and helps to improve
its accessibility.
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
root `<fieldset>` HTML element. This enables making the component interactive
and helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/Modal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
import React, { useRef } from 'react';
import { createPortal } from 'react-dom';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getPositionClassName } from './_helpers/getPositionClassName';
import { getSizeClassName } from './_helpers/getSizeClassName';
import { useModalFocus } from './_hooks/useModalFocus';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/ModalBody.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { getScrollingClassName } from './_helpers/getScrollingClassName';
import styles from './ModalBody.module.scss';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/ModalCloseButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
RUIContext,
withGlobalProps,
} from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { transferProps } from '../../utils/transferProps';
import styles from './ModalCloseButton.module.scss';

export const ModalCloseButton = React.forwardRef((props, ref) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/ModalContent.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../../utils/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { transferProps } from '../_helpers/transferProps';
import styles from './ModalContent.module.scss';

export const ModalContent = ({
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/ModalFooter.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getJustifyClassName } from './_helpers/getJustifyClassName';
import styles from './ModalFooter.module.scss';

Expand Down
6 changes: 2 additions & 4 deletions src/components/Modal/ModalHeader.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import {
withGlobalProps,
} from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { withGlobalProps } from '../../provider';
import { classNames } from '../../utils/classNames';
import { transferProps } from '../../utils/transferProps';
import { getJustifyClassName } from './_helpers/getJustifyClassName';
import styles from './ModalHeader.module.scss';

Expand Down
6 changes: 2 additions & 4 deletions src/components/Modal/ModalTitle.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import {
withGlobalProps,
} from '../../provider';
import { transferProps } from '../_helpers/transferProps';
import { withGlobalProps } from '../../provider';
import { transferProps } from '../../utils/transferProps';
import styles from './ModalTitle.module.scss';

export const ModalTitle = ({
Expand Down
Loading

0 comments on commit 6940731

Please sign in to comment.