From 419f9ca3556dceeb7d647c6825374759ac62352b Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 12 Sep 2022 13:30:32 +0100 Subject: [PATCH 1/9] Rename start/endIcon to start/endDecorator --- packages/mui-joy/src/Button/Button.tsx | 62 ++++++++++++---------- packages/mui-joy/src/Button/ButtonProps.ts | 10 ++-- 2 files changed, 38 insertions(+), 34 deletions(-) diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 80c39b06593b54..41442034916e49 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 PropTypes from 'prop-types'; +import * as React from 'react'; 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,29 @@ 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 +249,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 +261,7 @@ Button.propTypes /* remove-proptypes */ = { /** * Element placed after the children. */ - endIcon: PropTypes.node, + endDecorator: PropTypes.node, /** * @ignore */ @@ -277,7 +281,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. */ From 87ca8c752fdd0ea0977a81b5c43f9387a29d9ffa Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 12 Sep 2022 13:30:37 +0100 Subject: [PATCH 2/9] Update demos --- docs/data/joy/components/button/ButtonIcons.js | 4 ++-- docs/data/joy/components/button/ButtonIcons.tsx | 4 ++-- docs/data/joy/components/button/ButtonIcons.tsx.preview | 4 ++-- docs/data/joy/components/button/ButtonLink.js | 2 +- docs/data/joy/components/button/ButtonLink.tsx | 2 +- docs/data/joy/components/button/ButtonLink.tsx.preview | 2 +- 6 files changed, 9 insertions(+), 9 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 @@ - From c1e59bc12d79501fd25e6bf7ac2c6ee38c15627a Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Sep 2022 14:13:49 +0100 Subject: [PATCH 3/9] Drop usage of the old prop in all docs --- docs/data/joy/components/button/ButtonVariables.js | 4 ++-- .../components/circular-progress/CircularProgressButton.js | 2 +- .../components/circular-progress/CircularProgressButton.tsx | 2 +- .../circular-progress/CircularProgressButton.tsx.preview | 2 +- docs/data/joy/components/menu/SelectedMenu.js | 2 +- docs/data/joy/components/modal/BasicModalDialog.js | 2 +- docs/data/joy/getting-started/templates/TemplateCollection.js | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) 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/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/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/BasicModalDialog.js b/docs/data/joy/components/modal/BasicModalDialog.js index ea6a3d7775b741..cf7d007063ecf7 100644 --- a/docs/data/joy/components/modal/BasicModalDialog.js +++ b/docs/data/joy/components/modal/BasicModalDialog.js @@ -14,7 +14,7 @@ export default function BasicModalDialog() { 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); }); }); From 5159f0ac07fdb153f7a564192cc4229a8d430181 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Sep 2022 16:57:30 +0100 Subject: [PATCH 7/9] Fix class names --- packages/mui-joy/src/Button/buttonClasses.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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; From 80f58004af7b2d0c6147791c97a71fdb629e4f5d Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 15 Sep 2022 10:11:44 +0100 Subject: [PATCH 8/9] Fix import order --- packages/mui-joy/src/Button/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 7986f5700ea078..8d72ae83844aff 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -1,9 +1,9 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; import { useButton } from '@mui/base/ButtonUnstyled'; 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 PropTypes from 'prop-types'; -import * as React from 'react'; import { styled, useThemeProps } from '../styles'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import { ButtonOwnerState, ButtonTypeMap, ExtendButton } from './ButtonProps'; From f9c50b5b34bf6629ce49c45479f83ab746962c92 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 15 Sep 2022 10:15:29 +0100 Subject: [PATCH 9/9] Add start/endDecorator slots to extendTheme.spec.ts --- packages/mui-joy/src/styles/extendTheme.spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) 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: {