From d68201c4df9758ab29b29c12f2c5ac043ea66d28 Mon Sep 17 00:00:00 2001 From: sydneyjodon-wk <51122966+sydneyjodon-wk@users.noreply.github.com> Date: Mon, 14 Feb 2022 01:43:28 -0700 Subject: [PATCH] [ToggleButton] Add prop types for `onClick` and `onChange` (#30883) Co-authored-by: siriwatknp --- docs/pages/api-docs/toggle-button.json | 2 ++ docs/pages/material/api/toggle-button.json | 2 ++ .../api-docs/toggle-button/toggle-button.json | 2 ++ .../src/ToggleButton/ToggleButton.d.ts | 15 +++++++++++++++ .../mui-material/src/ToggleButton/ToggleButton.js | 10 ++++++++-- .../src/ToggleButton/ToggleButton.spec.tsx | 4 ++++ 6 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx diff --git a/docs/pages/api-docs/toggle-button.json b/docs/pages/api-docs/toggle-button.json index aa53465ce92619..2ad2c182b9290a 100644 --- a/docs/pages/api-docs/toggle-button.json +++ b/docs/pages/api-docs/toggle-button.json @@ -14,6 +14,8 @@ "disableFocusRipple": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "fullWidth": { "type": { "name": "bool" } }, + "onChange": { "type": { "name": "func" } }, + "onClick": { "type": { "name": "func" } }, "selected": { "type": { "name": "bool" } }, "size": { "type": { diff --git a/docs/pages/material/api/toggle-button.json b/docs/pages/material/api/toggle-button.json index dc7c5123d92820..9ceabc34d96f91 100644 --- a/docs/pages/material/api/toggle-button.json +++ b/docs/pages/material/api/toggle-button.json @@ -14,6 +14,8 @@ "disableFocusRipple": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "fullWidth": { "type": { "name": "bool" } }, + "onChange": { "type": { "name": "func" } }, + "onClick": { "type": { "name": "func" } }, "selected": { "type": { "name": "bool" } }, "size": { "type": { diff --git a/docs/translations/api-docs/toggle-button/toggle-button.json b/docs/translations/api-docs/toggle-button/toggle-button.json index 175be96f779b6a..8029acc7559c48 100644 --- a/docs/translations/api-docs/toggle-button/toggle-button.json +++ b/docs/translations/api-docs/toggle-button/toggle-button.json @@ -8,6 +8,8 @@ "disableFocusRipple": "If true, the keyboard focus ripple is disabled.", "disableRipple": "If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.", "fullWidth": "If true, the button will take up the full width of its container.", + "onChange": "Callback fired when the state changes.

Signature:
function(event: React.MouseEvent<HTMLElement>, value: any) => void
event: The event source of the callback.
value: of the selected button.", + "onClick": "Callback fired when the button is clicked.

Signature:
function(event: React.MouseEvent<HTMLElement>, value: any) => void
event: The event source of the callback.
value: of the selected button.", "selected": "If true, the button is rendered in an active state.", "size": "The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts index 75ba328a49b3be..594d81b07fd2c1 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts +++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts @@ -1,5 +1,6 @@ import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; +import * as React from 'react'; import { Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; @@ -45,6 +46,20 @@ export type ToggleButtonTypeMap< * @default false */ fullWidth?: boolean; + /** + * Callback fired when the state changes. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onChange?: (event: React.MouseEvent, value: any) => void; + /** + * Callback fired when the button is clicked. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onClick?: (event: React.MouseEvent, value: any) => void; /** * If `true`, the button is rendered in an active state. */ diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index 647123d4c43804..eedbd71ef00a14 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -194,11 +194,17 @@ ToggleButton.propTypes /* remove-proptypes */ = { */ fullWidth: PropTypes.bool, /** - * @ignore + * Callback fired when the state changes. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. */ onChange: PropTypes.func, /** - * @ignore + * Callback fired when the button is clicked. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. */ onClick: PropTypes.func, /** diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx b/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx new file mode 100644 index 00000000000000..49b3774937397c --- /dev/null +++ b/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx @@ -0,0 +1,4 @@ +import * as React from 'react'; +import ToggleButton from '@mui/material/ToggleButton'; + + {}} onClick={(event, value) => {}} />;