From 9dc157ed50bd0b4b3e03acd9a3eba971733e5db0 Mon Sep 17 00:00:00 2001 From: Neto Chaves Date: Wed, 1 Apr 2020 19:31:43 -0300 Subject: [PATCH 1/3] feat: add prop ListItemClasses --- docs/pages/api-docs/menu-item.md | 1 + packages/material-ui/src/MenuItem/MenuItem.js | 8 +++++++- packages/material-ui/src/MenuItem/MenuItem.test.js | 7 +++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/menu-item.md b/docs/pages/api-docs/menu-item.md index 1fbf2421d3214c..1937a6551aa8f5 100644 --- a/docs/pages/api-docs/menu-item.md +++ b/docs/pages/api-docs/menu-item.md @@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | +| ListItemClasses | object | | `classes` prop applied to the [`ListItem`](/api/listItem/) element. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index fa0eee22a6ffe5..c7f6a9bad630da 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -34,6 +34,7 @@ export const styles = (theme) => ({ const MenuItem = React.forwardRef(function MenuItem(props, ref) { const { classes, + ListItemClasses, className, component = 'li', disableGutters = false, @@ -47,6 +48,7 @@ const MenuItem = React.forwardRef(function MenuItem(props, ref) { if (!props.disabled) { tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1; } + return ( ', () => { assert.strictEqual(wrapper2.find('li').length, 1); }); }); + + describe('prop: ListItemClasses', () => { + it('Should be able to change the style of ListItem', () => { + const wrapper = mount(); + assert.strictEqual(wrapper.find(ListItem).props().classes.disabled, 'bar'); + }); + }); }); From 939049f6d48fc532268ee3946ac1779a0b752d07 Mon Sep 17 00:00:00 2001 From: Neto Chaves Date: Wed, 1 Apr 2020 20:04:39 -0300 Subject: [PATCH 2/3] type: add prop types --- docs/pages/api-docs/menu-item.md | 2 +- packages/material-ui/src/MenuItem/MenuItem.d.ts | 6 +++++- packages/material-ui/src/MenuItem/MenuItem.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/menu-item.md b/docs/pages/api-docs/menu-item.md index 1937a6551aa8f5..e49f413e23e353 100644 --- a/docs/pages/api-docs/menu-item.md +++ b/docs/pages/api-docs/menu-item.md @@ -29,7 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | -| ListItemClasses | object | | `classes` prop applied to the [`ListItem`](/api/listItem/) element. | +| ListItemClasses | object | | `classes` prop applied to the [`ListItem`](/api/list-item/) element. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/MenuItem/MenuItem.d.ts b/packages/material-ui/src/MenuItem/MenuItem.d.ts index a412b4cbc052b8..c61582ec78a88f 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.d.ts +++ b/packages/material-ui/src/MenuItem/MenuItem.d.ts @@ -1,4 +1,4 @@ -import { ListItemTypeMap } from '../ListItem'; +import { ListItemTypeMap, ListItemProps } from '../ListItem'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ExtendButtonBase } from '../ButtonBase'; import { Omit } from '@material-ui/types'; @@ -9,6 +9,10 @@ export type MenuItemTypeMap

= Omit< ListItemTypeMap, 'classKey' > & { + /** + * `classes` prop applied to the [`ListItem`](/api/list-item/) element. + */ + ListItemClasses: ListItemProps['classes']; classKey: MenuItemClassKey; }; diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index c7f6a9bad630da..bb1fbf8622c9bb 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -104,7 +104,7 @@ MenuItem.propTypes = { */ disableGutters: PropTypes.bool, /** - * `classes` prop applied to the [`ListItem`](/api/listItem/) element. + * `classes` prop applied to the [`ListItem`](/api/list-item/) element. */ ListItemClasses: PropTypes.object, /** From 7bfc1f175cb7b99321548fa3e6990563e443d767 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 2 Apr 2020 01:09:05 +0200 Subject: [PATCH 3/3] polish --- docs/pages/api-docs/speed-dial-action.md | 2 +- .../material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts | 2 +- packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js | 2 +- packages/material-ui/src/MenuItem/MenuItem.d.ts | 2 +- packages/material-ui/src/MenuItem/MenuItem.js | 2 +- packages/material-ui/src/MenuItem/MenuItem.test.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/pages/api-docs/speed-dial-action.md b/docs/pages/api-docs/speed-dial-action.md index 31e1902a2b8e91..1058e991265950 100644 --- a/docs/pages/api-docs/speed-dial-action.md +++ b/docs/pages/api-docs/speed-dial-action.md @@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | delay | number | 0 | Adds a transition delay, to allow a series of SpeedDialActions to be animated. | | FabProps | object | {} | Props applied to the [`Fab`](/api/fab/) component. | | icon | node | | The Icon to display in the SpeedDial Fab. | -| TooltipClasses | object | | Classes applied to the [`Tooltip`](/api/tooltip/) element. | +| TooltipClasses | object | | `classes` prop applied to the [`Tooltip`](/api/tooltip/) element. | | tooltipOpen | bool | false | Make the tooltip always visible when the SpeedDial is open. | | tooltipPlacement | 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top' | 'left' | Placement of the tooltip. | | tooltipTitle | node | | Label to display in the tooltip. | diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts index 6fb1aae1f30148..74058bdc29cbc0 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts @@ -18,7 +18,7 @@ export interface SpeedDialActionProps */ icon?: React.ReactNode; /** - * Classes applied to the [`Tooltip`](/api/tooltip/) element. + * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element. */ TooltipClasses?: TooltipProps['classes']; /** diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js index 2d0bb71977ed7c..fd1f0ceb20eca7 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js @@ -192,7 +192,7 @@ SpeedDialAction.propTypes = { */ open: PropTypes.bool, /** - * Classes applied to the [`Tooltip`](/api/tooltip/) element. + * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element. */ TooltipClasses: PropTypes.object, /** diff --git a/packages/material-ui/src/MenuItem/MenuItem.d.ts b/packages/material-ui/src/MenuItem/MenuItem.d.ts index c61582ec78a88f..2d64da1ae7b526 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.d.ts +++ b/packages/material-ui/src/MenuItem/MenuItem.d.ts @@ -9,11 +9,11 @@ export type MenuItemTypeMap

= Omit< ListItemTypeMap, 'classKey' > & { + classKey: MenuItemClassKey; /** * `classes` prop applied to the [`ListItem`](/api/list-item/) element. */ ListItemClasses: ListItemProps['classes']; - classKey: MenuItemClassKey; }; /** diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index bb1fbf8622c9bb..8f7cdabdd8c564 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -34,10 +34,10 @@ export const styles = (theme) => ({ const MenuItem = React.forwardRef(function MenuItem(props, ref) { const { classes, - ListItemClasses, className, component = 'li', disableGutters = false, + ListItemClasses, role = 'menuitem', selected, tabIndex: tabIndexProp, diff --git a/packages/material-ui/src/MenuItem/MenuItem.test.js b/packages/material-ui/src/MenuItem/MenuItem.test.js index 522d5271e874a4..0909252b4e1ab4 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.test.js +++ b/packages/material-ui/src/MenuItem/MenuItem.test.js @@ -109,7 +109,7 @@ describe('', () => { }); describe('prop: ListItemClasses', () => { - it('Should be able to change the style of ListItem', () => { + it('should be able to change the style of ListItem', () => { const wrapper = mount(); assert.strictEqual(wrapper.find(ListItem).props().classes.disabled, 'bar'); });