Skip to content

Commit

Permalink
[docs-infra] Fix missing non breaking spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Feb 28, 2024
1 parent 67c135f commit 086f2fa
Show file tree
Hide file tree
Showing 93 changed files with 404 additions and 404 deletions.
210 changes: 105 additions & 105 deletions CHANGELOG.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/data/joy/components/aspect-ratio/aspect-ratio.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Aspect Ratio is a wrapper component for quickly resizing content to conform to y
Media content like images can be stretched, resized, and cropped based on the CSS `object-fit` property.

:::info
A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, and we plan to implement it in Joy UI soon.
A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, and we plan to implement it in Joy UI soon.
:::

## Basics
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/box/box.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ components: Box
githubLabel: 'component: Box'
---

<!-- This page's content is duplicated (with some product-specific details) across the Material UI, Joy UI, and MUI System docs. Any changes should be applied to all three pages at the same time. -->
<!-- This page's content is duplicated (with some product-specific details) across the Material UI, Joy UI, and MUI System docs. Any changes should be applied to all three pages at the same time. -->

# Box

Expand All @@ -16,12 +16,12 @@ githubLabel: 'component: Box'
## Introduction

The Box component is a generic container for grouping other components.
It's a fundamental building block when working with Joy UI—you can think of it as a `<div>` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
It's a fundamental building block when working with Joy UI—you can think of it as a `<div>` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).

### Usage

The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a `<div>`.
Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a `<div>`.
Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.

## Basics

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/card/card.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ githubLabel: 'component: card'

## Introduction

The Joy UI Card component includes several complementary utility components to handle various use cases:
The Joy UI Card component includes several complementary utility components to handle various use cases:

