Merge pull request strapi#11626 from strapi/typography-cm/part-1

[DS] Typography CM / Part 1
schornio · Nov 18, 2021 · bd285d0 · bd285d0
2 parents acba37d + 7b129d5
commit bd285d0
Show file tree

Hide file tree

Showing 21 changed files with 119 additions and 107 deletions.
diff --git a/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js b/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js
@@ -6,7 +6,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
@@ -46,25 +46,25 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
             </IconWrapper>
           </Flex>
           <Flex justifyContent="center">
-            <Text textColor="primary600" small bold>
+            <Typography textColor="primary600" variant="pi" fontWeight="bold">
               {formatMessage({
                 id: getTrad('components.empty-repeatable'),
                 defaultMessage: 'No entry yet. Click on the button below to add one.',
               })}
-            </Text>
+            </Typography>
           </Flex>
         </Stack>
       </Box>
       {error?.id && (
-        <Text textColor="danger600" small>
+        <Typography textColor="danger600" variant="pi">
           {formatMessage(
             {
               id: error.id,
               defaultMessage: error.defaultMessage,
             },
             error.values
           )}
-        </Text>
+        </Typography>
       )}
     </>
   );

diff --git a/.../admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js b/.../admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Flex } from '@strapi/design-system/Flex';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 const Wrapper = styled(Flex)`
   position: relative;
@@ -22,7 +22,9 @@ const Wrapper = styled(Flex)`
 const FileWrapper = ({ children, ...props }) => {
   return (
     <Wrapper justifyContent="center" alignItems="center" as="span" {...props}>
-      <TableLabel textColor="neutral600">{children}</TableLabel>
+      <Typography variant="sigma" textColor="neutral600">
+        {children}
+      </Typography>
     </Wrapper>
   );
 };

diff --git a/.../admin/src/content-manager/components/DynamicTable/CellContent/Relation/PopoverContent.js b/.../admin/src/content-manager/components/DynamicTable/CellContent/Relation/PopoverContent.js
@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Loader } from '@strapi/design-system/Loader';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { axiosInstance } from '../../../../../core/utils';
@@ -52,19 +52,19 @@ const PopoverContent = ({ fieldSchema, name, rowId, targetModel, queryInfos }) =
 
         return (
           <Box as="li" key={entry.id} padding={3}>
-            <Text>
+            <Typography>
               {value ? (
                 <CellValue type={fieldSchema.schema.type} value={entry[fieldSchema.name]} />
               ) : (
                 '-'
               )}
-            </Text>
+            </Typography>
           </Box>
         );
       })}
       {data?.pagination.total > 10 && (
         <Box as="li" padding={3}>
-          <Text>[...]</Text>
+          <Typography>[...]</Typography>
         </Box>
       )}
     </ul>

diff --git a/...ore/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js b/...ore/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Badge } from '@strapi/design-system/Badge';
 import { Flex } from '@strapi/design-system/Flex';
@@ -34,9 +34,9 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
 
   if (SINGLE_RELATIONS.includes(fieldSchema.relation)) {
     return (
-      <Text textColor="neutral800">
+      <Typography textColor="neutral800">
         <CellValue type={metadatas.mainField.schema.type} value={value[metadatas.mainField.name]} />
-      </Text>
+      </Typography>
     );
   }
 
@@ -46,15 +46,15 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
     <Flex {...stopPropagation}>
       <RelationCountBadge>{value.count}</RelationCountBadge>
       <Box paddingLeft={2}>
-        <Text textColor="neutral800">
+        <Typography textColor="neutral800">
           {formatMessage(
             {
               id: 'content-manager.containers.ListPage.items',
               defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
             },
             { number: value.count }
           )}
