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

[docs][joy] Update class name prefixes in the Anatomy section #36210

Merged
Changes from all 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 docs/data/joy/components/alert/alert.md
Original file line number Diff line number Diff line change
@@ -94,7 +94,7 @@ Here are some factors to consider to ensure that your Alert is accessible:
The Alert component is composed of a single root `<div>` element with its `role` set to `alert`:

```html
<div role="alert" class="JoyAlert-root">
<div role="alert" class="MuiAlert-root">
<!-- Alert contents -->
</div>
```
4 changes: 2 additions & 2 deletions docs/data/joy/components/aspect-ratio/aspect-ratio.md
Original file line number Diff line number Diff line change
@@ -122,8 +122,8 @@ This is a simple illustration of how to use Aspect Ratio with list components:
The Aspect Ratio component is composed of a root `<div>` with a content `<div>` nested inside; the child component is given a `data-first-child` attribute for styling purposes:

```html
<div class="JoyAspectRatio-root">
<div class="JoyAspectRatio-content">
<div class="MuiAspectRatio-root">
<div class="MuiAspectRatio-content">
<some-element data-first-child>
<!-- Aspect Ratio contents -->
</some-element>
2 changes: 1 addition & 1 deletion docs/data/joy/components/avatar/avatar.md
Original file line number Diff line number Diff line change
@@ -142,7 +142,7 @@ You can use these to customize the component with both the `sx` prop and the the
The Avatar component is composed of a root `<div>` that may wrap around an `<svg>`, an `<img>`, or a string:

```html
<div class="JoyAvatar-root">
<div class="MuiAvatar-root">
<!-- Avatar contents -->
</div>
```
4 changes: 2 additions & 2 deletions docs/data/joy/components/badge/badge.md
Original file line number Diff line number Diff line change
@@ -123,9 +123,9 @@ To make your Badge accessible, you must provide a full description with `aria-la
The Badge component is composed of a root `<span>` that houses the element that the Badge is attached to, followed by a `<span>` to represent the Badge itself:

```html
<span class="JoyBadge-root">
<span class="MuiBadge-root">
<!-- the element the Badge is attached to -->
<span class="JoyBadge-badge">
<span class="MuiBadge-badge">
<!-- Badge content -->
</span>
</span>
2 changes: 1 addition & 1 deletion docs/data/joy/components/breadcrumbs/breadcrumbs.md
Original file line number Diff line number Diff line change
@@ -114,7 +114,7 @@ The Breadcrumbs component is composed of a root `<nav>` that wraps around an `<o
<!-- Link or Typography -->
</li>
<li aria-hidden="true" class="MuiBreadcrumbs-separator">/</li>
<li class="MuiBreadcrumbs-li css-1rqbcrs-JoyBreadcrumbs-ol">
<li class="MuiBreadcrumbs-li css-1rqbcrs-MuiBreadcrumbs-ol">
<!-- Link or Typography -->
</li>
</ol>
2 changes: 1 addition & 1 deletion docs/data/joy/components/button/button.md
Original file line number Diff line number Diff line change
@@ -148,7 +148,7 @@ For example, an Icon Button that displays a `<FavoriteBorder />` icon might have
The Button component is composed of a single root `<button>` element that wraps around its contents:

```html
<button class="JoyButton-root" type="button">
<button class="MuiButton-root" type="button">
<!-- Button contents -->
</button>
```
8 changes: 4 additions & 4 deletions docs/data/joy/components/card/card.md
Original file line number Diff line number Diff line change
@@ -145,14 +145,14 @@ Try resizing it by clicking and dragging the bottom-right corner to see how it b
The Card component and all of its supplementary components are composed of a single root `<div>`:

```html
<div class="JoyCard-root">
<div class="JoyCardCover-root">
<div class="MuiCard-root">
<div class="MuiCardCover-root">
<!-- optional Card Cover layer -->
</div>
<div class="JoyCardContent-root">
<div class="MuiCardContent-root">
<!-- optional Card Content layer -->
</div>
<div class="JoyCardOverflow-root">
<div class="MuiCardOverflow-root">
<!-- optional Card Overflow utility -->
</div>
</div>
10 changes: 5 additions & 5 deletions docs/data/joy/components/checkbox/checkbox.md
Original file line number Diff line number Diff line change
@@ -191,13 +191,13 @@ The Checkbox component is composed of a root `<span>` that wraps the input and `
Note that the actual `<input type="checkbox">` is doubly nested within `<span>` elements that represent the `checkbox` and `action` slots, respectively.

```html
<span class="JoyCheckbox-root">
<span class="JoyCheckbox-checkbox">
<span class="JoyCheckbox-action">
<input type="checkbox" class="JoyCheckbox-input" value />
<span class="MuiCheckbox-root">
<span class="MuiCheckbox-checkbox">
<span class="MuiCheckbox-action">
<input type="checkbox" class="MuiCheckbox-input" value />
</span>
</span>
<label class="JoyCheckbox-label">
<label class="MuiCheckbox-label">
<!-- label text -->
</label>
</span>
2 changes: 1 addition & 1 deletion docs/data/joy/components/grid/grid.md
Original file line number Diff line number Diff line change
@@ -151,7 +151,7 @@ Then use `justifyContent` and/or `alignItems` to adjust the position of the cont
The Grid component is composed of a single root `<div>` element:

```html
<div class="JoyGrid-root">
<div class="MuiGrid-root">
<!-- Grid contents -->
</div>
```
4 changes: 2 additions & 2 deletions docs/data/joy/components/input/input.md
Original file line number Diff line number Diff line change
@@ -129,7 +129,7 @@ Alternatively, you can do this manually by targeting the input slot—see [inner
The Input component is composed of a root `<div>` with an `<input>` nested inside:

```html
<div class="JoyInput-root">
<input class="JoyInput-input" />
<div class="MuiInput-root">
<input class="MuiInput-input" />
</div>
```
2 changes: 1 addition & 1 deletion docs/data/joy/components/stack/stack.md
Original file line number Diff line number Diff line change
@@ -111,7 +111,7 @@ In order for the item to stay within the container you need to set `min-width: 0
The Stack component is composed of a single root `<div>` element:

```html
<div class="JoyStack-root">
<div class="MuiStack-root">
<!-- Stack contents -->
</div>
```
4 changes: 2 additions & 2 deletions docs/data/joy/components/typography/typography.md
Original file line number Diff line number Diff line change
@@ -223,9 +223,9 @@ The Typography component is composed of a single root `<p>` that's assigned the
When one Typography component is nested within another, the nested component renders as a `<span>` (unless customized as described above).

```html
<p class="JoyTypography-root JoyTypography-body1">
<p class="MuiTypography-root MuiTypography-body1">
<!-- Typography content -->
<span class="JoyTypography-root JoyTypography-inherit">
<span class="MuiTypography-root MuiTypography-inherit">
<!-- Nested Typography content -->
</span>
</p>