From 6f5419a0b7ab5409b31b92fea13526d6b9a3b64e Mon Sep 17 00:00:00 2001 From: Danail H Date: Fri, 19 Feb 2021 16:19:43 +0100 Subject: [PATCH 01/18] Migrate FormControlLabel to emotion - initial version --- .../src/FormControlLabel/FormControlLabel.js | 116 +++++++++++------- .../formControlLabelClasses.d.ts | 9 ++ .../formControlLabelClasses.js | 16 +++ 3 files changed, 97 insertions(+), 44 deletions(-) create mode 100644 packages/material-ui/src/FormControlLabel/formControlLabelClasses.d.ts create mode 100644 packages/material-ui/src/FormControlLabel/formControlLabelClasses.js diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 215d71a927c1d5..4bd4950284db91 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -1,61 +1,85 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { refType } from '@material-ui/utils'; +import { refType, deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { useFormControl } from '../FormControl'; -import withStyles from '../styles/withStyles'; import Typography from '../Typography'; import capitalize from '../utils/capitalize'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; +import { getFormControlLabelUtilityClasses } from './formControlLabelClasses'; -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - display: 'inline-flex', - alignItems: 'center', - cursor: 'pointer', - // For correct alignment with the text. - verticalAlign: 'middle', - WebkitTapHighlightColor: 'transparent', - marginLeft: -11, - marginRight: 16, // used for row presentation of radio/checkbox - '&$disabled': { - cursor: 'default', - }, +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], + ...(styleProps.disabled && styles.disabled), + ...(styleProps.noWrap && styles.noWrap), + ...(styleProps.label && styles.label), + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, disabled, labelPlacement } = styleProps; + const slots = { + root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`], + }; + + return composeClasses(slots, getFormControlLabelUtilityClasses, classes); +}; + +export const FormControlLabelRoot = experimentalStyled( + 'label', + {}, + { name: 'MuiFormControlLabel', slot: 'Root', overridesResolver }, +)(({ theme, styleProps }) => ({ + display: 'inline-flex', + alignItems: 'center', + cursor: 'pointer', + // For correct alignment with the text. + verticalAlign: 'middle', + WebkitTapHighlightColor: 'transparent', + marginLeft: -11, + marginRight: 16, // used for row presentation of radio/checkbox + '&$disabled': { + cursor: 'default', }, - /* Styles applied to the root element if `labelPlacement="start"`. */ - labelPlacementStart: { + ...(styleProps.labelPlacement === 'start' && { flexDirection: 'row-reverse', marginLeft: 16, // used for row presentation of radio/checkbox marginRight: -11, - }, - /* Styles applied to the root element if `labelPlacement="top"`. */ - labelPlacementTop: { + }), + ...(styleProps.labelPlacement === 'top' && { flexDirection: 'column-reverse', marginLeft: 16, - }, - /* Styles applied to the root element if `labelPlacement="bottom"`. */ - labelPlacementBottom: { + }), + ...(styleProps.labelPlacement === 'bottom' && { flexDirection: 'column', marginLeft: 16, - }, - /* Pseudo-class applied to the root element if `disabled={true}`. */ - disabled: {}, - /* Styles applied to the label's Typography component. */ - label: { + }), + ...(styleProps.disabled !== 'inherit' && {}), + ...(styleProps.noWrap && { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), + ...(styleProps.label && { '&$disabled': { color: theme.palette.text.disabled, }, - }, -}); + }), +})); /** * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component. * Use this component if you want to display an extra label. */ -const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) { +const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiFormControlLabel' }); const { checked, - classes, className, control, disabled: disabledProp, @@ -67,6 +91,14 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) value, ...other } = props; + + const styleProps = { + ...props, + labelPlacement, + disabled: disabledProp, + label, + }; + const muiFormControl = useFormControl(); let disabled = disabledProp; @@ -87,16 +119,12 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) } }); + const classes = useUtilityClasses(styleProps); + return ( - + ); }); @@ -166,4 +194,4 @@ FormControlLabel.propTypes = { value: PropTypes.any, }; -export default withStyles(styles, { name: 'MuiFormControlLabel' })(FormControlLabel); +export default FormControlLabel; diff --git a/packages/material-ui/src/FormControlLabel/formControlLabelClasses.d.ts b/packages/material-ui/src/FormControlLabel/formControlLabelClasses.d.ts new file mode 100644 index 00000000000000..3730363fa011a1 --- /dev/null +++ b/packages/material-ui/src/FormControlLabel/formControlLabelClasses.d.ts @@ -0,0 +1,9 @@ +import { FormControlLabelClassKey } from './FormControlLabel'; + +export type FormControlLabelClasses = Record; + +declare const formControlLabelClasses: FormControlLabelClasses; + +export function getFormControlLabelUtilityClasses(slot: string): string; + +export default formControlLabelClasses; diff --git a/packages/material-ui/src/FormControlLabel/formControlLabelClasses.js b/packages/material-ui/src/FormControlLabel/formControlLabelClasses.js new file mode 100644 index 00000000000000..f0272abfecd713 --- /dev/null +++ b/packages/material-ui/src/FormControlLabel/formControlLabelClasses.js @@ -0,0 +1,16 @@ +import { generateUtilityClasses, generateUtilityClass } from '@material-ui/unstyled'; + +export function getFormControlLabelUtilityClasses(slot) { + return generateUtilityClass('MuiFormControlLabel', slot); +} + +const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', [ + 'root', + 'labelPlacementStart', + 'labelPlacementTop', + 'labelPlacementBottom', + 'disabled', + 'label', +]); + +export default formControlLabelClasses; From 45fe8f21605da8850cf1bcd1be4de49f956c6f4a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:40:20 +0100 Subject: [PATCH 02/18] formControlClasses should be public --- packages/material-ui/src/FormControl/FormControl.test.js | 3 +-- packages/material-ui/src/FormControl/index.d.ts | 4 ++++ packages/material-ui/src/FormControl/index.js | 3 +++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js index d25622c99a9698..e668e551a97478 100644 --- a/packages/material-ui/src/FormControl/FormControl.test.js +++ b/packages/material-ui/src/FormControl/FormControl.test.js @@ -2,11 +2,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, describeConformanceV5, act, createClientRender } from 'test/utils'; +import FormControl, { formControlClasses as classes } from '@material-ui/core/FormControl'; import Input from '../Input'; import Select from '../Select'; -import FormControl from './FormControl'; import useFormControl from './useFormControl'; -import classes from './formControlClasses'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui/src/FormControl/index.d.ts b/packages/material-ui/src/FormControl/index.d.ts index e1774748c4275d..c19fe875f63f43 100644 --- a/packages/material-ui/src/FormControl/index.d.ts +++ b/packages/material-ui/src/FormControl/index.d.ts @@ -1,3 +1,7 @@ export { default } from './FormControl'; export * from './FormControl'; + export { default as useFormControl, FormControlState } from './useFormControl'; + +export { default as formControlClasses } from './formControlClasses'; +export * from './formControlClasses'; diff --git a/packages/material-ui/src/FormControl/index.js b/packages/material-ui/src/FormControl/index.js index ebeddc8fed7a25..3696a0db431cde 100644 --- a/packages/material-ui/src/FormControl/index.js +++ b/packages/material-ui/src/FormControl/index.js @@ -1,2 +1,5 @@ export { default } from './FormControl'; export { default as useFormControl } from './useFormControl'; + +export { default as formControlClasses } from './formControlClasses'; +export * from './formControlClasses'; From 349f83382dc66bda9b28b720351aeadb864d18af Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:41:29 +0100 Subject: [PATCH 03/18] prefer testing public API --- packages/material-ui/src/FormHelperText/FormHelperText.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.test.js b/packages/material-ui/src/FormHelperText/FormHelperText.test.js index d2cd8aa89a31c0..359a119768391a 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.test.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.test.js @@ -1,9 +1,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; -import FormHelperText from './FormHelperText'; +import FormHelperText, { formHelperTextClasses as classes } from '@material-ui/core/FormHelperText'; import FormControl from '../FormControl'; -import classes from './formHelperTextClasses'; describe('', () => { const mount = createMount(); From 1b4da2a2225405f4f2930550e7845d23abba8c59 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:43:09 +0100 Subject: [PATCH 04/18] prefer testing public API --- .../src/FormControlLabel/FormControlLabel.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js index 60ed6ffa008658..8c188aedb8ded8 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; -import Checkbox from '../Checkbox'; -import FormControlLabel from './FormControlLabel'; -import FormControl from '../FormControl'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormControl from '@material-ui/core/FormControl'; describe('', () => { const mount = createMount(); From 0f4d01f99022cdc08809bbfc3ce21dc632132f0e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:44:37 +0100 Subject: [PATCH 05/18] formControlLabelClasses should be public --- .../src/FormControlLabel/FormControlLabel.test.js | 11 ++++------- packages/material-ui/src/FormControlLabel/index.d.ts | 3 +++ packages/material-ui/src/FormControlLabel/index.js | 3 +++ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js index 8c188aedb8ded8..11284fb854ba02 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js @@ -1,18 +1,15 @@ import * as React from 'react'; import { expect } from 'chai'; -import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { createMount, createClientRender, describeConformance } from 'test/utils'; +import FormControlLabel, { + formControlLabelClasses as classes, +} from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; import FormControl from '@material-ui/core/FormControl'; describe('', () => { const mount = createMount(); const render = createClientRender(); - let classes; - - before(() => { - classes = getClasses(} />); - }); describeConformance(} />, () => ({ classes, diff --git a/packages/material-ui/src/FormControlLabel/index.d.ts b/packages/material-ui/src/FormControlLabel/index.d.ts index a68fc5ec54e84c..c42e5095d3fb21 100644 --- a/packages/material-ui/src/FormControlLabel/index.d.ts +++ b/packages/material-ui/src/FormControlLabel/index.d.ts @@ -1,2 +1,5 @@ export { default } from './FormControlLabel'; export * from './FormControlLabel'; + +export { default as formControlLabelClasses } from './formControlLabelClasses'; +export * from './formControlLabelClasses'; diff --git a/packages/material-ui/src/FormControlLabel/index.js b/packages/material-ui/src/FormControlLabel/index.js index 7b77e02661bf72..9ed089a1a82bf0 100644 --- a/packages/material-ui/src/FormControlLabel/index.js +++ b/packages/material-ui/src/FormControlLabel/index.js @@ -1 +1,4 @@ export { default } from './FormControlLabel'; + +export { default as formControlLabelClasses } from './formControlLabelClasses'; +export * from './formControlLabelClasses'; From 72616cc337df2019a95fe6f052768dba4e118f6e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:45:46 +0100 Subject: [PATCH 06/18] pseudo classes can't be overriden from the theme --- packages/material-ui/src/FormControlLabel/FormControlLabel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 4bd4950284db91..9d088737102455 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -15,7 +15,6 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], - ...(styleProps.disabled && styles.disabled), ...(styleProps.noWrap && styles.noWrap), ...(styleProps.label && styles.label), }); From 0c240ce51f6d87a8bcc86f779d99169245da5889 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:46:46 +0100 Subject: [PATCH 07/18] noWrap doesn't exist --- .../material-ui/src/FormControlLabel/FormControlLabel.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 9d088737102455..bf228c01aa03da 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -15,7 +15,6 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], - ...(styleProps.noWrap && styles.noWrap), ...(styleProps.label && styles.label), }); }; @@ -59,11 +58,6 @@ export const FormControlLabelRoot = experimentalStyled( marginLeft: 16, }), ...(styleProps.disabled !== 'inherit' && {}), - ...(styleProps.noWrap && { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - }), ...(styleProps.label && { '&$disabled': { color: theme.palette.text.disabled, From e5411bb7a71c2ff96ed64120c789af24cfa43a8a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:48:39 +0100 Subject: [PATCH 08/18] label isn't applied on the root element --- .../material-ui/src/FormControlLabel/FormControlLabel.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index bf228c01aa03da..27b87ffd79c7a0 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -8,14 +8,16 @@ import Typography from '../Typography'; import capitalize from '../utils/capitalize'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; -import { getFormControlLabelUtilityClasses } from './formControlLabelClasses'; +import formControlLabelClasses, { + getFormControlLabelUtilityClasses, +} from './formControlLabelClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root || {}, { ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], - ...(styleProps.label && styles.label), + [`& .${formControlLabelClasses.label}`]: styles.label, }); }; From e66c92eabd4cd2ac97ec5eaf5fcc2f14ca2661ce Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:50:24 +0100 Subject: [PATCH 09/18] style rule reference & is JSS only --- packages/material-ui/src/FormControlLabel/FormControlLabel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 27b87ffd79c7a0..121ee27e50f058 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -43,7 +43,7 @@ export const FormControlLabelRoot = experimentalStyled( WebkitTapHighlightColor: 'transparent', marginLeft: -11, marginRight: 16, // used for row presentation of radio/checkbox - '&$disabled': { + '&.Mui-disabled': { cursor: 'default', }, ...(styleProps.labelPlacement === 'start' && { @@ -61,7 +61,7 @@ export const FormControlLabelRoot = experimentalStyled( }), ...(styleProps.disabled !== 'inherit' && {}), ...(styleProps.label && { - '&$disabled': { + '&.Mui-disabled': { color: theme.palette.text.disabled, }, }), From fbf9a505884b6bd3d1ec7755f21b4646224224a0 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:52:04 +0100 Subject: [PATCH 10/18] label is no on the root --- packages/material-ui/src/FormControlLabel/FormControlLabel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 121ee27e50f058..93733698e22a80 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -60,11 +60,11 @@ export const FormControlLabelRoot = experimentalStyled( marginLeft: 16, }), ...(styleProps.disabled !== 'inherit' && {}), - ...(styleProps.label && { + [`& .${formControlLabelClasses.label}`]: { '&.Mui-disabled': { color: theme.palette.text.disabled, }, - }), + }, })); /** From b9ce1f86ad3854377f1184ed60df7998b5c04ecd Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:52:20 +0100 Subject: [PATCH 11/18] remove dead code --- packages/material-ui/src/FormControlLabel/FormControlLabel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 93733698e22a80..11de2260b732ec 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -59,7 +59,6 @@ export const FormControlLabelRoot = experimentalStyled( flexDirection: 'column', marginLeft: 16, }), - ...(styleProps.disabled !== 'inherit' && {}), [`& .${formControlLabelClasses.label}`]: { '&.Mui-disabled': { color: theme.palette.text.disabled, From 2830aa2332016e00f58fa67fb0008dfc3a257e55 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:53:48 +0100 Subject: [PATCH 12/18] sort asc --- packages/material-ui/src/FormControlLabel/FormControlLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 11de2260b732ec..32b669818ca782 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -88,9 +88,9 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref const styleProps = { ...props, - labelPlacement, disabled: disabledProp, label, + labelPlacement, }; const muiFormControl = useFormControl(); From 33e681b5632d3a37cf49e43b1880e376df1d1e82 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 11:56:09 +0100 Subject: [PATCH 13/18] add global class names for the label slot --- .../material-ui/src/FormControlLabel/FormControlLabel.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 32b669818ca782..3750be2ce6eaa6 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -25,6 +25,7 @@ const useUtilityClasses = (styleProps) => { const { classes, disabled, labelPlacement } = styleProps; const slots = { root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`], + label: ['label', disabled && 'disabled'], }; return composeClasses(slots, getFormControlLabelUtilityClasses, classes); @@ -123,10 +124,7 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref {...other} > {React.cloneElement(control, controlProps)} - + {label} From aefc226e5afc3a7ab1328024b7bf59611a337cdf Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 12:06:52 +0100 Subject: [PATCH 14/18] should use the new conformance suite --- .../src/FormControlLabel/FormControlLabel.test.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js index 11284fb854ba02..b196f2b4a43012 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createMount, createClientRender, describeConformance } from 'test/utils'; +import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import FormControlLabel, { formControlLabelClasses as classes, } from '@material-ui/core/FormControlLabel'; @@ -8,15 +8,17 @@ import Checkbox from '@material-ui/core/Checkbox'; import FormControl from '@material-ui/core/FormControl'; describe('', () => { - const mount = createMount(); const render = createClientRender(); + const mount = createMount(); - describeConformance(} />, () => ({ + describeConformanceV5(} />, () => ({ classes, inheritComponent: 'label', + render, mount, + muiName: 'MuiFormControlLabel', refInstanceof: window.HTMLLabelElement, - skip: ['componentProp'], + skip: ['componentProp', 'componentsProp'], })); it('should render the label text inside an additional element', () => { From 73dcfdfb2a863277e7c139c925c691371b6a263b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 12:07:38 +0100 Subject: [PATCH 15/18] styleProps should be the internal state --- .../src/FormControlLabel/FormControlLabel.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 3750be2ce6eaa6..96a4671737f3bb 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -87,13 +87,6 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref ...other } = props; - const styleProps = { - ...props, - disabled: disabledProp, - label, - labelPlacement, - }; - const muiFormControl = useFormControl(); let disabled = disabledProp; @@ -114,6 +107,13 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref } }); + const styleProps = { + ...props, + disabled, + label, + labelPlacement, + }; + const classes = useUtilityClasses(styleProps); return ( From ab2612496499631992c3b440cc0b5c26c5ca3a87 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 12:10:31 +0100 Subject: [PATCH 16/18] yarn docs:api --- docs/pages/api-docs/form-control-label.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json index e9f014b875599f..47ea6afd6a65b2 100644 --- a/docs/pages/api-docs/form-control-label.json +++ b/docs/pages/api-docs/form-control-label.json @@ -34,6 +34,6 @@ "filename": "/packages/material-ui/src/FormControlLabel/FormControlLabel.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } From b5e50d231f54f54b996f959b487b8971054afa4e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 12:13:27 +0100 Subject: [PATCH 17/18] sx prop is now available --- docs/pages/api-docs/form-control-label.json | 1 + .../api-docs/form-control-label/form-control-label.json | 1 + .../material-ui/src/FormControlLabel/FormControlLabel.d.ts | 7 ++++++- .../material-ui/src/FormControlLabel/FormControlLabel.js | 4 ++++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json index 47ea6afd6a65b2..219a1be4b1c938 100644 --- a/docs/pages/api-docs/form-control-label.json +++ b/docs/pages/api-docs/form-control-label.json @@ -14,6 +14,7 @@ "default": "'end'" }, "onChange": { "type": { "name": "func" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } } }, "name": "FormControlLabel", diff --git a/docs/translations/api-docs/form-control-label/form-control-label.json b/docs/translations/api-docs/form-control-label/form-control-label.json index f4eb318f33c6ba..89843e43eade9b 100644 --- a/docs/translations/api-docs/form-control-label/form-control-label.json +++ b/docs/translations/api-docs/form-control-label/form-control-label.json @@ -9,6 +9,7 @@ "label": "The text to be used in an enclosing label element.", "labelPlacement": "The position of the label.", "onChange": "Callback fired when the state is changed.

Signature:
function(event: object) => void
event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).", + "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 component." }, "classDescriptions": { diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts index 2343a303fb1d29..261c20b4b979ec 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { Theme, InternalStandardProps as StandardProps } from '..'; export interface FormControlLabelProps extends StandardProps, 'children' | 'onChange'> { @@ -53,6 +54,10 @@ export interface FormControlLabelProps * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ onChange?: (event: React.SyntheticEvent, checked: boolean) => void; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; /** * The value of the component. */ diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 96a4671737f3bb..a32641f56b1469 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -180,6 +180,10 @@ FormControlLabel.propTypes = { * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ onChange: PropTypes.func, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The value of the component. */ From c9063994e68b17bffccbaff0292ee9e11273ec69 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 21 Feb 2021 13:08:16 +0100 Subject: [PATCH 18/18] add variant tests --- .../material-ui/src/FormControlLabel/FormControlLabel.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js index b196f2b4a43012..1078d489c265a8 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js @@ -17,6 +17,7 @@ describe('', () => { render, mount, muiName: 'MuiFormControlLabel', + testVariantProps: { disabled: true }, refInstanceof: window.HTMLLabelElement, skip: ['componentProp', 'componentsProp'], }));