From fb70d0f7b0e6caf23e44f23b394eec43ea89f0a4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 13:36:23 +0700 Subject: [PATCH 1/7] remove display="block" --- packages/mui-material/src/CardHeader/CardHeader.js | 7 ++++--- .../mui-material/src/FormControlLabel/FormControlLabel.js | 5 ++--- packages/mui-material/src/ListItemText/ListItemText.js | 7 ++++--- packages/mui-material/src/Typography/Typography.js | 1 + 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 579117c64bafc8..c316954a5b45c6 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography from '../Typography'; +import Typography, { typographyClasses } from '../Typography'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; @@ -35,6 +35,9 @@ const CardHeaderRoot = styled('div', { display: 'flex', alignItems: 'center', padding: 16, + [`& > .${typographyClasses.root}`]: { + '--Typography-display': 'block', + }, }); const CardHeaderAvatar = styled('div', { @@ -97,7 +100,6 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { variant={avatar ? 'body2' : 'h5'} className={classes.title} component="span" - display="block" {...titleTypographyProps} > {title} @@ -113,7 +115,6 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { className={classes.subheader} color="textSecondary" component="span" - display="block" {...subheaderTypographyProps} > {subheader} diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js index a277055f179a5c..9801c7aef896fb 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js @@ -7,7 +7,6 @@ import composeClasses from '@mui/utils/composeClasses'; import { useFormControl } from '../FormControl'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; -import Stack from '../Stack'; import Typography from '../Typography'; import capitalize from '../utils/capitalize'; import formControlLabelClasses, { @@ -195,12 +194,12 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref > {React.cloneElement(control, controlProps)} {required ? ( - +
{label}  {'*'} - +
) : ( label )} diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js index 51379b3d523836..ef01ef7a0acb05 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography from '../Typography'; +import Typography, { typographyClasses } from '../Typography'; import ListContext from '../List/ListContext'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -41,6 +41,9 @@ const ListItemTextRoot = styled('div', { minWidth: 0, marginTop: 4, marginBottom: 4, + [`& > .${typographyClasses.root}`]: { + '--Typography-display': 'block', + }, variants: [ { props: ({ ownerState }) => ownerState.primary && ownerState.secondary, @@ -93,7 +96,6 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant={dense ? 'body2' : 'body1'} className={classes.primary} component={primaryTypographyProps?.variant ? undefined : 'span'} - display="block" {...primaryTypographyProps} > {primary} @@ -107,7 +109,6 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant="body2" className={classes.secondary} color="textSecondary" - display="block" {...secondaryTypographyProps} > {secondary} diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 9ba5bdffcec985..742f6afdca0907 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -56,6 +56,7 @@ export const TypographyRoot = styled('span', { }, })(({ theme }) => ({ margin: 0, + display: 'var(--Typography-display)', variants: [ { props: { From 165acde76f1336691a016e7fac2ed8033e27aa7b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 14:04:38 +0700 Subject: [PATCH 2/7] add default display --- packages/mui-material/src/Typography/Typography.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 742f6afdca0907..30d5ab33058c20 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -56,8 +56,9 @@ export const TypographyRoot = styled('span', { }, })(({ theme }) => ({ margin: 0, - display: 'var(--Typography-display)', + display: 'var(--Typography-display, block)', variants: [ + { props: { as: 'span' }, style: { display: 'var(--Typography-display, inline)' } }, { props: { variant: 'inherit', From 089f9dfe272cdd55d3a1436574c3604f7a3be62f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 15:04:25 +0700 Subject: [PATCH 3/7] style should be on CardHeaderContent --- packages/mui-material/src/CardHeader/CardHeader.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index c316954a5b45c6..43f02969e06760 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -35,9 +35,6 @@ const CardHeaderRoot = styled('div', { display: 'flex', alignItems: 'center', padding: 16, - [`& > .${typographyClasses.root}`]: { - '--Typography-display': 'block', - }, }); const CardHeaderAvatar = styled('div', { @@ -68,6 +65,9 @@ const CardHeaderContent = styled('div', { overridesResolver: (props, styles) => styles.content, })({ flex: '1 1 auto', + [`& > .${typographyClasses.root}`]: { + '--Typography-display': 'block', + }, }); const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { From 1807ae7be639ca7ce7d3180e423e3186a07e155e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 15:10:41 +0700 Subject: [PATCH 4/7] use inline for tag --- packages/mui-material/src/Typography/Typography.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 30d5ab33058c20..36c01f508b5232 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -58,7 +58,10 @@ export const TypographyRoot = styled('span', { margin: 0, display: 'var(--Typography-display, block)', variants: [ - { props: { as: 'span' }, style: { display: 'var(--Typography-display, inline)' } }, + { + props: (props) => props.as === 'span' || props.as === 'a', + style: { display: 'var(--Typography-display, inline)' }, + }, { props: { variant: 'inherit', From 449631f936e1afc2df8ebfa8d2f33720a53e1235 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 16:14:08 +0700 Subject: [PATCH 5/7] add display inline to override Typography --- packages/mui-material/src/Link/Link.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index a452e41828657e..eaa95cc0d6ecb0 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -54,6 +54,7 @@ const LinkRoot = styled(Typography, { }, })(({ theme }) => { return { + display: 'inline', variants: [ { props: { From 2c411f5100de7a4c36b8056a22bb340a3926bddc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 15 Aug 2024 23:46:31 +0700 Subject: [PATCH 6/7] revert changes --- packages/mui-material/src/CardHeader/CardHeader.js | 7 +++---- packages/mui-material/src/Link/Link.js | 1 - packages/mui-material/src/ListItemText/ListItemText.js | 7 +++---- packages/mui-material/src/Typography/Typography.js | 5 ----- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 43f02969e06760..579117c64bafc8 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography, { typographyClasses } from '../Typography'; +import Typography from '../Typography'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; @@ -65,9 +65,6 @@ const CardHeaderContent = styled('div', { overridesResolver: (props, styles) => styles.content, })({ flex: '1 1 auto', - [`& > .${typographyClasses.root}`]: { - '--Typography-display': 'block', - }, }); const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { @@ -100,6 +97,7 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { variant={avatar ? 'body2' : 'h5'} className={classes.title} component="span" + display="block" {...titleTypographyProps} > {title} @@ -115,6 +113,7 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { className={classes.subheader} color="textSecondary" component="span" + display="block" {...subheaderTypographyProps} > {subheader} diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index eaa95cc0d6ecb0..a452e41828657e 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -54,7 +54,6 @@ const LinkRoot = styled(Typography, { }, })(({ theme }) => { return { - display: 'inline', variants: [ { props: { diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js index ef01ef7a0acb05..51379b3d523836 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography, { typographyClasses } from '../Typography'; +import Typography from '../Typography'; import ListContext from '../List/ListContext'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -41,9 +41,6 @@ const ListItemTextRoot = styled('div', { minWidth: 0, marginTop: 4, marginBottom: 4, - [`& > .${typographyClasses.root}`]: { - '--Typography-display': 'block', - }, variants: [ { props: ({ ownerState }) => ownerState.primary && ownerState.secondary, @@ -96,6 +93,7 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant={dense ? 'body2' : 'body1'} className={classes.primary} component={primaryTypographyProps?.variant ? undefined : 'span'} + display="block" {...primaryTypographyProps} > {primary} @@ -109,6 +107,7 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant="body2" className={classes.secondary} color="textSecondary" + display="block" {...secondaryTypographyProps} > {secondary} diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 36c01f508b5232..9ba5bdffcec985 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -56,12 +56,7 @@ export const TypographyRoot = styled('span', { }, })(({ theme }) => ({ margin: 0, - display: 'var(--Typography-display, block)', variants: [ - { - props: (props) => props.as === 'span' || props.as === 'a', - style: { display: 'var(--Typography-display, inline)' }, - }, { props: { variant: 'inherit', From 43c3ae17a928cf3c13b1313a61b9a14c5de84f8d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 16 Aug 2024 10:24:55 +0700 Subject: [PATCH 7/7] remove display block --- packages/mui-material/src/CardHeader/CardHeader.js | 10 +++++++--- packages/mui-material/src/ListItemText/ListItemText.js | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 579117c64bafc8..80471366956899 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography from '../Typography'; +import Typography, { typographyClasses } from '../Typography'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; @@ -65,6 +65,12 @@ const CardHeaderContent = styled('div', { overridesResolver: (props, styles) => styles.content, })({ flex: '1 1 auto', + [`.${typographyClasses.root}:where(& .${cardHeaderClasses.title})`]: { + display: 'block', + }, + [`.${typographyClasses.root}:where(& .${cardHeaderClasses.subheader})`]: { + display: 'block', + }, }); const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { @@ -97,7 +103,6 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { variant={avatar ? 'body2' : 'h5'} className={classes.title} component="span" - display="block" {...titleTypographyProps} > {title} @@ -113,7 +118,6 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { className={classes.subheader} color="textSecondary" component="span" - display="block" {...subheaderTypographyProps} > {subheader} diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js index 51379b3d523836..08358c5877ad8e 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import Typography from '../Typography'; +import Typography, { typographyClasses } from '../Typography'; import ListContext from '../List/ListContext'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -41,6 +41,12 @@ const ListItemTextRoot = styled('div', { minWidth: 0, marginTop: 4, marginBottom: 4, + [`.${typographyClasses.root}:where(& .${listItemTextClasses.primary})`]: { + display: 'block', + }, + [`.${typographyClasses.root}:where(& .${listItemTextClasses.secondary})`]: { + display: 'block', + }, variants: [ { props: ({ ownerState }) => ownerState.primary && ownerState.secondary, @@ -93,7 +99,6 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant={dense ? 'body2' : 'body1'} className={classes.primary} component={primaryTypographyProps?.variant ? undefined : 'span'} - display="block" {...primaryTypographyProps} > {primary} @@ -107,7 +112,6 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { variant="body2" className={classes.secondary} color="textSecondary" - display="block" {...secondaryTypographyProps} > {secondary}