replaced Text components with Typography

This commit is contained in:
ronronscelestes 2021-11-09 17:41:21 +01:00
parent 42b2108742
commit fb9fac6f48
4 changed files with 17 additions and 15 deletions

View File

@ -23,7 +23,7 @@ import { Button } from '@strapi/design-system/Button';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
import { H3 } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import ArrowLeft from '@strapi/icons/ArrowLeft'; import ArrowLeft from '@strapi/icons/ArrowLeft';
@ -216,12 +216,12 @@ const EditPage = ({ canUpdate }) => {
paddingRight={7} paddingRight={7}
> >
<Stack size={4}> <Stack size={4}>
<H3 as="h2"> <Typography variant="delta" as="h2">
{formatMessage({ {formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.details', id: 'app.components.Users.ModalCreateBody.block-title.details',
defaultMessage: 'Details', defaultMessage: 'Details',
})} })}
</H3> </Typography>
<Grid gap={5}> <Grid gap={5}>
{layout.map(row => { {layout.map(row => {
return row.map(input => { return row.map(input => {
@ -251,12 +251,12 @@ const EditPage = ({ canUpdate }) => {
paddingRight={7} paddingRight={7}
> >
<Stack size={4}> <Stack size={4}>
<H3 as="h2"> <Typography variant="delta" as="h2">
{formatMessage({ {formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.login', id: 'app.components.Users.ModalCreateBody.block-title.login',
defaultMessage: 'Login settings', defaultMessage: 'Login settings',
})} })}
</H3> </Typography>
<Grid gap={5}> <Grid gap={5}>
<GridItem col={6} xs={12}> <GridItem col={6} xs={12}>
<SelectRoles <SelectRoles

View File

@ -4,7 +4,7 @@ import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { IconButton } from '@strapi/design-system/IconButton'; import { IconButton } from '@strapi/design-system/IconButton';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Tbody, Td, Tr } from '@strapi/design-system/Table'; import { Tbody, Td, Tr } from '@strapi/design-system/Table';
import Pencil from '@strapi/icons/Pencil'; import Pencil from '@strapi/icons/Pencil';
import Trash from '@strapi/icons/Trash'; import Trash from '@strapi/icons/Trash';
@ -64,7 +64,7 @@ const TableRows = ({
{typeof cellFormatter === 'function' ? ( {typeof cellFormatter === 'function' ? (
cellFormatter(data, { key, name, ...rest }) cellFormatter(data, { key, name, ...rest })
) : ( ) : (
<Text textColor="neutral800">{data[name] || '-'}</Text> <Typography textColor="neutral800">{data[name] || '-'}</Typography>
)} )}
</Td> </Td>
); );

View File

@ -12,7 +12,7 @@ import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { H2 } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin'; import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
@ -113,12 +113,12 @@ const ModalForm = ({ queryName, onToggle }) => {
<Stack size={6}> <Stack size={6}>
{currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />} {currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
<Box> <Box>
<H2> <Typography variant="beta">
{formatMessage({ {formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.details', id: 'app.components.Users.ModalCreateBody.block-title.details',
defaultMessage: 'Details', defaultMessage: 'Details',
})} })}
</H2> </Typography>
<Box paddingTop={4}> <Box paddingTop={4}>
<Stack size={1}> <Stack size={1}>
<Grid gap={5}> <Grid gap={5}>
@ -142,12 +142,12 @@ const ModalForm = ({ queryName, onToggle }) => {
</Box> </Box>
</Box> </Box>
<Box> <Box>
<H2> <Typography variant="beta">
{formatMessage({ {formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.login', id: 'app.components.Users.ModalCreateBody.block-title.login',
defaultMessage: 'Login settings', defaultMessage: 'Login settings',
})} })}
</H2> </Typography>
<Box paddingTop={4}> <Box paddingTop={4}>
<Grid gap={5}> <Grid gap={5}>
<GridItem col={6} xs={12}> <GridItem col={6} xs={12}>

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Status } from '@strapi/helper-plugin'; import { Status } from '@strapi/helper-plugin';
const tableHeaders = [ const tableHeaders = [
@ -25,7 +25,9 @@ const tableHeaders = [
metadatas: { label: 'Roles', sortable: false }, metadatas: { label: 'Roles', sortable: false },
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
cellFormatter: ({ roles }) => { cellFormatter: ({ roles }) => {
return <Text textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Text>; return (
<Typography textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Typography>
);
}, },
/* eslint-enable react/prop-types */ /* eslint-enable react/prop-types */
}, },
@ -43,7 +45,7 @@ const tableHeaders = [
return ( return (
<Flex> <Flex>
<Status isActive={isActive} variant={isActive ? 'success' : 'danger'} /> <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
<Text textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Text> <Typography textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Typography>
</Flex> </Flex>
); );
}, },