Merge pull request #11621 from strapi/typography-ctb

[DS] Typography in CTB
strapi · Nov 18, 2021 · 82740ef · 82740ef
2 parents 96f9156 + fc2d829
commit 82740ef
Show file tree

Hide file tree

Showing 17 changed files with 600 additions and 554 deletions.
diff --git a/.../core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js b/.../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>

diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js b/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}>

diff --git a/packages/core/content-type-builder/admin/src/components/ComponentCard/index.js b/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"

diff --git a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js b/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>

diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js b/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};

diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js b/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>

diff --git a/packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js b/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>

diff --git a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js b/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>
             )}

diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/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({

diff --git a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js b/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>

diff --git a/packages/core/content-type-builder/admin/src/components/List/index.js b/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>