Drop the old prop in markdowns and tests

mui · Sep 13, 2022 · 344d935 · 344d935
1 parent 3f1d0bf
commit 344d935
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
   });
 });