From e85de31c61e41aef73258a036e3c422c8a5d98c4 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Fri, 9 Dec 2022 20:56:02 +0530 Subject: [PATCH 01/18] added onDelete prop to ChipDelete --- .../mui-joy/src/ChipDelete/ChipDelete.test.js | 21 +++++++++- .../mui-joy/src/ChipDelete/ChipDelete.tsx | 40 +++++++++++++++++++ .../mui-joy/src/ChipDelete/ChipDeleteProps.ts | 4 ++ 3 files changed, 64 insertions(+), 1 deletion(-) diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js index f4a99280886acb..2ae04b58cb812c 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, describeConformance } from 'test/utils'; +import { spy } from 'sinon'; +import { createRenderer, describeConformance, act, fireEvent } from 'test/utils'; import { ThemeProvider } from '@mui/joy/styles'; import Chip from '@mui/joy/Chip'; import ChipDelete, { chipDeleteClasses as classes } from '@mui/joy/ChipDelete'; @@ -67,4 +68,22 @@ describe('', () => { expect(getByRole('button')).to.have.class(classes.colorNeutral); }); }); + describe('Chip onDelete', () => { + it('should call onDelete function when backspace or enter is pressed', () => { + const handleDelete = spy(); + const { getByRole } = render( + + + , + ); + const chipDelete = getByRole('button'); + act(() => { + chipDelete.focus(); + }); + fireEvent.keyDown(chipDelete, { key: 'Backspace' }); + fireEvent.keyDown(chipDelete, { key: 'Enter' }); + + expect(handleDelete.callCount).to.equal(2); + }); + }); }); diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index ae77b64ae334c7..b5c11d63bc5f77 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -75,6 +75,9 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { variant: variantProp, color: colorProp, disabled: disabledProp, + onKeyDown, + onDelete, + onClick, ...other } = props; const chipContext = React.useContext(ChipContext); @@ -101,6 +104,29 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const classes = useUtilityClasses(ownerState); + const handleOnDelete = ( + event: React.KeyboardEvent | React.MouseEvent, + ) => { + if ('key' in event) { + event.preventDefault(); + if (event.key === 'Backspace' || event.key === 'Enter') { + if (!disabled && onDelete) { + onDelete(event); + } + } + if (onKeyDown) { + onKeyDown(event); + } + } else { + if (!disabled && onDelete) { + onDelete(event); + } + if (onClick) { + onClick(event); + } + } + }; + const rootProps = useSlotProps({ elementType: ChipDeleteRoot, getSlotProps: getRootProps, @@ -109,6 +135,8 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { ownerState, additionalProps: { as: component, + onKeyDown: handleOnDelete, + onClick: handleOnDelete, }, className: classes.root, }); @@ -143,6 +171,18 @@ ChipDelete.propTypes /* remove-proptypes */ = { * If `undefined`, the value inherits from the parent chip via a React context. */ disabled: PropTypes.bool, + /** + * @ignore + */ + onClick: PropTypes.func, + /** + * Callback fired when component is not disabled and backspace or enter is pressed or when chip is clicked. + */ + onDelete: PropTypes.func, + /** + * @ignore + */ + onKeyDown: PropTypes.func, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts index efdb0a9d84b34f..7a5636a70eb084 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts +++ b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts @@ -23,6 +23,10 @@ export interface ChipDeleteTypeMap

', () => { const handleDelete = spy(); const { getByRole } = render( - + {}} /> , ); const chipDelete = getByRole('button'); @@ -82,8 +82,8 @@ describe('', () => { }); fireEvent.keyDown(chipDelete, { key: 'Backspace' }); fireEvent.keyDown(chipDelete, { key: 'Enter' }); - - expect(handleDelete.callCount).to.equal(2); + fireEvent.click(chipDelete); + expect(handleDelete.callCount).to.equal(3); }); }); }); From 3ee556192d75c75bbf31a6f737416151371f4eb3 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Fri, 9 Dec 2022 22:13:59 +0530 Subject: [PATCH 03/18] added onDelete in exclude keys --- packages/mui-base/src/ButtonUnstyled/useButton.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.ts b/packages/mui-base/src/ButtonUnstyled/useButton.ts index ec5e1cfea2cfc3..4ca224f2515683 100644 --- a/packages/mui-base/src/ButtonUnstyled/useButton.ts +++ b/packages/mui-base/src/ButtonUnstyled/useButton.ts @@ -192,7 +192,9 @@ export default function useButton(parameters: UseButtonParameters) { const getRootProps = ( otherHandlers: TOther = {} as TOther, ): UseButtonRootSlotProps => { - const propsEventHandlers = extractEventHandlers(parameters) as Partial; + const propsEventHandlers = extractEventHandlers(parameters, [ + 'onDelete', + ]) as Partial; const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers, From 7bf32a04cd77cf4e9c843accb2b162fea7359643 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 10 Dec 2022 12:58:10 +0530 Subject: [PATCH 04/18] accept exclude keys in useButton --- packages/mui-base/src/ButtonUnstyled/useButton.ts | 12 ++++++++---- packages/mui-joy/src/ChipDelete/ChipDelete.tsx | 13 ++++++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.ts b/packages/mui-base/src/ButtonUnstyled/useButton.ts index 4ca224f2515683..5dd7faf6b09aa1 100644 --- a/packages/mui-base/src/ButtonUnstyled/useButton.ts +++ b/packages/mui-base/src/ButtonUnstyled/useButton.ts @@ -7,7 +7,10 @@ import { UseButtonParameters, UseButtonRootSlotProps } from './useButton.types'; import extractEventHandlers from '../utils/extractEventHandlers'; import { EventHandlers } from '../utils/types'; -export default function useButton(parameters: UseButtonParameters) { +export default function useButton( + parameters: UseButtonParameters, + excludeExtractEventHandlersKeys: string[] = [], +) { const { disabled = false, focusableWhenDisabled, @@ -192,9 +195,10 @@ export default function useButton(parameters: UseButtonParameters) { const getRootProps = ( otherHandlers: TOther = {} as TOther, ): UseButtonRootSlotProps => { - const propsEventHandlers = extractEventHandlers(parameters, [ - 'onDelete', - ]) as Partial; + const propsEventHandlers = extractEventHandlers( + parameters, + excludeExtractEventHandlersKeys, + ) as Partial; const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers, diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index b5c11d63bc5f77..15c1caacef51cd 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -88,11 +88,14 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const buttonRef = React.useRef(null); const handleRef = useForkRef(buttonRef, ref); - const { focusVisible, getRootProps } = useButton({ - ...props, - disabled, - ref: handleRef, - }); + const { focusVisible, getRootProps } = useButton( + { + ...props, + disabled, + ref: handleRef, + }, + ['onDelete'], + ); const ownerState = { ...props, From e477b6f0104b1dea38706fcda01d7adba0662e34 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 10 Dec 2022 15:12:54 +0530 Subject: [PATCH 05/18] removed from test as it's irrelavent --- packages/mui-joy/src/ChipDelete/ChipDelete.test.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js index f921df417479b2..99cbee72b7d35b 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js @@ -71,11 +71,7 @@ describe('', () => { describe('Chip onDelete', () => { it('should call onDelete function when backspace or enter is pressed', () => { const handleDelete = spy(); - const { getByRole } = render( - - {}} /> - , - ); + const { getByRole } = render( {}} />); const chipDelete = getByRole('button'); act(() => { chipDelete.focus(); From a26c4150f2fcd52ea3ac8a4aa2f48a0654ad1c01 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:35:15 +0530 Subject: [PATCH 06/18] review fixes --- .../mui-base/src/ButtonUnstyled/useButton.ts | 10 ++------ .../mui-joy/src/ChipDelete/ChipDelete.test.js | 18 +++++++++++-- .../mui-joy/src/ChipDelete/ChipDelete.tsx | 25 ++++++++----------- 3 files changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.ts b/packages/mui-base/src/ButtonUnstyled/useButton.ts index 5dd7faf6b09aa1..ec5e1cfea2cfc3 100644 --- a/packages/mui-base/src/ButtonUnstyled/useButton.ts +++ b/packages/mui-base/src/ButtonUnstyled/useButton.ts @@ -7,10 +7,7 @@ import { UseButtonParameters, UseButtonRootSlotProps } from './useButton.types'; import extractEventHandlers from '../utils/extractEventHandlers'; import { EventHandlers } from '../utils/types'; -export default function useButton( - parameters: UseButtonParameters, - excludeExtractEventHandlersKeys: string[] = [], -) { +export default function useButton(parameters: UseButtonParameters) { const { disabled = false, focusableWhenDisabled, @@ -195,10 +192,7 @@ export default function useButton( const getRootProps = ( otherHandlers: TOther = {} as TOther, ): UseButtonRootSlotProps => { - const propsEventHandlers = extractEventHandlers( - parameters, - excludeExtractEventHandlersKeys, - ) as Partial; + const propsEventHandlers = extractEventHandlers(parameters) as Partial; const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers, diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js index 99cbee72b7d35b..a937d54c06604b 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js @@ -69,7 +69,7 @@ describe('', () => { }); }); describe('Chip onDelete', () => { - it('should call onDelete function when backspace or enter is pressed', () => { + it('should call onDelete function when backspace or enter or delete is pressed', () => { const handleDelete = spy(); const { getByRole } = render( {}} />); const chipDelete = getByRole('button'); @@ -78,8 +78,22 @@ describe('', () => { }); fireEvent.keyDown(chipDelete, { key: 'Backspace' }); fireEvent.keyDown(chipDelete, { key: 'Enter' }); + fireEvent.keyDown(chipDelete, { key: 'Delete' }); fireEvent.click(chipDelete); - expect(handleDelete.callCount).to.equal(3); + expect(handleDelete.callCount).to.equal(4); + }); + + it('should call onDelete function when ChipDelete is disabled', () => { + const handleDelete = spy(); + const { getByRole } = render( + {}} />, + ); + const chipDelete = getByRole('button'); + act(() => { + chipDelete.focus(); + }); + fireEvent.click(chipDelete); + expect(handleDelete.callCount).to.equal(0); }); }); }); diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 15c1caacef51cd..daa91e6f1ab9c9 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -88,14 +88,11 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const buttonRef = React.useRef(null); const handleRef = useForkRef(buttonRef, ref); - const { focusVisible, getRootProps } = useButton( - { - ...props, - disabled, - ref: handleRef, - }, - ['onDelete'], - ); + const { focusVisible, getRootProps } = useButton({ + ...props, + disabled, + ref: handleRef, + }); const ownerState = { ...props, @@ -107,12 +104,12 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const classes = useUtilityClasses(ownerState); - const handleOnDelete = ( + const handleDelete = ( event: React.KeyboardEvent | React.MouseEvent, ) => { if ('key' in event) { event.preventDefault(); - if (event.key === 'Backspace' || event.key === 'Enter') { + if (event.key === 'Backspace' || event.key === 'Enter' || event.key === 'Delete') { if (!disabled && onDelete) { onDelete(event); } @@ -138,13 +135,13 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { ownerState, additionalProps: { as: component, - onKeyDown: handleOnDelete, - onClick: handleOnDelete, + onKeyDown: handleDelete, + onClick: handleDelete, }, className: classes.root, }); - - return {children ?? }; + const { onDelete: excludeOnDelete, ...restOfRootProps } = rootProps; + return {children ?? }; }) as OverridableComponent; ChipDelete.propTypes /* remove-proptypes */ = { From 6ee0a00564e3dc299b1291ecede0dba8944c4e58 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:43:16 +0530 Subject: [PATCH 07/18] prettier --- packages/mui-joy/src/ChipDelete/ChipDelete.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index daa91e6f1ab9c9..5cba822747ad26 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -140,6 +140,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { }, className: classes.root, }); + const { onDelete: excludeOnDelete, ...restOfRootProps } = rootProps; return {children ?? }; }) as OverridableComponent; From 36a56994160887d489171cf25ea1ea76e81b0b7a Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 14 Dec 2022 11:27:32 +0530 Subject: [PATCH 08/18] review fixes by zeeshan and siriwatknp --- .../mui-joy/src/ChipDelete/ChipDelete.test.js | 2 +- .../mui-joy/src/ChipDelete/ChipDelete.tsx | 38 +++++++++---------- .../mui-joy/src/ChipDelete/ChipDeleteProps.ts | 2 +- 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js index a937d54c06604b..399cf8575ff3ea 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js @@ -83,7 +83,7 @@ describe('', () => { expect(handleDelete.callCount).to.equal(4); }); - it('should call onDelete function when ChipDelete is disabled', () => { + it('should not call onDelete function when ChipDelete is disabled', () => { const handleDelete = spy(); const { getByRole } = render( {}} />, diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 5cba822747ad26..0771470dadf4bc 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -104,26 +104,24 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const classes = useUtilityClasses(ownerState); - const handleDelete = ( - event: React.KeyboardEvent | React.MouseEvent, - ) => { - if ('key' in event) { - event.preventDefault(); - if (event.key === 'Backspace' || event.key === 'Enter' || event.key === 'Delete') { - if (!disabled && onDelete) { - onDelete(event); - } - } - if (onKeyDown) { - onKeyDown(event); - } - } else { + const handleClickDelete = (event: React.MouseEvent) => { + if (!disabled && onDelete) { + onDelete(event); + } + if (onClick) { + onClick(event); + } + }; + + const handleKeyDelete = (event: React.KeyboardEvent) => { + event.preventDefault(); + if (['Backspace', 'Enter', 'Delete'].includes(event.key)) { if (!disabled && onDelete) { onDelete(event); } - if (onClick) { - onClick(event); - } + } + if (onKeyDown) { + onKeyDown(event); } }; @@ -135,8 +133,8 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { ownerState, additionalProps: { as: component, - onKeyDown: handleDelete, - onClick: handleDelete, + onKeyDown: handleKeyDelete, + onClick: handleClickDelete, }, className: classes.root, }); @@ -177,7 +175,7 @@ ChipDelete.propTypes /* remove-proptypes */ = { */ onClick: PropTypes.func, /** - * Callback fired when component is not disabled and backspace or enter is pressed or when chip is clicked. + * Callback fired when component is not disabled and `Backspace` or `Enter` or `Delete` is pressed or when chip is clicked. */ onDelete: PropTypes.func, /** diff --git a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts index 7a5636a70eb084..180037be3c8af6 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts +++ b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts @@ -24,7 +24,7 @@ export interface ChipDeleteTypeMap

{ + console.log('onDelete is called'); + }; + return ( } + endDecorator={} > Remove - }> + } + > Delete - }> + } + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx b/docs/data/joy/components/chip/DeleteButtonChip.tsx index 4d8230a43fd020..2bac49870d8c80 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx @@ -4,20 +4,33 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { + const handleDelete = () => { + console.log('onDelete is called'); + }; + return ( } + endDecorator={} > Remove - }> + } + > Delete - }> + } + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview index f422aedbec814a..5b69fc0bdbc441 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview @@ -2,13 +2,13 @@ size="sm" variant="outlined" color="danger" - endDecorator={} + endDecorator={} > Remove -}> +}> Delete -}> +}> Delete \ No newline at end of file diff --git a/docs/data/joy/components/chip/chip-pt.md b/docs/data/joy/components/chip/chip-pt.md index 8044182f3dc4d4..9d7a380194f0c0 100644 --- a/docs/data/joy/components/chip/chip-pt.md +++ b/docs/data/joy/components/chip/chip-pt.md @@ -44,7 +44,8 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button -To add a delete action inside a chip, use the complementary `ChipDelete` component. Note that its design will automatically adapt to the parent `Chip`. +To add a delete action inside a chip, use the complementary `ChipDelete` component. +The `onDelete` callback is fired on `ChipDelete` when `Backspace` or `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/docs/data/joy/components/chip/chip-zh.md b/docs/data/joy/components/chip/chip-zh.md index f79afe4e95dd93..eb410a87e1ddf2 100644 --- a/docs/data/joy/components/chip/chip-zh.md +++ b/docs/data/joy/components/chip/chip-zh.md @@ -44,7 +44,8 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button -To add a delete action inside a chip, use the complementary `ChipDelete` component. Note that its design will automatically adapt to the parent `Chip`. +To add a delete action inside a chip, use the complementary `ChipDelete` component. +The `onDelete` callback is fired on `ChipDelete` when `Backspace` or `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md index 9595edf652ea6d..0ac00dcf52c549 100644 --- a/docs/data/joy/components/chip/chip.md +++ b/docs/data/joy/components/chip/chip.md @@ -49,7 +49,7 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button To add a delete action inside a chip, use the complementary `ChipDelete` component. -Note that its design will automatically adapt to the parent `Chip`. +The `onDelete` callback is fired on `ChipDelete` when `Backspace` or `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; From 4bf1be1c56234b18192bdbf0cfde978601e51433 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 14 Dec 2022 14:04:30 +0530 Subject: [PATCH 10/18] reset docs --- .../joy/components/chip/DeleteButtonChip.js | 19 +++---------------- .../joy/components/chip/DeleteButtonChip.tsx | 19 +++---------------- .../chip/DeleteButtonChip.tsx.preview | 6 +++--- 3 files changed, 9 insertions(+), 35 deletions(-) diff --git a/docs/data/joy/components/chip/DeleteButtonChip.js b/docs/data/joy/components/chip/DeleteButtonChip.js index 2bac49870d8c80..4d8230a43fd020 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.js +++ b/docs/data/joy/components/chip/DeleteButtonChip.js @@ -4,33 +4,20 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { - const handleDelete = () => { - console.log('onDelete is called'); - }; - return ( } + endDecorator={} > Remove - } - > + }> Delete - } - > + }> Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx b/docs/data/joy/components/chip/DeleteButtonChip.tsx index 2bac49870d8c80..4d8230a43fd020 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx @@ -4,33 +4,20 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { - const handleDelete = () => { - console.log('onDelete is called'); - }; - return ( } + endDecorator={} > Remove - } - > + }> Delete - } - > + }> Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview index 5b69fc0bdbc441..f422aedbec814a 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview @@ -2,13 +2,13 @@ size="sm" variant="outlined" color="danger" - endDecorator={} + endDecorator={} > Remove -}> +}> Delete -}> +}> Delete \ No newline at end of file From e4af0ca4e95911a858a598335cafbd4c1ecd37bf Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 14 Dec 2022 14:08:17 +0530 Subject: [PATCH 11/18] ran yarn docs:typescript:formatted --- .../joy/components/chip/DeleteButtonChip.js | 18 +++++++++++++++--- .../joy/components/chip/DeleteButtonChip.tsx | 18 +++++++++++++++--- .../chip/DeleteButtonChip.tsx.preview | 14 -------------- 3 files changed, 30 insertions(+), 20 deletions(-) delete mode 100644 docs/data/joy/components/chip/DeleteButtonChip.tsx.preview diff --git a/docs/data/joy/components/chip/DeleteButtonChip.js b/docs/data/joy/components/chip/DeleteButtonChip.js index 4d8230a43fd020..7617e40dc6e54b 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.js +++ b/docs/data/joy/components/chip/DeleteButtonChip.js @@ -4,20 +4,32 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { + const handleDelete = () => { + console.log('onDelete is called'); + }; return ( } + endDecorator={} > Remove - }> + } + > Delete - }> + } + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx b/docs/data/joy/components/chip/DeleteButtonChip.tsx index 4d8230a43fd020..7617e40dc6e54b 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx @@ -4,20 +4,32 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { + const handleDelete = () => { + console.log('onDelete is called'); + }; return ( } + endDecorator={} > Remove - }> + } + > Delete - }> + } + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview deleted file mode 100644 index f422aedbec814a..00000000000000 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ -} -> - Remove - -}> - Delete - -}> - Delete - \ No newline at end of file From b47b9b94f72f1c1f4a3292d61f43487620cd26f1 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 14 Dec 2022 19:38:17 +0530 Subject: [PATCH 12/18] rempved func --- .../components/chip/DeletableChip.tsx.preview | 0 .../joy/components/chip/DeleteButtonChip.js | 18 +++--------------- .../joy/components/chip/DeleteButtonChip.tsx | 18 +++--------------- 3 files changed, 6 insertions(+), 30 deletions(-) create mode 100644 docs/data/joy/components/chip/DeletableChip.tsx.preview diff --git a/docs/data/joy/components/chip/DeletableChip.tsx.preview b/docs/data/joy/components/chip/DeletableChip.tsx.preview new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/docs/data/joy/components/chip/DeleteButtonChip.js b/docs/data/joy/components/chip/DeleteButtonChip.js index 7617e40dc6e54b..4d8230a43fd020 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.js +++ b/docs/data/joy/components/chip/DeleteButtonChip.js @@ -4,32 +4,20 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { - const handleDelete = () => { - console.log('onDelete is called'); - }; return ( } + endDecorator={} > Remove - } - > + }> Delete - } - > + }> Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx b/docs/data/joy/components/chip/DeleteButtonChip.tsx index 7617e40dc6e54b..4d8230a43fd020 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx @@ -4,32 +4,20 @@ import ChipDelete from '@mui/joy/ChipDelete'; import * as React from 'react'; export default function DeleteButtonChip() { - const handleDelete = () => { - console.log('onDelete is called'); - }; return ( } + endDecorator={} > Remove - } - > + }> Delete - } - > + }> Delete From ff2a18e1666079636549499d184c6a333a966624 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 14 Dec 2022 19:42:47 +0530 Subject: [PATCH 13/18] added chip code. --- .../chip/DeletableButtonChip.tsx.preview | 14 ++++++++++++++ .../joy/components/chip/DeletableChip.tsx.preview | 0 docs/data/joy/components/chip/chip.md | 2 +- packages/mui-joy/src/ChipDelete/ChipDelete.test.js | 2 +- packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts | 2 +- 5 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 docs/data/joy/components/chip/DeletableButtonChip.tsx.preview delete mode 100644 docs/data/joy/components/chip/DeletableChip.tsx.preview diff --git a/docs/data/joy/components/chip/DeletableButtonChip.tsx.preview b/docs/data/joy/components/chip/DeletableButtonChip.tsx.preview new file mode 100644 index 00000000000000..f422aedbec814a --- /dev/null +++ b/docs/data/joy/components/chip/DeletableButtonChip.tsx.preview @@ -0,0 +1,14 @@ +} +> + Remove + +}> + Delete + +}> + Delete + \ No newline at end of file diff --git a/docs/data/joy/components/chip/DeletableChip.tsx.preview b/docs/data/joy/components/chip/DeletableChip.tsx.preview deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md index 0ac00dcf52c549..93f7c44d1b0e72 100644 --- a/docs/data/joy/components/chip/chip.md +++ b/docs/data/joy/components/chip/chip.md @@ -49,7 +49,7 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button To add a delete action inside a chip, use the complementary `ChipDelete` component. -The `onDelete` callback is fired on `ChipDelete` when `Backspace` or `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. +The `onDelete` callback is fired on `ChipDelete` when `Backspace`, `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js index 399cf8575ff3ea..55fd5647ce561c 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.js @@ -69,7 +69,7 @@ describe('', () => { }); }); describe('Chip onDelete', () => { - it('should call onDelete function when backspace or enter or delete is pressed', () => { + it('should call onDelete function when backspace, enter or delete is pressed', () => { const handleDelete = spy(); const { getByRole } = render( {}} />); const chipDelete = getByRole('button'); diff --git a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts index 180037be3c8af6..d767202cd2e7e9 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts +++ b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts @@ -24,7 +24,7 @@ export interface ChipDeleteTypeMap

Date: Wed, 14 Dec 2022 19:54:34 +0530 Subject: [PATCH 16/18] proptypes --- packages/mui-joy/src/ChipDelete/ChipDelete.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 0771470dadf4bc..d59c1148e1e360 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -175,7 +175,7 @@ ChipDelete.propTypes /* remove-proptypes */ = { */ onClick: PropTypes.func, /** - * Callback fired when component is not disabled and `Backspace` or `Enter` or `Delete` is pressed or when chip is clicked. + * Callback fired when component is not disabled and `Backspace`, `Enter` or `Delete` is pressed or when chip is clicked. */ onDelete: PropTypes.func, /** From 923f23186e64696d75b97445839eaf75b23f5469 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Dec 2022 11:00:31 +0700 Subject: [PATCH 17/18] refine --- .../joy/components/chip/DeleteButtonChip.js | 17 +++++++++++++---- .../joy/components/chip/DeleteButtonChip.tsx | 17 +++++++++++++---- .../chip/DeleteButtonChip.tsx.preview | 14 -------------- docs/data/joy/components/chip/chip-pt.md | 3 +-- docs/data/joy/components/chip/chip-zh.md | 3 +-- docs/data/joy/components/chip/chip.md | 6 +++++- packages/mui-joy/src/ChipDelete/ChipDelete.tsx | 4 +++- .../mui-joy/src/ChipDelete/ChipDeleteProps.ts | 8 ++++++-- 8 files changed, 42 insertions(+), 30 deletions(-) delete mode 100644 docs/data/joy/components/chip/DeleteButtonChip.tsx.preview diff --git a/docs/data/joy/components/chip/DeleteButtonChip.js b/docs/data/joy/components/chip/DeleteButtonChip.js index 4d8230a43fd020..c3b093bf6d6bb9 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.js +++ b/docs/data/joy/components/chip/DeleteButtonChip.js @@ -1,7 +1,7 @@ +import * as React from 'react'; import Box from '@mui/joy/Box'; import Chip from '@mui/joy/Chip'; import ChipDelete from '@mui/joy/ChipDelete'; -import * as React from 'react'; export default function DeleteButtonChip() { return ( @@ -10,14 +10,23 @@ export default function DeleteButtonChip() { size="sm" variant="outlined" color="danger" - endDecorator={} + endDecorator={ alert('Delete')} />} > Remove - }> + alert('Delete')} />} + > Delete - }> + alert('Delete')} />} + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx b/docs/data/joy/components/chip/DeleteButtonChip.tsx index 4d8230a43fd020..c3b093bf6d6bb9 100644 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx +++ b/docs/data/joy/components/chip/DeleteButtonChip.tsx @@ -1,7 +1,7 @@ +import * as React from 'react'; import Box from '@mui/joy/Box'; import Chip from '@mui/joy/Chip'; import ChipDelete from '@mui/joy/ChipDelete'; -import * as React from 'react'; export default function DeleteButtonChip() { return ( @@ -10,14 +10,23 @@ export default function DeleteButtonChip() { size="sm" variant="outlined" color="danger" - endDecorator={} + endDecorator={ alert('Delete')} />} > Remove - }> + alert('Delete')} />} + > Delete - }> + alert('Delete')} />} + > Delete diff --git a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview b/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview deleted file mode 100644 index f422aedbec814a..00000000000000 --- a/docs/data/joy/components/chip/DeleteButtonChip.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ -} -> - Remove - -}> - Delete - -}> - Delete - \ No newline at end of file diff --git a/docs/data/joy/components/chip/chip-pt.md b/docs/data/joy/components/chip/chip-pt.md index e8898f11003dec..8044182f3dc4d4 100644 --- a/docs/data/joy/components/chip/chip-pt.md +++ b/docs/data/joy/components/chip/chip-pt.md @@ -44,8 +44,7 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button -To add a delete action inside a chip, use the complementary `ChipDelete` component. -The `onDelete` callback is fired on `ChipDelete` when `Backspace`, `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. +To add a delete action inside a chip, use the complementary `ChipDelete` component. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/docs/data/joy/components/chip/chip-zh.md b/docs/data/joy/components/chip/chip-zh.md index 556e31e8356919..f79afe4e95dd93 100644 --- a/docs/data/joy/components/chip/chip-zh.md +++ b/docs/data/joy/components/chip/chip-zh.md @@ -44,8 +44,7 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button -To add a delete action inside a chip, use the complementary `ChipDelete` component. -The `onDelete` callback is fired on `ChipDelete` when `Backspace`, `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. +To add a delete action inside a chip, use the complementary `ChipDelete` component. Note that its design will automatically adapt to the parent `Chip`. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md index 93f7c44d1b0e72..3088d6f17d69ed 100644 --- a/docs/data/joy/components/chip/chip.md +++ b/docs/data/joy/components/chip/chip.md @@ -49,7 +49,11 @@ Use the `startDecorator` and/or `endDecorator` props to add supporting icons to ### Delete button To add a delete action inside a chip, use the complementary `ChipDelete` component. -The `onDelete` callback is fired on `ChipDelete` when `Backspace`, `Enter` or `Delete` is pressed or when `ChipDelete` is clicked. Note that its design will automatically adapt to the parent `Chip`. + +The `onDelete` callback is fired on `ChipDelete` either when: + +- `Backspace`, `Enter` or `Delete` is pressed. +- The `ChipDelete` is clicked. ```jsx import ChipDelete from '@mui/joy/ChipDelete'; diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index d59c1148e1e360..106596ed8ee19f 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -175,7 +175,9 @@ ChipDelete.propTypes /* remove-proptypes */ = { */ onClick: PropTypes.func, /** - * Callback fired when component is not disabled and `Backspace`, `Enter` or `Delete` is pressed or when chip is clicked. + * Callback fired when the component is not disabled and either: + * - `Backspace`, `Enter` or `Delete` is pressed. + * - The component is clicked. */ onDelete: PropTypes.func, /** diff --git a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts index d767202cd2e7e9..f94220f58e1001 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts +++ b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts @@ -24,9 +24,13 @@ export interface ChipDeleteTypeMap