yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 19:04:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove pxToRem and replace it with the returning value of the function (#19771)

Browse Source 
* chore: remove pxToRem from the helper plugin utils

* chore: fix prettier errors
This commit is contained in:
Simone 2024-03-14 11:18:35 +01:00 committed by GitHub
parent 5dca68fa39
commit 11079442a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
44 changed files with 132 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/admin/admin/src/components/GuidedTour/Homepage.tsx
View File

@ -1,6 +1,6 @@
import { Box, Button, Flex, Typography } from '@strapi/design-system';
import { LinkButton } from '@strapi/design-system/v2';
import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
import { GuidedTourContextValue, useGuidedTour, useTracking } from '@strapi/helper-plugin';
import { ArrowRight } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { NavLink } from 'react-router-dom';
@ -62,7 +62,7 @@ const GuidedTourHomepage = () => {
return (
<Box key={section.key}>
<Flex>
<Box minWidth={pxToRem(30)} marginRight={5}>
<Box minWidth={`${30 / 16}rem`} marginRight={5}>
<Number state={state}>{index + 1}</Number>
</Box>
<Typography variant="delta" as="h3">
@ -72,7 +72,7 @@ const GuidedTourHomepage = () => {
<Flex alignItems="flex-start">
<Flex
justifyContent="center"
minWidth={pxToRem(30)}
minWidth={`${30 / 16}rem`}
marginBottom={3}
marginTop={3}
marginRight={5}

18
packages/core/admin/admin/src/components/GuidedTour/Modal.tsx
View File

@ -10,7 +10,7 @@ import {
Typography,
} from '@strapi/design-system';
import { LinkButton } from '@strapi/design-system/v2';
import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
import { GuidedTourContextValue, useGuidedTour, useTracking } from '@strapi/helper-plugin';
import { ArrowRight, Cross } from '@strapi/icons';
import get from 'lodash/get';
import { MessageDescriptor, useIntl } from 'react-intl';
@ -75,7 +75,7 @@ const GuidedTourModal = () => {
direction="column"
alignItems="stretch"
background="neutral0"
width={pxToRem(660)}
width={`${660 / 16}rem`}
shadow="popupShadow"
hasRadius
padding={4}
@ -171,8 +171,10 @@ const GuidedTourStepper = ({
return (
<>
<Flex alignItems="stretch">
<Flex marginRight={8} justifyContent="center" minWidth={pxToRem(30)}>
{hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />}
<Flex marginRight={8} justifyContent="center" minWidth={`${30 / 16}rem`}>
{hasSectionBefore && (
<VerticalDivider state={STATES.IS_DONE} minHeight={`${24 / 16}rem`} />
)}
</Flex>
<Typography variant="sigma" textColor="primary600">
{formatMessage({
@ -182,7 +184,7 @@ const GuidedTourStepper = ({
</Typography>
</Flex>
<Flex>
<Flex marginRight={8} minWidth={pxToRem(30)}>
<Flex marginRight={8} minWidth={`${30 / 16}rem`}>
<Number
state={hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE}
paddingTop={3}
@ -198,7 +200,7 @@ const GuidedTourStepper = ({
)}
</Flex>
<Flex alignItems="stretch">
<Flex marginRight={8} direction="column" justifyContent="center" minWidth={pxToRem(30)}>
<Flex marginRight={8} direction="column" justifyContent="center" minWidth={`${30 / 16}rem`}>
{hasSectionAfter && (
<>
<VerticalDivider state={STATES.IS_DONE} />
@ -232,8 +234,8 @@ const GuidedTourStepper = ({
</Flex>
{hasStepsBefore && hasSectionAfter && (
<Box paddingTop={3}>
<Flex marginRight={8} justifyContent="center" width={pxToRem(30)}>
<VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />
<Flex marginRight={8} justifyContent="center" width={`${30 / 16}rem`}>
<VerticalDivider state={STATES.IS_DONE} minHeight={`${24 / 16}rem`} />
</Flex>
</Box>
)}

15
packages/core/admin/admin/src/components/GuidedTour/Ornaments.tsx
View File

@ -1,5 +1,4 @@
import { Box, BoxProps, Flex, FlexProps, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Check } from '@strapi/icons';
import { STATES, States } from './constants';
@ -19,13 +18,13 @@ const Number = ({ children, state, ...props }: NumberProps) => {
background="primary600"
padding={2}
borderRadius="50%"
width={pxToRem(30)}
height={pxToRem(30)}
width={`${30 / 16}rem`}
height={`${30 / 16}rem`}
justifyContent="center"
{...props}
>
{state === STATES.IS_DONE ? (
<Check aria-hidden width={pxToRem(16)} color="neutral0" />
<Check aria-hidden width={`${16 / 16}rem`} color="neutral0" />
) : (
<Typography fontWeight="semiBold" textColor="neutral0">
{children}
@ -39,8 +38,8 @@ const Number = ({ children, state, ...props }: NumberProps) => {
borderStyle="solid"
padding={2}
borderRadius="50%"
width={pxToRem(30)}
height={pxToRem(30)}
width={`${30 / 16}rem`}
height={`${30 / 16}rem`}
justifyContent="center"
{...props}
>
@ -61,11 +60,11 @@ interface VerticalDividerProps extends BoxProps {
const VerticalDivider = ({ state, ...props }: VerticalDividerProps) => (
<Box
width={pxToRem(2)}
width={`${2 / 16}rem`}
height="100%"
background={state === STATES.IS_NOT_DONE ? 'neutral300' : 'primary500'}
hasRadius
minHeight={state === STATES.IS_ACTIVE ? pxToRem(85) : pxToRem(65)}
minHeight={state === STATES.IS_ACTIVE ? `${85 / 16}rem` : `${65 / 16}rem`}
{...props}
/>
);

3
packages/core/admin/admin/src/content-manager/components/DragPreviews/CardDragPreview.tsx
View File

@ -1,5 +1,4 @@
import { Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Cross, Drag, Pencil } from '@strapi/icons';
import styled from 'styled-components';
@ -17,7 +16,7 @@ const CardDragPreview = ({ label, isSibling = false }: CardDragPreviewProps) =>
hasRadius
justifyContent="space-between"
isSibling={isSibling}
max-height={pxToRem(32)}
max-height={`${32 / 16}rem`}
maxWidth="min-content"
>
<Flex gap={3}>

9
packages/core/admin/admin/src/content-manager/components/DragPreviews/ComponentDragPreview.tsx
View File

@ -1,5 +1,4 @@
import { Flex, IconButton, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { CarretDown, Drag, Trash } from '@strapi/icons';
import styled from 'styled-components';
@ -15,7 +14,7 @@ const ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) =>
justifyContent="space-between"
gap={3}
padding={3}
width={pxToRem(300)}
width={`${300 / 16}rem`}
>
<ToggleButton type="button">
<Flex gap={6}>
@ -23,13 +22,13 @@ const ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) =>
alignItems="center"
justifyContent="center"
background="neutral200"
height={pxToRem(32)}
width={pxToRem(32)}
height={`${32 / 16}rem`}
width={`${32 / 16}rem`}
>
<CarretDown />
</DropdownIconWrapper>
<Flex maxWidth={pxToRem(150)}>
<Flex maxWidth={`${150 / 16}rem`}>
<Typography textColor="neutral700" ellipsis>
{displayedValue}
</Typography>

5
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx
View File

@ -2,7 +2,6 @@ import * as React from 'react';
import { createContext } from '@radix-ui/react-context';
import { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Expand } from '@strapi/icons';
import { type Attribute } from '@strapi/types';
import { MessageDescriptor, useIntl } from 'react-intl';
@ -117,8 +116,8 @@ const EditorDivider = styled(Divider)`
const ExpandIconButton = styled(IconButton)`
position: absolute;
bottom: ${pxToRem(12)};
right: ${pxToRem(12)};
bottom: ${12 / 16}rem;
right: ${12 / 16}rem;
`;
/**

3
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.tsx
View File

@ -2,7 +2,6 @@ import * as React from 'react';
import * as Toolbar from '@radix-ui/react-toolbar';
import { Flex, Icon, Tooltip, SingleSelect, SingleSelectOption, Box } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Link } from '@strapi/icons';
import { MessageDescriptor, useIntl } from 'react-intl';
import { Editor, Transforms, Element as SlateElement, Node, type Ancestor } from 'slate';
@ -27,7 +26,7 @@ const ToolbarWrapper = styled(Flex)`
const Separator = styled(Toolbar.Separator)`
background: ${({ theme }) => theme.colors.neutral150};
width: 1px;
height: ${pxToRem(24)};
height: ${24 / 16}rem;
`;
const FlexButton = styled(Flex)`

6
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { Box, Flex, FocusTrap, Portal, IconButton, InputWrapper } from '@strapi/design-system';
import { useLockScroll, pxToRem } from '@strapi/helper-plugin';
import { useLockScroll } from '@strapi/helper-plugin';
import { Collapse } from '@strapi/icons';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -12,8 +12,8 @@ import { useBlocksEditorContext } from './BlocksEditor';
const CollapseIconButton = styled(IconButton)`
position: absolute;
bottom: ${pxToRem(12)};
right: ${pxToRem(12)};
bottom: ${12 / 16}rem;
right: ${12 / 16}rem;
`;
const ExpandWrapper = styled(Flex)`

5
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/Component/Initializer.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { PlusCircle } from '@strapi/icons';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -57,8 +56,8 @@ const Initializer = ({ disabled, name, onClick }: InitializerProps) => {
};
const CircleIcon = styled(PlusCircle)`
width: ${pxToRem(24)};
height: ${pxToRem(24)};
width: ${24 / 16}rem;
height: ${24 / 16}rem;
> circle {
fill: ${({ theme }) => theme.colors.primary200};
}

3
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCard.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import { Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import styled from 'styled-components';
import { ComponentIcon, ComponentIconProps } from '../../../../../components/ComponentIcon';
@ -23,7 +22,7 @@ const ComponentCard = ({ children, onClick, icon }: ComponentCardProps) => {
justifyContent="center"
alignItems="center"
shrink={0}
height={pxToRem(84)}
height={`${84 / 16}rem`}
>
<Flex direction="column" gap={1} alignItems="center" justifyContent="center">
<ComponentIcon icon={icon} />

3
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx
View File

@ -9,7 +9,6 @@ import {
Flex,
Typography,
} from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -64,7 +63,7 @@ const ComponentCategory = ({
justifyContent="center"
onClick={onAddComponent(uid)}
hasRadius
height={pxToRem(84)}
height={`${84 / 16}rem`}
shrink={0}
borderColor="neutral200"
>

5
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
interface DynamicZoneLabelProps {
label?: React.ReactNode;
@ -33,7 +32,7 @@ const DynamicZoneLabel = ({
color="neutral500"
>
<Flex direction="column" justifyContent="center">
<Flex maxWidth={pxToRem(356)}>
<Flex maxWidth={`${356 / 16}rem`}>
<Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
{label || name}&nbsp;
</Typography>
@ -44,7 +43,7 @@ const DynamicZoneLabel = ({
{labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
</Flex>
{hint && (
<Box paddingTop={1} maxWidth={pxToRem(356)}>
<Box paddingTop={1} maxWidth={`${356 / 16}rem`}>
<Typography variant="pi" textColor="neutral600" ellipsis>
{hint}
</Typography>

4
packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
import { useLockScroll } from '@strapi/helper-plugin';
import { Collapse } from '@strapi/icons';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -56,7 +56,7 @@ const EditorLayout = ({
</BoxWithBorder>
<Flex alignItems="start" direction="column" flex={1} height="100%" width="100%">
<Flex
height={pxToRem(48)}
height={`${48 / 16}rem`}
background="neutral100"
justifyContent="flex-end"
shrink={0}

15
packages/core/admin/admin/src/pages/Marketplace/components/NpmPackageCard.tsx
View File

@ -2,7 +2,6 @@ import { Box, Flex, Icon, Tooltip, Typography, Divider, Button } from '@strapi/d
import { LinkButton } from '@strapi/design-system/v2';
import {
useTracking,
pxToRem,
AppInfoContextValue,
useNotification,
useClipboard,
@ -323,8 +322,14 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
<Flex gap={1}>
{!!githubStars && (
<>
<Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
<Icon as={Star} height={pxToRem(12)} width={pxToRem(12)} color="warning500" aria-hidden />
<Icon as={Github} height={`${12 / 16}rem`} width={`${12 / 16}rem`} aria-hidden />
<Icon
as={Star}
height={`${12 / 16}rem`}
width={`${12 / 16}rem`}
color="warning500"
aria-hidden
/>
<p
aria-label={formatMessage(
{
@ -344,7 +349,7 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
<VerticalDivider unsetMargin={false} />
</>
)}
<Icon as={Download} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
<Icon as={Download} height={`${12 / 16}rem`} width={`${12 / 16}rem`} aria-hidden />
<p
aria-label={formatMessage(
{
@ -366,7 +371,7 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
};
const VerticalDivider = styled(Divider)`
width: ${pxToRem(12)};
width: ${12 / 16}rem;
transform: rotate(90deg);
`;

3
packages/core/admin/admin/src/pages/Marketplace/components/OfflineLayout.tsx
View File

@ -1,5 +1,4 @@
import { Box, Flex, Layout, Main, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import { PageHeader } from './PageHeader';
@ -16,7 +15,7 @@ const OfflineLayout = () => {
direction="column"
alignItems="center"
justifyContent="center"
paddingTop={pxToRem(120)}
paddingTop={`${120 / 16}rem`}
>
<Box paddingBottom={2}>
<Typography textColor="neutral700" variant="alpha">

5
packages/core/admin/admin/src/pages/Settings/components/Tokens/Table.tsx
View File

@ -6,7 +6,6 @@ import {
ConfirmDialog,
DynamicTable,
onRowClick,
pxToRem,
useQueryParams,
useTracking,
TableProps as DynamicTableProps,
@ -133,12 +132,12 @@ const TableRows = ({
condition: canUpdate,
})}
>
<Td maxWidth={pxToRem(250)}>
<Td maxWidth={`${250 / 16}rem`}>
<Typography textColor="neutral800" fontWeight="bold" ellipsis>
{token.name}
</Typography>
</Td>
<Td maxWidth={pxToRem(250)}>
<Td maxWidth={`${250 / 16}rem`}>
<Typography textColor="neutral800" ellipsis>
{token.description}
</Typography>

7
packages/core/admin/admin/src/pages/Settings/pages/ApplicationInfo/components/LogoInput.tsx
View File

@ -36,7 +36,6 @@ import {
TextInputProps,
Typography,
} from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { PicturePlus, Plus, Refresh } from '@strapi/icons';
import axios, { AxiosError } from 'axios';
import { useIntl } from 'react-intl';
@ -375,8 +374,8 @@ const ComputerForm = () => {
>
<Icon
color="primary600"
width={pxToRem(60)}
height={pxToRem(60)}
width={`${60 / 16}rem`}
height={`${60 / 16}rem`}
as={PicturePlus}
aria-hidden
/>
@ -494,7 +493,7 @@ const PendingLogoDialog = ({ onChangeLogo }: PendingLogoDialogProps) => {
})}
</Button>
</Flex>
<Box maxWidth={pxToRem(180)}>
<Box maxWidth={`${180 / 16}rem`}>
{localImage?.url ? <ImageCardAsset asset={localImage} /> : null}
</Box>
</Box>

6
packages/core/admin/admin/src/pages/Settings/pages/Roles/components/RoleRow.tsx
View File

@ -1,5 +1,5 @@
import { Box, Flex, IconButton, IconButtonProps, Td, Tr, Typography } from '@strapi/design-system';
import { onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import type { AdminRole } from '../../../../../hooks/useAdminRoles';
@ -41,12 +41,12 @@ const RoleRow = ({
})
: {})}
>
<Td maxWidth={pxToRem(130)}>
<Td maxWidth={`${130 / 16}rem`}>
<Typography ellipsis textColor="neutral800">
{name}
</Typography>
</Td>
<Td maxWidth={pxToRem(250)}>
<Td maxWidth={`${250 / 16}rem`}>
<Typography ellipsis textColor="neutral800">
{description}
</Typography>

3
packages/core/admin/admin/src/pages/Settings/pages/Webhooks/components/TriggerContainer.tsx
View File

@ -1,5 +1,4 @@
import { Box, Flex, Grid, GridItem, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Check, Cross, Loader } from '@strapi/icons';
import { useIntl } from 'react-intl';
import styled, { DefaultTheme, css } from 'styled-components';
@ -156,7 +155,7 @@ const Message = ({ statusCode, message }: MessageProps) => {
if (statusCode >= 300) {
return (
<Flex justifyContent="flex-end">
<Flex maxWidth={pxToRem(250)} justifyContent="flex-end" title={message}>
<Flex maxWidth={`${250 / 16}rem`} justifyContent="flex-end" title={message}>
<Typography ellipsis textColor="neutral600">
{message}
</Typography>

4
packages/core/admin/admin/src/pages/UseCasePage.tsx
View File

@ -11,7 +11,7 @@ import {
TextInput,
Typography,
} from '@strapi/design-system';
import { pxToRem, useNotification } from '@strapi/helper-plugin';
import { useNotification } from '@strapi/helper-plugin';
import { parse } from 'qs';
import { useIntl } from 'react-intl';
import { useLocation, useNavigate } from 'react-router-dom';
@ -122,7 +122,7 @@ const UseCasePage = () => {
<form onSubmit={(e) => handleSubmit(e, false)}>
<Flex direction="column" paddingBottom={7}>
<Logo />
<Box paddingTop={6} paddingBottom={1} width={pxToRem(250)}>
<Box paddingTop={6} paddingBottom={1} width={`${250 / 16}rem`}>
<TypographyCenter variant="alpha" as="h1" id="usecase-title">
{formatMessage({
id: 'Usecase.title',

3
packages/core/admin/ee/admin/src/content-manager/pages/ListView/components/ReviewWorkflowsStageEE.tsx
View File

@ -1,5 +1,4 @@
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { STAGE_COLOR_DEFAULT } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
import { getStageColorByHex } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
@ -16,7 +15,7 @@ const ReviewWorkflowsStageEE = ({
const { themeColorName } = getStageColorByHex(color) ?? {};
return (
<Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
<Flex alignItems="center" gap={2} maxWidth={`${300 / 16}rem`}>
<Box
height={2}
background={color}

6
packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx
View File

@ -1,6 +1,6 @@
import { Flex, GridItem, Icon, Tooltip, Typography } from '@strapi/design-system';
import { Link } from '@strapi/design-system/v2';
import { pxToRem, useRBAC } from '@strapi/helper-plugin';
import { useRBAC } from '@strapi/helper-plugin';
import { ExclamationMarkCircle, ExternalLink } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { useSelector } from 'react-redux';
@ -83,8 +83,8 @@ export const AdminSeatInfoEE = () => {
})}
>
<Icon
width={pxToRem(14)}
height={pxToRem(14)}
width={`${14 / 16}rem`}
height={`${14 / 16}rem`}
color="danger500"
as={ExclamationMarkCircle}
/>

11
packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ReviewWorkflows/ListPage.tsx
View File

@ -18,7 +18,6 @@ import { Link, LinkButton } from '@strapi/design-system/v2';
import {
ConfirmDialog,
onRowClick,
pxToRem,
useAPIErrorHandler,
useNotification,
useRBAC,
@ -41,15 +40,15 @@ import { useReviewWorkflows } from './hooks/useReviewWorkflows';
const ActionLink = styled(Link)`
align-items: center;
height: ${pxToRem(32)};
height: ${32 / 16}rem;
display: flex;
justify-content: center;
padding: ${({ theme }) => `${theme.spaces[2]}}`};
width: ${pxToRem(32)};
width: ${32 / 16}rem;
svg {
height: ${pxToRem(12)};
width: ${pxToRem(12)};
height: ${12 / 16}rem;
width: ${12 / 16}rem;
path {
fill: ${({ theme }) => theme.colors.neutral500};
@ -312,7 +311,7 @@ export const ReviewWorkflowsListView = () => {
})}
key={`workflow-${workflow.id}`}
>
<Td width={pxToRem(250)}>
<Td width={`${250 / 16}rem`}>
<Typography textColor="neutral800" fontWeight="bold" ellipsis>
{workflow.name}
</Typography>

3
packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ReviewWorkflows/components/StageDragPreview.tsx
View File

@ -1,5 +1,4 @@
import { Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { CarretDown } from '@strapi/icons';
import styled from 'styled-components';
@ -24,7 +23,7 @@ export const StageDragPreview = ({ name }: StageDragPreviewType) => {
hasRadius
padding={3}
shadow="tableShadow"
width={pxToRem(300)}
width={`${300 / 16}rem`}
>
<Toggle
alignItems="center"

4
packages/core/content-type-builder/admin/src/components/AttributeIcon.tsx
View File

@ -1,5 +1,5 @@
import { Box } from '@strapi/design-system';
import { pxToRem, useCustomFields, CustomFieldUID } from '@strapi/helper-plugin';
import { useCustomFields, CustomFieldUID } from '@strapi/helper-plugin';
import {
Boolean,
CollectionType,
@ -86,7 +86,7 @@ export const AttributeIcon = ({ type, customField = null, ...rest }: AttributeIc
}
return (
<IconBox height={pxToRem(24)} width={pxToRem(32)} shrink={0} {...rest} aria-hidden>
<IconBox height={`${24 / 16}rem`} width={`${32 / 16}rem`} shrink={0} {...rest} aria-hidden>
<Box as={Compo} />
</IconBox>
);

11
packages/core/content-type-builder/admin/src/components/ComponentCard/ComponentCard.tsx
View File

@ -1,5 +1,4 @@
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Cross } from '@strapi/icons';
import get from 'lodash/get';
import styled from 'styled-components';
@ -21,11 +20,11 @@ const CloseButton = styled(Box)`
position: absolute;
display: none;
top: 5px;
right: ${pxToRem(8)};
right: ${8 / 16}rem;
svg {
width: ${pxToRem(10)};
height: ${pxToRem(10)};
width: ${10 / 16}rem;
height: ${10 / 16}rem;
path {
fill: ${({ theme }) => theme.colors.primary600};
@ -34,8 +33,8 @@ const CloseButton = styled(Box)`
`;
const ComponentBox = styled(Flex)`
width: ${pxToRem(140)};
height: ${pxToRem(80)};
width: ${140 / 16}rem;
height: ${80 / 16}rem;
position: relative;
border: 1px solid ${({ theme }) => theme.colors.neutral200};
background: ${({ theme }) => theme.colors.neutral100};

3
packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
View File

@ -9,7 +9,6 @@ import {
SubNavSection,
SubNavSections,
} from '@strapi/design-system/v2';
import { pxToRem } from '@strapi/helper-plugin';
import { Plus } from '@strapi/icons';
import upperFirst from 'lodash/upperFirst';
import { useIntl } from 'react-intl';
@ -89,7 +88,7 @@ export const ContentTypeBuilderNav = () => {
<Box paddingLeft={7}>
<TextButton
onClick={section.customLink.onClick}
startIcon={<Icon as={Plus} width={pxToRem(8)} height={pxToRem(8)} />}
startIcon={<Icon as={Plus} width={`${8 / 16}rem`} height={`${8 / 16}rem`} />}
marginTop={2}
>
{formatMessage({

17
packages/core/content-type-builder/admin/src/components/DynamicZoneList.tsx
View File

@ -1,7 +1,6 @@
import { useState } from 'react';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Plus } from '@strapi/icons';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -24,10 +23,10 @@ interface DynamicZoneListProps {
}
const StyledAddIcon = styled(Plus)`
width: ${pxToRem(32)};
height: ${pxToRem(32)};
padding: ${pxToRem(9)};
border-radius: ${pxToRem(64)};
width: ${32 / 16}rem;
height: ${32 / 16}rem;
padding: ${9 / 16}rem;
border-radius: ${64 / 16}rem;
background: ${({ theme }) => theme.colors.primary100};
path {
fill: ${({ theme }) => theme.colors.primary600};
@ -35,7 +34,7 @@ const StyledAddIcon = styled(Plus)`
`;
const FixedBox = styled(Box)`
height: ${pxToRem(90)};
height: ${90 / 16}rem;
position: absolute;
width: 100%;
top: 0;
@ -48,13 +47,13 @@ const ScrollableStack = styled(Flex)`
`;
const ComponentContentBox = styled(Box)`
padding-top: ${pxToRem(90)};
padding-top: ${90 / 16}rem;
`;
const ComponentStack = styled(Flex)`
flex-shrink: 0;
width: ${pxToRem(140)};
height: ${pxToRem(80)};
width: ${140 / 16}rem;
height: ${80 / 16}rem;
justify-content: center;
align-items: center;
`;

5
packages/core/content-type-builder/admin/src/components/GenericInputs.tsx
View File

@ -46,7 +46,6 @@ interface CustomInputProps<TAttribute extends Attribute.Any>
ref?: React.Ref<HTMLElement>;
hint?: string | React.JSX.Element | (string | React.JSX.Element)[];
}
const pxToRem = (px: number) => `${px / 16}rem`;
interface GenericInputProps<TAttribute extends Attribute.Any = Attribute.Any> {
attribute?: TAttribute;
@ -228,8 +227,8 @@ const GenericInput = ({
: json;
onChange({ target: { name, value } }, false);
}}
minHeight={pxToRem(252)}
maxHeight={pxToRem(504)}
minHeight={`${252 / 16}rem`}
maxHeight={`${504 / 16}rem`}
/>
);
}

4
packages/core/content-type-builder/admin/src/components/ListRow.tsx
View File

@ -1,7 +1,7 @@
import { memo } from 'react';
import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
import { onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Lock, Pencil, Trash } from '@strapi/icons';
import get from 'lodash/get';
import { useIntl } from 'react-intl';
@ -184,7 +184,7 @@ export const ListRow = memo(
we need to reserve the same space, otherwise the height of the
row might collapse, leading to bad positioned curve icons
*/
<Box height={pxToRem(32)} />
<Box height={`${32 / 16}rem`} />
)}
</td>
</BoxWrapper>

5
packages/core/content-type-builder/admin/src/components/Tr.tsx
View File

@ -1,4 +1,3 @@
import { pxToRem } from '@strapi/helper-plugin';
import styled from 'styled-components';
interface TrProps {
@ -18,12 +17,12 @@ export const Tr = styled.tr<TrProps>`
}
> td:first-of-type {
padding: 0 0 0 ${pxToRem(20)};
padding: 0 0 0 ${20 / 16}rem;
position: relative;
&::before {
content: '';
width: ${pxToRem(4)};
width: ${4 / 16}rem;
height: calc(100% - 40px);
position: absolute;
top: -7px;

16
packages/core/helper-plugin/MIGRATION_GUIDE.md
View File

@ -482,6 +482,22 @@ This util has been removed and not replaced. If you feel like you need this util
This util has been removed and not replaced. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
### pxToRem
This util has been removed and not replaced. You should use directly this code in place of the pxToRem:
```tsx
// Before
pxToRem(
32
) // After
`${32 / 16}rem`;
// or
('2rem');
```
If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
### setHexOpacity
This util has been removed and not replaced, use the native CSS opacity property instead. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.

8
packages/core/helper-plugin/src/features/AutoReloadOverlayBlocker.tsx
View File

@ -7,8 +7,6 @@ import { createPortal } from 'react-dom';
import { MessageDescriptor, useIntl } from 'react-intl';
import styled, { keyframes } from 'styled-components';
import { pxToRem } from '../utils/pxToRem';
/**
* TODO: realistically a lot of this logic is isolated to the `core/admin` package.
* However, we want to expose the `useAutoReloadOverlayBlocker` hook to the plugins.
@ -147,12 +145,12 @@ const Blocker = ({ displayedIcon, description, title, isOpen }: BlockerProps) =>
</Flex>
{displayedIcon === 'reload' && (
<IconBox padding={6} background="primary100" borderColor="primary200">
<LoaderReload width={pxToRem(36)} height={pxToRem(36)} />
<LoaderReload width={`${36 / 16}rem`} height={`${36 / 16}rem`} />
</IconBox>
)}
{displayedIcon === 'time' && (
<IconBox padding={6} background="primary100" borderColor="primary200">
<Clock width={pxToRem(40)} height={pxToRem(40)} />
<Clock width={`${40 / 16}rem`} height={`${40 / 16}rem`} />
</IconBox>
)}
<Box marginTop={2}>
@ -191,7 +189,7 @@ const Overlay = styled(Flex)`
left: 0;
/* TODO: set this up in the theme for consistence z-index values */
z-index: 1140;
padding-top: ${pxToRem(160)};
padding-top: ${160 / 16}rem;
& > * {
position: relative;

1
packages/core/helper-plugin/src/index.ts
View File

@ -51,7 +51,6 @@ export * from './utils/hasPermissions';
export * from './utils/normalizeAPIError';
export * from './utils/prefixFileUrlWithBackendUrl';
export * from './utils/prefixPluginTranslations';
export * from './utils/pxToRem';
export * from './utils/request';
export * from './utils/stopPropagation';
export * from './utils/translatedErrors';

27
packages/core/helper-plugin/src/utils/pxToRem.stories.mdx
View File

@ -1,27 +0,0 @@
{/* - pxToRem.stories.mdx - */}
import { Meta } from '@storybook/addon-docs';
<Meta title="utils/pxToRem" />
# pxToRem
Converts px to rem.
## Usage
```js
import { pxToRem } from '@strapi/helper-plugin';
import { Box } from '@strapi/design-system';
import styled from 'styled-components'
const StyledBox = styled(Box)`
width: ${pxToRem}
`
const HomePage = () =>
return (
<StyledBox>I'm a sized box</StyledBox>
);
};
```

3
packages/core/helper-plugin/src/utils/pxToRem.ts
View File

@ -1,3 +0,0 @@
const pxToRem = (px: number) => `${px / 16}rem`;
export { pxToRem };

17
packages/core/helper-plugin/src/utils/tests/pxToRem.test.ts
View File

@ -1,17 +0,0 @@
import { pxToRem } from '../pxToRem';
describe('HELPER_PLUGIN | utils | pxToRem', () => {
it('should return 2rem if data is 32', () => {
const data = 32;
const expected = '2rem';
expect(pxToRem(data)).toEqual(expected);
});
it('should return 1rem if data is 16', () => {
const data = 16;
const expected = '1rem';
expect(pxToRem(data)).toEqual(expected);
});
});

3
packages/core/upload/admin/src/components/AssetCard/DocAssetCard.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Flex } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { File, FilePdf } from '@strapi/icons';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@ -24,7 +23,7 @@ export const DocAssetCard = ({ name, extension, size, ...restProps }) => {
<AssetCardBase name={name} extension={extension} {...restProps} variant="Doc">
<CardAsset
width="100%"
height={size === 'S' ? pxToRem(88) : pxToRem(164)}
height={size === 'S' ? `${88 / 16}rem` : `${164 / 16}rem`}
justifyContent="center"
>
<IconWrapper>

4
packages/core/upload/admin/src/components/AssetDialog/index.jsx
View File

@ -17,7 +17,7 @@ import {
Tabs,
Typography,
} from '@strapi/design-system';
import { pxToRem, useSelectionState } from '@strapi/helper-plugin';
import { useSelectionState } from '@strapi/helper-plugin';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -39,7 +39,7 @@ import { SelectedStep } from './SelectedStep';
const LoadingBody = styled(Flex)`
/* 80px are coming from the Tabs component that is not included in the ModalBody */
min-height: ${() => `calc(60vh + ${pxToRem(80)})`};
min-height: ${() => `calc(60vh + ${80 / 16}rem)`};
`;
export const AssetDialog = ({

4
packages/core/upload/admin/src/components/EditAssetDialog/index.jsx
View File

@ -19,7 +19,7 @@ import {
TextInput,
VisuallyHidden,
} from '@strapi/design-system';
import { pxToRem, useTracking } from '@strapi/helper-plugin';
import { useTracking } from '@strapi/helper-plugin';
import { Form, Formik } from 'formik';
import isEqual from 'lodash/isEqual';
import PropTypes from 'prop-types';
@ -41,7 +41,7 @@ import { ReplaceMediaButton } from './ReplaceMediaButton';
const LoadingBody = styled(Flex)`
/* 80px are coming from the Tabs component that is not included in the ModalBody */
min-height: ${() => `calc(60vh + ${pxToRem(80)})`};
min-height: ${() => `calc(60vh + ${80 / 16}rem)`};
`;
const fileInfoSchema = yup.object({

3
packages/core/upload/admin/src/components/FolderCard/FolderCard/FolderCard.jsx
View File

@ -1,7 +1,6 @@
import React, { forwardRef, useMemo } from 'react';
import { Box, CardAction, Flex } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { Folder } from '@strapi/icons';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
@ -83,7 +82,7 @@ export const FolderCard = forwardRef(
paddingRight={3}
paddingTop={2}
>
<StyledFolder width={pxToRem(24)} height={pxToRem(24)} />
<StyledFolder width={`${24 / 16}rem`} height={`${24 / 16}rem`} />
</Box>
{children}

11
packages/core/upload/admin/src/components/SelectTree/Option.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Flex, Icon, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { ChevronDown, ChevronUp } from '@strapi/icons';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
@ -10,8 +9,8 @@ import styled from 'styled-components';
const ToggleButton = styled(Flex)`
align-self: flex-end;
height: ${pxToRem(22)};
width: ${pxToRem(28)};
height: ${22 / 16}rem;
width: ${28 / 16}rem;
&:hover,
&:focus {
@ -52,7 +51,11 @@ const Option = ({ children, data, selectProps, ...props }) => {
onOptionToggle(value);
}}
>
<Icon width={pxToRem(14)} color="neutral500" as={isOpen ? ChevronUp : ChevronDown} />
<Icon
width={`${14 / 16}rem`}
color="neutral500"
as={isOpen ? ChevronUp : ChevronDown}
/>
</ToggleButton>
)}
</Flex>

4
packages/core/upload/admin/src/components/TableList/PreviewCell.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Avatar, Box, Icon, Initials } from '@strapi/design-system';
import { prefixFileUrlWithBackendUrl, pxToRem } from '@strapi/helper-plugin';
import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
import { Folder } from '@strapi/icons';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@ -29,7 +29,7 @@ export const PreviewCell = ({ type, content }) => {
if (type === 'folder') {
return (
<Initials background="secondary100" textColor="secondary600">
<Icon color="secondary500" width={pxToRem(16)} height={pxToRem(16)} as={Folder} />
<Icon color="secondary500" width={`${16 / 16}rem`} height={`${16 / 16}rem`} as={Folder} />
</Initials>
);
}

10
packages/plugins/users-permissions/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
import { CheckPermissions, onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Pencil, Trash } from '@strapi/icons';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
@ -10,15 +10,15 @@ import styled from 'styled-components';
const EditLink = styled(Link)`
align-items: center;
height: ${pxToRem(32)};
height: ${32 / 16}rem;
display: flex;
justify-content: center;
padding: ${({ theme }) => `${theme.spaces[2]}}`};
width: ${pxToRem(32)};
width: ${32 / 16}rem;
svg {
height: ${pxToRem(12)};
width: ${pxToRem(12)};
height: ${12 / 16}rem;
width: ${12 / 16}rem;
path {
fill: ${({ theme }) => theme.colors.neutral500};