diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 376400283926c4..c3bdd4834a2b80 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -46,6 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | orientation | 'horizontal'
| 'vertical' | | The slider orientation. | | scale | func | | A transformation function, to change the scale of the slider. | | step | number | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | +| system | object | | System props to apply to the component. | | track | 'inverted'
| 'normal'
| false | | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | | value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | | valueLabelDisplay | 'auto'
| 'off'
| 'on' | | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index f226bd7c414057..8999505f7d3646 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -47,6 +47,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | orientation | 'horizontal'
| 'vertical' | 'horizontal' | The slider orientation. | | scale | func | (x) => x | A transformation function, to change the scale of the slider. | | step | number | 1 | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | +| system | object | | System props to apply to the component. | | track | 'inverted'
| 'normal'
| false | 'normal' | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | | value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | | valueLabelDisplay | 'auto'
| 'off'
| 'on' | 'off' | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 6b14f7b682ebe4..a9fe4ab9e4a303 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -31,6 +31,7 @@ export default function ContinuousSlider() { { const SliderRoot = muiStyled( 'span', {}, - { muiName: 'MuiSlider', overridesResolver }, + { muiName: 'MuiSlider', overridesResolver, addSystemProps: true }, )((props) => ({ height: 2, width: '100%', @@ -436,6 +436,10 @@ Slider.propTypes = { * @default 1 */ step: PropTypes.number, + /** + * System props to apply to the component. + */ + system: PropTypes.object, /** * The track presentation: * diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts index 9ed5f484a09ca7..9f782a6b32f665 100644 --- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts @@ -1,4 +1,5 @@ import { OverridableComponent } from '@material-ui/core/OverridableComponent'; +import { ElementProps, SystemProps } from '@material-ui/core/Box'; export interface Mark { value: number; @@ -158,6 +159,10 @@ export interface SliderTypeMap

{ * @default 1 */ step?: number | null; + /** + * System props to apply to the component. + */ + system?: ElementProps & SystemProps; /** * The track presentation: * diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js index 1fb2b896363eb1..75f06bfc9344e6 100644 --- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js @@ -905,6 +905,10 @@ SliderUnstyled.propTypes = { * @default 1 */ step: PropTypes.number, + /** + * System props to apply to the component. + */ + system: PropTypes.object, /** * The track presentation: * diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js index 029896503ce07b..a97d6916764e77 100644 --- a/packages/material-ui-system/src/breakpoints.js +++ b/packages/material-ui-system/src/breakpoints.js @@ -47,9 +47,10 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) { } function breakpoints(styleFunction) { - const newStyleFunction = (props) => { - const base = styleFunction(props); - const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; + const newStyleFunction = (componentProps) => { + const base = styleFunction(componentProps); + const themeBreakpoints = componentProps.theme.breakpoints || defaultBreakpoints; + const props = componentProps.system || componentProps; const extended = themeBreakpoints.keys.reduce((acc, key) => { if (props[key]) { diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js index 41d191eb8928f1..72f74f17b95e10 100644 --- a/packages/material-ui-system/src/spacing.js +++ b/packages/material-ui-system/src/spacing.js @@ -149,9 +149,10 @@ function getStyleFromPropValue(cssProperties, transformer) { }, {}); } -function spacing(props) { - const theme = props.theme; +function spacing(componentProps) { + const theme = componentProps.theme; const transformer = createUnarySpacing(theme); + const props = componentProps.system || componentProps; return Object.keys(props) .map((prop) => { diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js index d499579507ff1f..b2dc48adf4c0b0 100644 --- a/packages/material-ui-system/src/style.js +++ b/packages/material-ui-system/src/style.js @@ -13,11 +13,12 @@ function style(options) { const { prop, cssProperty = options.prop, themeKey, transform } = options; const fn = (props) => { - if (props[prop] == null) { + const propValue = props[prop] || props.system?.[prop]; + + if (propValue == null) { return null; } - const propValue = props[prop]; const theme = props.theme; const themeMapping = getPath(theme, themeKey) || {}; const styleFromPropValue = (propValueFinal) => { diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 2eb664df6c9d61..09a1529a196d40 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -30,8 +30,8 @@ type BoxStyleFunction = ComposedStyleFunction< ] >; -type SystemProps = PropsFor; -type ElementProps = Omit, keyof SystemProps>; +export type SystemProps = PropsFor; +export type ElementProps = Omit, keyof SystemProps>; export interface BoxProps extends ElementProps, SystemProps { // styled API diff --git a/packages/material-ui/src/styles/muiStyled.d.ts b/packages/material-ui/src/styles/muiStyled.d.ts index bd9aca8a85a51e..a4992b23b5a7e0 100644 --- a/packages/material-ui/src/styles/muiStyled.d.ts +++ b/packages/material-ui/src/styles/muiStyled.d.ts @@ -181,6 +181,7 @@ export interface StyledOptions { interface MuiStyledOptions { muiName: string; overridesResolver?: (props: any, styles: string | object, name: string) => string | object; + addSystemProps?: boolean; } export interface CreateStyled { diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js index d86f27239a4752..41ece655520b55 100644 --- a/packages/material-ui/src/styles/muiStyled.js +++ b/packages/material-ui/src/styles/muiStyled.js @@ -1,5 +1,19 @@ import styled from '@material-ui/styled-engine'; import { propsToClassKey } from '@material-ui/styles'; +import { + borders, + compose, + display, + flexbox, + grid, + palette, + positions, + shadows, + sizing, + spacing, + typography, + css, +} from '@material-ui/system'; import defaultTheme from './defaultTheme'; const getStyleOverrides = (name, theme) => { @@ -54,7 +68,22 @@ const variantsResolver = (props, styles, theme, name) => { return variantsStyles; }; -const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme'; +const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'system'; + +export const systemStyleFunction = css( + compose( + borders, + display, + flexbox, + grid, + positions, + palette, + shadows, + sizing, + spacing, + typography, + ), +); const muiStyled = (tag, options, muiOptions) => { const name = muiOptions.muiName; @@ -72,6 +101,10 @@ const muiStyled = (tag, options, muiOptions) => { return variantsResolver(props, getVariantStyles(name, theme), theme, name); }); + if (muiOptions && muiOptions.addSystemProps) { + styles.push(systemStyleFunction); + } + return defaultStyledResolver(...styles); }; return muiStyledResolver;