[Joy] Miscellaneous card fixes (#33129)

mui · Jun 13, 2022 · a2730b1 · a2730b1
1 parent 5918598
commit a2730b1
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 105 deletions.
diff --git a/docs/data/joy/components/card/CardCovers.js b/docs/data/joy/components/card/CardCovers.js
@@ -8,19 +8,43 @@ export default function CardCovers() {
   return (
     <Card sx={{ minWidth: 320 }}>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={2}>
-          3
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={2}
+            flexGrow={1}
+          >
+            3
+          </Typography>
+        </div>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={6}>
-          2
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={6}
+            flexGrow={1}
+          >
+            2
+          </Typography>
+        </div>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={10}>
-          1
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={10}
+            flexGrow={1}
+          >
+            1
+          </Typography>
+        </div>
       </CardCover>
       <CardContent sx={{ bgcolor: 'rgba(0,0,0,0.5)' }}>
         <Typography level="h2" ml={12} mr={2} textColor="#fff">

diff --git a/docs/data/joy/components/card/CardCovers.tsx b/docs/data/joy/components/card/CardCovers.tsx
@@ -8,19 +8,43 @@ export default function CardCovers() {
   return (
     <Card sx={{ minWidth: 320 }}>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={2}>
-          3
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={2}
+            flexGrow={1}
+          >
+            3
+          </Typography>
+        </div>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={6}>
-          2
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={6}
+            flexGrow={1}
+          >
+            2
+          </Typography>
+        </div>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={10}>
-          1
-        </Typography>
+        <div>
+          <Typography
+            fontSize="50px"
+            fontWeight="lg"
+            textColor="#fff"
+            ml={10}
+            flexGrow={1}
+          >
+            1
+          </Typography>
+        </div>
       </CardCover>
       <CardContent sx={{ bgcolor: 'rgba(0,0,0,0.5)' }}>
         <Typography level="h2" ml={12} mr={2} textColor="#fff">

diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Avatar from '@mui/joy/Avatar';
@@ -23,50 +22,46 @@ export default function DribbbleShot() {
         '--Card-padding': '0px',
       }}
     >
-      <AspectRatio
-        ratio="4/3"
-        sx={{
-          '&:hover, &:focus-within': {
-            '& .video-cover': {
-              display: 'block',
-            },
-            '& .gradient-cover': {
-              opacity: 1,
-            },
-          },
-        }}
-      >
-        <figure>
-          <img
-            alt="Yosemite by Casey Horner"
-            width="330"
-            height="247"
-            sizes="338px"
-            data-sizes="auto"
-            data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-          />
-        </figure>
+      <Box sx={{ position: 'relative' }}>
+        <AspectRatio ratio="4/3">
+          <figure>
+            <img
+              alt="Yosemite by Casey Horner"
+              width="330"
+              height="247"
+              sizes="338px"
+              data-sizes="auto"
+              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+            />
+          </figure>
+        </AspectRatio>
         <CardCover
           className="gradient-cover"
           sx={{
+            '&:hover, &:focus-within': {
+              opacity: 1,
+            },
             opacity: 0,
             transition: '0.1s ease-in',
             background:
               'linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.00345888) 63.94%, rgba(0,0,0,0.014204) 65.89%, rgba(0,0,0,0.0326639) 67.83%, rgba(0,0,0,0.0589645) 69.78%, rgba(0,0,0,0.0927099) 71.72%, rgba(0,0,0,0.132754) 73.67%, rgba(0,0,0,0.177076) 75.61%, rgba(0,0,0,0.222924) 77.56%, rgba(0,0,0,0.267246) 79.5%, rgba(0,0,0,0.30729) 81.44%, rgba(0,0,0,0.341035) 83.39%, rgba(0,0,0,0.367336) 85.33%, rgba(0,0,0,0.385796) 87.28%, rgba(0,0,0,0.396541) 89.22%, rgba(0,0,0,0.4) 91.17%)',
           }}
         >
-          <Box
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'flex-end',
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          {/* The first box acts as a container that inherits style from the CardCover */}
+          <Box>
+            <Box
+              sx={{
+                p: 2,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.5,
+                flexGrow: 1,
+                alignSelf: 'flex-end',
+              }}
+            >
               <Typography level="h2" noWrap sx={{ fontSize: 'lg' }}>
                 <Link
                   href="#dribbble-shot"
@@ -91,7 +86,7 @@ export default function DribbbleShot() {
             </Box>
           </Box>
         </CardCover>
-      </AspectRatio>
+      </Box>
       <Box sx={{ display: 'flex', gap: 1, mt: 1.5, alignItems: 'center' }}>
         <Avatar
           src="https://images.unsplash.com/profile-1502669002421-a8d274ad2897?dpr=2&auto=format&fit=crop&w=32&h=32&q=60&crop=faces&bg=fff"
@@ -114,6 +109,7 @@ export default function DribbbleShot() {
           Featured
         </Chip>
         <Link
+          href="#dribbble-shot"
           level="body3"
           underline="none"
           startDecorator={<Favorite />}
@@ -127,6 +123,7 @@ export default function DribbbleShot() {
           117
         </Link>
         <Link
+          href="#dribbble-shot"
           level="body3"
           underline="none"
           startDecorator={<Visibility />}

diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Avatar from '@mui/joy/Avatar';
@@ -23,50 +22,46 @@ export default function DribbbleShot() {
         '--Card-padding': '0px',
       }}
     >
-      <AspectRatio
-        ratio="4/3"
-        sx={{
-          '&:hover, &:focus-within': {
-            '& .video-cover': {
-              display: 'block',
-            },
-            '& .gradient-cover': {
-              opacity: 1,
-            },
-          },
-        }}
-      >
-        <figure>
-          <img
-            alt="Yosemite by Casey Horner"
-            width="330"
-            height="247"
-            sizes="338px"
-            data-sizes="auto"
-            data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-            srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
-          />
-        </figure>
+      <Box sx={{ position: 'relative' }}>
+        <AspectRatio ratio="4/3">
+          <figure>
+            <img
+              alt="Yosemite by Casey Horner"
+              width="330"
+              height="247"
+              sizes="338px"
+              data-sizes="auto"
+              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988"
+            />
+          </figure>
+        </AspectRatio>
         <CardCover
           className="gradient-cover"
           sx={{
+            '&:hover, &:focus-within': {
+              opacity: 1,
+            },
             opacity: 0,
             transition: '0.1s ease-in',
             background:
               'linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.00345888) 63.94%, rgba(0,0,0,0.014204) 65.89%, rgba(0,0,0,0.0326639) 67.83%, rgba(0,0,0,0.0589645) 69.78%, rgba(0,0,0,0.0927099) 71.72%, rgba(0,0,0,0.132754) 73.67%, rgba(0,0,0,0.177076) 75.61%, rgba(0,0,0,0.222924) 77.56%, rgba(0,0,0,0.267246) 79.5%, rgba(0,0,0,0.30729) 81.44%, rgba(0,0,0,0.341035) 83.39%, rgba(0,0,0,0.367336) 85.33%, rgba(0,0,0,0.385796) 87.28%, rgba(0,0,0,0.396541) 89.22%, rgba(0,0,0,0.4) 91.17%)',
           }}
         >
-          <Box
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'flex-end',
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          {/* The first box acts as a container that inherits style from the CardCover */}
+          <Box>
+            <Box
+              sx={{
+                p: 2,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.5,
+                flexGrow: 1,
+                alignSelf: 'flex-end',
+              }}
+            >
               <Typography level="h2" noWrap sx={{ fontSize: 'lg' }}>
                 <Link
                   href="#dribbble-shot"
@@ -91,7 +86,7 @@ export default function DribbbleShot() {
             </Box>
           </Box>
         </CardCover>
-      </AspectRatio>
+      </Box>
       <Box sx={{ display: 'flex', gap: 1, mt: 1.5, alignItems: 'center' }}>
         <Avatar
           src="https://images.unsplash.com/profile-1502669002421-a8d274ad2897?dpr=2&auto=format&fit=crop&w=32&h=32&q=60&crop=faces&bg=fff"
@@ -114,6 +109,7 @@ export default function DribbbleShot() {
           Featured
         </Chip>
         <Link
+          href="#dribbble-shot"
           level="body3"
           underline="none"
           startDecorator={<Favorite />}
@@ -127,6 +123,7 @@ export default function DribbbleShot() {
           117
         </Link>
         <Link
+          href="#dribbble-shot"
           level="body3"
           underline="none"
           startDecorator={<Visibility />}

diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
@@ -79,7 +79,7 @@ export default function InstagramPost() {
                 borderRadius: '50%',
                 width: `max(${6 - index}px, 3px)`,
                 height: `max(${6 - index}px, 3px)`,
-                bgcolor: index === 0 ? 'primary.solidBg' : 'neutral.softBg',
+                bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
               }}
             />
           ))}

diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
@@ -79,7 +79,7 @@ export default function InstagramPost() {
                 borderRadius: '50%',
                 width: `max(${6 - index}px, 3px)`,
                 height: `max(${6 - index}px, 3px)`,
-                bgcolor: index === 0 ? 'primary.solidBg' : 'neutral.softBg',
+                bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
               }}
             />
           ))}

diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
@@ -13,6 +13,13 @@ Cards are surfaces that display content and actions on a single topic.
 They should be easy to scan for relevant and actionable information.
 Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
 
+Joy provides 4 Card related components:
+
+- [`Card`](#basic): used as a container to control the direction of the content. It comes with a border radius, padding, and shadow by default.
+- [`CardOverflow`](#overflow): a handy component that takes care of stretching the content to fill on all edges of the card.
+- [`CardCover`](#back-cover): for displaying background image of the card and used to create layers of gradient.
+- [`CardContent`](#back-cover): usually used with `CardCover` to bring the content to the front.
+
 ## Basic
 
 The `Card` is a surface-level component that can house multiple others to form a meaningful interface.

diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -59,7 +59,7 @@ const AspectRatioContent = styled('div', {
     paddingBottom: 'var(--AspectRatio-paddingBottom)',
     overflow: 'hidden',
     // use data-attribute instead of :first-child to support zero config SSR (emotion)
-    // use nested selector for integrating with nextjs image (spans are inserted on top of the img)
+    // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
     '& [data-first-child]': {
       display: 'flex',
       justifyContent: 'center',

diff --git a/packages/mui-joy/src/CardCover/CardCover.tsx b/packages/mui-joy/src/CardCover/CardCover.tsx
@@ -29,12 +29,24 @@ const CardCoverRoot = styled('div', {
   height: '100%',
   borderRadius: 'var(--CardCover-radius)',
   // use data-attribute instead of :first-child to support zero config SSR (emotion)
-  '& > [data-first-child]': {
+  // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
+  '& [data-first-child]': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     width: '100%',
     height: '100%',
     objectFit: 'cover',
     boxSizing: 'border-box',
     borderRadius: 'var(--CardCover-radius)',
+    margin: 0,
+    padding: 0,
+    '& > img': {
+      // support art-direction that uses <picture><img /></picture>
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+    },
   },
 });