Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from Mar 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
85d6341
chore: remove pxToRem from the helper plugin utils
simotae14 Mar 13, 2024
6b00f3d
Merge branch 'v5/main' into chore/helper-plugin-utils-remove-px-to-rem
simotae14 Mar 13, 2024
51382cf
chore: fix prettier errors
simotae14 Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/core/admin/admin/src/components/GuidedTour/Homepage.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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">
Expand All @@ -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}
Expand Down
18 changes: 10 additions & 8 deletions packages/core/admin/admin/src/components/GuidedTour/Modal.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand Down Expand Up @@ -75,7 +75,7 @@ const GuidedTourModal = () => {
direction="column"
alignItems="stretch"
background="neutral0"
width={pxToRem(660)}
width={`${660 / 16}rem`}
shadow="popupShadow"
hasRadius
padding={4}
Expand Down Expand Up @@ -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({
Expand All @@ -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}
Expand All @@ -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} />
Expand Down Expand Up @@ -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>
)}
Expand Down
15 changes: 7 additions & 8 deletions packages/core/admin/admin/src/components/GuidedTour/Ornaments.tsx
View file
Open in desktop
@@ -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';
Expand All @@ -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}
Expand All @@ -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}
>
Expand All @@ -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}
/>
);
Expand Down
3 changes: 1 addition & 2 deletions packages/core/admin/admin/src/content-manager/components/DragPreviews/CardDragPreview.tsx
View file
Open in desktop
@@ -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';

Expand All @@ -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}>
Expand Down
9 changes: 4 additions & 5 deletions ...ges/core/admin/admin/src/content-manager/components/DragPreviews/ComponentDragPreview.tsx
View file
Open in desktop
@@ -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';

Expand All @@ -15,21 +14,21 @@ const ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) =>
justifyContent="space-between"
gap={3}
padding={3}
width={pxToRem(300)}
width={`${300 / 16}rem`}
>
<ToggleButton type="button">
<Flex gap={6}>
<DropdownIconWrapper
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>
Expand Down
5 changes: 2 additions & 3 deletions ...min/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
`;

/**
Expand Down
3 changes: 1 addition & 2 deletions ...in/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand All @@ -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)`
Expand Down
6 changes: 3 additions & 3 deletions ...min/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx
View file
Open in desktop
@@ -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';
Expand All @@ -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)`
Expand Down
5 changes: 2 additions & 3 deletions .../admin/src/content-manager/pages/EditView/components/FormInputs/Component/Initializer.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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};
}
Expand Down
3 changes: 1 addition & 2 deletions ...in/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCard.tsx
View file
Open in desktop
@@ -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';
Expand All @@ -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} />
Expand Down
3 changes: 1 addition & 2 deletions ...rc/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx
View file
Open in desktop
Expand Up @@ -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';

Expand Down Expand Up @@ -64,7 +63,7 @@ const ComponentCategory = ({
justifyContent="center"
onClick={onAddComponent(uid)}
hasRadius
height={pxToRem(84)}
height={`${84 / 16}rem`}
shrink={0}
borderColor="neutral200"
>
Expand Down
5 changes: 2 additions & 3 deletions ...src/content-manager/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx
View file
Open in desktop
@@ -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;
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...n/admin/src/content-manager/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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}
Expand Down
15 changes: 10 additions & 5 deletions packages/core/admin/admin/src/pages/Marketplace/components/NpmPackageCard.tsx
View file
Open in desktop
Expand Up @@ -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,
Expand Down Expand Up @@ -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(
{
Expand All @@ -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(
{
Expand All @@ -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);
`;

Expand Down
3 changes: 1 addition & 2 deletions packages/core/admin/admin/src/pages/Marketplace/components/OfflineLayout.tsx
View file
Open in desktop
@@ -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';
Expand All @@ -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">
Expand Down