From 18565e57b45762abcd478936b293934b5612b297 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 16 Feb 2023 11:53:47 +0530
Subject: [PATCH] [docs][joy] Update class name prefixes in the `Anatomy`
 section (#36210)

---
 docs/data/joy/components/alert/alert.md               |  2 +-
 docs/data/joy/components/aspect-ratio/aspect-ratio.md |  4 ++--
 docs/data/joy/components/avatar/avatar.md             |  2 +-
 docs/data/joy/components/badge/badge.md               |  4 ++--
 docs/data/joy/components/breadcrumbs/breadcrumbs.md   |  2 +-
 docs/data/joy/components/button/button.md             |  2 +-
 docs/data/joy/components/card/card.md                 |  8 ++++----
 docs/data/joy/components/checkbox/checkbox.md         | 10 +++++-----
 docs/data/joy/components/grid/grid.md                 |  2 +-
 docs/data/joy/components/input/input.md               |  4 ++--
 docs/data/joy/components/stack/stack.md               |  2 +-
 docs/data/joy/components/typography/typography.md     |  4 ++--
 12 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md
index 1da2586e3ae050..a02772e1e09471 100644
--- a/docs/data/joy/components/alert/alert.md
+++ b/docs/data/joy/components/alert/alert.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
index 9d6cd6c74eee30..c3897e6eabd4da 100644
--- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md
+++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -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>
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
index 2af0046c7dc7ac..64b1e82eeff84d 100644
--- a/docs/data/joy/components/avatar/avatar.md
+++ b/docs/data/joy/components/avatar/avatar.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
index 7783adb475f136..e4d2c682aff2d6 100644
--- a/docs/data/joy/components/badge/badge.md
+++ b/docs/data/joy/components/badge/badge.md
@@ -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>
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
index 7c8ea3ff10f1d3..a3d747752005d7 100644
--- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -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>
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index af047dabd94c79..982a059eabd39c 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
index 654858b27e5102..8b8949f78b3a9f 100644
--- a/docs/data/joy/components/card/card.md
+++ b/docs/data/joy/components/card/card.md
@@ -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>
diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
index b7f6e8013c8a06..d00cf81285686c 100644
--- a/docs/data/joy/components/checkbox/checkbox.md
+++ b/docs/data/joy/components/checkbox/checkbox.md
@@ -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>
diff --git a/docs/data/joy/components/grid/grid.md b/docs/data/joy/components/grid/grid.md
index 775df1fcf9ffd9..be0de6bbef7855 100644
--- a/docs/data/joy/components/grid/grid.md
+++ b/docs/data/joy/components/grid/grid.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index 13142e5315d4a8..cc475dd528a7ca 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md
index 05bc2e3c7af0d0..9ebcffa0568f68 100644
--- a/docs/data/joy/components/stack/stack.md
+++ b/docs/data/joy/components/stack/stack.md
@@ -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>
 ```
diff --git a/docs/data/joy/components/typography/typography.md b/docs/data/joy/components/typography/typography.md
index 8ff5252655e40d..bbd725e7ce819e 100644
--- a/docs/data/joy/components/typography/typography.md
+++ b/docs/data/joy/components/typography/typography.md
@@ -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>