diff --git a/docs/pages/api-docs/timeline-opposite-content.json b/docs/pages/api-docs/timeline-opposite-content.json index 634cca9a569974..4df0da6a2b85a7 100644 --- a/docs/pages/api-docs/timeline-opposite-content.json +++ b/docs/pages/api-docs/timeline-opposite-content.json @@ -1,11 +1,12 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "TimelineOppositeContent", "styles": { - "classes": ["root", "alignRight"], + "classes": ["root", "alignRight", "alignLeft", "alignAlternate"], "globalClasses": {}, "name": "MuiTimelineOppositeContent" }, @@ -14,6 +15,6 @@ "filename": "/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js", "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json index b2fa807df21cbd..d325a5d57ac9cb 100644 --- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json +++ b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json @@ -2,7 +2,8 @@ "componentDescription": "", "propDescriptions": { "children": "The content of the component.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details." + "classes": "Override or extend the styles applied to the component. See CSS API below 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." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, @@ -10,6 +11,16 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "align=\"right\"" + }, + "alignLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "align=\"left\"" + }, + "alignAlternate": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "align=\"alternate\"" } } } diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts index 4f5be94509a400..77cdd532d4a875 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { SxProps } from '@material-ui/system'; +import { Theme } from '@material-ui/core/styles'; import { InternalStandardProps as StandardProps, TypographyProps } from '@material-ui/core'; export interface TimelineOppositeContentProps extends StandardProps { @@ -14,7 +16,15 @@ export interface TimelineOppositeContentProps extends StandardProps; } export type TimelineOppositeContentClassKey = keyof NonNullable< diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js index 04375d0cc6f75f..94e4a672e285fa 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js @@ -1,41 +1,77 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { + experimentalStyled, + unstable_useThemeProps as useThemeProps, +} from '@material-ui/core/styles'; +import { deepmerge } from '@material-ui/utils'; import { capitalize } from '@material-ui/core/utils'; -import { withStyles } from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Typography from '@material-ui/core/Typography'; import TimelineContext from '../Timeline/TimelineContext'; import TimelineItemContext from '../TimelineItem/TimelineItemContext'; +import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses'; -export const styles = () => ({ - /* Styles applied to the root element. */ - root: { - padding: '6px 16px', - marginRight: 'auto', - textAlign: 'right', - flex: 1, +const overridesResolver = (props, styles) => { + const { styleProps } = props; + return deepmerge( + { + ...styles[`align${capitalize(styleProps.align)}`], + }, + styles.root || {}, + ); +}; + +const useUtilityClasses = (styleProps) => { + const { align, classes } = styleProps; + + const slots = { + root: ['root', `align${capitalize(align)}`], + }; + + return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes); +}; + +const TimelineOppositeContentRoot = experimentalStyled( + Typography, + {}, + { + name: 'MuiTimelineOppositeContent', + slot: 'Root', + overridesResolver, }, +)(({ styleProps }) => ({ + /* Styles applied to the root element. */ + padding: '6px 16px', + marginRight: 'auto', + textAlign: 'right', + flex: 1, /* Styles applied to the root element if `align="right"`. */ - alignRight: { + ...(styleProps.align === 'right' && { textAlign: 'left', - }, -}); + }), +})); -const TimelineOppositeContent = React.forwardRef(function TimelineOppositeContent(props, ref) { - const { classes, className, ...other } = props; +const TimelineOppositeContent = React.forwardRef(function TimelineOppositeContent(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTimelineOppositeContent' }); + const { className, ...other } = props; const { align = 'left' } = React.useContext(TimelineContext); const { classes: contextClasses = {} } = React.useContext(TimelineItemContext); + const styleProps = { + ...props, + align, + }; + + const classes = useUtilityClasses(styleProps); + return ( - @@ -59,8 +95,12 @@ TimelineOppositeContent.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; TimelineOppositeContent.muiName = 'TimelineOppositeContent'; -export default withStyles(styles, { name: 'MuiTimelineOppositeContent' })(TimelineOppositeContent); +export default TimelineOppositeContent; diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js index 57b33753ff0126..63b63c5a134f0d 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js @@ -1,21 +1,33 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; +import { expect } from 'chai'; +import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import Typography from '@material-ui/core/Typography'; -import TimelineOppositeContent from './TimelineOppositeContent'; +import Timeline from '@material-ui/lab/Timeline'; +import TimelineOppositeContent, { + timelineOppositeContentClasses as classes, +} from '@material-ui/lab/TimelineOppositeContent'; describe('', () => { + const render = createClientRender(); const mount = createMount(); - let classes; - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: Typography, + render, mount, + muiName: 'MuiTimelineOppositeContent', refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: ['componentProp', 'componentsProp', 'themeVariants'], })); + + it('when align right should have alignRight class', () => { + const { getByText } = render( + + content + , + ); + + expect(getByText('content')).to.have.class(classes.alignRight); + }); }); diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContentClasses.d.ts b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContentClasses.d.ts new file mode 100644 index 00000000000000..e633f2a0ae570c --- /dev/null +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContentClasses.d.ts @@ -0,0 +1,9 @@ +import { TimelineOppositeContentClassKey } from './TimelineOppositeContent'; + +export type TimelineOppositeContentClasses = Record; + +declare const timelineOppositeContentClasses: TimelineOppositeContentClasses; + +export function getTimelineOppositeContentUtilityClass(slot: string): string; + +export default timelineOppositeContentClasses; diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/index.d.ts b/packages/material-ui-lab/src/TimelineOppositeContent/index.d.ts index b585dea5357f65..4a0689577736d1 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/index.d.ts +++ b/packages/material-ui-lab/src/TimelineOppositeContent/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TimelineOppositeContent'; export * from './TimelineOppositeContent'; + +export { default as timelineOppositeContentClasses } from './timelineOppositeContentClasses'; +export * from './timelineOppositeContentClasses'; diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/index.js b/packages/material-ui-lab/src/TimelineOppositeContent/index.js index 196d3840173ed6..44f973c1a6d8ac 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/index.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/index.js @@ -1 +1,4 @@ export { default } from './TimelineOppositeContent'; + +export { default as timelineOppositeContentClasses } from './timelineOppositeContentClasses'; +export * from './timelineOppositeContentClasses'; diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js b/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js new file mode 100644 index 00000000000000..a2a96a4a44604c --- /dev/null +++ b/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js @@ -0,0 +1,14 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTimelineOppositeContentUtilityClass(slot) { + return generateUtilityClass('MuiTimelineOppositeContent', slot); +} + +const timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', [ + 'root', + 'alignLeft', + 'alignRight', + 'alignAlternate', +]); + +export default timelineOppositeContentClasses;