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

[DS] Typography CM / Part 1

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,17 +46,17 @@ 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,
@@ -64,7 +64,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
             },
             error.values
           )}
-        </Text>
+        </Typography>
       )}
     </>
   );

packages/core/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>
   );
 };

packages/core/admin/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>

packages/core/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,7 +46,7 @@ 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',
@@ -54,7 +54,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
             },
             { number: value.count }
           )}
-        </Text>
+        </Typography>
       </Box>
       {value.count > 0 && (
         <ActionWrapper>

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>
   );
 };
 

packages/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" />

packages/core/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" />

packages/core/admin/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>

packages/core/admin/admin/src/content-manager/components/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"

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -47,7 +47,7 @@ const ComponentBox = styled(Box)`
       }
     }
 
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
@@ -64,9 +64,9 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
       <ComponentBox borderRadius="borderRadius">
         <Stack size={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
           <StyledFontAwesomeIcon icon={icon} />
-          <Text small bold textColor="neutral600">
+          <Typography variant="pi" fontWeight="bold" textColor="neutral600">
             {formatMessage(intlLabel)}
-          </Text>
+          </Typography>
         </Stack>
       </ComponentBox>
     </button>

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../../utils';
 import { useContentTypeLayout } from '../../../../hooks';
 import Category from './Category';
@@ -71,12 +71,12 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
         hasRadius
       >
         <Flex justifyContent="center">
-          <Text bold textColor="neutral600">
+          <Typography fontWeight="bold" textColor="neutral600">
             {formatMessage({
               id: getTrad('components.DynamicZone.ComponentPicker-label'),
               defaultMessage: 'Pick one component',
             })}
-          </Text>
+          </Typography>
         </Flex>
         <Box paddingTop={2}>
           <KeyboardNavigable attributeName="data-strapi-accordion-toggle">

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js

@@ -11,7 +11,6 @@ import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 
 const StyledBox = styled(Box)`
@@ -38,7 +37,7 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
             <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
               {intlLabel}&nbsp;({numberOfComponents})
             </Typography>