- [Card](#basics): a surface-level container for grouping related components.
- [Card Overflow](#expand-to-fill): a supplemental wrapper that expands a Card's contents to fill all edges.
Expand All @@ -36,7 +36,7 @@ The demo below shows a typical Card that groups together Typography, Aspect Rati

### Variants

The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.
The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.

{{"demo": "CardVariants.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/checkbox/checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
Checkboxes provide users with a graphical representation of a binary choice (yes or no, on or off).
They are most commonly presented in a series, giving the user multiple choices to make.

The Joy UI Checkbox component replaces the native HTML `<input type="checkbox">` element and offers expanded options for styling and accessibility.
The Joy UI Checkbox component replaces the native HTML `<input type="checkbox">` element and offers expanded options for styling and accessibility.

{{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}

Expand All @@ -44,7 +44,7 @@ Use the `label` prop to provide text, and add `defaultChecked` when the input sh

### Variants

The Checkbox component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft`, `outlined`, and `plain`. By default, when unchecked, the Checkbox is set to `outlined`;
The Checkbox component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft`, `outlined`, and `plain`. By default, when unchecked, the Checkbox is set to `outlined`;
when checked, the variant changes to `solid`.

Adding the `variant` prop to your Checkbox overrides this default behavior. Try checking and unchecking the Checkboxes in the demo below to see the differences:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ The Circular Progress component provides users with updates on the status of ong

### Variants

The Circular Progress component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid` (default), `soft`, `outlined`, and `plain`.
The Circular Progress component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid` (default), `soft`, `outlined`, and `plain`.

{{"demo": "CircularProgressVariants.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/css-baseline/css-baseline.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ githubLabel: 'component: CssBaseline'

# CSS Baseline

<p class="description">Joy UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.</p>
<p class="description">Joy UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.</p>

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

Expand All @@ -33,7 +33,7 @@ export default function MyApp() {

## Scoping on children

However, you might be progressively migrating a website to Joy UI, using a global reset might not be an option.
However, you might be progressively migrating a website to Joy UI, using a global reset might not be an option.
It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.

```jsx
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/input/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The Input component provides a customizable input field that can be used to coll

### Variants

The Input component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid` (default), `soft`, `outlined`, and `plain`.
The Input component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid` (default), `soft`, `outlined`, and `plain`.

{{"demo": "InputVariants.js"}}

Expand Down Expand Up @@ -175,7 +175,7 @@ To create a floating label input, a custom component (combination of `<input>` a
The Input component can be integrated with third-party formatting libraries for more complex use cases.

Create an adapter component to get the props from the Input component and map them to the third-party component APIs.
Then use that adapter as a value to the `slotProps.input.component` property of the Joy UI Input.
Then use that adapter as a value to the `slotProps.input.component` property of the Joy UI Input.

The demos below illustrate how to do this with two popular libraries.

Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/components/link/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/

## Introduction

The Joy UI Link component replaces the native HTML `<a>` element and accepts the same props as the [Typography](/joy-ui/react-typography/) component, as well as MUI System props.
The Joy UI Link component replaces the native HTML `<a>` element and accepts the same props as the [Typography](/joy-ui/react-typography/) component, as well as MUI System props.

{{"demo": "LinkUsage.js", "hideToolbar": true, "bg": "gradient"}}

Expand All @@ -24,7 +24,7 @@ The Joy UI Link component replaces the native HTML `<a>` element and accepts the
import Link from '@mui/joy/Link';
```

The Joy UI Link behaves similar to the native HTML `<a>`, so it renders with an underline by default and has no background color on hover.
The Joy UI Link behaves similar to the native HTML `<a>`, so it renders with an underline by default and has no background color on hover.

The demo below shows the two basic states available to the Link: default and disabled.
Don't forget to always assign an `href` value:
Expand All @@ -35,7 +35,7 @@ Don't forget to always assign an `href` value:

### Variants

The Link component supports Joy UI's four global variants: `plain` (default), `soft`, `outlined`, and `solid`.
The Link component supports Joy UI's four global variants: `plain` (default), `soft`, `outlined`, and `solid`.

:::warning
Although the component is technically set to `plain` by default, it will actually render without any variant if you don't customize it.
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/list/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ githubLabel: 'component: list'

Lists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images.

Joy UI Lists are implemented using a collection of related components:
Joy UI Lists are implemented using a collection of related components:

- [List](#basics) - a wrapper for list items. Renders as a `<ul>` by default.
- [List Item](#basics) - a common list item. Renders as an `<li>` by default.
Expand All @@ -36,7 +36,7 @@ import ListItem from '@mui/joy/ListItem';

### Variants

The List component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft`, `outlined`, and `plain`.
The List component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft`, `outlined`, and `plain`.

### Sizes

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/menu/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ unstyled: /base-ui/react-menu/

## Introduction

Joy UI provides five menu-related components:
Joy UI provides five menu-related components:

- Menu Button - a button that opens a menu. It reuses the styles from [`Button`](/joy-ui/react-button/).
- Menu - a listbox popup for wrapping the menu items which reuses the styles from [`List`](/joy-ui/react-list/).
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/modal/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

## Introduction

Joy UI provides three modal-related components:
Joy UI provides three modal-related components:

- [`Modal`](#basic-usage): A container that renders its `children` node in front of a backdrop component.
- [`ModalClose`](#dialog): A button for closing the modal.
Expand Down Expand Up @@ -53,7 +53,7 @@ export default function MyApp() {
### Basic usage

The Modal accepts only a single React element as a child.
That can be either a Joy UI component, e.g. [`Sheet`](/joy-ui/react-sheet/), or any other custom element.
That can be either a Joy UI component, e.g. [`Sheet`](/joy-ui/react-sheet/), or any other custom element.

Use the Modal Close component to render a close button that inherits the modal's `onClose` function.

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/radio-button/radio-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ When should you use radio buttons rather than checkboxes, switches, or selects?
import Radio from '@mui/joy/Radio';
```

The Joy UI Radio button behaves similar to the native HTML <input type="radio">, so it accepts props like `checked`, `value` and `onChange`.
The Joy UI Radio button behaves similar to the native HTML <input type="radio">, so it accepts props like `checked`, `value` and `onChange`.

{{"demo": "RadioButtons.js"}}

## Customization

### Variants

The Radio component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `outlined` (default), `soft` , `solid` , and `plain`.
The Radio component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `outlined` (default), `soft` , `solid` , and `plain`.

{{"demo": "RadioVariants.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/sheet/sheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ components: Sheet

# Sheet

<p class="description">Sheet is a generic container that supports Joy UI's global variants.</p>
<p class="description">Sheet is a generic container that supports Joy UI's global variants.</p>

{{"component": "modules/components/ComponentLinkHeader.js"}}

## Introduction

The `Sheet` container is a generic container.
It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box.
It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box.

{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": "gradient"}}

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/snackbar/snackbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ In wider layouts, snackbars can be aligned to the left or centered, especially i

### Variants

The Snackbar component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.
The Snackbar component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.

{{"demo": "SnackbarVariants.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/stepper/stepper.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ materialDesign: https://m1.material.io/components/steppers.html

Stepper displays progress through a sequence of logical and numbered steps. It support horizontal and vertical orientation for desktop and mobile viewports.

Joy UI Steppers are implemented using a collection of related components:
Joy UI Steppers are implemented using a collection of related components:

- [Stepper](#basics) - a required container for steps. Renders as a `<ol>` by default.
- [Step](#basics) - a step. Renders as a `<li>` by default.
Expand All @@ -37,7 +37,7 @@ import Step from '@mui/joy/Step';

Pass StepIndicator as an element to Step's `indicator` prop to create number or icon indicators.

The StepIndicator supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `soft` (default), `solid`, `outlined`, and `plain`.
The StepIndicator supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `soft` (default), `solid`, `outlined`, and `plain`.

{{"demo": "IndicatorStepper.js"}}

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/switch/switch.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ You can use those to customize the component on both the `sx` prop and the theme

### Fluent UI

Here's how you'd customize Joy UI's Switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):
Here's how you'd customize Joy UI's Switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):

- Unchecked state: `outlined` variant and `neutral` color.
- Checked state: `solid` variant and `primary` color.
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/components/table/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/table/

## Introduction

The Joy UI Table component lets you use plain HTML structure to assemble a table in JSX.
The Joy UI Table component lets you use plain HTML structure to assemble a table in JSX.

{{"demo": "TableUsage.js", "hideToolbar": true, "bg": "gradient"}}

## Basics

Joy UI Table will apply the styles based on a table structure using `<thead>`, `<tbody>`, and `<tfoot>` elements.
Joy UI Table will apply the styles based on a table structure using `<thead>`, `<tbody>`, and `<tfoot>` elements.

```jsx
import Table from '@mui/joy/Table';
Expand Down Expand Up @@ -74,7 +74,7 @@ Use the `sx` prop to target columns with the appropriate CSS selector and apply

### Variants

Table supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain` (default), `outlined`, `soft`, and `solid`.
Table supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain` (default), `outlined`, `soft`, and `solid`.

{{"demo": "TableVariants.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/tabs/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ unstyled: /base-ui/react-tabs/

## Introduction

Joy UI provides four tabs-related components:
Joy UI provides four tabs-related components:

- `Tabs`: A context provider that synchronizes the selected `Tab` with the corresponding `TabPanel`.
- `TabList`: A container that consists of `Tab` items.
Expand All @@ -32,7 +32,7 @@ import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';
```

The Joy UI set of Tabs components follows the [WAI ARIA design pattern guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
The Joy UI set of Tabs components follows the [WAI ARIA design pattern guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

Use the `value` prop on the Tab Panel and the `defaultValue` prop on the Tabs component to target the selected tab.

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/textarea/textarea.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ unstyled: /base-ui/react-textarea-autosize/

## Introduction

Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](/base-ui/react-textarea-autosize/) component.
Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](/base-ui/react-textarea-autosize/) component.

{{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ It controls the selected state of its child buttons when given its own `value` p
import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
```

Note that Joy UI doesn't provide a Toggle Button component but rather a Toggle Button Group container component. The reason for that is that according to the [WAI ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/), it's better to use `aria-pressed` on the Button or Icon Button component instead.
Note that Joy UI doesn't provide a Toggle Button component but rather a Toggle Button Group container component. The reason for that is that according to the [WAI ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/), it's better to use `aria-pressed` on the Button or Icon Button component instead.

{{"demo": "ToggleButtons.js"}}

That said, when using the Toggle Button Group component, pass a value as an array.
When a button within the group is pressed, the Toggle Button Group component triggers the `onChange` prop of it and passes the updated array as a parameter.

The Toggle Button Group component uses the same styles as the [Button Group](/joy-ui/react-button-group/) component to ensure a consistent visual connection between all of the Joy UI buttons.
The Toggle Button Group component uses the same styles as the [Button Group](/joy-ui/react-button-group/) component to ensure a consistent visual connection between all of the Joy UI buttons.

{{"demo": "ToggleGroup.js"}}

Expand All @@ -43,7 +43,7 @@ When the value provided to the Toggle Button Group component is not an array, it

### Variants

The Toggle Button Group component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `outlined` (default), `plain`, `soft`, and `solid`.
The Toggle Button Group component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `outlined` (default), `plain`, `soft`, and `solid`.

{{"demo": "ToggleGroupVariants.js"}}

Expand Down
Loading

0 comments on commit 086f2fa

Please sign in to comment.