Merge 0815077 into e9c370a

strapi · Nov 17, 2021 · 710e2a7 · 710e2a7
2 parents e9c370a + 0815077
commit 710e2a7
Show file tree

Hide file tree

Showing 21 changed files with 947 additions and 970 deletions.
diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
@@ -10,7 +10,7 @@ import {
   CardSubtitle,
   CardBadge,
 } from '@strapi/design-system/Card';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
@@ -99,9 +99,9 @@ export const UploadingAssetCard = ({
         </CardBody>
       </Card>
       {error ? (
-        <Text small bold textColor="danger600">
+        <Typography variant="pi" fontWeight="bold" textColor="danger600">
           {error.message}
-        </Text>
+        </Typography>
       ) : (
         undefined
       )}

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PageSize.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PageSize.js
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Select, Option } from '@strapi/design-system/Select';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import PropTypes from 'prop-types';
 
 const PageSize = ({ onChangePageSize, pageSize }) => {
@@ -36,12 +36,12 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
         <Option value="100">100</Option>
       </Select>
       <Box paddingLeft={2}>
-        <Text textColor="neutral600" as="label" htmlFor="page-size">
+        <Typography textColor="neutral600" as="label" htmlFor="page-size">
           {formatMessage({
             id: 'components.PageFooter.select',
             defaultMessage: 'Entries per page',
           })}
-        </Text>
+        </Typography>
       </Box>
     </Flex>
   );

diff --git a/...es/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/components.js b/...es/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/components.js
@@ -3,13 +3,12 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import ChevronLeft from '@strapi/icons/ChevronLeft';
 import ChevronRight from '@strapi/icons/ChevronRight';
-
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { buttonFocusStyle } from '@strapi/design-system/themes';
 import { usePagination } from './PaginationContext';
 
-const PaginationText = styled(Text)`
+const PaginationText = styled(Typography)`
   line-height: revert;
 `;
 
@@ -98,7 +97,7 @@ export const PageLink = ({ number, children, ...props }) => {
     <li>
       <PageLinkWrapper {...props} active={isActive}>
         <VisuallyHidden>{children}</VisuallyHidden>
-        <PaginationText aria-hidden small bold={isActive}>
+        <PaginationText aria-hidden variant="pi" fontWeight={isActive ? 'bold' : ''}>
           {number}
         </PaginationText>
       </PageLinkWrapper>

diff --git a/packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js b/packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { useIntl } from 'react-intl';
 import getTrad from '../../utils/getTrad';
@@ -9,12 +9,12 @@ export const DialogTitle = () => {
 
   return (
     <ModalHeader>
-      <ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
+      <Typography fontWeight="bold" textColor="neutral800" as="h2" id="asset-dialog-title">
         {formatMessage({
           id: getTrad('header.actions.upload-assets'),
           defaultMessage: 'Upload assets',
         })}
-      </ButtonText>
+      </Typography>
     </ModalHeader>
   );
 };
diff --git a/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { AssetList } from '../../AssetList';
 import getTrad from '../../../utils/getTrad';
 
@@ -12,7 +12,7 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset }) => {
   return (
     <Stack size={4}>
       <Stack size={0}>
-        <Text small bold textColor="neutral800">
+        <Typography variant="pi" fontWeight="bold" textColor="neutral800">
           {formatMessage(
             {
               id: getTrad('list.assets.selected'),
@@ -21,13 +21,13 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset }) => {
             },
             { number: selectedAssets.length }
           )}
-        </Text>
-        <Text small textColor="neutral600">
+        </Typography>
+        <Typography variant="pi" textColor="neutral600">
           {formatMessage({
             id: getTrad('modal.upload-list.sub-header-subtitle'),
             defaultMessage: 'Manage the assets before adding them to the Media Library',
           })}
-        </Text>
+        </Typography>
       </Stack>
 
       <AssetList

diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/AssetMeta.js b/packages/core/upload/admin/src/components/EditAssetDialog/AssetMeta.js
@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { TableLabel, Text } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import getTrad from '../../utils/getTrad';
 
@@ -23,45 +22,45 @@ export const AssetMeta = ({ size, date, dimension, extension }) => {
       <Grid gap={4}>
         <GridItem col={6} xs={12}>
           <Stack size={1}>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({ id: getTrad('modal.file-details.size'), defaultMessage: 'Size' })}
-            </TableLabel>
-            <Text small textColor="neutral700">
+            </Typography>
+            <Typography variant="pi" textColor="neutral700">
               {size}
-            </Text>
+            </Typography>
           </Stack>
         </GridItem>
         <GridItem col={6} xs={12}>
           <Stack size={1}>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({ id: getTrad('modal.file-details.date'), defaultMessage: 'Date' })}
-            </TableLabel>
-            <Text small textColor="neutral700">
+            </Typography>
+            <Typography variant="pi" textColor="neutral700">
               {date}
-            </Text>
+            </Typography>
           </Stack>
         </GridItem>
         <GridItem col={6} xs={12}>
           <Stack size={1}>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({
                 id: getTrad('modal.file-details.dimensions'),
                 defaultMessage: 'Dimensions',
               })}
-            </TableLabel>
-            <Text small textColor="neutral700">
+            </Typography>
+            <Typography variant="pi" textColor="neutral700">
               {dimension}
-            </Text>
+            </Typography>
           </Stack>
         </GridItem>
         <GridItem col={6} xs={12}>
           <Stack size={1}>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({
                 id: getTrad('modal.file-details.extension'),
                 defaultMessage: 'Extension',
               })}
-            </TableLabel>
+            </Typography>
 
             <Typography
               textColor="neutral700"

diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
@@ -13,7 +13,7 @@ import {
   ModalBody,
   ModalFooter,
 } from '@strapi/design-system/ModalLayout';
-import { ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Button } from '@strapi/design-system/Button';
@@ -80,9 +80,9 @@ export const EditAssetDialog = ({
     <>
       <ModalLayout onClose={() => onClose()} labelledBy="title">
         <ModalHeader>
-          <ButtonText textColor="neutral800" as="h2" id="title">
+          <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
             {formatMessage({ id: getTrad('modal.edit.title'), defaultMessage: 'Details' })}
-          </ButtonText>
+          </Typography>
         </ModalHeader>
         <ModalBody>
           <Grid gap={4}>