Skip to content

Commit

Permalink
fixup! fixup! fixup! Omit link to legacy list of React synthetic even…
Browse files Browse the repository at this point in the history
…ts in component documentation
  • Loading branch information
mbohal committed Feb 15, 2024
1 parent a794c84 commit 92eb1ca
Show file tree
Hide file tree
Showing 24 changed files with 254 additions and 193 deletions.
8 changes: 5 additions & 3 deletions src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,10 @@ 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.

👉 For the full list of supported attributes refer to [div HTML element attributes]{:target="_blank"}
and [React common props]{:target="_blank"}.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand Down Expand Up @@ -211,5 +213,5 @@ Where:
- `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
border, icon, links, and emphasis), or `background-color`.

[div HTML element attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
16 changes: 9 additions & 7 deletions src/components/Badge/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,17 +87,19 @@ 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 [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
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[div] element.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

<docoff-react-props src="/components/Badge/Badge.jsx" />

[React synthetic events]: https://reactjs.org/docs/events.html
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
16 changes: 9 additions & 7 deletions src/components/Button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -388,13 +388,15 @@ animation is made.
## 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
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[button] element.
👉 For the full list of supported attributes refer to:

- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## Forwarding ref

Expand Down Expand Up @@ -575,6 +577,6 @@ feedback state.
| `--rui-Button--feedback__opacity` | Opacity of buttons in 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
[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
[ref]: https://reactjs.org/docs/refs-and-the-dom.html
18 changes: 10 additions & 8 deletions src/components/ButtonGroup/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -249,13 +249,15 @@ 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 [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
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[div] element.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand All @@ -276,7 +278,7 @@ its accessibility.
| `--rui-ButtonGroup--flat__separator__width` | Separator width for `flat` buttons |
| `--rui-ButtonGroup--flat__separator__color` | Separator color for `flat` buttons |

[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
[accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
[React synthetic events]: https://reactjs.org/docs/events.html
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
16 changes: 9 additions & 7 deletions src/components/Card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -255,13 +255,15 @@ 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 [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
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[div] element.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand Down Expand Up @@ -310,5 +312,5 @@ Where:
- `<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
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
18 changes: 10 additions & 8 deletions src/components/CheckboxField/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,13 +172,15 @@ 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 [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.
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[checkbox] input type.
👉 For the full list of supported attributes refer to:

- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## Forwarding ref

Expand All @@ -198,6 +200,6 @@ options. On top of that, the following options are available for CheckboxField.
| `--rui-FormField--check__input--checkbox__border-radius` | Input corner radius |
| `--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
[checkbox-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
[ref]: https://reactjs.org/docs/refs-and-the-dom.html
18 changes: 10 additions & 8 deletions src/components/FileInputField/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,10 @@ 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 [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.
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.

```docoff-react-preview
<FileInputField
Expand All @@ -173,8 +173,10 @@ helps to improve its accessibility.
/>
```

👉 Refer to the MDN reference for the full list of supported attributes of the
[file] input type.
👉 For the full list of supported attributes refer to:

- [`<input type="file" />` HTML element attributes][file-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## Forwarding ref

Expand All @@ -189,6 +191,6 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
Head to [Forms Theming](/docs/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
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
[file-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
[ref]: https://reactjs.org/docs/refs-and-the-dom.html
20 changes: 11 additions & 9 deletions src/components/FormLayout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -416,13 +416,15 @@ React.createElement(() => {
## 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
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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[div] element.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand Down Expand Up @@ -453,10 +455,10 @@ FormLayoutCustomField can be styled using a small subset of
| `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state |
| `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state |

[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[fragments]: https://reactjs.org/docs/fragments.html
[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
[rui-232]: https://github.com/react-ui-org/react-ui/issues/232
[rui-265]: https://github.com/react-ui-org/react-ui/issues/265
[React synthetic events]: https://reactjs.org/docs/events.html
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
19 changes: 11 additions & 8 deletions src/components/Grid/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,16 @@ 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 [React synthetic events] or **any HTML attribute you like.** All
attributes that don't interfere with the API are forwarded to the HTML element
of your choice provided by `tag`, which is `<div>` by default. It 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 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.

👉 Refer to the MDN reference for the full list of supported attributes of the
[div] element or [any other][all-html-elements] element of your choice.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [any other HTML element][all-html-elements]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand All @@ -276,6 +279,6 @@ Wrapper for content that should span multiple rows or columns.
[justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
[repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
[minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
[React synthetic events]: https://reactjs.org/docs/events.html
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
18 changes: 10 additions & 8 deletions src/components/InputGroup/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,13 +250,15 @@ for the underlying `<fieldset>` element.
## 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 `<div>` HTML
element which wraps elements to be grouped. 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 are forwarded to the root `<fieldset>` 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
[fieldset][fieldset-attributes] element.
👉 For the full list of supported attributes refer to:

- [`<fieldset>` HTML element attributes][fieldset-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand All @@ -269,7 +271,7 @@ interactive and helps to improve its accessibility.
| `--rui-InputGroup__gap` | Gap between elements |
| `--rui-InputGroup__inner-border-radius` | Inner border radius of elements |

[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
[accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
[React synthetic events]: https://reactjs.org/docs/events.html
[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
31 changes: 17 additions & 14 deletions src/components/Modal/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1015,22 +1015,25 @@ opened.
## 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:
can specify **any HTML attribute you like.** All attributes that don't interfere
with the API of the React component are forwarded to:

- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
root, but its first child which represents the modal window.
- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
- the `<div>` HTML element in case of the `Modal` component. This `<div>` is not
the root, but its first child which represents the modal window.
- the root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
and `ModalFooter` components.
- heading HTML element, which level can be specified through `level` option, in
case of the `ModalTitle` component.
- native HTML `<button>` in case of the `ModalCloseButton` component.
- the heading (e.g. `<h1>`) HTML element in case of the `ModalTitle` component.
- the native HTML `<button>` in case of the `ModalCloseButton` component.

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], [heading] and [button] element.
👉 For the full list of supported attributes refer to:

- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
- [`<h1>`-`<h6>` HTML element attributes][heading-attributes]{:target="_blank"}
- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
- [React common props]{:target="_blank"}

## API

Expand Down Expand Up @@ -1084,7 +1087,7 @@ accessibility.
| `--rui-Modal--fullscreen__width` | Width of fullscreen modal |
| `--rui-Modal--fullscreen__height` | Height of fullscreen modal |

[React synthetic events]: https://reactjs.org/docs/events.html
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
[heading-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
[React common props]: https://react.dev/reference/react-dom/components/common#common-props
Loading

0 comments on commit 92eb1ca

Please sign in to comment.