From d0762854587fa5618491952958eacbd8772efe6e Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Tue, 19 Jan 2021 20:34:17 -0800 Subject: [PATCH 01/13] [Collapse] Migrate to emotion --- docs/pages/api-docs/collapse.json | 1 + .../api-docs/collapse/collapse.json | 3 +- .../material-ui/src/Collapse/Collapse.d.ts | 7 +- packages/material-ui/src/Collapse/Collapse.js | 142 ++++++++++++------ .../material-ui/src/Collapse/Collapse.test.js | 12 +- .../src/Collapse/collapseClasses.d.ts | 12 ++ .../src/Collapse/collapseClasses.js | 14 ++ packages/material-ui/src/Collapse/index.d.ts | 3 + packages/material-ui/src/Collapse/index.js | 3 + 9 files changed, 145 insertions(+), 52 deletions(-) create mode 100644 packages/material-ui/src/Collapse/collapseClasses.d.ts create mode 100644 packages/material-ui/src/Collapse/collapseClasses.js diff --git a/docs/pages/api-docs/collapse.json b/docs/pages/api-docs/collapse.json index c1591f2d4e8b9f..f800a843b61def 100644 --- a/docs/pages/api-docs/collapse.json +++ b/docs/pages/api-docs/collapse.json @@ -20,6 +20,7 @@ "default": "duration.standard" } }, + "sx": { "type": { "name": "object" } }, "name": "Collapse", "styles": { "classes": ["root", "horizontal", "entered", "hidden", "wrapper", "wrapperInner"], diff --git a/docs/translations/api-docs/collapse/collapse.json b/docs/translations/api-docs/collapse/collapse.json index e9ae3ec8b18013..065875d47a8dfc 100644 --- a/docs/translations/api-docs/collapse/collapse.json +++ b/docs/translations/api-docs/collapse/collapse.json @@ -7,7 +7,8 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.
⚠️ Needs to be able to hold a ref.", "in": "If true, the component will transition in.", "orientation": "The transition orientation.", - "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height." + "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 19cb56c44ae6a9..8469af58c7423e 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { InternalStandardProps as StandardProps, Theme } from '..'; import { TransitionProps } from '../transitions/transition'; export interface CollapseProps extends StandardProps { @@ -24,6 +25,10 @@ export interface CollapseProps extends StandardProps wrapper?: string; /** Styles applied to the inner wrapper element. */ wrapperInner?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; /** * The width (horizontal) or height (vertical) of the container when collapsed. diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 04f05aa6c934ff..731a1f9414a626 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -2,71 +2,116 @@ import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; -import { elementTypeAcceptingRef } from '@material-ui/utils'; -import withStyles from '../styles/withStyles'; +import { deepmerge, elementTypeAcceptingRef } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; import { duration } from '../styles/transitions'; import { getTransitionProps } from '../transitions/utils'; import useTheme from '../styles/useTheme'; import { useForkRef } from '../utils'; +import { getCollapseUtilityClass } from './collapseClasses'; -export const styles = (theme) => ({ +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.variant], + ...(styleProps.orientation === 'horizontal' && styles.horizontal), + }); +}; + +const useUtilityClasses = (styleProps) => { + const { orientation, classes } = styleProps; + + const slots = { + root: ['root', `${orientation}`], + wrapper: ['wrapper'], + wrapperInner: ['wrapperInner'], + }; + + return composeClasses(slots, getCollapseUtilityClass, classes); +}; + +const CollapseRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiCollapse', + slot: 'Root', + overridesResolver, + }, +)(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ - root: { - height: 0, - overflow: 'hidden', - transition: theme.transitions.create('height'), - '&$horizontal': { - height: 'auto', - width: 0, - transition: theme.transitions.create('width'), - }, + height: 0, + overflow: 'hidden', + transition: theme.transitions.create('height'), + '&$horizontal': { + height: 'auto', + width: 0, + transition: theme.transitions.create('width'), }, /* Pseudo-class applied to the root element if `orientation="horizontal"`. */ - horizontal: {}, + ...(styleProps.orientation === 'horizontal' && {}), /* Styles applied to the root element when the transition has entered. */ - entered: { + ...(styleProps.entered && { height: 'auto', overflow: 'visible', '&$horizontal': { width: 'auto', }, - }, + }), /* Styles applied to the root element when the transition has exited and `collapsedSize` = 0px. */ - hidden: { + ...(styleProps.hidden && { visibility: 'hidden', + }), +})); + +/* Styles applied to the outer wrapper element. */ +const CollapseWrapper = experimentalStyled( + 'div', + {}, + { + name: 'MuiCollapse', + slot: 'Wrapper', }, - /* Styles applied to the outer wrapper element. */ - wrapper: { - // Hack to get children with a negative margin to not falsify the height computation. - display: 'flex', - width: '100%', - '&$horizontal': { - width: 'auto', - height: '100%', - }, +)(() => ({ + // Hack to get children with a negative margin to not falsify the height computation. + display: 'flex', + width: '100%', + '&$horizontal': { + width: 'auto', + height: '100%', }, - /* Styles applied to the inner wrapper element. */ - wrapperInner: { - width: '100%', - '&$horizontal': { - width: 'auto', - height: '100%', - }, +})); + +/* Styles applied to the inner wrapper element. */ +const CollapseWrapperInner = experimentalStyled( + 'div', + {}, + { + name: 'MuiCollapse', + slot: 'WrapperInner', }, -}); +)(() => ({ + width: '100%', + '&$horizontal': { + width: 'auto', + height: '100%', + }, +})); /** * The Collapse transition is used by the * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component. * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ -const Collapse = React.forwardRef(function Collapse(props, ref) { +const Collapse = React.forwardRef(function Collapse(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiCollapse' }); const { children, - classes, className, collapsedSize: collapsedSizeProp = '0px', - component: Component = 'div', in: inProp, onEnter, onEntered, @@ -81,6 +126,14 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { TransitionComponent = Transition, ...other } = props; + + const styleProps = { + ...other, + orientation, + }; + + const classes = useUtilityClasses(styleProps); + const theme = useTheme(); const timer = React.useRef(); const wrapperRef = React.useRef(null); @@ -224,7 +277,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { {...other} > {(state, childProps) => ( - -
-
{children} -
-
- + + + )} ); @@ -345,4 +401,4 @@ Collapse.propTypes = { Collapse.muiSupportAuto = true; -export default withStyles(styles, { name: 'MuiCollapse' })(Collapse); +export default Collapse; diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index 00c95013826683..297412a5649dc7 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -1,30 +1,28 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy, stub, useFakeTimers } from 'sinon'; -import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils'; +import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import { Transition } from 'react-transition-group'; import Collapse from './Collapse'; +import classes from './collapseClasses'; describe('', () => { const mount = createMount({ strict: true }); - let classes; const defaultProps = { in: true, children:
, }; const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', + muiName: 'MuiCollapse', + testVariantProps: { orientation: 'horizontal' }, })); it('should render a container around the wrapper', () => { diff --git a/packages/material-ui/src/Collapse/collapseClasses.d.ts b/packages/material-ui/src/Collapse/collapseClasses.d.ts new file mode 100644 index 00000000000000..af40221d0aea70 --- /dev/null +++ b/packages/material-ui/src/Collapse/collapseClasses.d.ts @@ -0,0 +1,12 @@ +export interface CollapseClasses { + root: string; + horizontal: string; + wrapper: string; + wrapperInner: string; +} + +declare const collapseClasses: CollapseClasses; + +export function getCollapseUtilityClass(slot: string): string; + +export default collapseClasses; diff --git a/packages/material-ui/src/Collapse/collapseClasses.js b/packages/material-ui/src/Collapse/collapseClasses.js new file mode 100644 index 00000000000000..96262e0f0d20ed --- /dev/null +++ b/packages/material-ui/src/Collapse/collapseClasses.js @@ -0,0 +1,14 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getCollapseUtilityClass(slot) { + return generateUtilityClass('MuiCollapse', slot); +} + +const collapseClasses = generateUtilityClasses('MuiCollapse', [ + 'root', + 'horizontal', + 'wrapper', + 'wrapperInner', +]); + +export default collapseClasses; diff --git a/packages/material-ui/src/Collapse/index.d.ts b/packages/material-ui/src/Collapse/index.d.ts index 4ea7034858674b..696bcd0e04b68f 100644 --- a/packages/material-ui/src/Collapse/index.d.ts +++ b/packages/material-ui/src/Collapse/index.d.ts @@ -1,2 +1,5 @@ export { default } from './Collapse'; export * from './Collapse'; + +export { default as collapseClasses } from './collapseClasses'; +export * from './collapseClasses'; diff --git a/packages/material-ui/src/Collapse/index.js b/packages/material-ui/src/Collapse/index.js index 12bcb635c7cf07..1d0361f84f2fb6 100644 --- a/packages/material-ui/src/Collapse/index.js +++ b/packages/material-ui/src/Collapse/index.js @@ -1 +1,4 @@ export { default } from './Collapse'; + +export { default as collapseClasses } from './collapseClasses'; +export * from './collapseClasses'; From df8f87735a0e25f6dc3902b760aec71d5761fec8 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Tue, 19 Jan 2021 21:06:15 -0800 Subject: [PATCH 02/13] Fix sx prop --- packages/material-ui/src/Collapse/Collapse.d.ts | 8 ++++---- packages/material-ui/src/Collapse/Collapse.js | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 8469af58c7423e..2db9839012e2e4 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -25,10 +25,6 @@ export interface CollapseProps extends StandardProps wrapper?: string; /** Styles applied to the inner wrapper element. */ wrapperInner?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; }; /** * The width (horizontal) or height (vertical) of the container when collapsed. @@ -57,6 +53,10 @@ export interface CollapseProps extends StandardProps * @default duration.standard */ timeout?: TransitionProps['timeout'] | 'auto'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } export type CollapseClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 731a1f9414a626..d581be77d87e0d 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -397,6 +397,10 @@ Collapse.propTypes = { exit: PropTypes.number, }), ]), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; Collapse.muiSupportAuto = true; From a12104067a703de36e9256b13fbdf4dc312f044d Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Tue, 19 Jan 2021 21:09:27 -0800 Subject: [PATCH 03/13] Fix api-docs JSON --- docs/pages/api-docs/collapse.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/collapse.json b/docs/pages/api-docs/collapse.json index f800a843b61def..cda151a42e8d35 100644 --- a/docs/pages/api-docs/collapse.json +++ b/docs/pages/api-docs/collapse.json @@ -18,9 +18,9 @@ "description": "'auto'
| number
| { appear?: number, enter?: number, exit?: number }" }, "default": "duration.standard" - } + }, + "sx": { "type": { "name": "object" } } }, - "sx": { "type": { "name": "object" } }, "name": "Collapse", "styles": { "classes": ["root", "horizontal", "entered", "hidden", "wrapper", "wrapperInner"], @@ -35,5 +35,5 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": false + "styledComponent": true } From 1248a3623318f9056162eb2ce62044de9272d28d Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Tue, 19 Jan 2021 21:15:51 -0800 Subject: [PATCH 04/13] Fix property order --- docs/pages/api-docs/collapse.json | 4 ++-- docs/translations/api-docs/collapse/collapse.json | 4 ++-- packages/material-ui/src/Collapse/Collapse.js | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/pages/api-docs/collapse.json b/docs/pages/api-docs/collapse.json index cda151a42e8d35..8b87e3d01e1d66 100644 --- a/docs/pages/api-docs/collapse.json +++ b/docs/pages/api-docs/collapse.json @@ -12,14 +12,14 @@ "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, "default": "'vertical'" }, + "sx": { "type": { "name": "object" } }, "timeout": { "type": { "name": "union", "description": "'auto'
| number
| { appear?: number, enter?: number, exit?: number }" }, "default": "duration.standard" - }, - "sx": { "type": { "name": "object" } } + } }, "name": "Collapse", "styles": { diff --git a/docs/translations/api-docs/collapse/collapse.json b/docs/translations/api-docs/collapse/collapse.json index 065875d47a8dfc..5aeb432ed50341 100644 --- a/docs/translations/api-docs/collapse/collapse.json +++ b/docs/translations/api-docs/collapse/collapse.json @@ -7,8 +7,8 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.
⚠️ Needs to be able to hold a ref.", "in": "If true, the component will transition in.", "orientation": "The transition orientation.", - "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height.", - "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", + "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index d581be77d87e0d..4e04c405ecc948 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -381,6 +381,10 @@ Collapse.propTypes = { * @ignore */ style: PropTypes.object, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. @@ -397,10 +401,6 @@ Collapse.propTypes = { exit: PropTypes.number, }), ]), - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.object, }; Collapse.muiSupportAuto = true; From d494a5113d7a52972248e87ef4e3b7842884d671 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Tue, 19 Jan 2021 21:37:23 -0800 Subject: [PATCH 05/13] Re-add "component" prop --- packages/material-ui/src/Collapse/Collapse.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 4e04c405ecc948..ddbcc503f61e9e 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -112,6 +112,7 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { children, className, collapsedSize: collapsedSizeProp = '0px', + component, in: inProp, onEnter, onEntered, @@ -278,6 +279,7 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { > {(state, childProps) => ( Date: Tue, 19 Jan 2021 21:57:55 -0800 Subject: [PATCH 06/13] Add skip for componentsProp test --- packages/material-ui/src/Collapse/Collapse.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index 297412a5649dc7..a60ef93062e3d3 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -20,9 +20,9 @@ describe('', () => { inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, - testComponentPropWith: 'span', muiName: 'MuiCollapse', testVariantProps: { orientation: 'horizontal' }, + skip: ['componentsProp'], })); it('should render a container around the wrapper', () => { From 0de2b130f155bff7606803699aa2266ba7e35c2e Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 06:08:15 -0800 Subject: [PATCH 07/13] Update packages/material-ui/src/Collapse/collapseClasses.js Co-authored-by: Marija Najdova --- packages/material-ui/src/Collapse/collapseClasses.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/material-ui/src/Collapse/collapseClasses.js b/packages/material-ui/src/Collapse/collapseClasses.js index 96262e0f0d20ed..79ef81a3008024 100644 --- a/packages/material-ui/src/Collapse/collapseClasses.js +++ b/packages/material-ui/src/Collapse/collapseClasses.js @@ -7,6 +7,9 @@ export function getCollapseUtilityClass(slot) { const collapseClasses = generateUtilityClasses('MuiCollapse', [ 'root', 'horizontal', + 'vertical', + 'entered', + 'hidden', 'wrapper', 'wrapperInner', ]); From 2715243b287a9ac70b6b1b903cb442bc2c8ffce9 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 06:12:15 -0800 Subject: [PATCH 08/13] Apply suggestions from code review Co-authored-by: Marija Najdova --- packages/material-ui/src/Collapse/Collapse.js | 35 +++++++++++-------- .../material-ui/src/Collapse/Collapse.test.js | 1 + .../src/Collapse/collapseClasses.d.ts | 3 ++ 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index ddbcc503f61e9e..d309be78d1eb3d 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -10,14 +10,17 @@ import { duration } from '../styles/transitions'; import { getTransitionProps } from '../transitions/utils'; import useTheme from '../styles/useTheme'; import { useForkRef } from '../utils'; -import { getCollapseUtilityClass } from './collapseClasses'; +import collapseClasses, { getCollapseUtilityClass } from './collapseClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root || {}, { - ...styles[styleProps.variant], - ...(styleProps.orientation === 'horizontal' && styles.horizontal), + ...styles[styleProps.orientation], + ...(styleProps.state === 'entered' && styles.entered), + ...(styleProps.state === 'exited' && !styleProps.in && styleProps.collapsedSize === '0px' && styles.hidden), + [`& .${collapseClasses.wrapper}`]: styles.wrapper, + [`& .${collapseClasses.wrapperInner}`]: styles.wrapperInner, }); }; @@ -26,8 +29,10 @@ const useUtilityClasses = (styleProps) => { const slots = { root: ['root', `${orientation}`], - wrapper: ['wrapper'], - wrapperInner: ['wrapperInner'], + entered: ['entered'], + hidden: ['hidden'], + wrapper: ['wrapper', `${orientation}`], + wrapperInner: ['wrapperInner', `${orientation}`], }; return composeClasses(slots, getCollapseUtilityClass, classes); @@ -51,10 +56,8 @@ const CollapseRoot = experimentalStyled( width: 0, transition: theme.transitions.create('width'), }, - /* Pseudo-class applied to the root element if `orientation="horizontal"`. */ - ...(styleProps.orientation === 'horizontal' && {}), /* Styles applied to the root element when the transition has entered. */ - ...(styleProps.entered && { + ...(styleProps.state === 'entered' && { height: 'auto', overflow: 'visible', '&$horizontal': { @@ -62,7 +65,7 @@ const CollapseRoot = experimentalStyled( }, }), /* Styles applied to the root element when the transition has exited and `collapsedSize` = 0px. */ - ...(styleProps.hidden && { + ...(styleProps.state === 'exited' && !styleProps.in && styleProps.collapsedSize === '0px' && { visibility: 'hidden', }), })); @@ -75,7 +78,7 @@ const CollapseWrapper = experimentalStyled( name: 'MuiCollapse', slot: 'Wrapper', }, -)(() => ({ +)(({ styleProps }) => ({ // Hack to get children with a negative margin to not falsify the height computation. display: 'flex', width: '100%', @@ -93,7 +96,7 @@ const CollapseWrapperInner = experimentalStyled( name: 'MuiCollapse', slot: 'WrapperInner', }, -)(() => ({ +)(({ styleProps }) => ({ width: '100%', '&$horizontal': { width: 'auto', @@ -129,8 +132,10 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { } = props; const styleProps = { - ...other, + ...props, orientation, + collapsedSize: collapsedSizeProp, + in: inProp, }; const classes = useUtilityClasses(styleProps); @@ -293,19 +298,19 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize, ...style, }} - styleProps={styleProps} + styleProps={{ ...styleProps, state }} ref={handleRef} {...childProps} > ', () => { refInstanceof: window.HTMLDivElement, muiName: 'MuiCollapse', testVariantProps: { orientation: 'horizontal' }, + testDeepOverrides: { slotName: 'wrapper', slotClassName: classes.wrapper }, skip: ['componentsProp'], })); diff --git a/packages/material-ui/src/Collapse/collapseClasses.d.ts b/packages/material-ui/src/Collapse/collapseClasses.d.ts index af40221d0aea70..51cfbddf36fdd3 100644 --- a/packages/material-ui/src/Collapse/collapseClasses.d.ts +++ b/packages/material-ui/src/Collapse/collapseClasses.d.ts @@ -1,6 +1,9 @@ export interface CollapseClasses { root: string; horizontal: string; + vertical: string; + entered: string; + hidden: string; wrapper: string; wrapperInner: string; } From 15d89b6f9f70184bf4e8d49df326ad97af1ecc30 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 06:51:26 -0800 Subject: [PATCH 09/13] Replace '&$horizontal' with styleProps.orientation check --- packages/material-ui/src/Collapse/Collapse.js | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index d309be78d1eb3d..3c714ab5072fe0 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -18,7 +18,10 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...styles[styleProps.orientation], ...(styleProps.state === 'entered' && styles.entered), - ...(styleProps.state === 'exited' && !styleProps.in && styleProps.collapsedSize === '0px' && styles.hidden), + ...(styleProps.state === 'exited' && + !styleProps.in && + styleProps.collapsedSize === '0px' && + styles.hidden), [`& .${collapseClasses.wrapper}`]: styles.wrapper, [`& .${collapseClasses.wrapperInner}`]: styles.wrapperInner, }); @@ -51,23 +54,25 @@ const CollapseRoot = experimentalStyled( height: 0, overflow: 'hidden', transition: theme.transitions.create('height'), - '&$horizontal': { + ...(styleProps.orientation === 'horizontal' && { height: 'auto', width: 0, transition: theme.transitions.create('width'), - }, + }), /* Styles applied to the root element when the transition has entered. */ ...(styleProps.state === 'entered' && { height: 'auto', overflow: 'visible', - '&$horizontal': { + ...(styleProps.orientation === 'horizontal' && { width: 'auto', - }, + }), }), /* Styles applied to the root element when the transition has exited and `collapsedSize` = 0px. */ - ...(styleProps.state === 'exited' && !styleProps.in && styleProps.collapsedSize === '0px' && { - visibility: 'hidden', - }), + ...(styleProps.state === 'exited' && + !styleProps.in && + styleProps.collapsedSize === '0px' && { + visibility: 'hidden', + }), })); /* Styles applied to the outer wrapper element. */ @@ -82,10 +87,10 @@ const CollapseWrapper = experimentalStyled( // Hack to get children with a negative margin to not falsify the height computation. display: 'flex', width: '100%', - '&$horizontal': { + ...(styleProps.orientation === 'horizontal' && { width: 'auto', height: '100%', - }, + }), })); /* Styles applied to the inner wrapper element. */ @@ -98,10 +103,10 @@ const CollapseWrapperInner = experimentalStyled( }, )(({ styleProps }) => ({ width: '100%', - '&$horizontal': { + ...(styleProps.orientation === 'horizontal' && { width: 'auto', height: '100%', - }, + }), })); /** From 92210589a50a6b26c1de7f8798bb359157976383 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 06:53:14 -0800 Subject: [PATCH 10/13] Remove classes.horizontal from components --- packages/material-ui/src/Collapse/Collapse.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 3c714ab5072fe0..b3cf7b5e21d31e 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -293,7 +293,6 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { className={clsx( classes.root, { - [classes.horizontal]: isHorizontal, [classes.entered]: state === 'entered', [classes.hidden]: state === 'exited' && !inProp && collapsedSize === '0px', }, @@ -309,16 +308,12 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { > {children} From cb378e5f3936af9a7257aaf457ef230580025b55 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 06:53:41 -0800 Subject: [PATCH 11/13] Remove redundant "in" prop --- packages/material-ui/src/Collapse/Collapse.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index b3cf7b5e21d31e..0da22bdb334108 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -140,7 +140,6 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { ...props, orientation, collapsedSize: collapsedSizeProp, - in: inProp, }; const classes = useUtilityClasses(styleProps); From 62ac21319f938274fe05517982707934351e870b Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 07:51:50 -0800 Subject: [PATCH 12/13] Resolve issues with StepContent tests Co-Authored-By: mnajdova --- packages/material-ui/src/StepContent/StepContent.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js index 9266055ee485bb..dabdfe9a0d2dbe 100644 --- a/packages/material-ui/src/StepContent/StepContent.test.js +++ b/packages/material-ui/src/StepContent/StepContent.test.js @@ -1,20 +1,18 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses, createClientRender, createMount, describeConformance } from 'test/utils'; -import Collapse from '../Collapse'; +import Collapse, { collapseClasses } from '../Collapse'; import Stepper from '../Stepper'; import Step from '../Step'; import StepContent from './StepContent'; describe('', () => { let classes; - let collapseClasses; const mount = createMount({ strict: true }); const render = createClientRender(); before(() => { classes = getClasses(); - collapseClasses = getClasses(); }); describeConformance(, () => ({ From 9e22c49ee473109290e60e7c1325bf7ad0b207b3 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Wed, 20 Jan 2021 08:08:11 -0800 Subject: [PATCH 13/13] Remove unused import --- packages/material-ui/src/StepContent/StepContent.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js index dabdfe9a0d2dbe..5d898fa7df219a 100644 --- a/packages/material-ui/src/StepContent/StepContent.test.js +++ b/packages/material-ui/src/StepContent/StepContent.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses, createClientRender, createMount, describeConformance } from 'test/utils'; -import Collapse, { collapseClasses } from '../Collapse'; +import { collapseClasses } from '../Collapse'; import Stepper from '../Stepper'; import Step from '../Step'; import StepContent from './StepContent';