-        </Text>
+        </Typography>
       </Box>
       {value.count > 0 && (
         <ActionWrapper>

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/index.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import Relation from './Relation';
 import CellValue from './CellValue';
 
-const TextMaxWidth = styled(Text)`
+const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
 
 const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
   if (content === null || content === undefined) {
-    return <Text textColor="neutral800">-</Text>;
+    return <Typography textColor="neutral800">-</Typography>;
   }
 
   if (fieldSchema.type === 'media' && !fieldSchema.multiple) {
@@ -38,9 +38,9 @@ const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId
   }
 
   return (
-    <TextMaxWidth ellipsis textColor="neutral800">
+    <TypographyMaxWidth ellipsis textColor="neutral800">
       <CellValue type={fieldSchema.type} value={content} />
-    </TextMaxWidth>
+    </TypographyMaxWidth>
   );
 };
 

diff --git a/...core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js b/...core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -27,12 +27,12 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: 'components.popUpWarning.message',
                 defaultMessage: 'Are you sure you want to delete this?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

diff --git a/...e/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js b/...e/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -28,12 +28,12 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
                 defaultMessage: 'Are you sure you want to delete these entries?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

diff --git a/...n/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js b/...n/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js
@@ -12,7 +12,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { BaseButton } from '@strapi/design-system/BaseButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../../utils';
 
 const StyledAddIcon = styled(PlusCircle)`
@@ -47,7 +47,7 @@ const StyledButton = styled(BaseButton)`
   }
   &:hover {
     color: ${({ theme }) => theme.colors.primary600} !important;
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600} !important;
     }
 
@@ -61,7 +61,7 @@ const StyledButton = styled(BaseButton)`
     }
   }
   &:active {
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
     ${StyledAddIcon} {
@@ -128,9 +128,13 @@ const AddComponentButton = ({
               <BoxFullHeight aria-hidden paddingRight={2}>
                 <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
               </BoxFullHeight>
-              <ButtonText textColor={hasError && !isOpen ? 'danger600' : 'neutral500'} small>
+              <Typography
+                variant="pi"
+                fontWeight="bold"
+                textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
+              >
                 {buttonLabel}
-              </ButtonText>
+              </Typography>
             </Flex>
           </StyledButton>
         </Box>

diff --git a/...mponents/DynamicZone/components/AddComponentButton/tests/__snapshots__/index.test.js.snap b/...mponents/DynamicZone/components/AddComponentButton/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AddComponentButton /> displays the name of the dz when the label is empty 1`] = `
-.c11 {
+.c10 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -108,15 +108,10 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
 }
 
 .c9 {
-  font-weight: 400;
+  font-weight: 600;
+  color: #8e8ea9;
   font-size: 0.75rem;
   line-height: 1.33;
-  color: #8e8ea9;
-}
-
-.c10 {
-  font-weight: 600;
-  line-height: 1.14;
 }
 
 .c7 {
@@ -226,7 +221,7 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
             </svg>
           </div>
           <span
-            class="c8 c9 c10"
+            class="c8 c9"
           >
             Add a component to name
           </span>
@@ -235,7 +230,7 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
     </div>
   </div>
   <div
-    class="c11"
+    class="c10"
   >
     <p
       aria-live="polite"
@@ -260,7 +255,7 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
 `;
 
 exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
-.c11 {
+.c10 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -367,15 +362,10 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
 }
 
 .c9 {
-  font-weight: 400;
+  font-weight: 600;
+  color: #8e8ea9;
   font-size: 0.75rem;
   line-height: 1.33;
-  color: #8e8ea9;
-}
-
-.c10 {
-  font-weight: 600;
-  line-height: 1.14;
 }
 
 .c7 {
@@ -485,7 +475,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
             </svg>
           </div>
           <span
-            class="c8 c9 c10"
+            class="c8 c9"
           >
             Add a component to test
           </span>
@@ -494,7 +484,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c11"
+    class="c10"
   >
     <p
       aria-live="polite"
@@ -519,7 +509,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
 `;
 
 exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen prop is truthy 1`] = `
-.c11 {
+.c10 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -626,15 +616,10 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
 }
 
 .c9 {
-  font-weight: 400;
+  font-weight: 600;
+  color: #8e8ea9;
   font-size: 0.75rem;
   line-height: 1.33;
-  color: #8e8ea9;
-}
-
-.c10 {
-  font-weight: 600;
-  line-height: 1.14;
 }
 
 .c7 {
@@ -744,7 +729,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
             </svg>
           </div>
           <span
-            class="c8 c9 c10"
+            class="c8 c9"
           >
             Close
           </span>
@@ -753,7 +738,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
     </div>
   </div>
   <div
-    class="c11"
+    class="c10"
   >
     <p
       aria-live="polite"