[Joy] use textColor prop for Typography and Link (#32938)

mui · May 29, 2022 · 188b940 · 188b940
1 parent 87ddb73
commit 188b940
Show file tree

Hide file tree

Showing 23 changed files with 183 additions and 57 deletions.
diff --git a/docs/data/joy/components/badge/NumberBadge.js b/docs/data/joy/components/badge/NumberBadge.js
@@ -21,7 +21,7 @@ export default function ColorBadge() {
         <IconButton size="sm" onClick={() => setCount((c) => c - 1)}>
           <Remove />
         </IconButton>
-        <Typography fontWeight="md" color="text.secondary">
+        <Typography fontWeight="md" textColor="text.secondary">
           {count}
         </Typography>
         <IconButton size="sm" onClick={() => setCount((c) => c + 1)}>

diff --git a/docs/data/joy/components/badge/NumberBadge.tsx b/docs/data/joy/components/badge/NumberBadge.tsx
@@ -21,7 +21,7 @@ export default function ColorBadge() {
         <IconButton size="sm" onClick={() => setCount((c) => c - 1)}>
           <Remove />
         </IconButton>
-        <Typography fontWeight="md" color="text.secondary">
+        <Typography fontWeight="md" textColor="text.secondary">
           {count}
         </Typography>
         <IconButton size="sm" onClick={() => setCount((c) => c + 1)}>

diff --git 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 (
     <Card sx={{ minWidth: 320 }}>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={2}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={2}>
           3
         </Typography>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={6}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={6}>
           2
         </Typography>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={10}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={10}>
           1
         </Typography>
       </CardCover>
       <CardContent sx={{ bgcolor: 'rgba(0,0,0,0.5)' }}>
-        <Typography level="h2" ml={12} mr={2} color="#fff">
+        <Typography level="h2" ml={12} mr={2} textColor="#fff">
           Content
         </Typography>
       </CardContent>

diff --git 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 (
     <Card sx={{ minWidth: 320 }}>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={2}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={2}>
           3
         </Typography>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={6}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={6}>
           2
         </Typography>
       </CardCover>
       <CardCover sx={{ bgcolor: 'rgba(0,0,0,0.4)' }}>
-        <Typography fontSize="50px" fontWeight="lg" color="#fff" ml={10}>
+        <Typography fontSize="50px" fontWeight="lg" textColor="#fff" ml={10}>
           1
         </Typography>
       </CardCover>
       <CardContent sx={{ bgcolor: 'rgba(0,0,0,0.5)' }}>
-        <Typography level="h2" ml={12} mr={2} color="#fff">
+        <Typography level="h2" ml={12} mr={2} textColor="#fff">
           Content
         </Typography>
       </CardContent>

diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js
@@ -21,10 +21,13 @@ export default function GradientCover() {
         }}
       />
       <CardContent sx={{ justifyContent: 'flex-end' }}>
-        <Typography level="h2" fontSize="lg" color="#fff" mb={1}>
+        <Typography level="h2" fontSize="lg" textColor="#fff" mb={1}>
           Yosemite National Park
         </Typography>
-        <Typography startDecorator={<LocationOnRoundedIcon />} color="neutral.300">
+        <Typography
+          startDecorator={<LocationOnRoundedIcon />}
+          textColor="neutral.300"
+        >
           California, USA
         </Typography>
       </CardContent>

diff --git a/docs/data/joy/components/card/GradientCover.tsx b/docs/data/joy/components/card/GradientCover.tsx
@@ -21,10 +21,13 @@ export default function GradientCover() {
         }}
       />
       <CardContent sx={{ justifyContent: 'flex-end' }}>
-        <Typography level="h2" fontSize="lg" color="#fff" mb={1}>
+        <Typography level="h2" fontSize="lg" textColor="#fff" mb={1}>
           Yosemite National Park
         </Typography>
-        <Typography startDecorator={<LocationOnRoundedIcon />} color="neutral.300">
+        <Typography
+          startDecorator={<LocationOnRoundedIcon />}
+          textColor="neutral.300"
+        >
           California, USA
         </Typography>
       </CardContent>

diff --git a/docs/data/joy/components/card/MediaCover.js b/docs/data/joy/components/card/MediaCover.js
@@ -22,7 +22,7 @@ export default function BasicCard() {
           <Typography
             level="h6"
             fontWeight="lg"
-            color="#fff"
+            textColor="#fff"
             mt={{ xs: 12, sm: 18 }}
           >
             Image
@@ -47,7 +47,7 @@ export default function BasicCard() {
           <Typography
             level="h6"
             fontWeight="lg"
-            color="#fff"
+            textColor="#fff"
             mt={{ xs: 12, sm: 18 }}
           >
             Video

diff --git a/docs/data/joy/components/card/MediaCover.tsx b/docs/data/joy/components/card/MediaCover.tsx
@@ -22,7 +22,7 @@ export default function BasicCard() {
           <Typography
             level="h6"
             fontWeight="lg"
-            color="#fff"
+            textColor="#fff"
             mt={{ xs: 12, sm: 18 }}
           >
             Image
@@ -47,7 +47,7 @@ export default function BasicCard() {
           <Typography
             level="h6"
             fontWeight="lg"
-            color="#fff"
+            textColor="#fff"
             mt={{ xs: 12, sm: 18 }}
           >
             Video

diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js
@@ -25,7 +25,7 @@ export default function InteractiveCard() {
         </AspectRatio>
       </CardOverflow>
       <CardContent>
-        <Typography fontWeight="md" color="success.plainColor" mb={0.5}>
+        <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
           Yosemite Park
         </Typography>
         <Typography level="body2">California, USA</Typography>

diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx
@@ -25,7 +25,7 @@ export default function InteractiveCard() {
         </AspectRatio>
       </CardOverflow>
       <CardContent>
-        <Typography fontWeight="md" color="success.plainColor" mb={0.5}>
+        <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
           Yosemite Park
         </Typography>
         <Typography level="body2">California, USA</Typography>

diff --git a/docs/pages/experiments/joy/checkbox.tsx b/docs/pages/experiments/joy/checkbox.tsx
@@ -279,13 +279,13 @@ export default function JoyCheckbox() {
               >
                 <ListItem variant="soft" color="danger">
                   <Checkbox label="Declined Payment" color="danger" checked overlay />
-                  <Typography color="inherit" sx={{ ml: 'auto' }}>
+                  <Typography textColor="inherit" sx={{ ml: 'auto' }}>
                     8
                   </Typography>
                 </ListItem>
                 <ListItem variant="soft" color="warning">
                   <Checkbox label="Delivery Error" color="warning" checked overlay />
-                  <Typography color="inherit" sx={{ ml: 'auto' }}>
+                  <Typography textColor="inherit" sx={{ ml: 'auto' }}>
                     24
                   </Typography>
                 </ListItem>

diff --git a/docs/pages/experiments/joy/components.tsx b/docs/pages/experiments/joy/components.tsx
@@ -318,8 +318,8 @@ const components: {
         <Input
           color="primary"
           placeholder="Placeholder"
-          startDecorator={<Typography color="inherit">$</Typography>}
-          endDecorator={<Typography color="text.tertiary">USD</Typography>}
+          startDecorator={<Typography textColor="inherit">$</Typography>}
+          endDecorator={<Typography textColor="text.tertiary">USD</Typography>}
           {...props}
         />
         <Input placeholder="Placeholder" color="danger" endDecorator={<Info />} {...props} />

diff --git a/docs/pages/experiments/joy/list.tsx b/docs/pages/experiments/joy/list.tsx
@@ -854,9 +854,9 @@ export default function JoyList() {
               </ListItemDecorator>
               <div>
                 <Typography>Brunch this weekend?</Typography>
-                <Typography level="body2" color="text.primary">
+                <Typography level="body2" textColor="text.primary">
                   Ali Connors{' '}
-                  <Typography color="text.secondary">
+                  <Typography textColor="text.secondary">
                     {' '}
                     — I&apos;ll be in your neighborhood doing errands this…
                   </Typography>
@@ -878,9 +878,9 @@ export default function JoyList() {
               </ListItemDecorator>
               <div>
                 <Typography>Summer BBQ</Typography>
-                <Typography level="body2" color="text.primary">
+                <Typography level="body2" textColor="text.primary">
                   to Scott, Alex, Jennifer{' '}
-                  <Typography color="text.secondary">
+                  <Typography textColor="text.secondary">
                     {' '}
                     — Wish I could come, but I&apos;m out of town this…
                   </Typography>
@@ -1092,7 +1092,7 @@ export default function JoyList() {
             </List>
             <List size="lg" sx={{ mt: 1 }}>
               <ListItem>
-                <Typography color="text.secondary">Large size</Typography>
+                <Typography textColor="text.secondary">Large size</Typography>
               </ListItem>
               <ListItem>
                 <ListItemDecorator>

diff --git a/docs/pages/experiments/joy/radio.tsx b/docs/pages/experiments/joy/radio.tsx
@@ -116,7 +116,7 @@ export default function JoyRadio() {
                   <ListItem component="div">
                     <ListItemContent>
                       <Radio label="Thin" value="Thin" color="warning" />
-                      <Typography level="body3" ml="28px" mt={0.5} color="warning.400">
+                      <Typography level="body3" ml="28px" mt={0.5} textColor="warning.400">
                         This might make your pizza too crispy.
                       </Typography>
                     </ListItemContent>
@@ -276,7 +276,7 @@ export default function JoyRadio() {
               variant="soft"
               sx={{ p: 2, display: 'flex', gap: 2, my: 2, borderRadius: '18px' }}
             >
-              <Typography level="body3" color="text.primary">
+              <Typography level="body3" textColor="text.primary">
                 <Typography fontWeight="md">
                   Choose from two anti-reflective glass options.
                 </Typography>{' '}
@@ -391,13 +391,13 @@ export default function JoyRadio() {
                       <Typography sx={{ display: 'flex' }}>
                         <Typography level="inherit" fontWeight="md" flexGrow={1}>
                           Small <br />
-                          <Typography fontWeight="normal" fontSize="sm" color="text.secondary">
+                          <Typography fontWeight="normal" fontSize="sm" textColor="text.secondary">
                             Description
                           </Typography>
                         </Typography>
                         <Typography level="inherit" fontWeight="md" textAlign="right">
                           $40 <br />
-                          <Typography fontWeight="normal" fontSize="sm" color="text.secondary">
+                          <Typography fontWeight="normal" fontSize="sm" textColor="text.secondary">
                             per month
                           </Typography>
                         </Typography>

diff --git a/docs/pages/experiments/joy/switch.tsx b/docs/pages/experiments/joy/switch.tsx
@@ -142,7 +142,7 @@ export default function JoySwitch() {
             <Switch endDecorator="On" checked size="sm" />
           </Box>
           <Box>
-            <Typography color="info.textColor">Fluent</Typography>
+            <Typography color="info">Fluent</Typography>
             {(
               [
                 { checked: false, variant: 'outlined' },
@@ -183,7 +183,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">iOS</Typography>
+            <Typography color="info">iOS</Typography>
             {(
               [
                 { checked: false },
@@ -211,7 +211,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">strapi</Typography>
+            <Typography color="info">strapi</Typography>
             {(
               [
                 { checked: false, color: 'danger' },
@@ -236,7 +236,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">Material</Typography>
+            <Typography color="info">Material</Typography>
             {(
               [
                 { checked: false, variant: 'solid' },
@@ -274,7 +274,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">Chakra UI</Typography>
+            <Typography color="info">Chakra UI</Typography>
             {[
               { checked: false },
               { checked: true },
@@ -303,7 +303,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">Tailwind UI</Typography>
+            <Typography color="info">Tailwind UI</Typography>
             {([{ checked: false }, { checked: true, color: 'info' }] as const).map(
               (data, index) => (
                 <Switch
@@ -340,7 +340,7 @@ export default function JoySwitch() {
             ))}
           </Box>
           <Box>
-            <Typography color="info.textColor">Mantine</Typography>
+            <Typography color="info">Mantine</Typography>
             {(
               [
                 { checked: false, variant: 'outlined' },

diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx
@@ -121,11 +121,11 @@ export default function JoyTypography() {
           <Typography sx={{ '--Typography-gap': '2px' }}>
             Keep me updated about the new features and upcoming improvements (by doing this you
             accept the{' '}
-            <Typography color="primary.textColor" startDecorator={<Info />}>
+            <Typography textColor="primary.textColor" startDecorator={<Info />}>
               Terms
             </Typography>{' '}
             and the{' '}
-            <Typography color="primary.textColor" endDecorator={<Outbound />}>
+            <Typography textColor="primary.textColor" endDecorator={<Outbound />}>
               privacy policy
             </Typography>
             ).
@@ -134,7 +134,7 @@ export default function JoyTypography() {
         <Box sx={{ my: 2 }}>
           <Typography
             endDecorator={
-              <Typography color="text.secondary" fontSize="sm">
+              <Typography textColor="text.secondary" fontSize="sm">
                 20
               </Typography>
             }
@@ -143,7 +143,7 @@ export default function JoyTypography() {
           </Typography>
           <Typography
             endDecorator={
-              <Typography color="text.secondary" fontSize="sm">
+              <Typography textColor="text.secondary" fontSize="sm">
                 7
               </Typography>
             }
@@ -174,7 +174,7 @@ export default function JoyTypography() {
             fontSize="xl4"
             lineHeight={1}
             startDecorator={
-              <Typography fontSize="lg" color="text.secondary">
+              <Typography fontSize="lg" textColor="text.secondary">
                 $
               </Typography>
             }
@@ -212,6 +212,19 @@ export default function JoyTypography() {
             mollit anim id est laborum.
           </Typography>
         </Box>
+        <Box sx={{ my: 2 }}>
+          <Typography
+            variant="soft"
+            color="primary"
+            startDecorator={<Info />}
+            py={1}
+            px={1}
+            borderRadius="xs"
+            display="inline-flex"
+          >
+            This is a test.
+          </Typography>
+        </Box>
       </Box>
     </CssVarsProvider>
   );

diff --git 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';
 <Link color="warning" />;
 <Link color="neutral" />;
 
+<Link textColor="neutral.500" />;
+
 // `level`
 <Link level="h2" />;
 <Link level="h3" />;