From 344d935441d934215a864186e97f893f197f94d9 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 13 Sep 2022 16:27:24 +0100
Subject: [PATCH] Drop the old prop in markdowns and tests

---
 docs/data/joy/components/button/button-pt.md |  4 ++--
 docs/data/joy/components/button/button-zh.md |  4 ++--
 docs/data/joy/components/button/button.md    |  4 ++--
 packages/mui-joy/src/Button/Button.spec.tsx  |  6 +++---
 packages/mui-joy/src/Button/Button.test.js   | 20 ++++++++++----------
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/data/joy/components/button/button-pt.md b/docs/data/joy/components/button/button-pt.md
index 63b55131073f76..c30b0b2397c484 100644
--- a/docs/data/joy/components/button/button-pt.md
+++ b/docs/data/joy/components/button/button-pt.md
@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}
 
diff --git a/docs/data/joy/components/button/button-zh.md b/docs/data/joy/components/button/button-zh.md
index 63b55131073f76..c30b0b2397c484 100644
--- a/docs/data/joy/components/button/button-zh.md
+++ b/docs/data/joy/components/button/button-zh.md
@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}
 
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index 884574d0407f3b..4744eed5b33def 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -64,9 +64,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}
 
diff --git a/packages/mui-joy/src/Button/Button.spec.tsx b/packages/mui-joy/src/Button/Button.spec.tsx
index fd790cdec0e5c8..275d22749aae21 100644
--- a/packages/mui-joy/src/Button/Button.spec.tsx
+++ b/packages/mui-joy/src/Button/Button.spec.tsx
@@ -73,14 +73,14 @@ function Icon() {
 <Button
   variant="solid"
   color="success"
-  endIcon={<Icon />}
+  endDecorator={<Icon />}
   sx={{ width: 'var(--Button-minHeight)' }}
 >
   <Icon />
 </Button>;
-<Button variant="solid" startIcon={<Icon />} size="sm">
+<Button variant="solid" startDecorator={<Icon />} size="sm">
   Add to cart
 </Button>;
-<Button variant="outlined" endIcon={<Icon />} color="success">
+<Button variant="outlined" endDecorator={<Icon />} color="success">
   Checkout
 </Button>;
diff --git a/packages/mui-joy/src/Button/Button.test.js b/packages/mui-joy/src/Button/Button.test.js
index a328049f60a285..65b7c3a3b35e07 100644
--- a/packages/mui-joy/src/Button/Button.test.js
+++ b/packages/mui-joy/src/Button/Button.test.js
@@ -7,13 +7,13 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('Joy <Button />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Button startIcon="icon">Conformance?</Button>, () => ({
+  describeConformance(<Button startDecorator="icon">Conformance?</Button>, () => ({
     render,
     classes,
     ThemeProvider,
     refInstanceof: window.HTMLButtonElement,
     muiName: 'JoyButton',
-    testDeepOverrides: { slotName: 'startIcon', slotClassName: classes.startIcon },
+    testDeepOverrides: { slotName: 'startDecorator', slotClassName: classes.startDecorator },
     testVariantProps: { variant: 'solid', fullWidth: true },
     testCustomVariant: true,
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
@@ -76,21 +76,21 @@ describe('Joy <Button />', () => {
     expect(button).to.have.class(classes.fullWidth);
   });
 
-  it('should render a button with startIcon', () => {
-    const { getByRole } = render(<Button startIcon={<span>icon</span>}>Hello World</Button>);
+  it('should render a button with startDecorator', () => {
+    const { getByRole } = render(<Button startDecorator={<span>icon</span>}>Hello World</Button>);
     const button = getByRole('button');
-    const startIcon = button.querySelector(`.${classes.startIcon}`);
+    const startDecorator = button.querySelector(`.${classes.startDecorator}`);
 
     expect(button).to.have.class(classes.root);
-    expect(startIcon).not.to.have.class(classes.endIcon);
+    expect(startDecorator).not.to.have.class(classes.endDecorator);
   });
 
-  it('should render a button with endIcon', () => {
-    const { getByRole } = render(<Button endIcon={<span>icon</span>}>Hello World</Button>);
+  it('should render a button with endDecorator', () => {
+    const { getByRole } = render(<Button endDecorator={<span>icon</span>}>Hello World</Button>);
     const button = getByRole('button');
-    const endIcon = button.querySelector(`.${classes.endIcon}`);
+    const endDecorator = button.querySelector(`.${classes.endDecorator}`);
 
     expect(button).to.have.class(classes.root);
-    expect(endIcon).not.to.have.class(classes.startIcon);
+    expect(endDecorator).not.to.have.class(classes.startDecorator);
   });
 });