From 2a5469dcb2de05873bf98a56301048075ee48811 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 18 Aug 2023 00:11:35 +0700 Subject: [PATCH] [Joy] Miscellaneous fixes (#38462) --- .../aspect-ratio/FlexAspectRatio.js | 51 +++++++++++++++++++ .../aspect-ratio/FlexAspectRatio.tsx | 51 +++++++++++++++++++ .../components/aspect-ratio/FlexRowRatio.js | 7 ++- .../components/aspect-ratio/FlexRowRatio.tsx | 7 ++- .../components/aspect-ratio/aspect-ratio.md | 4 ++ .../joy/components/button/ButtonDisabled.js | 9 ++-- .../joy/components/button/ButtonDisabled.tsx | 9 ++-- .../button/ButtonDisabled.tsx.preview | 8 +-- .../data/joy/components/button/IconButtons.js | 42 ++++++++++----- .../joy/components/button/IconButtons.tsx | 42 ++++++++++----- .../components/button/IconButtons.tsx.preview | 12 ----- docs/data/joy/components/card/CardUsage.js | 21 ++++++-- .../data/joy/components/card/CardVariables.js | 4 +- docs/data/joy/components/card/DribbbleShot.js | 14 ++++- .../data/joy/components/card/DribbbleShot.tsx | 14 ++++- .../data/joy/components/card/GradientCover.js | 2 +- .../joy/components/card/GradientCover.tsx | 2 +- .../data/joy/components/card/InstagramPost.js | 6 +-- .../joy/components/card/InstagramPost.tsx | 6 +-- docs/data/joy/components/card/LicenseCard.js | 5 +- docs/data/joy/components/card/LicenseCard.tsx | 5 +- .../card/MultipleInteractionCard.js | 18 ++----- .../card/MultipleInteractionCard.tsx | 18 ++----- docs/data/joy/components/card/RowCard.js | 2 +- docs/data/joy/components/card/RowCard.tsx | 2 +- docs/data/joy/components/card/UserCard.js | 2 +- docs/data/joy/components/card/UserCard.tsx | 2 +- .../components/skeleton/AnimationSkeleton.js | 2 +- .../components/skeleton/AnimationSkeleton.tsx | 2 +- .../typography/DecoratorExamples.js | 40 +++++++-------- .../typography/DecoratorExamples.tsx | 40 +++++++-------- .../components/typography/TypographyUsage.js | 17 ++++++- docs/pages/joy-ui/api/aspect-ratio.json | 1 + docs/pages/joy-ui/api/tab.json | 2 +- .../aspect-ratio/aspect-ratio.json | 3 ++ examples/joy-ui-cra-ts/public/index.html | 2 +- .../src/components/ThemeRegistry/theme.js | 7 +-- examples/joy-ui-vite-ts/index.html | 2 +- .../mui-joy/src/AspectRatio/AspectRatio.tsx | 10 ++++ .../src/AspectRatio/AspectRatioProps.ts | 6 +++ .../mui-joy/src/Breadcrumbs/Breadcrumbs.tsx | 3 ++ packages/mui-joy/src/Card/Card.tsx | 4 +- .../mui-joy/src/CardContent/CardContent.tsx | 3 +- .../mui-joy/src/CardOverflow/CardOverflow.tsx | 2 + .../mui-joy/src/IconButton/IconButton.tsx | 5 +- .../src/ListItemButton/ListItemButton.tsx | 9 ++-- .../mui-joy/src/ModalClose/ModalClose.tsx | 1 + packages/mui-joy/src/Tab/Tab.tsx | 3 ++ packages/mui-joy/src/Tab/TabProps.ts | 1 + packages/mui-joy/src/TabList/TabList.tsx | 2 + .../mui-joy/src/Typography/Typography.tsx | 1 + packages/mui-joy/src/styles/extendTheme.ts | 12 ++--- .../mui-joy/src/styles/variantUtils.test.js | 1 + packages/mui-joy/src/styles/variantUtils.ts | 3 +- 54 files changed, 368 insertions(+), 181 deletions(-) create mode 100644 docs/data/joy/components/aspect-ratio/FlexAspectRatio.js create mode 100644 docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx delete mode 100644 docs/data/joy/components/button/IconButtons.tsx.preview diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js new file mode 100644 index 00000000000000..77231380c14406 --- /dev/null +++ b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js @@ -0,0 +1,51 @@ +import * as React from 'react'; +import AspectRatio from '@mui/joy/AspectRatio'; +import Button from '@mui/joy/Button'; +import Card from '@mui/joy/Card'; +import CardContent from '@mui/joy/CardContent'; +import CardActions from '@mui/joy/CardActions'; +import Typography from '@mui/joy/Typography'; +import Stack from '@mui/joy/Stack'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Switch from '@mui/joy/Switch'; + +export default function FlexAspectRatio() { + const [flex, setFlex] = React.useState(false); + return ( + + + Flex + setFlex(event.target.checked)} /> + + + + + 21 / 9 + + + + 20 APR 2023 + + Widget Title + + + Lorem ipsum is placeholder text commonly used in the graphic. + + + + + + + + + ); +} diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx new file mode 100644 index 00000000000000..77231380c14406 --- /dev/null +++ b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import AspectRatio from '@mui/joy/AspectRatio'; +import Button from '@mui/joy/Button'; +import Card from '@mui/joy/Card'; +import CardContent from '@mui/joy/CardContent'; +import CardActions from '@mui/joy/CardActions'; +import Typography from '@mui/joy/Typography'; +import Stack from '@mui/joy/Stack'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Switch from '@mui/joy/Switch'; + +export default function FlexAspectRatio() { + const [flex, setFlex] = React.useState(false); + return ( + + + Flex + setFlex(event.target.checked)} /> + + + + + 21 / 9 + + + + 20 APR 2023 + + Widget Title + + + Lorem ipsum is placeholder text commonly used in the graphic. + + + + + + + + + ); +} diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js index f49c7fedcb5fd5..7b9a3b58e00f42 100644 --- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js +++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js @@ -11,7 +11,12 @@ export default function FlexRowRatio() { const [flexBasis, setFlexBasis] = React.useState(200); return ( - + - + - - - - diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx b/docs/data/joy/components/button/ButtonDisabled.tsx index a7ca9574d455ad..d9906283713ba0 100644 --- a/docs/data/joy/components/button/ButtonDisabled.tsx +++ b/docs/data/joy/components/button/ButtonDisabled.tsx @@ -1,20 +1,21 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; +import Add from '@mui/icons-material/Add'; export default function ButtonDisabled() { return ( - - - - diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx.preview b/docs/data/joy/components/button/ButtonDisabled.tsx.preview index 581633010eb3c6..13ea946ce28f36 100644 --- a/docs/data/joy/components/button/ButtonDisabled.tsx.preview +++ b/docs/data/joy/components/button/ButtonDisabled.tsx.preview @@ -1,12 +1,12 @@ - - - - \ No newline at end of file diff --git a/docs/data/joy/components/button/IconButtons.js b/docs/data/joy/components/button/IconButtons.js index 289bba347eb90d..c9c2c292866683 100644 --- a/docs/data/joy/components/button/IconButtons.js +++ b/docs/data/joy/components/button/IconButtons.js @@ -1,23 +1,37 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import IconButton from '@mui/joy/IconButton'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Stack from '@mui/joy/Stack'; +import Switch from '@mui/joy/Switch'; import FavoriteBorder from '@mui/icons-material/FavoriteBorder'; export default function IconButtons() { + const [disabled, setDisabled] = React.useState(false); return ( - - - - - - - - - - - - - - + + + Disabled + setDisabled(event.target.checked)} + /> + + + + + + + + + + + + + + + + ); } diff --git a/docs/data/joy/components/button/IconButtons.tsx b/docs/data/joy/components/button/IconButtons.tsx index 289bba347eb90d..c9c2c292866683 100644 --- a/docs/data/joy/components/button/IconButtons.tsx +++ b/docs/data/joy/components/button/IconButtons.tsx @@ -1,23 +1,37 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import IconButton from '@mui/joy/IconButton'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Stack from '@mui/joy/Stack'; +import Switch from '@mui/joy/Switch'; import FavoriteBorder from '@mui/icons-material/FavoriteBorder'; export default function IconButtons() { + const [disabled, setDisabled] = React.useState(false); return ( - - - - - - - - - - - - - - + + + Disabled + setDisabled(event.target.checked)} + /> + + + + + + + + + + + + + + + + ); } diff --git a/docs/data/joy/components/button/IconButtons.tsx.preview b/docs/data/joy/components/button/IconButtons.tsx.preview deleted file mode 100644 index c647fee803de2c..00000000000000 --- a/docs/data/joy/components/button/IconButtons.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js index dc8bd35863185e..ba42e3bf0d369f 100644 --- a/docs/data/joy/components/card/CardUsage.js +++ b/docs/data/joy/components/card/CardUsage.js @@ -13,7 +13,7 @@ export default function CardUsage() { data={[ { propName: 'variant', - knob: 'select', + knob: 'radio', defaultValue: 'plain', options: ['plain', 'outlined', 'soft', 'solid'], }, @@ -42,9 +42,10 @@ export default function CardUsage() { sx={{ m: 1, mb: 4, + maxWidth: 350, }} > - + - - Yosemite + NATIONAL PARK + + Yosemite - Your Next Adventure + + + Yosemite National Park is in California’s Sierra Nevada mountains. - April 24 to May 02, 2021 + diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js index 0092a7a16f8c5f..b9ec0bce435847 100644 --- a/docs/data/joy/components/card/CardVariables.js +++ b/docs/data/joy/components/card/CardVariables.js @@ -143,7 +143,7 @@ export default function CardVariables() { backdropFilter: 'blur(4px)', }} /> - + 70% + + Card title diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js index 183c013ecb5c2e..e0e19cbbec429a 100644 --- a/docs/data/joy/components/card/DribbbleShot.js +++ b/docs/data/joy/components/card/DribbbleShot.js @@ -72,10 +72,20 @@ export default function DribbbleShot() { Yosemite - + - + diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx index 183c013ecb5c2e..e0e19cbbec429a 100644 --- a/docs/data/joy/components/card/DribbbleShot.tsx +++ b/docs/data/joy/components/card/DribbbleShot.tsx @@ -72,10 +72,20 @@ export default function DribbbleShot() { Yosemite - + - + diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js index c053fe11476ebb..d901e363ad64d5 100644 --- a/docs/data/joy/components/card/GradientCover.js +++ b/docs/data/joy/components/card/GradientCover.js @@ -23,7 +23,7 @@ export default function GradientCover() { }} /> - + Yosemite National Park - + Yosemite National Park - + @@ -138,12 +138,12 @@ export default function InstagramPost() { variant="plain" size="sm" placeholder="Add a comment…" - sx={{ flexGrow: 1, mr: 1, '--Input-focusedThickness': '0px' }} + sx={{ flex: 1, px: 0, '--Input-focusedThickness': '0px' }} /> Post - + ); } diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx index 67897411e48e69..6ae581bd1edeab 100644 --- a/docs/data/joy/components/card/InstagramPost.tsx +++ b/docs/data/joy/components/card/InstagramPost.tsx @@ -130,7 +130,7 @@ export default function InstagramPost() { 2 DAYS AGO - + @@ -138,12 +138,12 @@ export default function InstagramPost() { variant="plain" size="sm" placeholder="Add a comment…" - sx={{ flexGrow: 1, mr: 1, '--Input-focusedThickness': '0px' }} + sx={{ flex: 1, px: 0, '--Input-focusedThickness': '0px' }} /> Post - + ); } diff --git a/docs/data/joy/components/card/LicenseCard.js b/docs/data/joy/components/card/LicenseCard.js index 768fc3e65476d1..8a04284841e7c0 100644 --- a/docs/data/joy/components/card/LicenseCard.js +++ b/docs/data/joy/components/card/LicenseCard.js @@ -2,6 +2,7 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import Card from '@mui/joy/Card'; +import CardContent from '@mui/joy/CardContent'; import CardActions from '@mui/joy/CardActions'; import Chip from '@mui/joy/Chip'; import Typography from '@mui/joy/Typography'; @@ -37,13 +38,13 @@ export default function LicenseCard() { -
+ Individual License This license allows you to use the Symbol System Design with unlimited amount of personal and commercial projects. -
+ diff --git a/docs/data/joy/components/card/LicenseCard.tsx b/docs/data/joy/components/card/LicenseCard.tsx index 768fc3e65476d1..8a04284841e7c0 100644 --- a/docs/data/joy/components/card/LicenseCard.tsx +++ b/docs/data/joy/components/card/LicenseCard.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import Card from '@mui/joy/Card'; +import CardContent from '@mui/joy/CardContent'; import CardActions from '@mui/joy/CardActions'; import Chip from '@mui/joy/Chip'; import Typography from '@mui/joy/Typography'; @@ -37,13 +38,13 @@ export default function LicenseCard() { -
+ Individual License This license allows you to use the Symbol System Design with unlimited amount of personal and commercial projects. -
+ diff --git a/docs/data/joy/components/card/MultipleInteractionCard.js b/docs/data/joy/components/card/MultipleInteractionCard.js index 768d7a305b8706..93d4107f7548bc 100644 --- a/docs/data/joy/components/card/MultipleInteractionCard.js +++ b/docs/data/joy/components/card/MultipleInteractionCard.js @@ -44,26 +44,16 @@ export default function MultipleInteractionCard() { Yosemite National Park - + California - + - - 6.3k views - + 6.3k views - - 1 hour ago - + 1 hour ago diff --git a/docs/data/joy/components/card/MultipleInteractionCard.tsx b/docs/data/joy/components/card/MultipleInteractionCard.tsx index 768d7a305b8706..93d4107f7548bc 100644 --- a/docs/data/joy/components/card/MultipleInteractionCard.tsx +++ b/docs/data/joy/components/card/MultipleInteractionCard.tsx @@ -44,26 +44,16 @@ export default function MultipleInteractionCard() { Yosemite National Park - + California - + - - 6.3k views - + 6.3k views - - 1 hour ago - + 1 hour ago diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js index 2c19ee4c1ae8c5..d4440673a4db8d 100644 --- a/docs/data/joy/components/card/RowCard.js +++ b/docs/data/joy/components/card/RowCard.js @@ -19,7 +19,7 @@ export default function RowCard() { - + Yosemite Park California, USA diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx index 2c19ee4c1ae8c5..d4440673a4db8d 100644 --- a/docs/data/joy/components/card/RowCard.tsx +++ b/docs/data/joy/components/card/RowCard.tsx @@ -19,7 +19,7 @@ export default function RowCard() { - + Yosemite Park California, USA diff --git a/docs/data/joy/components/card/UserCard.js b/docs/data/joy/components/card/UserCard.js index 27d4bf82ac6686..bf1818fa71e9b6 100644 --- a/docs/data/joy/components/card/UserCard.js +++ b/docs/data/joy/components/card/UserCard.js @@ -62,7 +62,7 @@ export default function UserCard() { resize: 'horizontal', }} > - + - + - + Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries. diff --git a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx index 4f9151906408b7..6c7e980c832804 100644 --- a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx +++ b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx @@ -31,7 +31,7 @@ export default function AnimationSkeleton() { /> - + Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries. diff --git a/docs/data/joy/components/typography/DecoratorExamples.js b/docs/data/joy/components/typography/DecoratorExamples.js index cb5523cd99aee8..7761b27048c3a1 100644 --- a/docs/data/joy/components/typography/DecoratorExamples.js +++ b/docs/data/joy/components/typography/DecoratorExamples.js @@ -56,28 +56,24 @@ export default function DecoratorExamples() { Simple alert using only Typography. - - - - - - } - > - +8.2%{' '} - + + + + + + + +8.2% + Since last month diff --git a/docs/data/joy/components/typography/DecoratorExamples.tsx b/docs/data/joy/components/typography/DecoratorExamples.tsx index cb5523cd99aee8..7761b27048c3a1 100644 --- a/docs/data/joy/components/typography/DecoratorExamples.tsx +++ b/docs/data/joy/components/typography/DecoratorExamples.tsx @@ -56,28 +56,24 @@ export default function DecoratorExamples() { Simple alert using only Typography. - - - - - - } - > - +8.2%{' '} - + + + + + + + +8.2% + Since last month diff --git a/docs/data/joy/components/typography/TypographyUsage.js b/docs/data/joy/components/typography/TypographyUsage.js index d254c02349f780..c3ef3f423b3e87 100644 --- a/docs/data/joy/components/typography/TypographyUsage.js +++ b/docs/data/joy/components/typography/TypographyUsage.js @@ -41,7 +41,8 @@ export default function TypographyUsage() { { propName: 'children', knob: 'input', - defaultValue: 'Typography', + defaultValue: + 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.', }, { @@ -52,7 +53,19 @@ export default function TypographyUsage() { ]} renderDemo={(props) => ( - {props.children} + + {props.children} + )} /> diff --git a/docs/pages/joy-ui/api/aspect-ratio.json b/docs/pages/joy-ui/api/aspect-ratio.json index a862ebb15f37bf..d7156fcb05f1d0 100644 --- a/docs/pages/joy-ui/api/aspect-ratio.json +++ b/docs/pages/joy-ui/api/aspect-ratio.json @@ -10,6 +10,7 @@ "additionalInfo": { "joy-color": true } }, "component": { "type": { "name": "elementType" } }, + "flex": { "type": { "name": "bool" }, "default": "false" }, "maxHeight": { "type": { "name": "union", "description": "number
| string" } }, "minHeight": { "type": { "name": "union", "description": "number
| string" } }, "objectFit": { diff --git a/docs/pages/joy-ui/api/tab.json b/docs/pages/joy-ui/api/tab.json index 3e65aa62b764d2..43cf0eca137669 100644 --- a/docs/pages/joy-ui/api/tab.json +++ b/docs/pages/joy-ui/api/tab.json @@ -17,7 +17,7 @@ "component": { "type": { "name": "elementType" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableIndicator": { "type": { "name": "bool" }, "default": "false" }, - "indicatorInset": { "type": { "name": "bool" } }, + "indicatorInset": { "type": { "name": "bool" }, "default": "false" }, "indicatorPlacement": { "type": { "name": "enum", diff --git a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json index 72d1490f7454be..7bbb6b7fe8f4b6 100644 --- a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json +++ b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json @@ -10,6 +10,9 @@ "component": { "description": "The component used for the root node. Either a string to use a HTML element or a component." }, + "flex": { + "description": "By default, the AspectRatio will maintain the aspect ratio of its content. Set this prop to true when the container is a flex row and you want the AspectRatio to fill the height of its container." + }, "maxHeight": { "description": "The maximum calculated height of the element (not the CSS height)." }, diff --git a/examples/joy-ui-cra-ts/public/index.html b/examples/joy-ui-cra-ts/public/index.html index a14995814b20f7..84a86e0fe30bf6 100644 --- a/examples/joy-ui-cra-ts/public/index.html +++ b/examples/joy-ui-cra-ts/public/index.html @@ -10,7 +10,7 @@ diff --git a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js b/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js index 8dd36fef01d811..18f316a884095e 100644 --- a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js +++ b/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js @@ -1,15 +1,12 @@ -import { Public_Sans } from 'next/font/google'; +import { Inter } from 'next/font/google'; import { extendTheme } from '@mui/joy/styles'; -const publicSans = Public_Sans({ +Inter({ subsets: ['latin'], display: 'swap', }); const theme = extendTheme({ - fontFamily: { - body: publicSans.style.fontFamily, - }, components: { JoyButton: { styleOverrides: { diff --git a/examples/joy-ui-vite-ts/index.html b/examples/joy-ui-vite-ts/index.html index 4c897a34c14538..0396aa17470c55 100644 --- a/examples/joy-ui-vite-ts/index.html +++ b/examples/joy-ui-vite-ts/index.html @@ -10,7 +10,7 @@ diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx index c5aadf95b810f8..7d0323b1529abc 100644 --- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx +++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx @@ -45,6 +45,8 @@ const AspectRatioRoot = styled('div', { ? 'currentColor' : theme.vars.palette.text.icon, borderRadius: 'var(--AspectRatio-radius)', + display: ownerState.flex ? 'flex' : 'block', + flex: ownerState.flex ? 1 : 'initial', flexDirection: 'column', margin: 'var(--AspectRatio-margin)', }; @@ -112,6 +114,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) { color: colorProp = 'neutral', variant = 'soft', component, + flex = false, slots = {}, slotProps = {}, ...other @@ -121,6 +124,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) { const ownerState = { ...props, + flex, minHeight, maxHeight, objectFit, @@ -180,6 +184,12 @@ AspectRatio.propTypes /* remove-proptypes */ = { * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, + /** + * By default, the AspectRatio will maintain the aspect ratio of its content. + * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container. + * @default false + */ + flex: PropTypes.bool, /** * The maximum calculated height of the element (not the CSS height). */ diff --git a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts index 90be05d28e0f2d..121e6de62c4299 100644 --- a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts +++ b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts @@ -42,6 +42,12 @@ export interface AspectRatioTypeMap

* This can be an element, or just a string. */ children?: React.ReactNode; + /** + * By default, the AspectRatio will maintain the aspect ratio of its content. + * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container. + * @default false + */ + flex?: boolean; /** * The minimum calculated height of the element (not the CSS height). */ diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx index e228d46a9bf6ad..597feaa781c1db 100644 --- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx @@ -35,14 +35,17 @@ const BreadcrumbsRoot = styled('nav', { })<{ ownerState: BreadcrumbsOwnerState }>(({ theme, ownerState }) => ({ ...(ownerState.size === 'sm' && { '--Breadcrumbs-gap': '0.25rem', + '--Icon-fontSize': theme.vars.fontSize.lg, padding: '0.5rem', }), ...(ownerState.size === 'md' && { '--Breadcrumbs-gap': '0.375rem', + '--Icon-fontSize': theme.vars.fontSize.xl, padding: '0.75rem', }), ...(ownerState.size === 'lg' && { '--Breadcrumbs-gap': '0.5rem', + '--Icon-fontSize': theme.vars.fontSize.xl2, padding: '1rem', }), ...theme.typography[`body-${ownerState.size!}`], diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index ec05cc6cacbb93..c4caf13ebad36a 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -66,8 +66,8 @@ const CardRoot = styled('div', { '--Divider-inset': 'calc(-1 * var(--Card-padding))', ...(ownerState.size === 'sm' && { '--Card-radius': theme.vars.radius.sm, - '--Card-padding': '0.5rem', - gap: '0.375rem 0.5rem', + '--Card-padding': '0.625rem', + gap: '0.5rem', }), ...(ownerState.size === 'md' && { '--Card-radius': theme.vars.radius.md, diff --git a/packages/mui-joy/src/CardContent/CardContent.tsx b/packages/mui-joy/src/CardContent/CardContent.tsx index 251ce36b32c143..d047e8b8200ed7 100644 --- a/packages/mui-joy/src/CardContent/CardContent.tsx +++ b/packages/mui-joy/src/CardContent/CardContent.tsx @@ -26,9 +26,10 @@ const CardContentRoot = styled('div', { })<{ ownerState: CardContentProps }>(({ ownerState }) => ({ display: 'flex', flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column', - flex: 1, // fill the available space in the Card and also shrink if needed + flex: 9999, // fill the available space in the Card and also shrink if needed zIndex: 1, columnGap: 'var(--Card-padding)', + rowGap: 'max(2px, calc(0.1875 * var(--Card-padding)))', padding: 'var(--unstable_padding)', [`.${cardOverflowClasses.root} > &`]: { '--unstable_padding': 'calc(var(--Card-padding) * 0.75) 0px', diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx index dd994e27c57118..17ed565de6d0dd 100644 --- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx +++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx @@ -46,6 +46,7 @@ const CardOverflowRoot = styled('div', { alignSelf: 'stretch', // prevent shrinking if parent's align-items is not initial borderRadius: 'var(--CardOverflow-radius)', position: 'relative', + display: 'flex', ...(ownerState['data-parent'] === 'Card-horizontal' && { '--AspectRatio-margin': 'calc(-1 * var(--Card-padding)) 0px', marginTop: 'var(--CardOverflow-offset)', @@ -76,6 +77,7 @@ const CardOverflowRoot = styled('div', { }), ...(ownerState['data-parent'] === 'Card-vertical' && { '--AspectRatio-margin': '0px calc(-1 * var(--Card-padding))', + flexDirection: 'column', // required to make AspectRatio works marginLeft: 'var(--CardOverflow-offset)', marginRight: 'var(--CardOverflow-offset)', padding: '0px var(--Card-padding)', diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 172cc4e886d7db..02964cb2752023 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -100,10 +100,7 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt '--Icon-color': 'currentColor', ...theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], }, - '&:disabled': { - '--Icon-color': 'currentColor', - ...theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!], - }, + '&:disabled': theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!], }, ], ); diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx index 386494e577a9ab..c4e390afeaf8f0 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx +++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx @@ -12,6 +12,7 @@ import { ExtendListItemButton, ListItemButtonTypeMap, } from './ListItemButtonProps'; +import listItemClasses from '../ListItem/listItemClasses'; import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses'; import ListItemButtonOrientationContext from './ListItemButtonOrientationContext'; import RowListContext from '../List/RowListContext'; @@ -50,6 +51,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw WebkitTapHighlightColor: 'transparent', boxSizing: 'border-box', position: 'relative', + font: 'inherit', display: 'flex', flexDirection: 'row', alignItems: 'center', @@ -79,9 +81,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw minBlockSize: 'var(--ListItem-minHeight)', border: '1px solid transparent', // use `transparent` as a placeholder to prevent the button from jumping when switching to `outlined` variant borderRadius: 'var(--ListItem-radius)', - flexGrow: ownerState.row ? 0 : 1, - flexBasis: ownerState.row ? 'auto' : '0%', // for long text (in vertical), displays in multiple lines. - flexShrink: 0, + flex: 'var(--unstable_ListItem-flex, none)', // prevent children from shrinking when the List's height is limited. fontSize: 'inherit', // prevent user agent style when component="button" lineHeight: 'inherit', // prevent user agent style when component="button" minInlineSize: 0, @@ -90,6 +90,9 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw zIndex: 1, // to be above of the next element. For example, the first Tab item should be above the second so that the outline is above the second Tab. }, ...theme.variants[ownerState.variant!]?.[ownerState.color!], + [`.${listItemClasses.root} > &`]: { + '--unstable_ListItem-flex': '1 0 0%', // grow to fill the available space of ListItem + }, [`&.${listItemButtonClasses.selected}`]: { ...theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], '--Icon-color': 'currentColor', diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx index eaff60f72b60f4..9a351bca5503e0 100644 --- a/packages/mui-joy/src/ModalClose/ModalClose.tsx +++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx @@ -48,6 +48,7 @@ export const ModalCloseRoot = styled(StyledIconButton, { '--IconButton-size': '40px', }), position: 'absolute', + zIndex: 1, // stay on top of the title in case it is positioned relatively top: `var(--ModalClose-inset, ${theme.spacing(1)})`, right: `var(--ModalClose-inset, ${theme.spacing(1)})`, borderRadius: `var(--ModalClose-radius, ${theme.vars.radius.sm})`, diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx index 2f1758ef5bc7c0..c9d8342d03b361 100644 --- a/packages/mui-joy/src/Tab/Tab.tsx +++ b/packages/mui-joy/src/Tab/Tab.tsx @@ -145,6 +145,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) { color: colorProp = 'neutral', disableIndicator = false, indicatorPlacement = row ? 'bottom' : 'right', + indicatorInset = false, slots = {}, slotProps = {}, ...other @@ -175,6 +176,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) { ...props, disableIndicator, indicatorPlacement, + indicatorInset, orientation, row, active, @@ -250,6 +252,7 @@ Tab.propTypes /* remove-proptypes */ = { disableIndicator: PropTypes.bool, /** * If `true`, the indicator stay within the padding based on the `Tabs` orientation. + * @default false */ indicatorInset: PropTypes.bool, /** diff --git a/packages/mui-joy/src/Tab/TabProps.ts b/packages/mui-joy/src/Tab/TabProps.ts index fe2687c5d3d3e2..733a049f9941df 100644 --- a/packages/mui-joy/src/Tab/TabProps.ts +++ b/packages/mui-joy/src/Tab/TabProps.ts @@ -53,6 +53,7 @@ export interface TabTypeMap

{ indicatorPlacement?: 'top' | 'bottom' | 'left' | 'right'; /** * If `true`, the indicator stay within the padding based on the `Tabs` orientation. + * @default false */ indicatorInset?: boolean; /** diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx index a2ddecfeb89b7e..0deee34964e486 100644 --- a/packages/mui-joy/src/TabList/TabList.tsx +++ b/packages/mui-joy/src/TabList/TabList.tsx @@ -117,6 +117,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) { size: sizeProp, disableUnderline = false, underlinePlacement = orientation === 'horizontal' ? 'bottom' : 'right', + tabFlex, sticky, slots = {}, slotProps = {}, @@ -135,6 +136,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) { color, size, sticky, + tabFlex, nesting: false, disableUnderline, underlinePlacement, diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index 679c7884d2cd19..6001aa8e639ad8 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -87,6 +87,7 @@ const TypographyRoot = styled('span', { } : { display: 'block', // don't rely on user agent, always `block`. + position: 'relative', }), ...((ownerState.startDecorator || ownerState.endDecorator) && { display: 'flex', diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 48a021a05f236c..d7d6eed4aabe89 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -447,7 +447,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { fontFamily: getCssVar(`fontFamily-display, ${fontFamily.display}`), fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`), fontSize: getCssVar(`fontSize-xl2, ${fontSize.xl2}`), - lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`), + lineHeight: getCssVar(`lineHeight-xs, ${lineHeight.xs}`), letterSpacing: '-0.025em', color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`), }, @@ -456,7 +456,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { fontFamily: getCssVar(`fontFamily-display, ${fontFamily.display}`), fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`), fontSize: getCssVar(`fontSize-xl, ${fontSize.xl}`), - lineHeight: getCssVar(`lineHeight-lg, ${lineHeight.lg}`), + lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`), letterSpacing: '-0.025em', color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`), }, @@ -465,7 +465,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`), fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`), fontSize: getCssVar(`fontSize-lg, ${fontSize.lg}`), - lineHeight: getCssVar(`lineHeight-xl, ${lineHeight.xl}`), + lineHeight: getCssVar(`lineHeight-xs, ${lineHeight.xs}`), color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`), }, @@ -488,7 +488,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { 'body-lg': { fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`), fontSize: getCssVar(`fontSize-lg, ${fontSize.lg}`), - lineHeight: getCssVar(`lineHeight-lg, ${lineHeight.lg}`), + lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`), color: getCssVar(`palette-text-secondary, ${lightColorSystem.palette.text.secondary}`), }, @@ -502,7 +502,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { 'body-sm': { fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`), fontSize: getCssVar(`fontSize-sm, ${fontSize.sm}`), - lineHeight: getCssVar(`lineHeight-sm, ${lineHeight.sm}`), + lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`), color: getCssVar(`palette-text-tertiary, ${lightColorSystem.palette.text.tertiary}`), }, @@ -510,7 +510,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`), fontWeight: getCssVar(`fontWeight-md, ${fontWeight.md}`), fontSize: getCssVar(`fontSize-xs, ${fontSize.xs}`), - lineHeight: getCssVar(`lineHeight-xl, ${lineHeight.xl}`), + lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`), color: getCssVar(`palette-text-tertiary, ${lightColorSystem.palette.text.tertiary}`), }, }, diff --git a/packages/mui-joy/src/styles/variantUtils.test.js b/packages/mui-joy/src/styles/variantUtils.test.js index 1f790a0239a73f..3d02f0452bf10c 100644 --- a/packages/mui-joy/src/styles/variantUtils.test.js +++ b/packages/mui-joy/src/styles/variantUtils.test.js @@ -240,6 +240,7 @@ describe('variant utils', () => { }, outlinedDisabled: { primary: { + '--Icon-color': 'currentColor', color: 'var(--any-token)', borderColor: 'var(--any-token)', backgroundColor: 'var(--any-token)', diff --git a/packages/mui-joy/src/styles/variantUtils.ts b/packages/mui-joy/src/styles/variantUtils.ts index b96a85b75f632e..6d8f512b530a2b 100644 --- a/packages/mui-joy/src/styles/variantUtils.ts +++ b/packages/mui-joy/src/styles/variantUtils.ts @@ -67,6 +67,7 @@ export const createVariantStyle = ( if (variantVar.includes('Disabled')) { result.pointerEvents = 'none'; result.cursor = 'default'; + result['--Icon-color'] = 'currentColor'; } if (variantVar.match(/(Hover|Active|Disabled)/)) { assignCss(result as any, variantVar, cssVar); @@ -280,7 +281,7 @@ export const createSoftInversion = ( [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar( `palette-${color}-darkChannel`, )} / 0.68)`, - [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-400`), + [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-500`), [prefixVar('--palette-divider')]: `rgba(${getCssVar( `palette-${color}-mainChannel`, )} / 0.32)`,