[Joy][button] Replace start/endIcon prop with start/endDecorator (m…

…ui#34288)
daniel-rabe · Nov 29, 2022 · e7ec3f1 · e7ec3f1
1 parent 6eb4b46
commit e7ec3f1
Show file tree

Hide file tree

Showing 26 changed files with 92 additions and 79 deletions.
diff --git a/docs/data/joy/components/button/ButtonIcons.js b/docs/data/joy/components/button/ButtonIcons.js
@@ -8,11 +8,11 @@ import ThumbUp from '@mui/icons-material/ThumbUp';
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button startIcon={<Add />}>Add to cart</Button>
+      <Button startDecorator={<Add />}>Add to cart</Button>
       <Button aria-label="Like" variant="outlined" color="neutral">
         <ThumbUp />
       </Button>
-      <Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
         Checkout
       </Button>
     </Box>

diff --git a/docs/data/joy/components/button/ButtonIcons.tsx b/docs/data/joy/components/button/ButtonIcons.tsx
@@ -8,11 +8,11 @@ import ThumbUp from '@mui/icons-material/ThumbUp';
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button startIcon={<Add />}>Add to cart</Button>
+      <Button startDecorator={<Add />}>Add to cart</Button>
       <Button aria-label="Like" variant="outlined" color="neutral">
         <ThumbUp />
       </Button>
-      <Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
         Checkout
       </Button>
     </Box>

diff --git a/docs/data/joy/components/button/ButtonIcons.tsx.preview b/docs/data/joy/components/button/ButtonIcons.tsx.preview
@@ -1,7 +1,7 @@
-<Button startIcon={<Add />}>Add to cart</Button>
+<Button startDecorator={<Add />}>Add to cart</Button>
 <Button aria-label="Like" variant="outlined" color="neutral">
   <ThumbUp />
 </Button>
-<Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+<Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
   Checkout
 </Button>
diff --git a/docs/data/joy/components/button/ButtonLink.js b/docs/data/joy/components/button/ButtonLink.js
@@ -7,7 +7,7 @@ import OpenInNew from '@mui/icons-material/OpenInNew';
 export default function IconButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+      <Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
         Open in new tab
       </Button>
       <IconButton aria-label="Open in new tab" component="a" href="#as-link">

diff --git a/docs/data/joy/components/button/ButtonLink.tsx b/docs/data/joy/components/button/ButtonLink.tsx
@@ -7,7 +7,7 @@ import OpenInNew from '@mui/icons-material/OpenInNew';
 export default function IconButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+      <Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
         Open in new tab
       </Button>
       <IconButton aria-label="Open in new tab" component="a" href="#as-link">

diff --git a/docs/data/joy/components/button/ButtonLink.tsx.preview b/docs/data/joy/components/button/ButtonLink.tsx.preview
@@ -1,4 +1,4 @@
-<Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+<Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
   Open in new tab
 </Button>
 <IconButton aria-label="Open in new tab" component="a" href="#as-link">

diff --git a/docs/data/joy/components/button/ButtonVariables.js b/docs/data/joy/components/button/ButtonVariables.js
@@ -8,15 +8,15 @@ export default function ButtonVariables() {
     <JoyVariablesDemo
       componentName="Button"
       renderCode={(formattedSx) => `<Button
-  startIcon={<FavoriteBorder />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
+  startDecorator={<FavoriteBorder />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
       data={[
         {
           var: '--Button-gap',
           defaultValue: '8px',
         },
       ]}
       renderDemo={(sx) => (
-        <Button sx={sx} startIcon={<FavoriteBorder />}>
+        <Button sx={sx} startDecorator={<FavoriteBorder />}>
           Favorite
         </Button>
       )}

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/docs/data/joy/components/circular-progress/CircularProgressButton.js b/docs/data/joy/components/circular-progress/CircularProgressButton.js
@@ -8,7 +8,7 @@ import CircularProgress from '@mui/joy/CircularProgress';
 export default function CircularProgressSizes() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+      <Button startDecorator={<CircularProgress variant="solid" thickness={2} />}>
         Loading…
       </Button>
       <IconButton>

diff --git a/docs/data/joy/components/circular-progress/CircularProgressButton.tsx b/docs/data/joy/components/circular-progress/CircularProgressButton.tsx
@@ -8,7 +8,7 @@ import CircularProgress from '@mui/joy/CircularProgress';
 export default function CircularProgressSizes() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+      <Button startDecorator={<CircularProgress variant="solid" thickness={2} />}>
         Loading…
       </Button>
       <IconButton>

diff --git a/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview
@@ -1,4 +1,4 @@
-<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+<Button startDecorator={<CircularProgress variant="solid" thickness={2} />}>
   Loading…
 </Button>
 <IconButton>

diff --git a/docs/data/joy/components/menu/GroupMenu.js b/docs/data/joy/components/menu/GroupMenu.js
@@ -31,7 +31,7 @@ export default function BasicMenu() {
         variant="outlined"
         color="neutral"
         onClick={handleClick}
-        endIcon={<ArrowDropDown />}
+        endDecorator={<ArrowDropDown />}
       >
         Size
       </Button>

diff --git a/docs/data/joy/components/menu/SelectedMenu.js b/docs/data/joy/components/menu/SelectedMenu.js
@@ -28,7 +28,7 @@ export default function SelectedMenu() {
         variant="outlined"
         color="neutral"
         onClick={handleClick}
-        startIcon={<Apps />}
+        startDecorator={<Apps />}
       >
         Apps
       </Button>

diff --git a/docs/data/joy/components/modal/AlertDialogModal.js b/docs/data/joy/components/modal/AlertDialogModal.js
@@ -14,7 +14,7 @@ export default function AlertDialogModal() {
       <Button
         variant="outlined"
         color="danger"
-        endIcon={<DeleteForever />}
+        endDecorator={<DeleteForever />}
         onClick={() => setOpen(true)}
       >
         Discard

diff --git a/docs/data/joy/components/modal/BasicModalDialog.js b/docs/data/joy/components/modal/BasicModalDialog.js
@@ -14,7 +14,7 @@ export default function BasicModalDialog() {
       <Button
         variant="outlined"
         color="neutral"
-        startIcon={<Add />}
+        startDecorator={<Add />}
         onClick={() => setOpen(true)}
       >
         New project

diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -97,7 +97,7 @@ export default function TemplateCollection() {
                     data-ga-event-category="joy-template"
                     data-ga-event-label={name}
                     data-ga-event-action="preview"
-                    startIcon={<Visibility />}
+                    startDecorator={<Visibility />}
                     sx={{ ml: 'auto' }}
                   >
                     Live demo
@@ -137,7 +137,7 @@ export default function TemplateCollection() {
                     form.submit();
                     document.body.removeChild(form);
                   }}
-                  startIcon={
+                  startDecorator={
                     <SvgIcon viewBox="0 0 1080 1080">
                       <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
                     </SvgIcon>

diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx
@@ -679,7 +679,7 @@ export default function FilesExample() {
           </Box>
           <ListDivider component="hr" />
           <Box sx={{ py: 2, px: 1 }}>
-            <Button variant="plain" size="sm" endIcon={<EditOutlinedIcon />}>
+            <Button variant="plain" size="sm" endDecorator={<EditOutlinedIcon />}>
               Add a description
             </Button>
           </Box>

diff --git a/docs/data/joy/getting-started/templates/team/App.tsx b/docs/data/joy/getting-started/templates/team/App.tsx
@@ -486,7 +486,7 @@ export default function TeamExample() {
                 <Button
                   size="sm"
                   variant="plain"
-                  endIcon={<KeyboardArrowRightRoundedIcon fontSize="small" />}
+                  endDecorator={<KeyboardArrowRightRoundedIcon fontSize="small" />}
                   sx={{ px: 1, mt: 1 }}
                 >
                   Expand

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);
   });
 });