Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change all true values to boolean in docs #2330

Merged
merged 6 commits into from
Sep 5, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/docs/components/avatar/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ data:

### Best practices

Decorative Avatars (Avatars that repeat the information already expressed by the accompanied text) should be hidden from the screen reader to avoid repetition. If you are adding an Avatar for decorative purposes, pass `aria-hidden=true` to hide its label from the screen reader.
Decorative Avatars (Avatars that repeat the information already expressed by the accompanied text) should be hidden from the screen reader to avoid repetition. If you are adding an Avatar for decorative purposes, pass `aria-hidden={true}` to hide its label from the screen reader.
libertymayc marked this conversation as resolved.
Show resolved Hide resolved

If an alternative icon is used inside an Avatar, the icon's `aria-label` should be descriptive in relation to the Avatar context, not the icon context. For example, when using `<BuildingSolidIcon/>` to represent a company `aria-label` should read "Company profile" rather than the Icon's default label "building solid".
2 changes: 1 addition & 1 deletion site/docs/components/button/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ data:

### Best practices

- When a Button has both an icon and text, pass `aria-hidden=true` to the icon so that its text is not announced by screen readers.
- When a Button has both an icon and text, pass `aria-hidden={true}` to the icon so that its text is not announced by screen readers.
libertymayc marked this conversation as resolved.
Show resolved Hide resolved
- When a Button has an icon only and no text, pass an `aria-label` to Button that describes its purpose.

#### Focusable disabled button
Expand Down
6 changes: 3 additions & 3 deletions site/docs/components/checkbox/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ To configure checkbox groups to maintain a horizontal alignment but allow text w

When a checkbox option is neither selected nor deselected, it is indeterminate. This is a third, separate state.

A checkbox with the prop `indeterminate="true"` will display an indeterminate icon. The most common use is a nested checkbox group with a hierarchy of selections. When the group contains a mix of selected and unselected children, the parent will show an indeterminate state.
A checkbox with the prop `indeterminate={true}` will display an indeterminate icon. The most common use is a nested checkbox group with a hierarchy of selections. When the group contains a mix of selected and unselected children, the parent will show an indeterminate state.

</LivePreview>

Expand All @@ -75,7 +75,7 @@ A checkbox with the prop `indeterminate="true"` will display an indeterminate ic

A disabled checkbox is not interactive or focusable.

A checkbox can be disabled by setting `disabled=true`.
A checkbox can be disabled by setting `disabled={true}`.

Guidance:

Expand All @@ -91,7 +91,7 @@ If a disabled checkbox's text description contains information that is valuable

A read-only checkbox permits the user to only read or copy the text description, but not edit the text or change the state of the checkbox.

A checkbox with the prop `readOnly="true"` will suppress all functionality along with displaying read-only styling.
A checkbox with the prop `readOnly={true}` will suppress all functionality along with displaying read-only styling.

Guidance:

Expand Down
2 changes: 1 addition & 1 deletion site/docs/components/flex-layout/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ By default, Flex Layout displays items along the horizontal axis in a row, align

#### Guidance

Set the `wrap` prop to `true` to overflow items onto subsequent rows when they no longer fit in the container.
Set `wrap={true}` to overflow items onto subsequent rows when they no longer fit in the container.

</LivePreview>

Expand Down
2 changes: 1 addition & 1 deletion site/docs/components/multiline-input/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ When setting Multiline Input to a read-only state, ensure to also disable any ne

### Bordered

To style Multiline Input with a full border set the `bordered` prop to `true`.
To style Multiline Input with a full border set `bordered={true}`.

- We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).

Expand Down
4 changes: 2 additions & 2 deletions site/docs/components/radio-button/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ You can configure radio button groups to maintain a horizontal alignment but all

A disabled radio button is not interactive or focusable.

A radio button can be disabled by setting `disabled=true`.
A radio button can be disabled by setting `disabled={true}`.

Guidance:

Expand All @@ -73,7 +73,7 @@ If a disabled radio button's text description contains information that is valua

A read-only radio button permits the user to only read or copy the value, but not edit the value or change the state of the radio.

A radio button with the prop `readOnly="true"` will suppress all functionality along with displaying read-only styling.
A radio button with the prop `readOnly={true}` will suppress all functionality along with displaying read-only styling.

Guidance:

Expand Down
2 changes: 1 addition & 1 deletion site/docs/components/toggle-button/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The basic toggle button component allows users to switch between two states.

Use icons and text in toggle buttons if it's important to visually reinforce the theme of the options. Or if providing additional context may help decision-making (for example, selecting a document type or a text style).

Pass `aria-hidden=true` to the icon so its text description is not announced by the screen reader.
Pass `aria-hidden={true}` to the icon so its text description is not announced by the screen reader.

Guidance:

Expand Down
Loading