-            {required && <Text textColor="danger600">*</Text>}
+            {required && <Typography textColor="danger600">*</Typography>}
             {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
           </Flex>
         </StyledBox>

packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 const LabelAction = styled(Box)`
   svg path {
@@ -27,11 +27,17 @@ const Label = ({
   return (
     <Box paddingBottom={1}>
       <Flex>
-        <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
+        <Typography
+          textColor="neutral800"
+          htmlFor={id || name}
+          variant="pi"
+          fontWeight="bold"
+          as="label"
+        >
           {label}
           {showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
-          {required && <Text textColor="danger600">*</Text>}
-        </Text>
+          {required && <Typography textColor="danger600">*</Typography>}
+        </Typography>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
       </Flex>
     </Box>

packages/core/admin/admin/src/content-manager/components/Hint/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { P } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 export const Hint = ({ id, error, name, description }) => {
   const { formatMessage } = useIntl();
@@ -17,9 +17,9 @@ export const Hint = ({ id, error, name, description }) => {
   }
 
   return (
-    <P small id={`${id || name}-hint`} textColor="neutral600">
+    <Typography as="p" variant="pi" id={`${id || name}-hint`} textColor="neutral600">
       {hint}
-    </P>
+    </Typography>
   );
 };
 

packages/core/admin/admin/src/content-manager/components/InputJSON/FieldError.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { P } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 export const FieldError = ({ id, error, name }) => {
   const { formatMessage } = useIntl();
@@ -12,9 +12,15 @@ export const FieldError = ({ id, error, name }) => {
   }
 
   return (
-    <P small id={`${id || name}-error`} textColor="danger600" data-strapi-field-error>
+    <Typography
+      as="p"
+      variant="pi"
+      id={`${id || name}-error`}
+      textColor="danger600"
+      data-strapi-field-error
+    >
       {errorMessage}
-    </P>
+    </Typography>
   );
 };
 

packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 
@@ -23,9 +23,15 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
 
   return (
     <Flex>
-      <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
+      <Typography
+        textColor="neutral800"
+        htmlFor={id || name}
+        variant="pi"
+        fontWeight="bold"
+        as="label"
+      >
         {label}
-      </Text>
+      </Typography>
       {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
     </Flex>
   );

packages/core/admin/admin/src/content-manager/components/InputUID/index.js

@@ -4,7 +4,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import { TextInput } from '@strapi/design-system/TextInput';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Refresh from '@strapi/icons/Refresh';
 import CheckCircle from '@strapi/icons/CheckCircle';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
@@ -195,30 +195,30 @@ const InputUID = ({
           {availability && availability.isAvailable && !regenerateLabel && (
             <TextValidation alignItems="center" justifyContent="flex-end">
               <CheckCircle />
-              <Text textColor="success600" small>
+              <Typography textColor="success600" variant="pi">
                 {formatMessage({
                   id: 'content-manager.components.uid.available',
                   defaultMessage: 'Available',
                 })}
-              </Text>
+              </Typography>
             </TextValidation>
           )}
           {availability && !availability.isAvailable && !regenerateLabel && (
             <TextValidation notAvailable alignItems="center" justifyContent="flex-end">
               <ExclamationMarkCircle />
-              <Text textColor="danger600" small>
+              <Typography textColor="danger600" variant="pi">
                 {formatMessage({
                   id: 'content-manager.components.uid.unavailable',
                   defaultMessage: 'Unavailable',
                 })}
-              </Text>
+              </Typography>
             </TextValidation>
           )}
           {regenerateLabel && (
             <TextValidation alignItems="center" justifyContent="flex-end">
-              <Text textColor="primary600" small>
+              <Typography textColor="primary600" variant="pi">
                 {regenerateLabel}
-              </Text>
+              </Typography>
             </TextValidation>
           )}
           <FieldActionWrapper

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
@@ -73,9 +72,9 @@ const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) =
     <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
       {label && (
         <Flex paddingBottom={1}>
-          <Text as="label" textColor="neutral800" small bold>
+          <Typography as="label" textColor="neutral800" variant="pi" fontWeight="bold">
             {label}
-          </Text>
+          </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
         </Flex>
       )}

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Plus from '@strapi/icons/Plus';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
@@ -38,13 +38,13 @@ const Button = ({ disabled, onClick }) => {
       onClick={onClick}
     >
       <Flex justifyContent="center">
-        <Text textColor="primary600" bold>
+        <Typography fontWeight="bold" textColor="primary600">
           <StyledIcon />
           {formatMessage({
             id: getTrad('containers.EditView.add.new-entry'),
             defaultMessage: 'Add an entry',
           })}
-        </Text>
+        </Typography>
       </Flex>
     </StyledButton>
   );

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { pxToRem } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Trash from '@strapi/icons/Trash';
 import DragHandle from '@strapi/icons/Drag';
 import CarretDown from '@strapi/icons/CarretDown';
 
+const DragPreviewBox = styled(Box)`
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+`;
+
 const DropdownIconWrapper = styled(Box)`
   height: ${32 / 16}rem;
   width: ${32 / 16}rem;
@@ -37,14 +42,14 @@ const ToggleButton = styled.button`
 
 const DragPreview = ({ displayedValue }) => {
   return (
-    <Box
+    <DragPreviewBox
       paddingLeft={3}
       paddingRight={3}
       paddingTop={3}
       paddingBottom={3}
       hasRadius
       background="neutral0"
-      width="300px"
+      width={pxToRem(300)}
     >
       <Flex justifyContent="space-between">
         <ToggleButton type="button">
@@ -52,10 +57,10 @@ const DragPreview = ({ displayedValue }) => {
             <DropdownIconWrapper background="neutral200">
               <CarretDown />
             </DropdownIconWrapper>
-            <Box paddingLeft={6}>
-              <Text textColor="neutral700" style={{ width: '9vw' }} ellipsis>
+            <Box paddingLeft={6} maxWidth={pxToRem(150)}>
+              <Typography textColor="neutral700" ellipsis>
                 {displayedValue}
-              </Text>
+              </Typography>
             </Box>
           </Flex>
         </ToggleButton>
@@ -68,7 +73,7 @@ const DragPreview = ({ displayedValue }) => {
           </Flex>
         </Box>
       </Flex>
-    </Box>
+    </DragPreviewBox>
   );
 };
 

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DraggingSibling.js

@@ -5,7 +5,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Icon } from '@strapi/design-system/Icon';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import DropdownIcon from '@strapi/icons/CarretDown';
@@ -51,9 +51,9 @@ const DraggingSibling = ({ displayedValue }) => {
         </Flex>
 
         <ToggleButton onClick={() => {}} flex={1}>
-          <Text bold textColor="neutral700">
+          <Typography fontWeight="bold" textColor="neutral700">
             {displayedValue}
-          </Text>
+          </Typography>
         </ToggleButton>
       </Stack>