From ab187c27358a26673ac6c2eb793208db294ab597 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 22:07:11 -0800 Subject: [PATCH 01/16] [BottomNavigation] Migrate BottomNavigation[Action] to emotion --- .../api-docs/bottom-navigation-action.json | 3 +- .../bottom-navigation-action.json | 1 + .../BottomNavigation/BottomNavigation.d.ts | 6 + .../src/BottomNavigation/BottomNavigation.js | 65 +++++-- .../BottomNavigation/BottomNavigation.test.js | 25 +-- .../bottomNavigationClasses.d.ts | 9 + .../bottomNavigationClasses.js | 9 + .../src/BottomNavigation/index.d.ts | 3 + .../material-ui/src/BottomNavigation/index.js | 3 + .../BottomNavigationAction.d.ts | 6 + .../BottomNavigationAction.js | 167 ++++++++++++------ .../BottomNavigationAction.test.js | 16 +- .../bottomNavigationActionClasses.d.ts | 13 ++ .../bottomNavigationActionClasses.js | 15 ++ .../src/BottomNavigationAction/index.d.ts | 3 + .../src/BottomNavigationAction/index.js | 3 + 16 files changed, 251 insertions(+), 96 deletions(-) create mode 100644 packages/material-ui/src/BottomNavigation/bottomNavigationClasses.d.ts create mode 100644 packages/material-ui/src/BottomNavigation/bottomNavigationClasses.js create mode 100644 packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.d.ts create mode 100644 packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.js diff --git a/docs/pages/api-docs/bottom-navigation-action.json b/docs/pages/api-docs/bottom-navigation-action.json index 3a01bbc0014117..4849dad1ee8021 100644 --- a/docs/pages/api-docs/bottom-navigation-action.json +++ b/docs/pages/api-docs/bottom-navigation-action.json @@ -5,6 +5,7 @@ "icon": { "type": { "name": "node" } }, "label": { "type": { "name": "node" } }, "showLabel": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } } }, "name": "BottomNavigationAction", @@ -18,6 +19,6 @@ "filename": "/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json b/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json index 87949d8cd2f1e9..ff49744daed4c4 100644 --- a/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json +++ b/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json @@ -6,6 +6,7 @@ "icon": "The icon to display.", "label": "The label element.", "showLabel": "If true, the BottomNavigationAction will show its label. By default, only the selected BottomNavigationAction inside BottomNavigation will show its label.
The prop defaults to the value (false) inherited from the parent BottomNavigation component.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "You can provide your own value. Otherwise, we fallback to the child position index." }, "classDescriptions": { diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts index fc1bc07ab14a56..dc6fba1ed90dff 100644 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { SxProps } from '@material-ui/system'; +import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface BottomNavigationTypeMap

{ @@ -27,6 +29,10 @@ export interface BottomNavigationTypeMap

({ - /* Styles applied to the root element. */ - root: { - display: 'flex', - justifyContent: 'center', - height: 56, - backgroundColor: theme.palette.background.paper, +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getBottomNavigationUtilityClass, classes); +}; + +const BottomNavigationRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiBottomNavigation', + slot: 'Root', + overridesResolver, }, -}); +)(({ theme }) => ({ + /* Styles applied to the root element. */ + display: 'flex', + justifyContent: 'center', + height: 56, + backgroundColor: theme.palette.background.paper, +})); -const BottomNavigation = React.forwardRef(function BottomNavigation(props, ref) { +const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigation' }); const { children, - classes, className, - component: Component = 'div', + component = 'div', onChange, showLabels = false, value, ...other } = props; + const styleProps = props; + + const classes = useUtilityClasses(styleProps); + return ( - + {React.Children.map(children, (child, childIndex) => { if (!React.isValidElement(child)) { return null; @@ -53,7 +84,7 @@ const BottomNavigation = React.forwardRef(function BottomNavigation(props, ref) onChange, }); })} - + ); }); @@ -92,10 +123,14 @@ BottomNavigation.propTypes = { * @default false */ showLabels: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The value of the currently selected `BottomNavigationAction`. */ value: PropTypes.any, }; -export default withStyles(styles, { name: 'MuiBottomNavigation' })(BottomNavigation); +export default BottomNavigation; diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js index 3074f7d038e7ca..7548a1c16f34fc 100755 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js @@ -1,35 +1,20 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { - getClasses, - createMount, - describeConformance, - createClientRender, - fireEvent, -} from 'test/utils'; +import { createMount, describeConformanceV5, createClientRender, fireEvent } from 'test/utils'; import BottomNavigationAction from '../BottomNavigationAction'; import Icon from '../Icon'; import BottomNavigation from './BottomNavigation'; +import classes from './bottomNavigationClasses'; +import actionClasses from '../BottomNavigationAction/bottomNavigationActionClasses'; describe('', () => { const mount = createMount(); - let classes; - let actionClasses; const render = createClientRender(); const icon = restore; const getBottomNavigation = (container) => container.firstChild; - before(() => { - classes = getClasses( - - - , - ); - actionClasses = getClasses(); - }); - - describeConformance( + describeConformanceV5( , @@ -37,8 +22,10 @@ describe('', () => { classes, inheritComponent: 'div', mount, + muiName: 'BottomNavigation', refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', + skip: ['componentsProp'], }), ); diff --git a/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.d.ts b/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.d.ts new file mode 100644 index 00000000000000..c9b4fbb499cced --- /dev/null +++ b/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.d.ts @@ -0,0 +1,9 @@ +export interface BottomNavigationClasses { + root: string; +} + +declare const bottomNavigationClasses: BottomNavigationClasses; + +export function getBottomNavigationUtilityClass(slot: string): string; + +export default bottomNavigationClasses; diff --git a/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.js b/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.js new file mode 100644 index 00000000000000..bff7ab50dbc224 --- /dev/null +++ b/packages/material-ui/src/BottomNavigation/bottomNavigationClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getBottomNavigationUtilityClass(slot) { + return generateUtilityClass('MuiBottomNavigation', slot); +} + +const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']); + +export default bottomNavigationClasses; diff --git a/packages/material-ui/src/BottomNavigation/index.d.ts b/packages/material-ui/src/BottomNavigation/index.d.ts index 24a0304da2bfdd..cbf2cd3907412c 100644 --- a/packages/material-ui/src/BottomNavigation/index.d.ts +++ b/packages/material-ui/src/BottomNavigation/index.d.ts @@ -1,2 +1,5 @@ export { default } from './BottomNavigation'; export * from './BottomNavigation'; + +export { default as bottomNavigationClasses } from './bottomNavigationClasses'; +export * from './bottomNavigationClasses'; diff --git a/packages/material-ui/src/BottomNavigation/index.js b/packages/material-ui/src/BottomNavigation/index.js index 3aaa06ca91ed2e..e35a344d097b26 100644 --- a/packages/material-ui/src/BottomNavigation/index.js +++ b/packages/material-ui/src/BottomNavigation/index.js @@ -1 +1,4 @@ export { default } from './BottomNavigation'; + +export { default as bottomNavigationClasses } from './bottomNavigationClasses'; +export * from './bottomNavigationClasses'; diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.d.ts b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.d.ts index f58fd7b5c84ea5..49618b69f2536a 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.d.ts +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { SxProps } from '@material-ui/system'; +import { Theme } from '..'; import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; @@ -43,6 +45,10 @@ export type BottomNavigationActionTypeMap< * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component. */ showLabel?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; /** * You can provide your own value. Otherwise, we fallback to the child position index. */ diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 5e9171d0e34d8c..717a0e3084667d 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -1,13 +1,50 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; import ButtonBase from '../ButtonBase'; import unsupportedProp from '../utils/unsupportedProp'; +import bottomNavigationActionClasses, { + getBottomNavigationActionUtilityClass, +} from './bottomNavigationActionClasses'; -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly), + ...(styleProps.selected && styles.selected), + [`& .${bottomNavigationActionClasses.wrapper}`]: styles.wrapper, + [`& .${bottomNavigationActionClasses.label}`]: styles.label, + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, showLabel, selected } = styleProps; + + const slots = { + root: ['root', !showLabel && !selected && 'iconOnly', selected && 'selected'], + wrapper: ['wrapper'], + label: ['label', !showLabel && !selected && 'iconOnly', selected && 'selected'], + }; + + return composeClasses(slots, getBottomNavigationActionUtilityClass, classes); +}; + +const BottomNavigationActionRoot = experimentalStyled( + ButtonBase, + {}, + { + name: 'MuiBottomNavigationAction', + slot: 'Root', + overridesResolver, + }, +)( + ({ theme }) => ({ + /* Styles applied to the root element. */ transition: theme.transitions.create(['color', 'padding-top'], { duration: theme.transitions.duration.short, }), @@ -16,46 +53,71 @@ export const styles = (theme) => ({ maxWidth: 168, color: theme.palette.text.secondary, flex: '1', - '&$iconOnly': { - paddingTop: 16, - }, - '&$selected': { + }), + ({ styleProps }) => ({ + ...(!styleProps.showLabel && + !styleProps.selected && { + paddingTop: 16, + }), + }), + ({ theme, styleProps }) => ({ + ...(styleProps.selected && { paddingTop: 6, color: theme.palette.primary.main, - }, + }), + }), +); + +const BottomNavigationActionWrapper = experimentalStyled( + 'span', + {}, + { + name: 'MuiBottomNavigationAction', + slot: 'Wrapper', }, - /* Pseudo-class applied to the root element if selected. */ - selected: {}, - /* Pseudo-class applied to the root element if `showLabel={false}` and not selected. */ - iconOnly: {}, +)({ /* Styles applied to the span element that wraps the icon and label. */ - wrapper: { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - flexDirection: 'column', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + flexDirection: 'column', +}); + +const BottomNavigationActionLabel = experimentalStyled( + 'span', + {}, + { + name: 'MuiBottomNavigationAction', + slot: 'Label', }, - /* Styles applied to the label's span element. */ - label: { +)( + ({ theme }) => ({ + /* Styles applied to the label's span element. */ fontFamily: theme.typography.fontFamily, fontSize: theme.typography.pxToRem(12), opacity: 1, transition: 'font-size 0.2s, opacity 0.2s', transitionDelay: '0.1s', - '&$iconOnly': { - opacity: 0, - transitionDelay: '0s', - }, - '&$selected': { - fontSize: theme.typography.pxToRem(14), - }, - }, -}); + }), + ({ styleProps }) => ({ + ...(!styleProps.showLabel && + !styleProps.selected && { + opacity: 0, + transitionDelay: '0s', + }), + }), + ({ theme, styleProps }) => ({ + ...(styleProps.selected && { + paddingTop: 6, + color: theme.palette.primary.main, + }), + }), +); -const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(props, ref) { +const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigationAction' }); const { - classes, className, icon, label, @@ -70,6 +132,14 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction( ...other } = props; + const styleProps = { + ...props, + selected, + showLabel, + }; + + const classes = useUtilityClasses(styleProps); + const touchStartPos = React.useRef(); const touchTimer = React.useRef(); @@ -126,34 +196,23 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction( }; return ( - - + {icon} - + {label} - - - + + + ); }); @@ -207,10 +266,14 @@ BottomNavigationAction.propTypes = { * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component. */ showLabel: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * You can provide your own value. Otherwise, we fallback to the child position index. */ value: PropTypes.any, }; -export default withStyles(styles, { name: 'MuiBottomNavigationAction' })(BottomNavigationAction); +export default BottomNavigationAction; diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js index 21981d291330da..b5cc666783a75a 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js @@ -2,31 +2,29 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy, useFakeTimers } from 'sinon'; import { - getClasses, createMount, - describeConformance, + describeConformanceV5, createClientRender, within, fireEvent, } from 'test/utils'; import ButtonBase from '../ButtonBase'; import BottomNavigationAction from './BottomNavigationAction'; +import classes from './bottomNavigationActionClasses'; describe('', () => { const mount = createMount(); - let classes; const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: ButtonBase, mount, + muiName: 'MuiBottomNavigationAction', refInstanceof: window.HTMLButtonElement, - skip: ['componentProp'], + testVariantProps: { showLabel: true }, + testDeepOverrides: { slotName: 'label', slotClassName: classes.label }, + skip: ['componentProp', 'componentsProp'], })); it('adds a `selected` class when selected', () => { diff --git a/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.d.ts b/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.d.ts new file mode 100644 index 00000000000000..c378ddba4cddb3 --- /dev/null +++ b/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.d.ts @@ -0,0 +1,13 @@ +export interface BottomNavigationActionClasses { + root: string; + iconOnly: string; + selected: string; + wrapper: string; + label: string; +} + +declare const bottomNavigationActionClasses: BottomNavigationActionClasses; + +export function getBottomNavigationActionUtilityClass(slot: string): string; + +export default bottomNavigationActionClasses; diff --git a/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.js b/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.js new file mode 100644 index 00000000000000..4f4f019b05a583 --- /dev/null +++ b/packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.js @@ -0,0 +1,15 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getBottomNavigationActionUtilityClass(slot) { + return generateUtilityClass('MuiBottomNavigationAction', slot); +} + +const bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', [ + 'root', + 'iconOnly', + 'selected', + 'wrapper', + 'label', +]); + +export default bottomNavigationActionClasses; diff --git a/packages/material-ui/src/BottomNavigationAction/index.d.ts b/packages/material-ui/src/BottomNavigationAction/index.d.ts index 13c318914bebd7..634c4ea8cbf592 100644 --- a/packages/material-ui/src/BottomNavigationAction/index.d.ts +++ b/packages/material-ui/src/BottomNavigationAction/index.d.ts @@ -1,2 +1,5 @@ export { default } from './BottomNavigationAction'; export * from './BottomNavigationAction'; + +export { default as bottomNavigationActionClasses } from './bottomNavigationActionClasses'; +export * from './bottomNavigationActionClasses'; diff --git a/packages/material-ui/src/BottomNavigationAction/index.js b/packages/material-ui/src/BottomNavigationAction/index.js index 910a1d2eec4290..377af4979d46ac 100644 --- a/packages/material-ui/src/BottomNavigationAction/index.js +++ b/packages/material-ui/src/BottomNavigationAction/index.js @@ -1 +1,4 @@ export { default } from './BottomNavigationAction'; + +export { default as bottomNavigationActionClasses } from './bottomNavigationActionClasses'; +export * from './bottomNavigationActionClasses'; From 5acac841d1f8fd06f60ddd52885b5174fce454f7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 18:55:19 +0100 Subject: [PATCH 02/16] fix test --- .../material-ui/src/BottomNavigation/BottomNavigation.js | 6 +++++- .../src/BottomNavigation/BottomNavigation.test.js | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js index a0f3aba3bdd800..e2edd0b633b952 100755 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.js +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.js @@ -47,7 +47,11 @@ const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref ...other } = props; - const styleProps = props; + const styleProps = { + ...props, + component, + showLabels, + }; const classes = useUtilityClasses(styleProps); diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js index 7548a1c16f34fc..63dc3e5a1d7248 100755 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js @@ -22,10 +22,10 @@ describe('', () => { classes, inheritComponent: 'div', mount, - muiName: 'BottomNavigation', + muiName: 'MuiBottomNavigation', refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', - skip: ['componentsProp'], + skip: ['componentsProp', 'themeVariants'], }), ); From 5a863388c8862a368f7ea2f9d1dbdd86a2b78751 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 18:56:29 +0100 Subject: [PATCH 03/16] pseudo-classes aren't allowed for customizations --- .../src/BottomNavigationAction/BottomNavigationAction.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 717a0e3084667d..f4276aa60cefc5 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -16,7 +16,6 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly), - ...(styleProps.selected && styles.selected), [`& .${bottomNavigationActionClasses.wrapper}`]: styles.wrapper, [`& .${bottomNavigationActionClasses.label}`]: styles.label, }); From 2165332d0f58ff82c13830951763b7d45de3197d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 18:57:41 +0100 Subject: [PATCH 04/16] we can have a single class name --- .../BottomNavigationAction.js | 38 ++++++++----------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index f4276aa60cefc5..d21a9e3b9d49c0 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -41,31 +41,25 @@ const BottomNavigationActionRoot = experimentalStyled( slot: 'Root', overridesResolver, }, -)( - ({ theme }) => ({ - /* Styles applied to the root element. */ - transition: theme.transitions.create(['color', 'padding-top'], { - duration: theme.transitions.duration.short, - }), - padding: '6px 12px 8px', - minWidth: 80, - maxWidth: 168, - color: theme.palette.text.secondary, - flex: '1', +)(({ theme, styleProps }) => ({ + /* Styles applied to the root element. */ + transition: theme.transitions.create(['color', 'padding-top'], { + duration: theme.transitions.duration.short, }), - ({ styleProps }) => ({ - ...(!styleProps.showLabel && - !styleProps.selected && { - paddingTop: 16, - }), - }), - ({ theme, styleProps }) => ({ - ...(styleProps.selected && { - paddingTop: 6, - color: theme.palette.primary.main, + padding: '6px 12px 8px', + minWidth: 80, + maxWidth: 168, + color: theme.palette.text.secondary, + flex: '1', + ...(!styleProps.showLabel && + !styleProps.selected && { + paddingTop: 16, }), + ...(styleProps.selected && { + paddingTop: 6, + color: theme.palette.primary.main, }), -); +})); const BottomNavigationActionWrapper = experimentalStyled( 'span', From b24ea73eef7b8a0328e314e8b6736d916eb5b6b2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 19:01:51 +0100 Subject: [PATCH 05/16] increase specificity --- .../src/BottomNavigationAction/BottomNavigationAction.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index d21a9e3b9d49c0..803b7c91c51338 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -56,8 +56,10 @@ const BottomNavigationActionRoot = experimentalStyled( paddingTop: 16, }), ...(styleProps.selected && { - paddingTop: 6, - color: theme.palette.primary.main, + [`&.${bottomNavigationActionClasses.selected}`]: { + paddingTop: 6, + color: theme.palette.primary.main, + }, }), })); From 84b4660d3abe44b8199d6a360c13fafa93cfb8d7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 19:02:54 +0100 Subject: [PATCH 06/16] apply same pattern --- .../BottomNavigationAction.js | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 803b7c91c51338..c2efb4d822ca6c 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -86,29 +86,25 @@ const BottomNavigationActionLabel = experimentalStyled( name: 'MuiBottomNavigationAction', slot: 'Label', }, -)( - ({ theme }) => ({ - /* Styles applied to the label's span element. */ - fontFamily: theme.typography.fontFamily, - fontSize: theme.typography.pxToRem(12), - opacity: 1, - transition: 'font-size 0.2s, opacity 0.2s', - transitionDelay: '0.1s', - }), - ({ styleProps }) => ({ - ...(!styleProps.showLabel && - !styleProps.selected && { - opacity: 0, - transitionDelay: '0s', - }), - }), - ({ theme, styleProps }) => ({ - ...(styleProps.selected && { +)(({ theme, styleProps }) => ({ + /* Styles applied to the label's span element. */ + fontFamily: theme.typography.fontFamily, + fontSize: theme.typography.pxToRem(12), + opacity: 1, + transition: 'font-size 0.2s, opacity 0.2s', + transitionDelay: '0.1s', + ...(!styleProps.showLabel && + !styleProps.selected && { + opacity: 0, + transitionDelay: '0s', + }), + ...(styleProps.selected && { + [`&.${bottomNavigationActionClasses.selected}`]: { paddingTop: 6, color: theme.palette.primary.main, - }), + }, }), -); +})); const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigationAction' }); From 3e7adb119219bfe811222fdf2242f6ec2f8870d2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jan 2021 19:03:31 +0100 Subject: [PATCH 07/16] no need to clone --- .../src/BottomNavigationAction/BottomNavigationAction.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index c2efb4d822ca6c..3a0f32d7236d70 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -123,11 +123,7 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction( ...other } = props; - const styleProps = { - ...props, - selected, - showLabel, - }; + const styleProps = props; const classes = useUtilityClasses(styleProps); From c598ee4f09488dfb1a12907fc7e890cb175d5630 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Jan 2021 02:11:47 +0100 Subject: [PATCH 08/16] rerun ci From aee45cdff5a8b99af122055457c8c5e37f6ca31c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Jan 2021 15:24:49 +0100 Subject: [PATCH 09/16] fix api generation --- docs/pages/api-docs/bottom-navigation.json | 3 ++- .../api-docs/bottom-navigation/bottom-navigation.json | 1 + .../src/BottomNavigationAction/BottomNavigationAction.js | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/bottom-navigation.json b/docs/pages/api-docs/bottom-navigation.json index f3357132210b10..6abdadc661841a 100644 --- a/docs/pages/api-docs/bottom-navigation.json +++ b/docs/pages/api-docs/bottom-navigation.json @@ -5,6 +5,7 @@ "component": { "type": { "name": "elementType" } }, "onChange": { "type": { "name": "func" } }, "showLabels": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } } }, "name": "BottomNavigation", @@ -14,6 +15,6 @@ "filename": "/packages/material-ui/src/BottomNavigation/BottomNavigation.js", "inheritance": null, "demos": "

", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/bottom-navigation/bottom-navigation.json b/docs/translations/api-docs/bottom-navigation/bottom-navigation.json index f423fc51192947..68ae59ce8b56f8 100644 --- a/docs/translations/api-docs/bottom-navigation/bottom-navigation.json +++ b/docs/translations/api-docs/bottom-navigation/bottom-navigation.json @@ -6,6 +6,7 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.", "onChange": "Callback fired when the value changes.

Signature:
function(event: object, value: any) => void
event: The event source of the callback. Warning: This is a generic event not a change event.
value: We default to the index of the child.", "showLabels": "If true, all BottomNavigationActions will show their labels. By default, only the selected BottomNavigationAction will show its label.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The value of the currently selected BottomNavigationAction." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 3a0f32d7236d70..e5543d8802a0f4 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -123,7 +123,8 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction( ...other } = props; - const styleProps = props; + // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed + const styleProps = { ...props }; const classes = useUtilityClasses(styleProps); From e6711d4e29039598c5c7217ffe60e2d5ee473baa Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Jan 2021 22:27:26 +0100 Subject: [PATCH 10/16] yarn workspace framer build --- framer/scripts/framerConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 333d914aa40920..09a1de624d0a5b 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -70,7 +70,7 @@ export const componentSettings = { template: 'badge.txt', }, BottomNavigation: { - ignoredProps: ['children', 'onChange', 'ScrollButtonComponent', 'value'], + ignoredProps: ['children', 'onChange', 'ScrollButtonComponent', 'value', 'sx'], propValues: { icons: "['restore', 'favorite', 'location_on', 'folder']", labels: "['Recents', 'Favorites', 'Nearby', 'Saved']", From b56b9db8b81e3b657574042219d9380dc266aa94 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 25 Jan 2021 00:16:23 +0100 Subject: [PATCH 11/16] fix visual regression --- .../src/BottomNavigationAction/BottomNavigationAction.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index e5543d8802a0f4..066217d8faeaff 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -100,8 +100,7 @@ const BottomNavigationActionLabel = experimentalStyled( }), ...(styleProps.selected && { [`&.${bottomNavigationActionClasses.selected}`]: { - paddingTop: 6, - color: theme.palette.primary.main, + fontSize: theme.typography.pxToRem(14), }, }), })); From 9c1280bb2cb5d72eb7edc022866622c5a40f9dc7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Jan 2021 10:46:53 +0100 Subject: [PATCH 12/16] Update packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js --- .../BottomNavigationAction/BottomNavigationAction.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 066217d8faeaff..81f63018ff8b9a 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -55,12 +55,10 @@ const BottomNavigationActionRoot = experimentalStyled( !styleProps.selected && { paddingTop: 16, }), - ...(styleProps.selected && { - [`&.${bottomNavigationActionClasses.selected}`]: { - paddingTop: 6, - color: theme.palette.primary.main, - }, - }), + [`&.${bottomNavigationActionClasses.selected}`]: { + paddingTop: 6, + color: theme.palette.primary.main, + }, })); const BottomNavigationActionWrapper = experimentalStyled( From 037d3863e9504e205cc3f15d14f0067c29068d6e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Jan 2021 10:48:23 +0100 Subject: [PATCH 13/16] Update packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js --- .../src/BottomNavigationAction/BottomNavigationAction.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 81f63018ff8b9a..5d0c720449c425 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -96,8 +96,7 @@ const BottomNavigationActionLabel = experimentalStyled( opacity: 0, transitionDelay: '0s', }), - ...(styleProps.selected && { - [`&.${bottomNavigationActionClasses.selected}`]: { + [`&.${bottomNavigationActionClasses.selected}`]: { fontSize: theme.typography.pxToRem(14), }, }), From cb23bc0e42067270656b0c22b20a71b80ef854fd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Jan 2021 10:48:32 +0100 Subject: [PATCH 14/16] Update packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js --- .../src/BottomNavigationAction/BottomNavigationAction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 5d0c720449c425..cd4a251d6cc442 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -97,7 +97,7 @@ const BottomNavigationActionLabel = experimentalStyled( transitionDelay: '0s', }), [`&.${bottomNavigationActionClasses.selected}`]: { - fontSize: theme.typography.pxToRem(14), + fontSize: theme.typography.pxToRem(14), }, }), })); From 2e24cb085a98a3b42a9784ab878af3b9939fc2ba Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Jan 2021 10:48:41 +0100 Subject: [PATCH 15/16] Update packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js --- .../src/BottomNavigationAction/BottomNavigationAction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index cd4a251d6cc442..76a628ee6d6dc2 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -98,7 +98,7 @@ const BottomNavigationActionLabel = experimentalStyled( }), [`&.${bottomNavigationActionClasses.selected}`]: { fontSize: theme.typography.pxToRem(14), - }, + }, }), })); From c666b951e29dde969b6c7a4f509d8383c920e2db Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Jan 2021 10:48:49 +0100 Subject: [PATCH 16/16] Update packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js --- .../src/BottomNavigationAction/BottomNavigationAction.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 76a628ee6d6dc2..44cdd2e102372f 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -99,7 +99,6 @@ const BottomNavigationActionLabel = experimentalStyled( [`&.${bottomNavigationActionClasses.selected}`]: { fontSize: theme.typography.pxToRem(14), }, - }), })); const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) {