From 188b94025d3ccc18b270bf342501867f319eadd2 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Sun, 29 May 2022 13:01:04 +0700 Subject: [PATCH] [Joy] use `textColor` prop for Typography and Link (#32938) --- docs/data/joy/components/badge/NumberBadge.js | 2 +- .../data/joy/components/badge/NumberBadge.tsx | 2 +- docs/data/joy/components/card/CardCovers.js | 8 ++-- docs/data/joy/components/card/CardCovers.tsx | 8 ++-- .../data/joy/components/card/GradientCover.js | 7 ++- .../joy/components/card/GradientCover.tsx | 7 ++- docs/data/joy/components/card/MediaCover.js | 4 +- docs/data/joy/components/card/MediaCover.tsx | 4 +- docs/data/joy/components/card/RowCard.js | 2 +- docs/data/joy/components/card/RowCard.tsx | 2 +- docs/pages/experiments/joy/checkbox.tsx | 4 +- docs/pages/experiments/joy/components.tsx | 4 +- docs/pages/experiments/joy/list.tsx | 10 ++-- docs/pages/experiments/joy/radio.tsx | 8 ++-- docs/pages/experiments/joy/switch.tsx | 14 +++--- docs/pages/experiments/joy/typography.tsx | 23 ++++++++-- packages/mui-joy/src/Link/Link.spec.tsx | 2 + packages/mui-joy/src/Link/Link.tsx | 12 ++++- packages/mui-joy/src/Link/LinkProps.ts | 4 ++ .../src/Typography/Typography.spec.tsx | 9 ++++ .../mui-joy/src/Typography/Typography.tsx | 46 ++++++++++++++++--- .../mui-joy/src/Typography/TypographyProps.ts | 28 +++++++++-- .../src/Typography/typographyClasses.ts | 30 ++++++++++++ 23 files changed, 183 insertions(+), 57 deletions(-) diff --git a/docs/data/joy/components/badge/NumberBadge.js b/docs/data/joy/components/badge/NumberBadge.js index 578bba2e8b6120..1902edb24a04b5 100644 --- a/docs/data/joy/components/badge/NumberBadge.js +++ b/docs/data/joy/components/badge/NumberBadge.js @@ -21,7 +21,7 @@ export default function ColorBadge() { setCount((c) => c - 1)}> - + {count} setCount((c) => c + 1)}> diff --git a/docs/data/joy/components/badge/NumberBadge.tsx b/docs/data/joy/components/badge/NumberBadge.tsx index 578bba2e8b6120..1902edb24a04b5 100644 --- a/docs/data/joy/components/badge/NumberBadge.tsx +++ b/docs/data/joy/components/badge/NumberBadge.tsx @@ -21,7 +21,7 @@ export default function ColorBadge() { setCount((c) => c - 1)}> - + {count} setCount((c) => c + 1)}> diff --git a/docs/data/joy/components/card/CardCovers.js b/docs/data/joy/components/card/CardCovers.js index 593e1ac9591b5f..a943b03223f89e 100644 --- a/docs/data/joy/components/card/CardCovers.js +++ b/docs/data/joy/components/card/CardCovers.js @@ -8,22 +8,22 @@ export default function CardCovers() { return ( - + 3 - + 2 - + 1 - + Content diff --git a/docs/data/joy/components/card/CardCovers.tsx b/docs/data/joy/components/card/CardCovers.tsx index 593e1ac9591b5f..a943b03223f89e 100644 --- a/docs/data/joy/components/card/CardCovers.tsx +++ b/docs/data/joy/components/card/CardCovers.tsx @@ -8,22 +8,22 @@ export default function CardCovers() { return ( - + 3 - + 2 - + 1 - + Content diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js index e3b149945ea071..1d971b49b5adc4 100644 --- a/docs/data/joy/components/card/GradientCover.js +++ b/docs/data/joy/components/card/GradientCover.js @@ -21,10 +21,13 @@ export default function GradientCover() { }} /> - + Yosemite National Park - } color="neutral.300"> + } + textColor="neutral.300" + > California, USA diff --git a/docs/data/joy/components/card/GradientCover.tsx b/docs/data/joy/components/card/GradientCover.tsx index e3b149945ea071..1d971b49b5adc4 100644 --- a/docs/data/joy/components/card/GradientCover.tsx +++ b/docs/data/joy/components/card/GradientCover.tsx @@ -21,10 +21,13 @@ export default function GradientCover() { }} /> - + Yosemite National Park - } color="neutral.300"> + } + textColor="neutral.300" + > California, USA diff --git a/docs/data/joy/components/card/MediaCover.js b/docs/data/joy/components/card/MediaCover.js index 3b1525fa2eab0b..8f935078ef3288 100644 --- a/docs/data/joy/components/card/MediaCover.js +++ b/docs/data/joy/components/card/MediaCover.js @@ -22,7 +22,7 @@ export default function BasicCard() { Image @@ -47,7 +47,7 @@ export default function BasicCard() { Video diff --git a/docs/data/joy/components/card/MediaCover.tsx b/docs/data/joy/components/card/MediaCover.tsx index 3b1525fa2eab0b..8f935078ef3288 100644 --- a/docs/data/joy/components/card/MediaCover.tsx +++ b/docs/data/joy/components/card/MediaCover.tsx @@ -22,7 +22,7 @@ export default function BasicCard() { Image @@ -47,7 +47,7 @@ export default function BasicCard() { Video diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js index 7c0eb6b7a1e0be..7397086cc07001 100644 --- a/docs/data/joy/components/card/RowCard.js +++ b/docs/data/joy/components/card/RowCard.js @@ -25,7 +25,7 @@ export default function InteractiveCard() { - + Yosemite Park California, USA diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx index 7c0eb6b7a1e0be..7397086cc07001 100644 --- a/docs/data/joy/components/card/RowCard.tsx +++ b/docs/data/joy/components/card/RowCard.tsx @@ -25,7 +25,7 @@ export default function InteractiveCard() { - + Yosemite Park California, USA diff --git a/docs/pages/experiments/joy/checkbox.tsx b/docs/pages/experiments/joy/checkbox.tsx index a8bfa985fa3816..263aa76ebec259 100644 --- a/docs/pages/experiments/joy/checkbox.tsx +++ b/docs/pages/experiments/joy/checkbox.tsx @@ -279,13 +279,13 @@ export default function JoyCheckbox() { > - + 8 - + 24 diff --git a/docs/pages/experiments/joy/components.tsx b/docs/pages/experiments/joy/components.tsx index 54ac845f06c49f..a38e639218f40a 100644 --- a/docs/pages/experiments/joy/components.tsx +++ b/docs/pages/experiments/joy/components.tsx @@ -318,8 +318,8 @@ const components: { $} - endDecorator={USD} + startDecorator={$} + endDecorator={USD} {...props} /> } {...props} /> diff --git a/docs/pages/experiments/joy/list.tsx b/docs/pages/experiments/joy/list.tsx index e730d8c33e22c1..b6a458d1cd1389 100644 --- a/docs/pages/experiments/joy/list.tsx +++ b/docs/pages/experiments/joy/list.tsx @@ -854,9 +854,9 @@ export default function JoyList() {
Brunch this weekend? - + Ali Connors{' '} - + {' '} — I'll be in your neighborhood doing errands this… @@ -878,9 +878,9 @@ export default function JoyList() {
Summer BBQ - + to Scott, Alex, Jennifer{' '} - + {' '} — Wish I could come, but I'm out of town this… @@ -1092,7 +1092,7 @@ export default function JoyList() { - Large size + Large size diff --git a/docs/pages/experiments/joy/radio.tsx b/docs/pages/experiments/joy/radio.tsx index 20f8f4bd42a1ad..0c5d24072ce2e2 100644 --- a/docs/pages/experiments/joy/radio.tsx +++ b/docs/pages/experiments/joy/radio.tsx @@ -116,7 +116,7 @@ export default function JoyRadio() { - + This might make your pizza too crispy. @@ -276,7 +276,7 @@ export default function JoyRadio() { variant="soft" sx={{ p: 2, display: 'flex', gap: 2, my: 2, borderRadius: '18px' }} > - + Choose from two anti-reflective glass options. {' '} @@ -391,13 +391,13 @@ export default function JoyRadio() { Small
- + Description $40
- + per month diff --git a/docs/pages/experiments/joy/switch.tsx b/docs/pages/experiments/joy/switch.tsx index 8cc84ef773c32e..3b3b8919d55d5a 100644 --- a/docs/pages/experiments/joy/switch.tsx +++ b/docs/pages/experiments/joy/switch.tsx @@ -142,7 +142,7 @@ export default function JoySwitch() { - Fluent + Fluent {( [ { checked: false, variant: 'outlined' }, @@ -183,7 +183,7 @@ export default function JoySwitch() { ))} - iOS + iOS {( [ { checked: false }, @@ -211,7 +211,7 @@ export default function JoySwitch() { ))} - strapi + strapi {( [ { checked: false, color: 'danger' }, @@ -236,7 +236,7 @@ export default function JoySwitch() { ))} - Material + Material {( [ { checked: false, variant: 'solid' }, @@ -274,7 +274,7 @@ export default function JoySwitch() { ))} - Chakra UI + Chakra UI {[ { checked: false }, { checked: true }, @@ -303,7 +303,7 @@ export default function JoySwitch() { ))} - Tailwind UI + Tailwind UI {([{ checked: false }, { checked: true, color: 'info' }] as const).map( (data, index) => ( - Mantine + Mantine {( [ { checked: false, variant: 'outlined' }, diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx index 8ebe58fb94f551..69f15bea4e1dbe 100644 --- a/docs/pages/experiments/joy/typography.tsx +++ b/docs/pages/experiments/joy/typography.tsx @@ -121,11 +121,11 @@ export default function JoyTypography() { Keep me updated about the new features and upcoming improvements (by doing this you accept the{' '} - }> + }> Terms {' '} and the{' '} - }> + }> privacy policy ). @@ -134,7 +134,7 @@ export default function JoyTypography() { + 20 } @@ -143,7 +143,7 @@ export default function JoyTypography() { + 7 } @@ -174,7 +174,7 @@ export default function JoyTypography() { fontSize="xl4" lineHeight={1} startDecorator={ - + $ } @@ -212,6 +212,19 @@ export default function JoyTypography() { mollit anim id est laborum. + + } + py={1} + px={1} + borderRadius="xs" + display="inline-flex" + > + This is a test. + + ); diff --git a/packages/mui-joy/src/Link/Link.spec.tsx b/packages/mui-joy/src/Link/Link.spec.tsx index 1ffe15105aed83..4f4e2582a88631 100644 --- a/packages/mui-joy/src/Link/Link.spec.tsx +++ b/packages/mui-joy/src/Link/Link.spec.tsx @@ -18,6 +18,8 @@ import * as React from 'react'; ; ; +; + // `level` ; ; diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx index 07be300a1ede72..79edd8c72ece7d 100644 --- a/packages/mui-joy/src/Link/Link.tsx +++ b/packages/mui-joy/src/Link/Link.tsx @@ -145,14 +145,18 @@ const LinkRoot = styled('a', { }); const Link = React.forwardRef(function Link(inProps, ref) { - const { color = 'primary', ...themeProps } = useThemeProps({ + const { + color = 'primary', + textColor, + ...themeProps + } = useThemeProps({ props: inProps, name: 'JoyLink', }); const nested = React.useContext(TypographyContext); - const props = extendSxProp(themeProps) as LinkProps; + const props = extendSxProp({ ...themeProps, color: textColor }) as LinkProps; const { className, @@ -309,6 +313,10 @@ Link.propTypes /* remove-proptypes */ = { PropTypes.func, PropTypes.object, ]), + /** + * The system color. + */ + textColor: PropTypes /* @typescript-to-proptypes-ignore */.any, /** * Controls when the link should have an underline. * @default 'hover' diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts index ae2aca962cb2ab..53d0bfd55956ac 100644 --- a/packages/mui-joy/src/Link/LinkProps.ts +++ b/packages/mui-joy/src/Link/LinkProps.ts @@ -46,6 +46,10 @@ export interface LinkTypeMap

{ * @default false */ overlay?: boolean; + /** + * The system color. + */ + textColor?: SystemProps['color']; /** * Element placed before the children. */ diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx index 7119c70dceeeb8..cc9ee602a7e313 100644 --- a/packages/mui-joy/src/Typography/Typography.spec.tsx +++ b/packages/mui-joy/src/Typography/Typography.spec.tsx @@ -16,3 +16,12 @@ function Link(props: JSX.IntrinsicElements['a']) { Text ; + +; +; +; +; +; +; + +; diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index 615bd05cd461ff..59ae229481117a 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { OverridableComponent } from '@mui/types'; +import { unstable_capitalize as capitalize } from '@mui/utils'; import { unstable_extendSxProp as extendSxProp } from '@mui/system'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import { TypographyTypeMap, TypographyProps } from './TypographyProps'; @@ -12,10 +13,17 @@ import { getTypographyUtilityClass } from './typographyClasses'; export const TypographyContext = React.createContext(false); const useUtilityClasses = (ownerState: TypographyProps) => { - const { gutterBottom, noWrap, level } = ownerState; + const { gutterBottom, noWrap, level, color, variant } = ownerState; const slots = { - root: ['root', level, gutterBottom && 'gutterBottom', noWrap && 'noWrap'], + root: [ + 'root', + level, + gutterBottom && 'gutterBottom', + noWrap && 'noWrap', + color && `color${capitalize(color)}`, + variant && `variant${capitalize(variant)}`, + ], startDecorator: ['startDecorator'], endDecorator: ['endDecorator'], }; @@ -81,6 +89,11 @@ const TypographyRoot = styled('span', { ...(ownerState.gutterBottom && { marginBottom: '0.35em', }), + ...(ownerState.variant && { + paddingInline: '0.25em', // better than left, right because it also works with writing mode. + marginInline: '-0.25em', + ...theme.variants[ownerState.variant]?.[ownerState.color!], + }), })); const defaultVariantMapping: Record = { @@ -97,19 +110,22 @@ const defaultVariantMapping: Record = { }; const Typography = React.forwardRef(function Typography(inProps, ref) { - const themeProps = useThemeProps({ + const { + color: colorThemeProp, + textColor, + ...themeProps + } = useThemeProps({ props: inProps, name: 'JoyTypography', }); const nested = React.useContext(TypographyContext); - const props = extendSxProp(themeProps); + const props = extendSxProp({ ...themeProps, color: textColor }) as TypographyProps; const { className, component, - color, // declare to prevent type error spread to TypographyRoot gutterBottom = false, noWrap = false, level: levelProp = 'body1', @@ -117,9 +133,12 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { children, endDecorator, startDecorator, + variant = colorThemeProp ? 'plain' : undefined, ...other } = props; + const color = colorThemeProp || (variant ? 'neutral' : undefined); + const level = nested ? inProps.level || 'inherit' : levelProp; const ownerState = { @@ -127,9 +146,11 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { level, className, component, + color, gutterBottom, noWrap, nested, + variant, }; const Component = @@ -181,9 +202,12 @@ Typography.propTypes /* remove-proptypes */ = { */ className: PropTypes.string, /** - * @ignore + * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes /* @typescript-to-proptypes-ignore */.any, + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['context', 'danger', 'info', 'neutral', 'primary', 'success', 'warning']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -245,6 +269,14 @@ Typography.propTypes /* remove-proptypes */ = { PropTypes.func, PropTypes.object, ]), + /** + * The system color. + */ + textColor: PropTypes /* @typescript-to-proptypes-ignore */.any, + /** + * The variant to use. + */ + variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), } as any; export default Typography; diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts index a94568385c8267..799320395cdc81 100644 --- a/packages/mui-joy/src/Typography/TypographyProps.ts +++ b/packages/mui-joy/src/Typography/TypographyProps.ts @@ -1,13 +1,23 @@ import * as React from 'react'; -import { OverrideProps } from '@mui/types'; +import { OverrideProps, OverridableStringUnion } from '@mui/types'; import { TypographyClasses } from './typographyClasses'; -import { TypographySystem, SxProps, SystemProps } from '../styles/types'; +import { + ColorPaletteProp, + TypographySystem, + SxProps, + SystemProps, + VariantProp, +} from '../styles/types'; export type TypographySlot = 'root' | 'startDecorator' | 'endDecorator'; +export interface TypographyPropsColorOverrides {} + +export interface TypographyPropsVariantOverrides {} + export interface TypographyTypeMap

{ props: P & - SystemProps & { + Omit & { /** * The content of the component. */ @@ -16,6 +26,10 @@ export interface TypographyTypeMap

* Override or extend the styles applied to the component. */ classes?: Partial; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color?: OverridableStringUnion; /** * Element placed after the children. */ @@ -61,10 +75,18 @@ export interface TypographyTypeMap

* Element placed before the children. */ startDecorator?: React.ReactNode; + /** + * The system color. + */ + textColor?: SystemProps['color']; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; + /** + * The variant to use. + */ + variant?: OverridableStringUnion; }; defaultComponent: D; } diff --git a/packages/mui-joy/src/Typography/typographyClasses.ts b/packages/mui-joy/src/Typography/typographyClasses.ts index 7b3558c496f5ae..e007d51c4d8e8e 100644 --- a/packages/mui-joy/src/Typography/typographyClasses.ts +++ b/packages/mui-joy/src/Typography/typographyClasses.ts @@ -29,6 +29,26 @@ export interface TypographyClasses { startDecorator: string; /** Styles applied to the endDecorator element */ endDecorator: string; + /** Styles applied to the root element if `color="primary"`. */ + colorPrimary: string; + /** Styles applied to the root element if `color="neutral"`. */ + colorNeutral: string; + /** Styles applied to the root element if `color="danger"`. */ + colorDanger: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; + /** Styles applied to the root element if `variant="plain"`. */ + variantPlain: string; + /** Styles applied to the root element if `variant="outlined"`. */ + variantOutlined: string; + /** Styles applied to the root element if `variant="soft"`. */ + variantSoft: string; + /** Styles applied to the root element if `variant="solid"`. */ + variantSolid: string; } export type TypographyClassKey = keyof TypographyClasses; @@ -52,6 +72,16 @@ const typographyClasses: TypographyClasses = generateUtilityClasses('JoyTypograp 'gutterBottom', 'startDecorator', 'endDecorator', + 'colorPrimary', + 'colorNeutral', + 'colorDanger', + 'colorInfo', + 'colorSuccess', + 'colorWarning', + 'variantPlain', + 'variantOutlined', + 'variantSoft', + 'variantSolid', ]); export default typographyClasses;