From c39faa6f2a3ff2213d179b0b9f37a4bce140ead1 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 15 Sep 2022 12:04:41 +0100 Subject: [PATCH] [Joy][button] Replace `start/endIcon` prop with `start/endDecorator` (#34288) --- .../data/joy/components/button/ButtonIcons.js | 4 +- .../joy/components/button/ButtonIcons.tsx | 4 +- .../components/button/ButtonIcons.tsx.preview | 4 +- docs/data/joy/components/button/ButtonLink.js | 2 +- .../data/joy/components/button/ButtonLink.tsx | 2 +- .../components/button/ButtonLink.tsx.preview | 2 +- .../joy/components/button/ButtonVariables.js | 4 +- 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 +- .../CircularProgressButton.js | 2 +- .../CircularProgressButton.tsx | 2 +- .../CircularProgressButton.tsx.preview | 2 +- docs/data/joy/components/menu/GroupMenu.js | 2 +- docs/data/joy/components/menu/SelectedMenu.js | 2 +- .../joy/components/modal/AlertDialogModal.js | 2 +- .../joy/components/modal/BasicModalDialog.js | 2 +- .../templates/TemplateCollection.js | 4 +- .../getting-started/templates/files/App.tsx | 2 +- .../getting-started/templates/team/App.tsx | 2 +- packages/mui-joy/src/Button/Button.spec.tsx | 6 +- packages/mui-joy/src/Button/Button.test.js | 20 +++---- packages/mui-joy/src/Button/Button.tsx | 59 ++++++++++--------- packages/mui-joy/src/Button/ButtonProps.ts | 10 ++-- packages/mui-joy/src/Button/buttonClasses.ts | 12 ++-- .../mui-joy/src/styles/extendTheme.spec.ts | 8 +++ 26 files changed, 92 insertions(+), 79 deletions(-) diff --git a/docs/data/joy/components/button/ButtonIcons.js b/docs/data/joy/components/button/ButtonIcons.js index 76833c014ed538..92f1fad0a6e88b 100644 --- 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 ( - + - diff --git a/docs/data/joy/components/button/ButtonIcons.tsx b/docs/data/joy/components/button/ButtonIcons.tsx index 76833c014ed538..92f1fad0a6e88b 100644 --- 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 ( - + - diff --git a/docs/data/joy/components/button/ButtonIcons.tsx.preview b/docs/data/joy/components/button/ButtonIcons.tsx.preview index 4b797bdabe940d..afff65cdf0dd2f 100644 --- a/docs/data/joy/components/button/ButtonIcons.tsx.preview +++ b/docs/data/joy/components/button/ButtonIcons.tsx.preview @@ -1,7 +1,7 @@ - + - \ No newline at end of file diff --git a/docs/data/joy/components/button/ButtonLink.js b/docs/data/joy/components/button/ButtonLink.js index 9728275de7755f..c80bc74e2a3bee 100644 --- 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 ( - diff --git a/docs/data/joy/components/button/ButtonLink.tsx b/docs/data/joy/components/button/ButtonLink.tsx index 9728275de7755f..c80bc74e2a3bee 100644 --- 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 ( - diff --git a/docs/data/joy/components/button/ButtonLink.tsx.preview b/docs/data/joy/components/button/ButtonLink.tsx.preview index 3457cff59b12b1..1a1a9a4886b7cf 100644 --- a/docs/data/joy/components/button/ButtonLink.tsx.preview +++ b/docs/data/joy/components/button/ButtonLink.tsx.preview @@ -1,4 +1,4 @@ - diff --git a/docs/data/joy/components/button/ButtonVariables.js b/docs/data/joy/components/button/ButtonVariables.js index b26e75a2a32a9a..09c685a0fa87e2 100644 --- a/docs/data/joy/components/button/ButtonVariables.js +++ b/docs/data/joy/components/button/ButtonVariables.js @@ -8,7 +8,7 @@ export default function ButtonVariables() { ` )} 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/docs/data/joy/components/circular-progress/CircularProgressButton.js b/docs/data/joy/components/circular-progress/CircularProgressButton.js index e8f7e196e6ce19..1f999e9ce97bea 100644 --- 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 ( - diff --git a/docs/data/joy/components/circular-progress/CircularProgressButton.tsx b/docs/data/joy/components/circular-progress/CircularProgressButton.tsx index e8f7e196e6ce19..1f999e9ce97bea 100644 --- 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 ( - diff --git a/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview index 6f3dcd5ff8f424..7bbe9cb5a779fb 100644 --- a/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview +++ b/docs/data/joy/components/circular-progress/CircularProgressButton.tsx.preview @@ -1,4 +1,4 @@ - diff --git a/docs/data/joy/components/menu/GroupMenu.js b/docs/data/joy/components/menu/GroupMenu.js index 5f07e08038a32d..aead4dc93e5cb8 100644 --- 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={} + endDecorator={} > Size diff --git a/docs/data/joy/components/menu/SelectedMenu.js b/docs/data/joy/components/menu/SelectedMenu.js index 40a440160372ba..432a2ef9770a9a 100644 --- 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={} + startDecorator={} > Apps diff --git a/docs/data/joy/components/modal/AlertDialogModal.js b/docs/data/joy/components/modal/AlertDialogModal.js index 79955a4b292875..ef1d128aafb82f 100644 --- a/docs/data/joy/components/modal/AlertDialogModal.js +++ b/docs/data/joy/components/modal/AlertDialogModal.js @@ -14,7 +14,7 @@ export default function AlertDialogModal() { diff --git a/docs/data/joy/getting-started/templates/team/App.tsx b/docs/data/joy/getting-started/templates/team/App.tsx index 2aaf832ec1935e..e633aa52d58874 100644 --- 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() { ; -; -; 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 , () => ({ + describeConformance(, () => ({ 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 ); + it('should render a button with startDecorator', () => { + const { getByRole } = render(); 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(); + it('should render a button with endDecorator', () => { + const { getByRole } = render(); 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); }); }); diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 80c39b06593b54..8d72ae83844aff 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils'; import { useButton } from '@mui/base/ButtonUnstyled'; -import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/base/composeClasses'; +import { useSlotProps } from '@mui/base/utils'; +import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils'; import { styled, useThemeProps } from '../styles'; -import { ExtendButton, ButtonTypeMap, ButtonOwnerState } from './ButtonProps'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; +import { ButtonOwnerState, ButtonTypeMap, ExtendButton } from './ButtonProps'; const useUtilityClasses = (ownerState: ButtonOwnerState) => { const { color, disabled, focusVisible, focusVisibleClassName, fullWidth, size, variant } = @@ -22,8 +22,8 @@ const useUtilityClasses = (ownerState: ButtonOwnerState) => { color && `color${capitalize(color)}`, size && `size${capitalize(size)}`, ], - startIcon: ['startIcon'], - endIcon: ['endIcon'], + startDecorator: ['startDecorator'], + endDecorator: ['endDecorator'], }; const composedClasses = composeClasses(slots, getButtonUtilityClass, {}); @@ -35,10 +35,10 @@ const useUtilityClasses = (ownerState: ButtonOwnerState) => { return composedClasses; }; -const ButtonStartIcon = styled('span', { +const ButtonStartDecorator = styled('span', { name: 'JoyButton', - slot: 'StartIcon', - overridesResolver: (props, styles) => styles.startIcon, + slot: 'StartDecorator', + overridesResolver: (props, styles) => styles.startDecorator, })<{ ownerState: ButtonOwnerState }>({ '--Icon-margin': '0 0 0 calc(var(--Button-gap) / -2)', '--CircularProgress-margin': '0 0 0 calc(var(--Button-gap) / -2)', @@ -46,10 +46,10 @@ const ButtonStartIcon = styled('span', { marginRight: 'var(--Button-gap)', }); -const ButtonEndIcon = styled('span', { +const ButtonEndDecorator = styled('span', { name: 'JoyButton', - slot: 'EndIcon', - overridesResolver: (props, styles) => styles.endIcon, + slot: 'EndDecorator', + overridesResolver: (props, styles) => styles.endDecorator, })<{ ownerState: ButtonOwnerState }>({ '--Icon-margin': '0 calc(var(--Button-gap) / -2) 0 0', '--CircularProgress-margin': '0 calc(var(--Button-gap) / -2) 0 0', @@ -136,8 +136,8 @@ const Button = React.forwardRef(function Button(inProps, ref) { variant = 'solid', size = 'md', fullWidth = false, - startIcon, - endIcon, + startDecorator, + endDecorator, ...other } = props; @@ -184,25 +184,30 @@ const Button = React.forwardRef(function Button(inProps, ref) { className: classes.root, }); - const startIconProps = useSlotProps({ - elementType: ButtonStartIcon, - externalSlotProps: componentsProps.startIcon, + const startDecoratorProps = useSlotProps({ + elementType: ButtonStartDecorator, + externalSlotProps: componentsProps.startDecorator, ownerState, - className: classes.startIcon, + className: classes.startDecorator, }); - const endIconProps = useSlotProps({ - elementType: ButtonEndIcon, - externalSlotProps: componentsProps.endIcon, + const endDecoratorProps = useSlotProps({ + elementType: ButtonEndDecorator, + externalSlotProps: componentsProps.endDecorator, ownerState, - className: classes.endIcon, + className: classes.endDecorator, }); return ( - {startIcon && {startIcon}} + {startDecorator && ( + {startDecorator} + )} + {children} - {endIcon && {endIcon}} + {endDecorator && ( + {endDecorator} + )} ); }) as ExtendButton; @@ -245,9 +250,9 @@ Button.propTypes /* remove-proptypes */ = { * @default {} */ componentsProps: PropTypes.shape({ - endIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - startIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * If `true`, the component is disabled. @@ -257,7 +262,7 @@ Button.propTypes /* remove-proptypes */ = { /** * Element placed after the children. */ - endIcon: PropTypes.node, + endDecorator: PropTypes.node, /** * @ignore */ @@ -277,7 +282,7 @@ Button.propTypes /* remove-proptypes */ = { /** * Element placed before the children. */ - startIcon: PropTypes.node, + startDecorator: PropTypes.node, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts index 13e58ff4e2dfca..b1a5a2c25765be 100644 --- a/packages/mui-joy/src/Button/ButtonProps.ts +++ b/packages/mui-joy/src/Button/ButtonProps.ts @@ -8,7 +8,7 @@ import { import { SlotComponentProps } from '@mui/base/utils'; import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types'; -export type ButtonSlot = 'root' | 'startIcon' | 'endIcon'; +export type ButtonSlot = 'root' | 'startDecorator' | 'endDecorator'; export interface ButtonPropsVariantOverrides {} @@ -18,8 +18,8 @@ export interface ButtonPropsSizeOverrides {} interface ComponentsProps { root?: SlotComponentProps<'button', { sx?: SxProps }, ButtonOwnerState>; - startIcon?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>; - endIcon?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>; + startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>; + endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>; } export interface ButtonTypeMap

{ @@ -48,7 +48,7 @@ export interface ButtonTypeMap

{ /** * Element placed after the children. */ - endIcon?: React.ReactNode; + endDecorator?: React.ReactNode; /** * This prop can help identify which element has keyboard focus. * The class name will be applied when the element gains the focus through keyboard interaction. @@ -70,7 +70,7 @@ export interface ButtonTypeMap

{ /** * Element placed before the children. */ - startIcon?: React.ReactNode; + startDecorator?: React.ReactNode; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-joy/src/Button/buttonClasses.ts b/packages/mui-joy/src/Button/buttonClasses.ts index 6f72ab08ef4961..fe84b0fce52a72 100644 --- a/packages/mui-joy/src/Button/buttonClasses.ts +++ b/packages/mui-joy/src/Button/buttonClasses.ts @@ -35,10 +35,10 @@ export interface ButtonClasses { sizeLg: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; - /** Styles applied to the startIcon element if supplied. */ - startIcon: string; - /** Styles applied to the endIcon element if supplied. */ - endIcon: string; + /** Styles applied to the startDecorator element if supplied. */ + startDecorator: string; + /** Styles applied to the endDecorator element if supplied. */ + endDecorator: string; } export type ButtonClassKey = keyof ButtonClasses; @@ -65,8 +65,8 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('JoyButton', [ 'sizeMd', 'sizeLg', 'fullWidth', - 'startIcon', - 'endIcon', + 'startDecorator', + 'endDecorator', ]); export default buttonClasses; diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts index 6f02ed975b2c3a..8f54d5be2dd0fb 100644 --- a/packages/mui-joy/src/styles/extendTheme.spec.ts +++ b/packages/mui-joy/src/styles/extendTheme.spec.ts @@ -187,6 +187,14 @@ extendTheme({ expectType, typeof ownerState>(ownerState); return {}; }, + startDecorator: ({ ownerState }) => { + expectType, typeof ownerState>(ownerState); + return {}; + }, + endDecorator: ({ ownerState }) => { + expectType, typeof ownerState>(ownerState); + return {}; + }, }, }, JoyCard: {