Merge pull request #11621 from strapi/typography-ctb

[DS] Typography in CTB

packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 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 useFormModalNavigation from '../../../hooks/useFormModalNavigation';
 import getTrad from '../../../utils/getTrad';
 import AttributeIcon from '../../AttributeIcon';
@@ -35,15 +35,15 @@ const AttributeOption = ({ type }) => {
         <AttributeIcon type={type} />
         <Box paddingLeft={4}>
           <Flex>
-            <Text bold>
+            <Typography fontWeight="bold">
               {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}
-            </Text>
+            </Typography>
           </Flex>
 
           <Flex>
-            <Text small textColor="neutral600">
+            <Typography variant="pi" textColor="neutral600">
               {formatMessage({ id: getTrad(`attribute.${type}.description`) })}
-            </Text>
+            </Typography>
           </Flex>
         </Box>
       </Flex>

packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js

@@ -14,7 +14,7 @@ import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { ModalBody } from '@strapi/design-system/ModalLayout';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../utils';
 import AttributeOption from './AttributeOption';
 
@@ -27,7 +27,9 @@ const AttributeOptions = ({ attributes, forTarget, kind }) => {
   return (
     <ModalBody>
       <Flex paddingBottom={4}>
-        <H2>{formatMessage({ id: titleId, defaultMessage: 'Select a field' })}</H2>
+        <Typography variant="beta" as="h2">
+          {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}
+        </Typography>
       </Flex>
       <Divider />
       <Box paddingTop={6} paddingBottom={4}>

packages/core/content-type-builder/admin/src/components/ComponentCard/index.js

@@ -9,7 +9,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { pxToRem } from '@strapi/helper-plugin';
 import Cross from '@strapi/icons/Cross';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -74,12 +74,16 @@ const ComponentBox = styled(Box)`
       }
     }
 
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
+const StackCentered = styled(Stack)`
+  align-items: center;
+`;
+
 function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode, onClick }) {
   const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
   const {
@@ -101,12 +105,14 @@ function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode
         paddingLeft={4}
         paddingRight={4}
       >
-        <Stack size={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <StackCentered size={1}>
           <StyledFontAwesomeIcon icon={icon} />
-          <Text small bold ellipsis style={{ width: `calc(${pxToRem(140)} - 32px)` }}>
-            {displayName}
-          </Text>
-        </Stack>
+          <Box maxWidth={`calc(${pxToRem(140)} - 32px)`}>
+            <Typography variant="pi" fontWeight="bold" ellipsis>
+              {displayName}
+            </Typography>
+          </Box>
+        </StackCentered>
         {isInDevelopmentMode && (
           <CloseButton
             role="button"

packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text, P } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import useDataManager from '../../hooks/useDataManager';
 import getTrad from '../../utils/getTrad';
 import Cell from './Cell';
@@ -71,9 +71,15 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
     <Box>
       <Stack size={1}>
         <Flex justifyContent="space-between">
-          <Text textColor="neutral800" htmlFor={name} small bold as="label">
+          <Typography
+            variant="pi"
+            fontWeight="bold"
+            textColor="neutral800"
+            htmlFor={name}
+            as="label"
+          >
             {formatMessage(intlLabel)}
-          </Text>
+          </Typography>
           {showSearch ? (
             <div ref={searchWrapperRef} style={{ width: 206 }}>
               <Searchbar
@@ -148,9 +154,14 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
             </Box>
           </Box>
           {error && (
-            <P small id={`${name}-error`} textColor="danger600" data-strapi-field-error>
+            <Typography
+              variant="pi"
+              id={`${name}-error`}
+              textColor="danger600"
+              data-strapi-field-error
+            >
               {errorMessage}
-            </P>
+            </Typography>
           )}
         </Stack>
       </Stack>

packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { inputFocusStyle } from '@strapi/design-system/themes';
 
 const Wrapper = styled(Stack)`
@@ -60,7 +60,7 @@ const Wrapper = styled(Stack)`
 
   .container input:checked ~ div {
     background: ${({ theme }) => theme.colors.primary100};
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
     border: 1px solid ${({ theme }) => theme.colors.primary200};

packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 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';
 import { Stack } from '@strapi/design-system/Stack';
@@ -12,9 +12,9 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => {
 
   return (
     <Stack size={2}>
-      <Text textColor="neutral800" htmlFor={name} small bold as="label">
+      <Typography variant="pi" fontWeight="bold" textColor="neutral800" htmlFor={name} as="label">
         {formatMessage(intlLabel)}
-      </Text>
+      </Typography>
       <Wrapper horizontal size={4} style={{ alignItems: 'stretch' }}>
         {radios.map(radio => {
           return (
@@ -35,10 +35,10 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => {
                     <span className="checkmark" />
                   </Box>
                   <Stack size={2}>
-                    <Text bold>{formatMessage(radio.title)}</Text>
-                    <Text small textColor="neutral600">
+                    <Typography fontWeight="bold">{formatMessage(radio.title)}</Typography>
+                    <Typography variant="pi" textColor="neutral600">
                       {formatMessage(radio.description)}
-                    </Text>
+                    </Typography>
                   </Stack>
                 </Flex>
               </Box>

packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js

@@ -6,16 +6,21 @@
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import { getTrad } from '../../utils';
 
+const TypographyTextAlign = styled(Typography)`
+  text-align: center;
+`;
+
 const DraftAndPublishToggle = ({
   description,
   disabled,
@@ -81,22 +86,22 @@ const DraftAndPublishToggle = ({
         <Dialog onClose={handleToggle} title="Confirmation" isOpen={showWarning}>
           <DialogBody icon={<ExclamationMarkCircle />}>
             <Stack size={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Text id="confirm-description">
+              <Flex justifyContent="center">
+                <TypographyTextAlign id="confirm-description">
                   {formatMessage({
                     id: getTrad('popUpWarning.draft-publish.message'),
                     defaultMessage:
                       'If you disable the Draft/Publish system, your drafts will be deleted.',
                   })}
-                </Text>
+                </TypographyTextAlign>
               </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Text id="confirm-description">
+              <Flex justifyContent="center">
+                <Typography id="confirm-description">
                   {formatMessage({
                     id: getTrad('popUpWarning.draft-publish.second-message'),
                     defaultMessage: 'Are you sure you want to disable it?',
                   })}
-                </Text>
+                </Typography>
               </Flex>
             </Stack>
           </DialogBody>

packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js

@@ -11,7 +11,7 @@ import { pxToRem } from '@strapi/helper-plugin';
 import Plus from '@strapi/icons/Plus';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import useDataManager from '../../hooks/useDataManager';
@@ -80,12 +80,12 @@ function DynamicZoneList({ customRowComponent, components, addComponent, name, t
               <button type="button" onClick={handleClickAdd}>
                 <ComponentStack size={1}>
                   <StyledAddIcon />
-                  <Text small bold textColor="primary600">
+                  <Typography varian="pi" fontWeight="bold" textColor="primary600">
                     {formatMessage({
                       id: getTrad('button.component.add'),
                       formatMessage: 'Add a component',
                     })}
-                  </Text>
+                  </Typography>
                 </ComponentStack>
               </button>
             )}

packages/core/content-type-builder/admin/src/components/FormModal/index.js

@@ -17,7 +17,7 @@ import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
 import { ModalLayout, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout';
-import { H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
@@ -924,7 +924,7 @@ const FormModal = () => {
                 }}
               >
                 <Flex justifyContent="space-between">
-                  <H2>
+                  <Typography as="h2" variant="beta">
                     {formatMessage(
                       {
                         id: getModalTitleSubHeader({
@@ -946,7 +946,7 @@ const FormModal = () => {
                         step,
                       }
                     )}
-                  </H2>
+                  </Typography>
                   <Tabs>
                     <Tab hasError={doesBaseFormHasError}>
                       {formatMessage({

packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js

@@ -13,7 +13,7 @@ import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import useDataManager from '../../hooks/useDataManager';
 import getTrad from '../../utils/getTrad';
 import AttributeIcon from '../AttributeIcon';
@@ -66,9 +66,9 @@ const FormModalHeader = ({
             <AttributeIcon type={icon} />
           </Box>
           <Box paddingLeft={3}>
-            <ButtonText textColor="neutral800" as="h2" id="title">
+            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage({ id: headerId }, { name: displayName })}
-            </ButtonText>
+            </Typography>
           </Box>
         </Flex>
       </ModalHeader>

packages/core/content-type-builder/admin/src/components/List/index.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tr, Th, TFooter } from '@strapi/design-system/Table';
 import Plus from '@strapi/icons/Plus';
 import { useIntl } from 'react-intl';
@@ -55,14 +55,14 @@ function List({
         <Thead>
           <Tr>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-              </TableLabel>
+              </Typography>
             </Th>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-              </TableLabel>
+              </Typography>
             </Th>
           </Tr>
         </Thead>
@@ -83,14 +83,14 @@ function List({
         <Thead>
           <Tr>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-              </TableLabel>
+              </Typography>
             </Th>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-              </TableLabel>
+              </Typography>
             </Th>
           </Tr>
         </Thead>
@@ -133,14 +133,14 @@ function List({
               <thead>
                 <tr>
                   <th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-                    </TableLabel>
+                    </Typography>
                   </th>
                   <th colSpan="2">
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-                    </TableLabel>
+                    </Typography>
                   </th>
                 </tr>
               </thead>

packages/core/content-type-builder/admin/src/components/ListRow/index.js

@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Pencil from '@strapi/icons/Pencil';
 import Trash from '@strapi/icons/Trash';
 import { stopPropagation, onRowClick } from '@strapi/helper-plugin';
@@ -94,12 +94,12 @@ function ListRow({
         {loopNumber !== 0 && <Curve color={isFromDynamicZone ? 'primary200' : 'neutral150'} />}
         <Stack paddingLeft={2} size={4} horizontal>
           <AttributeIcon key={src} type={src} />
-          <Text bold>{upperFirst(name)}</Text>
+          <Typography fontWeight="bold">{upperFirst(name)}</Typography>
         </Stack>
       </td>
       <td>
         {target ? (
-          <Text>
+          <Typography>
             {formatMessage({
               id: getTrad(
                 `modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}`
@@ -116,9 +116,9 @@ function ListRow({
                   defaultMessage: 'from',
                 })}: ${isPluginContentType})`}
             </span>
-          </Text>
+          </Typography>
         ) : (
-          <Text>
+          <Typography>
             {formatMessage({
               id: getTrad(`attribute.${readableType}`),
               defaultMessage: type,
@@ -129,7 +129,7 @@ function ListRow({
                 id: getTrad('component.repeatable'),
                 defaultMessage: '(repeatable)',
               })}
-          </Text>
+          </Typography>
         )}
       </td>
       <td>

packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '@strapi/design-system/Flex';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import styled from 'styled-components';
 
 const IconBox = styled(Box)`
@@ -40,9 +40,9 @@ const NestedTFooter = ({ children, icon, color, ...props }) => {
           {icon}
         </IconBox>
         <Box paddingLeft={3}>
-          <Text small bold textColor={`${color}600`}>
+          <Typography variant="pi" fontWeight="bold" textColor={`${color}600`}>
             {children}
-          </Text>
+          </Typography>
         </Box>
       </Flex>
     </ButtonBox>

packages/core/content-type-builder/admin/src/components/Relation/RelationField/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Divider } from '@strapi/design-system/Divider';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { GenericInput } from '@strapi/helper-plugin';
 import getTrad from '../../../utils/getTrad';
 import RelationTargetPicker from './RelationTargetPicker';
@@ -23,9 +23,9 @@ const RelationFormBox = ({
     <Box background="neutral100" hasRadius borderColor="neutral200">
       <Flex paddingTop={isMain ? 4 : 1} paddingBottom={isMain ? 3 : 1} justifyContent="center">
         {isMain ? (
-          <Text textColor="neutral800" bold small>
+          <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {header}
-          </Text>
+          </Typography>
         ) : (
           <RelationTargetPicker
             target={target}

packages/core/content-type-builder/admin/src/components/Relation/RelationNaturePicker/index.js

@@ -12,7 +12,7 @@ import OneToMany from '@strapi/icons/OneToMany';
 import ManyToOne from '@strapi/icons/ManyToOne';
 import ManyToMany from '@strapi/icons/ManyToMany';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Stack } from '@strapi/design-system/Stack';
 import useDataManager from '../../../hooks/useDataManager';
@@ -108,11 +108,11 @@ const RelationNaturePicker = ({
         </Flex>
       </Wrapper>
       <InfosWrapper justifyContent="center">
-        <Text>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Text>
-        <Text textColor="primary600">
+        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>
+        <Typography textColor="primary600">
           {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;
-        </Text>
-        <Text>{truncate(rightDisplayedValue, { length: 24 })}</Text>
+        </Typography>
+        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>
       </InfosWrapper>
     </Flex>
   );

packages/core/content-type-builder/admin/src/components/TabForm/index.js

@@ -11,7 +11,7 @@ import get from 'lodash/get';
 import { GenericInput } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { H3 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 /* eslint-disable react/no-array-index-key */
 const TabForm = ({ form, formErrors, genericInputProps, modifiedData, onChange }) => {
@@ -27,7 +27,9 @@ const TabForm = ({ form, formErrors, genericInputProps, modifiedData, onChange }
       <Box key={sectionIndex}>
         {section.sectionTitle && (
           <Box paddingBottom={4}>
-            <H3>{formatMessage(section.sectionTitle)}</H3>
+            <Typography variant="delta" as="h3">
+              {formatMessage(section.sectionTitle)}
+            </Typography>
           </Box>
         )}
         <Grid gap={4}>