djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate from legacy to new MacawUI spacing (#3697)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-05-30 08:47:21 +02:00 committed by GitHub
parent b2888dae32
commit 67b55edca7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
99 changed files with 255 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -27,7 +27,7 @@
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "0.8.0-pre.86",
"@saleor/macaw-ui": "0.8.0-pre.90",
"@saleor/sdk": "0.6.0",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",
@ -7950,9 +7950,9 @@
}
},
"node_modules/@saleor/macaw-ui": {
"version": "0.8.0-pre.86",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.86.tgz",
"integrity": "sha512-5mUmvfFgrKS3z+uuDtjmcPPE90fTUaxjw9QFa6naGbdqzxH8FDv8nm+7ktkuPkkNQdV1ydrIpWaW/yHY0U07BA==",
"version": "0.8.0-pre.90",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.90.tgz",
"integrity": "sha512-V3x2HR/piQOaH+X/5OTFZPNJmW0HONUspXSAKfwckMPBiZ4upOg+zbqCaUvkq8Bb+qGD0J4FTwptQuW89LvrCw==",
"dependencies": {
"@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0",
@ -41317,9 +41317,9 @@
}
},
"@saleor/macaw-ui": {
"version": "0.8.0-pre.86",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.86.tgz",
"integrity": "sha512-5mUmvfFgrKS3z+uuDtjmcPPE90fTUaxjw9QFa6naGbdqzxH8FDv8nm+7ktkuPkkNQdV1ydrIpWaW/yHY0U07BA==",
"version": "0.8.0-pre.90",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.90.tgz",
"integrity": "sha512-V3x2HR/piQOaH+X/5OTFZPNJmW0HONUspXSAKfwckMPBiZ4upOg+zbqCaUvkq8Bb+qGD0J4FTwptQuW89LvrCw==",
"requires": {
"@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0",

2
package.json
View file

@ -34,7 +34,7 @@
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "0.8.0-pre.86",
"@saleor/macaw-ui": "0.8.0-pre.90",
"@saleor/sdk": "0.6.0",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",

2
src/apps/components/AllAppList/AllAppList.tsx
View file

@ -27,7 +27,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
}
return (
<Box display="flex" flexDirection="column" gap="s5" marginTop="s5">
<Box display="flex" flexDirection="column" gap={5} marginTop={5}>
{appsPairs.map(appPair => (
<AppListRow
key={appPair[0].name.en}

6
src/apps/components/AppAvatar/AppAvatar.tsx
View file

@ -2,7 +2,7 @@ import { AppLogo } from "@dashboard/apps/types";
import { Box, GenericAppIcon } from "@saleor/macaw-ui/next";
import React from "react";
const avatarSize = "s8";
const avatarSize = 8;
export const AppAvatar: React.FC<{
logo?: AppLogo | undefined;
@ -11,7 +11,7 @@ export const AppAvatar: React.FC<{
return (
<Box
__backgroundColor={logo?.color}
padding="s1"
padding={1}
width={avatarSize}
height={avatarSize}
borderRadius={2}
@ -26,7 +26,7 @@ export const AppAvatar: React.FC<{
<Box
__backgroundColor={logo?.color}
backgroundColor="surfaceNeutralSubdued"
padding="s1"
padding={1}
width={avatarSize}
height={avatarSize}
display="flex"

4
src/apps/components/AppDetailsPage/HeaderOptions.tsx
View file

@ -31,7 +31,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
if (!data) {
return (
<Box marginX="s7">
<Box marginX={7}>
<Skeleton />
<div className={classes.hr} />
</Box>
@ -39,7 +39,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
}
return (
<Box marginX="s7">
<Box marginX={7}>
<div className={classes.appHeaderLinks}>
<ExternalLink
className={classes.headerLinkContainer}

4
src/apps/components/AppInstallPage/AppInstallPage.tsx
View file

@ -45,7 +45,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
return (
<DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<DetailPageLayout.Content>
<Box paddingY="s6">
<Box paddingY={6}>
<CardSpacer />
<Card>
<CardTitle
@ -127,7 +127,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
</CardContent>
</Card>
<CardSpacer />
<Box display="flex" justifyContent="space-between" padding="s6">
<Box display="flex" justifyContent="space-between" padding={6}>
<Button variant="secondary" onClick={navigateToAppsList}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>

14
src/apps/components/AppListPage/AppListPage.tsx
View file

@ -80,15 +80,15 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
display="flex"
flexDirection="column"
alignItems="center"
marginY="s5"
marginY={5}
>
<Box className={classes.appContent} marginY="s5">
<Box className={classes.appContent} marginY={5}>
{nothingInstalled && (
<Box paddingY="s3">
<Box paddingY={3}>
<Text as="h3" variant="heading" color="textNeutralSubdued">
{intl.formatMessage(messages.installedApps)}
</Text>
<Box marginTop="s3">
<Box marginTop={3}>
<Text variant="caption">
{intl.formatMessage(messages.nothingInstalledPlaceholder)}
</Text>
@ -97,7 +97,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
)}
{sectionsAvailability.installed && (
<>
<Box paddingX="s5" paddingY="s3">
<Box paddingX={5} paddingY={3}>
<Text as="h3" variant="heading" color="textNeutralSubdued">
{intl.formatMessage(messages.installedApps)}
</Text>
@ -113,7 +113,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
)}
<MarketplaceAlert error={marketplaceError} />
{sectionsAvailability.all && !marketplaceError && (
<Box marginTop="s7">
<Box marginTop={7}>
<Text
as="h3"
variant="heading"
@ -131,7 +131,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
</Box>
)}
{sectionsAvailability.comingSoon && !marketplaceError && (
<Box marginTop="s7">
<Box marginTop={7}>
<Text
as="h3"
variant="heading"

4
src/apps/components/AppListRow/AppListCardActions.tsx
View file

@ -45,14 +45,14 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
<Box
display="flex"
justifyContent="flex-end"
gap="s3"
gap={3}
borderStyle="solid"
borderWidth={1}
borderBottomLeftRadius={3}
borderBottomRightRadius={3}
borderColor="neutralPlain"
borderTopStyle="none"
padding="s5"
padding={5}
>
{githubForkHandler && (
<Button

6
src/apps/components/AppListRow/AppListCardDescription.tsx
View file

@ -18,14 +18,14 @@ const AppListCardDescription: React.FC<AppListCardDescriptionProps> = ({
borderTopRightRadius={3}
borderColor="neutralPlain"
borderBottomStyle="none"
padding="s5"
padding={5}
>
<Box
display="flex"
flexDirection="row"
alignItems="center"
marginBottom="s5"
gap="s3"
marginBottom={5}
gap={3}
>
<AppLogo backgroundColor={app.logo.color}>
{app.logo.source ? (

12
src/apps/components/AppListRow/AppListCardIntegrations.tsx
View file

@ -22,14 +22,14 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
display="flex"
flexDirection="row"
flexWrap="wrap"
gap="s5"
margin="s0"
gap={5}
margin={0}
borderColor="neutralPlain"
borderLeftStyle="solid"
borderRightStyle="solid"
borderWidth={1}
paddingY="s2"
paddingX="s5"
paddingY={2}
paddingX={5}
alignItems="start"
>
{integrations.map(integration => (
@ -37,7 +37,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
as="li"
display="flex"
alignItems="center"
gap="s1.5"
gap={1.5}
key={integration.name}
>
<Box
@ -47,7 +47,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
borderStyle="solid"
borderColor="neutralPlain"
borderWidth={1}
padding="s1"
padding={1}
display="flex"
placeItems="center"
>

6
src/apps/components/AppListRow/AppListCardLinks.tsx
View file

@ -18,13 +18,13 @@ const AppListCardLinks: React.FC<AppListCardLinksProps> = ({ links }) => {
display="flex"
flexDirection="row"
flexWrap="wrap"
gap="s4"
gap={4}
borderLeftStyle="solid"
borderRightStyle="solid"
borderWidth={1}
borderColor="neutralPlain"
paddingY="s3"
paddingX="s5"
paddingY={3}
paddingX={5}
>
{links?.map(link => (
<Box as="span" key={link.name}>

4
src/apps/components/AppListRow/AppListRow.tsx
View file

@ -62,8 +62,8 @@ const AppListRow: React.FC<AppListRowProps> = ({
gridTemplateColumns={2}
__gridTemplateRows="repeat(4, auto)"
gridAutoFlow={isSingleApp ? "column" : "row"}
columnGap="s5"
padding="s5"
columnGap={5}
padding={5}
>
{appPair.map(app => (
<AppListCardDescription key={app.name.en + "description"} app={app} />

4
src/apps/components/AppListRow/AppLogo.tsx
View file

@ -10,8 +10,8 @@ export const AppLogo: React.FC<AppLogoProps> = ({
children,
}) => (
<Box
width="s10"
height="s10"
width={10}
height={10}
display="flex"
placeItems="center"
borderRadius={3}

6
src/apps/components/AppPage/AppPageNav.tsx
View file

@ -39,9 +39,9 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
justifyContent="space-between"
width="100%"
>
<Box display="flex" gap="s4" alignItems="center">
<Box display="flex" gap={4} alignItems="center">
<TopNavLink to={goBackLink} variant="tertiary" />
<Box display="flex" gap="s2" alignItems="center">
<Box display="flex" gap={2} alignItems="center">
<AppAvatar />
<Box display="flex" flexDirection="column">
<Text variant="heading">{name}</Text>
@ -62,7 +62,7 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
</Box>
</Box>
</Box>
<Box display="flex" gap="s1.5">
<Box display="flex" gap={1.5}>
<Button
whiteSpace="nowrap"
variant="secondary"

2
src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
View file

@ -17,7 +17,7 @@ export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
return (
<Box
display="flex"
gap="s1.5"
gap={1.5}
onClick={e => {
try {
e.preventDefault();

14
src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
View file

@ -28,7 +28,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
disabled={!app.isActive}
>
<List.Item
padding="s4"
padding={4}
borderTopStyle="solid"
borderWidth={1}
borderColor="neutralPlain"
@ -43,7 +43,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
cursor={app.isActive ? "pointer" : "not-allowed"}
>
<Box
gap="s2"
gap={2}
alignItems="center"
display="grid"
__gridTemplateColumns="1fr auto"
@ -51,11 +51,11 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
<AppAvatar logo={logo} />
<Box
display="flex"
gap="s1"
gap={1}
flexDirection="column"
alignItems="flex-start"
>
<Box display="flex" gap="s2">
<Box display="flex" gap={2}>
<Text variant="bodyStrong">{app.name}</Text>
<Text variant="body" color="textNeutralSubdued">
{`v${app.version}`}
@ -84,12 +84,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
</Box>
<Box
display="flex"
marginTop={{ mobile: "s1.5", desktop: "s0" }}
marginTop={{ mobile: 1.5, desktop: 0 }}
flexDirection="row"
justifyContent={{ mobile: "flex-end", desktop: "flex-start" }}
gap="s3"
gap={3}
>
<Box marginLeft="auto" display="flex" alignItems="center" gap="s5">
<Box marginLeft="auto" display="flex" alignItems="center" gap={5}>
{!app.isActive && (
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...messages.appDisabled} />

6
src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
View file

@ -32,7 +32,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
return (
<List.Item
padding="s4"
padding={4}
borderTopStyle="solid"
borderWidth={1}
borderColor="neutralPlain"
@ -42,7 +42,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
>
<Box
display="flex"
gap="s2"
gap={2}
alignItems="center"
justifyContent={{ mobile: "space-between", desktop: "flex-start" }}
>
@ -75,7 +75,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
<>
<Tooltip>
<Tooltip.Trigger>
<Box display="flex" placeItems="center" gap="s1" marginX="s1">
<Box display="flex" placeItems="center" gap={1} marginX={1}>
<WarningIcon size="small" color="iconCriticalSubdued" />
<Text
variant="caption"

2
src/channels/components/ChannelForm/ChannelForm.tsx
View file

@ -226,7 +226,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
onChange={onDefaultCountryChange}
/>
<FormSpacer />
<Box display="flex" gap="s1.5" alignItems="center">
<Box display="flex" gap={1.5} alignItems="center">
<ControlledSwitch
data-test-id="order-settings-mark-as-paid"
disabled={disabled}

8
src/components/AppLayout/AppLayout.tsx
View file

@ -75,7 +75,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
backgroundColor="subdued"
borderStyle="solid"
position="sticky"
top="s0"
top={0}
borderLeftWidth={0}
borderTopWidth={0}
borderBottomWidth={0}
@ -89,9 +89,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<Box
ref={appActionAnchor}
position="sticky"
bottom="s0"
left="s0"
right="s0"
bottom={0}
left={0}
right={0}
backgroundColor="plain"
borderTopWidth={1}
borderTopStyle="solid"

2
src/components/AppLayout/LimitsInfo.tsx
View file

@ -9,7 +9,7 @@ interface LimitsInfoProps {
* @deprecated use `Text` instead
*/
export const LimitsInfo: React.FC<LimitsInfoProps> = ({ text }) => (
<Box position="absolute" left="s7" bottom="s1">
<Box position="absolute" left={7} bottom={1}>
{text}
</Box>
);

8
src/components/AppLayout/ListFilters/ListFilters.tsx
View file

@ -30,11 +30,11 @@ export const ListFilters = ({
<Box
display="grid"
gridTemplateColumns={2}
gap="s4"
paddingBottom="s2"
paddingX="s6"
gap={4}
paddingBottom={2}
paddingX={6}
>
<Box display="flex" alignItems="center" gap="s4">
<Box display="flex" alignItems="center" gap={4}>
<FiltersSelect
errorMessages={errorMessages}
menu={filterStructure}

6
src/components/AppLayout/TopNav/Menu.tsx
View file

@ -31,7 +31,7 @@ export const Menu: React.FC<TopNavMenuProps> = ({ items, dataTestId }) => (
<Dropdown.Content align="end">
<Box>
<List
padding="s2"
padding={2}
borderRadius={4}
boxShadow="overlay"
backgroundColor="surfaceNeutralPlain"
@ -40,8 +40,8 @@ export const Menu: React.FC<TopNavMenuProps> = ({ items, dataTestId }) => (
<Dropdown.Item key={item.label}>
<List.Item
borderRadius={4}
paddingX="s1.5"
paddingY="s2"
paddingX={1.5}
paddingY={2}
onClick={item.onSelect}
data-test-id={item.testId}
>

2
src/components/AppLayout/TopNav/TopNavLink.tsx
View file

@ -6,7 +6,7 @@ export const TopNavLink: React.FC<{
to: string;
variant?: "secondary" | "tertiary";
}> = ({ to, variant = "secondary" }) => (
<Link to={to} className={sprinkles({ marginRight: "s2" })}>
<Link to={to} className={sprinkles({ marginRight: 2 })}>
<Button
icon={<ArrowLeftIcon />}
variant={variant}

4
src/components/AppLayout/TopNav/TopNavWrapper.tsx
View file

@ -10,8 +10,8 @@ export const TopNavWrapper: React.FC<{ withoutBorder?: boolean }> = ({
<Box
display="flex"
alignItems="center"
paddingX="s6"
paddingY="s5"
paddingX={6}
paddingY={5}
borderBottomWidth={withoutBorder ? 0 : 1}
borderBottomStyle="solid"
borderColor="neutralPlain"

6
src/components/Attributes/AttributeRow.tsx
View file

@ -199,11 +199,11 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
);
case AttributeInputTypeEnum.BOOLEAN:
return (
<Box as="li" display="flex" gap="s2" alignItems="center" padding="s1">
<Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
<Box data-test-id="attribute-value">
<Box
display="flex"
gap="s0.5"
gap={0.5}
flexDirection="column"
alignItems="flex-end"
>
@ -224,7 +224,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
as="label"
htmlFor={`attribute:${attribute.label}`}
display="flex"
gap="s1"
gap={1}
cursor="pointer"
>
<Text>{attribute.label}</Text>

2
src/components/Attributes/Attributes.tsx
View file

@ -76,7 +76,7 @@ export const Attributes: React.FC<AttributesProps> = ({
{title || intl.formatMessage(messages.header)}
</DashboardCard.Title>
<DashboardCard.Content>
<Box display="flex" flexDirection="column" gap="s2">
<Box display="flex" flexDirection="column" gap={2}>
<Accordion defaultValue="attributes-accordion">
<Accordion.Item value="attributes-accordion">
<Accordion.Trigger buttonDataTestId="attributes-expand">

8
src/components/Attributes/BasicAttributeRow.tsx
View file

@ -19,18 +19,18 @@ export const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
as="li"
justifyContent="space-between"
alignItems="center"
paddingY="s6"
paddingX="s0.5"
paddingY={6}
paddingX={0.5}
display="grid"
gridTemplateColumns={2}
gap="s5"
gap={5}
>
<Box
data-test-id="attribute-label"
as="label"
htmlFor={id}
display="flex"
gap="s1"
gap={1}
cursor={clickableLabel ? "pointer" : "auto"}
>
<Text>{label}</Text>

2
src/components/Attributes/ExtendedAttributeRow.tsx
View file

@ -18,7 +18,7 @@ const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
display="flex"
justifyContent="space-between"
alignItems="center"
paddingY="s6"
paddingY={6}
>
<Text data-test-id="attribute-label">{label}</Text>
<Button

6
src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
View file

@ -30,7 +30,7 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
<Dropdown.Content align="end">
<Box>
<List
padding="s2"
padding={2}
borderRadius={4}
boxShadow="overlay"
backgroundColor="surfaceNeutralPlain"
@ -39,8 +39,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
<Dropdown.Item>
<List.Item
borderRadius={4}
paddingX="s1.5"
paddingY="s2"
paddingX={1.5}
paddingY={2}
onClick={item.onSelect}
data-test-id={item.testId}
>

2
src/components/Card/Content.tsx
View file

@ -2,7 +2,7 @@ import { Box, Sprinkles } from "@saleor/macaw-ui/next";
import React from "react";
export const Content: React.FC<Sprinkles> = ({ children, ...rest }) => (
<Box paddingX="s6" {...rest}>
<Box paddingX={6} {...rest}>
{children}
</Box>
);

2
src/components/Card/Root.tsx
View file

@ -2,7 +2,7 @@ import { Box, Sprinkles } from "@saleor/macaw-ui/next";
import React from "react";
export const Root: React.FC<Sprinkles> = ({ children, ...rest }) => (
<Box display="flex" flexDirection="column" gap="s6" {...rest}>
<Box display="flex" flexDirection="column" gap={6} {...rest}>
{children}
</Box>
);

2
src/components/Card/Title.tsx
View file

@ -2,7 +2,7 @@ import { Box, Text } from "@saleor/macaw-ui/next";
import React from "react";
export const Title: React.FC = ({ children }) => (
<Box paddingX="s6" paddingTop="s6">
<Box paddingX={6} paddingTop={6}>
<Text variant="heading">{children}</Text>
</Box>
);

18
src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
View file

@ -71,7 +71,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
);
return (
<Box display="flex" gap="s3" paddingTop="s3" flexDirection="column">
<Box display="flex" gap={3} paddingTop={3} flexDirection="column">
<RadioGroup
value={String(isPublished)}
onValueChange={value => {
@ -85,14 +85,14 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
disabled={disabled}
display="flex"
flexDirection="column"
gap="s3"
gap={3}
>
<RadioGroup.Item
id={`${id}-isPublished-true`}
value="true"
name="isPublished"
>
<Box display="flex" alignItems="baseline" gap="s2">
<Box display="flex" alignItems="baseline" gap={2}>
<Text>{messages.visibleLabel}</Text>
{isPublished &&
publicationDate &&
@ -109,7 +109,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
value="false"
name="isPublished"
>
<Box display="flex" alignItems="baseline" gap="s2">
<Box display="flex" alignItems="baseline" gap={2}>
<Text>{messages.hiddenLabel}</Text>
{publicationDate &&
!isPublished &&
@ -122,7 +122,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
</RadioGroup.Item>
</RadioGroup>
{!isPublished && (
<Box display="flex" flexDirection="column" alignItems="start" gap="s1">
<Box display="flex" flexDirection="column" alignItems="start" gap={1}>
<Checkbox
onCheckedChange={(checked: boolean) => setPublicationDate(checked)}
checked={isPublicationDate}
@ -172,13 +172,13 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
}
display="flex"
flexDirection="column"
gap="s3"
gap={3}
>
<RadioGroup.Item
id={`channel:isAvailableForPurchase:${id}-true`}
value="true"
>
<Box display="flex" __alignItems="baseline" gap="s2">
<Box display="flex" __alignItems="baseline" gap={2}>
<Text>{messages.availableLabel}</Text>
{isAvailable &&
availableForPurchase &&
@ -193,7 +193,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
id={`channel:isAvailableForPurchase:${id}-false`}
value="false"
>
<Box display="flex" __alignItems="baseline" gap="s2">
<Box display="flex" __alignItems="baseline" gap={2}>
<Text>{messages.unavailableLabel}</Text>
{availableForPurchase && !isAvailable && (
<Text variant="caption" color="textNeutralSubdued">
@ -206,7 +206,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
{!isAvailable && (
<Box
display="flex"
gap="s1"
gap={1}
flexDirection="column"
alignItems="start"
>

4
src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
View file

@ -15,12 +15,12 @@ export const ChannelAvailabilityItemWrapper: React.FC<
ChannelContentWrapperProps
> = ({ data: { name }, messages, children }) => (
<Accordion data-test-id="channel-availability-item">
<Accordion.Item value="channel-availability-item" gap="s9">
<Accordion.Item value="channel-availability-item" gap={9}>
<Accordion.Trigger buttonDataTestId="expand-icon">
<Text variant={"bodyEmp"}>{name}</Text>
<Label text={messages.availableDateText} />
</Accordion.Trigger>
<Accordion.Content paddingLeft="s3">{children}</Accordion.Content>
<Accordion.Content paddingLeft={3}>{children}</Accordion.Content>
</Accordion.Item>
</Accordion>
);

6
src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
View file

@ -42,7 +42,7 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
<DashboardCard>
<DashboardCard.Title>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Box display={"flex"} flexDirection={"column"} gap="s1">
<Box display={"flex"} flexDirection={"column"} gap={1}>
<div>
{intl.formatMessage({
id: "5A6/2C",
@ -70,8 +70,8 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
</RequirePermissions>
</Box>
</DashboardCard.Title>
<DashboardCard.Content gap="s1" display="flex" flexDirection="column">
<Box display="flex" flexDirection="column" gap="s5">
<DashboardCard.Content gap={1} display="flex" flexDirection="column">
<Box display="flex" flexDirection="column" gap={5}>
{children}
</Box>
</DashboardCard.Content>

4
src/components/Datagrid/Datagrid.tsx
View file

@ -425,7 +425,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
if (loading) {
return (
<Box display="flex" justifyContent="center" marginY="s9">
<Box display="flex" justifyContent="center" marginY={9}>
<CircularProgress />
</Box>
);
@ -566,7 +566,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
</div>
</>
) : (
<Box padding="s6" textAlign="center">
<Box padding={6} textAlign="center">
<Text size="small">{emptyText}</Text>
</Box>
)}

6
src/components/Datagrid/styles.ts
View file

@ -27,7 +27,7 @@ const useStyles = makeStyles(
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: vars.space["s1.5"],
padding: vars.spacing[1.5],
},
columnPicker: {
display: "flex",
@ -40,7 +40,7 @@ const useStyles = makeStyles(
},
ghostIcon: {
color: vars.colors.foreground.iconNeutralPlain,
padding: vars.space.s1,
padding: vars.spacing[1],
},
portal: {
"& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button":
@ -74,7 +74,7 @@ const useStyles = makeStyles(
letterSpacing: vars.letterSpacing.bodyStrongSmall,
lineHeight: vars.lineHeight.bodyEmpMedium,
fontWeight: vars.fontWeight.bodySmall,
padding: vars.space.s1,
padding: vars.spacing[1],
outline: 0,
},
"& input[type='number']:not([class*='MuiInputBase'])": {

2
src/components/DateTimeField/DateTimeField.tsx
View file

@ -29,7 +29,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
const parsedValue = value ? splitDateTime(value) : { date: "", time: "" };
return (
<Box display="flex" gap="s0.5">
<Box display="flex" gap={0.5}>
<TextField
fullWidth
disabled={disabled}

2
src/components/FileUploadField/FileUploadField.tsx
View file

@ -57,7 +57,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
<>
<Box display="flex" justifyContent="flex-end">
{file.label ? (
<Box display="flex" gap="s2" alignItems="center">
<Box display="flex" gap={2} alignItems="center">
<Text variant="caption">
{loading ? (
<Skeleton />

10
src/components/FilterPresetsSelect/FilterPresetItem.tsx
View file

@ -19,10 +19,10 @@ export const FilterPresetItem = ({
return (
<Dropdown.Item>
<List.Item
paddingLeft="s1.5"
paddingRight="s8"
paddingY="s1"
gap="s3"
paddingLeft={1.5}
paddingRight={8}
paddingY={1}
gap={3}
borderRadius={2}
position="relative"
display="flex"
@ -40,7 +40,7 @@ export const FilterPresetItem = ({
zIndex="2"
position="absolute"
__top="50%"
right="s1.5"
right={1.5}
__transform="translateY(-50%)"
onClick={onRemove}
display="flex"

20
src/components/FilterPresetsSelect/FilterPresetsSelect.tsx
View file

@ -118,21 +118,21 @@ export const FilterPresetsSelect = ({
__minWidth={175}
__maxHeight={400}
overflowY="auto"
padding="s1"
padding={1}
borderRadius={3}
boxShadow="overlay"
borderColor="neutralHighlight"
borderStyle="solid"
borderWidth={1}
width="100%"
marginTop="s0.5"
marginTop={0.5}
backgroundColor="surfaceNeutralPlain"
>
<Dropdown.Item>
<List.Item
paddingX="s1.5"
paddingY="s1"
gap="s3"
paddingX={1.5}
paddingY={1}
gap={3}
borderRadius={3}
onClick={onSelectAll}
>
@ -143,14 +143,14 @@ export const FilterPresetsSelect = ({
</Dropdown.Item>
{savedPresets.length > 0 && (
<Box
height="spx"
marginY="s1"
height="px"
marginY={1}
__backgroundColor={vars.colors.border.neutralHighlight}
__marginLeft={-4}
__width={getSeparatorWidth("4px")}
/>
)}
<Box display="flex" flexDirection="column" gap="s0.5">
<Box display="flex" flexDirection="column" gap={0.5}>
{savedPresets.map((preset, index) => (
<FilterPresetItem
isActive={activePreset === index + 1}
@ -176,7 +176,7 @@ export const FilterPresetsSelect = ({
<Button
data-test-id="update-preset-button"
className={sprinkles({
marginLeft: "s3",
marginLeft: 3,
})}
onClick={() => onUpdate(savedPresets[activePreset - 1])}
variant="secondary"
@ -191,7 +191,7 @@ export const FilterPresetsSelect = ({
<Button
data-test-id="add-preset-button"
className={sprinkles({
marginLeft: "s3",
marginLeft: 3,
})}
icon={<PlusIcon />}
onClick={onSave}

2
src/components/Hr.tsx
View file

@ -13,7 +13,7 @@ export const Hr: React.FC<{
backgroundColor="surfaceNeutralDepressed"
borderWidth={0}
width="100%"
height={1}
height="px"
/>
);

2
src/components/LimitReachedAlert.tsx
View file

@ -13,7 +13,7 @@ const LimitReachedAlert: React.FC<LimitReachedAlertProps> = props => (
className={clsx(
sprinkles({
gridColumn: "8",
marginBottom: "s2",
marginBottom: 2,
}),
"remove-icon-background",
)}

2
src/components/Metadata/Metadata.tsx
View file

@ -68,7 +68,7 @@ export const Metadata: React.FC<MetadataProps> = memo(({ data, onChange }) => {
};
return (
<Box display="grid" gap="s2" paddingBottom="s6">
<Box display="grid" gap={2} paddingBottom={6}>
<MetadataCard
data={data?.metadata}
isPrivate={false}

14
src/components/Metadata/MetadataCard.tsx
View file

@ -60,7 +60,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
data-test-id="metadata-editor"
data-test-is-private={isPrivate}
data-test-expanded={expanded}
gap="s1"
gap={1}
>
<DashboardCard.Title>
<Box
@ -124,7 +124,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<Table>
<TableHead>
<TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage
id="nudPsY"
@ -133,7 +133,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
/>
</Text>
</TableCell>
<TableCell style={{ paddingLeft: vars.space.s8 }}>
<TableCell style={{ paddingLeft: vars.spacing[8] }}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage
id="LkuDEb"
@ -145,7 +145,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<TableCell
style={{
textAlign: "end",
paddingRight: vars.space.s6,
paddingRight: vars.spacing[6],
}}
>
<Text variant="caption" color="textNeutralSubdued">
@ -161,7 +161,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<TableBody>
{data.map((field, fieldIndex) => (
<TableRowLink data-test-id="field" key={fieldIndex}>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<TextField
InputProps={{
classes: {
@ -194,7 +194,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
value={field.value}
/>
</TableCell>
<TableCell style={{ paddingRight: vars.space.s6 }}>
<TableCell style={{ paddingRight: vars.spacing[6] }}>
<Box display="flex" justifyContent="flex-end">
<Button
variant="secondary"
@ -217,7 +217,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
</TableBody>
</Table>
)}
<DashboardCard.Content marginTop="s2" paddingLeft="s6">
<DashboardCard.Content marginTop={2} paddingLeft={6}>
<Button
variant="secondary"
data-test-id="add-field"

2
src/components/PageSectionHeader/PageSectionHeader.tsx
View file

@ -12,7 +12,7 @@ const PageSectionHeader: React.FC<PageSectionHeaderProps> = props => {
const { title, description } = props;
return (
<Box paddingTop="s6">
<Box paddingTop={6}>
{title && <Typography variant="h5">{title}</Typography>}
{title && description && <VerticalSpacer />}
{description && <Typography variant="body2">{description}</Typography>}

2
src/components/RichTextEditor/styles.ts
View file

@ -123,7 +123,7 @@ const useStyles = makeStyles(
transition: theme.transitions.duration.short + "ms",
padding: theme.spacing(3, 2),
paddingBottom: theme.spacing(),
paddingLeft: vars.space[4],
paddingLeft: vars.spacing[4],
"&:hover": {
border: `1px solid ${vars.colors.border.neutralHighlight}`,
},

6
src/components/SeoForm/SeoForm.tsx
View file

@ -131,13 +131,13 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
<DashboardCard.Content>
{shouldDisplayHelperText && <Text>{helperText}</Text>}
{expanded && (
<Box display="grid" gap="s2">
<Box display="grid" gap={2}>
<Box>
<Input
error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
name={SeoField.slug}
label={
<Box display="flex" gap="s1">
<Box display="flex" gap={1}>
<Box as="span">
<FormattedMessage defaultMessage="Slug" id="IoDlcd" />
</Box>
@ -174,7 +174,7 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
maxLength={maxTitleLength}
placeholder={titlePlaceholder}
label={
<Box display="flex" gap="s1">
<Box display="flex" gap={1}>
<Box as="span">
<FormattedMessage
defaultMessage="Search engine title"

8
src/components/Sidebar/MountingPoint.tsx
View file

@ -10,13 +10,7 @@ export const MountingPoint = () => {
theme === "defaultLight" ? sideBarDefaultLogo : sideBarDefaultLogoDarkMode;
return (
<Box
display="flex"
gap="s3"
paddingX="s4"
paddingY="s5"
alignItems="center"
>
<Box display="flex" gap={3} paddingX={4} paddingY={5} alignItems="center">
<Avatar.Store src={logo} scheme="decorative2" size="small" />
<Text variant="bodyStrong" size="small">
Saleor Dashboard

2
src/components/Sidebar/menu/Divider.tsx
View file

@ -8,7 +8,7 @@ interface Props {
}
export const Divider: React.FC<Props> = ({ menuItem }) => (
<List.Divider paddingY={menuItem.paddingY ?? "s1.5"} paddingX="s1">
<List.Divider paddingY={menuItem.paddingY ?? 1.5} paddingX={1}>
<Text variant="caption" size="small" color="textNeutralSubdued">
{menuItem.label}
</Text>

18
src/components/Sidebar/menu/ItemGroup.tsx
View file

@ -24,8 +24,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
data-test-id={`menu-list-item`}
>
<List.ItemGroup.Trigger
paddingX="s2"
paddingRight="s1"
paddingX={2}
paddingRight={1}
borderRadius={3}
size="small"
active={isActive}
@ -43,8 +43,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
<Box
display="flex"
alignItems="center"
gap="s3"
paddingY="s1.5"
gap={3}
paddingY={1.5}
borderRadius={3}
>
{menuItem.icon}
@ -59,13 +59,13 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
borderLeftWidth={1}
borderLeftStyle="solid"
borderColor="neutralPlain"
paddingLeft="s4"
marginLeft="s4"
paddingLeft={4}
marginLeft={4}
display="flex"
flexDirection="column"
marginBottom="s2"
marginTop="s1"
gap="spx"
marginBottom={2}
marginTop={1}
gap="px"
>
{menuItem.children?.map(child => (
<MenuItem menuItem={child} key={child.id} />

4
src/components/Sidebar/menu/Menu.tsx
View file

@ -8,8 +8,8 @@ export const Menu = () => {
const menuStructure = useMenuStructure();
return (
<Box padding="s3" overflowY="auto" className="hide-scrollbar">
<List as="ol" display="grid" gap="s1" data-test-id="menu-list">
<Box padding={3} overflowY="auto" className="hide-scrollbar">
<List as="ol" display="grid" gap={1} data-test-id="menu-list">
{menuStructure.map(menuItem => (
<MenuItem menuItem={menuItem} key={menuItem.id} />
))}

6
src/components/Sidebar/menu/SingleItem.tsx
View file

@ -27,7 +27,7 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
return (
<List.Item
borderRadius={3}
paddingX="s2"
paddingX={2}
active={active}
onClick={handleMenuItemClick}
data-test-id={`menu-item-label-${menuItem.id}`}
@ -42,8 +42,8 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
>
<Box
className={sprinkles({
paddingY: "s1.5",
gap: "s3",
paddingY: 1.5,
gap: 3,
display: "flex",
alignItems: "center",
})}

2
src/components/Sidebar/menu/useMenuStructure.tsx
View file

@ -49,7 +49,7 @@ export function useMenuStructure() {
id: "extensions",
label: intl.formatMessage(sectionNames.appExtensions),
type: "divider",
paddingY: "s1.5",
paddingY: 1.5,
};
const getAppSection = (): SidebarMenuItem => ({

10
src/components/Sidebar/user/Controls.tsx
View file

@ -62,7 +62,7 @@ export const UserControls = () => {
<Dropdown.Content align="end">
<Box __minWidth={192}>
<List
padding="s2"
padding={2}
borderRadius={4}
boxShadow="overlay"
backgroundColor="surfaceNeutralPlain"
@ -108,8 +108,8 @@ export const UserControls = () => {
<List.Item
display="flex"
alignItems="center"
gap="s2"
marginTop="s1"
gap={2}
marginTop={1}
onClick={changeTheme}
{...listItemStyles}
data-test-id="theme-switch"
@ -125,7 +125,7 @@ export const UserControls = () => {
};
const listItemStyles = {
paddingX: "s1.5",
paddingY: "s2",
paddingX: 1.5,
paddingY: 2,
borderRadius: 4,
} as const;

8
src/components/Sidebar/user/Info.tsx
View file

@ -12,16 +12,16 @@ export const UserInfo = () => {
return (
<Box
display="flex"
gap="s3"
paddingX="s3"
paddingY="s4"
gap={3}
paddingX={3}
paddingY={4}
alignItems="center"
borderTopWidth={1}
borderColor="neutralPlain"
borderTopStyle="solid"
justifyContent="space-between"
>
<Box display="flex" gap="s3" alignItems="center">
<Box display="flex" gap={3} alignItems="center">
<UserAvatar initials={getUserInitials(user)} url={user?.avatar?.url} />
<Box __width={128} className="ellipsis">
<Text variant="bodyStrong" size="small">

4
src/components/StatusDot/StatusDot.tsx
View file

@ -18,8 +18,8 @@ const getStatusColor = (
export const StatusDot: React.FC<StatusDotProps> = ({ status }) => (
<Box
width="s2"
height="s2"
width={2}
height={2}
borderRadius="50%"
backgroundColor={getStatusColor(status)}
/>

2
src/components/TableCellHeader/TableCellHeader.tsx
View file

@ -11,7 +11,7 @@ const useStyles = makeStyles(
theme => ({
arrow: {
transition: theme.transitions.duration.short + "ms",
marginBottom: vars.space.s1,
marginBottom: vars.spacing[1],
},
arrowLeft: {
marginLeft: -24,

2
src/configuration/ConfigurationPage.tsx
View file

@ -99,7 +99,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
{isSmUp && renderVersionInfo}
</TopNav>
<DetailPageLayout.Content data-test-id="configuration-menu">
<Box paddingX="s6" __maxWidth={"1024px"} margin="auto">
<Box paddingX={6} __maxWidth={"1024px"} margin="auto">
{menus
.filter(menu =>
menu.menuItems.some(menuItem =>

4
src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
View file

@ -46,8 +46,8 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/>
</Button>
</TopNav>
<Box padding="s6">
<Box marginBottom="s1.5">
<Box padding={6}>
<Box marginBottom={1.5}>
<Text as="p">
<FormattedMessage
defaultMessage="Local apps are custom webhooks & token pairs that can be used to

2
src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
View file

@ -38,7 +38,7 @@ const PermissionAlert: React.FC<PermissionAlertProps> = ({ query }) => {
close={false}
className="remove-icon-background"
>
<Box display="flex" gap="s2">
<Box display="flex" gap={2}>
{permissions.map(permission => (
<Chip size="small" key={permission}>
<Text variant="caption" size="small">

2
src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
View file

@ -117,7 +117,7 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
<DetailPageLayout.Content>
<Box padding="s6">
<Box padding={6}>
<WebhookStatus
data={data.isActive}
disabled={disabled}

2
src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
View file

@ -116,7 +116,7 @@ const CustomerAddressListPage: React.FC<
display="flex"
justifyContent="center"
alignItems="center"
padding="s6"
padding={6}
flexDirection="column"
>
<Typography variant="h5">

2
src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
View file

@ -68,7 +68,7 @@ const GiftCardSettingsPage: React.FC = () => {
<Form initial={initialData} onSubmit={handleSubmit}>
{({ data: formData, submit, change }) => (
<>
<Box padding="s6" margin="auto" height="100vh">
<Box padding={6} margin="auto" height="100vh">
<Grid variant="inverted">
<div>
<Typography>

8
src/giftCards/GiftCardUpdate/GiftCardHistory/styles.ts
View file

@ -5,12 +5,12 @@ const useStyles = makeStyles(
{
header: {
fontWeight: 500,
marginBottom: vars.space.spx,
marginBottom: vars.spacing.px,
},
root: {
marginTop: vars.space["s1.5"],
paddingLeft: vars.space.s6,
paddingRight: vars.space.s6,
marginTop: vars.spacing["s1.5"],
paddingLeft: vars.spacing[6],
paddingRight: vars.spacing[6],
},
},
{ name: "GiftCardHistory" },

4
src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
View file

@ -17,12 +17,12 @@ const HomeAnalyticsCard: React.FC<HomeAnalyticsCardProps> = props => {
borderStyle="solid"
borderColor="neutralPlain"
borderRadius={3}
padding="s5"
padding={5}
display="flex"
justifyContent="space-between"
data-test-id={testId}
>
<Box display="flex" flexDirection="column" gap="s0.5">
<Box display="flex" flexDirection="column" gap={0.5}>
<Text size="large" variant="body">
{title}
</Text>

4
src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
View file

@ -35,8 +35,8 @@ const useStyles = makeStyles(
cursor: "pointer",
/* Table to be replaced with Box */
"& .MuiTableCell-root": {
paddingLeft: `${vars.space.s5} !important`,
paddingRight: `${vars.space.s5} !important`,
paddingLeft: `${vars.spacing[5]} !important`,
paddingRight: `${vars.spacing[5]} !important`,
},
},
cardContent: {

6
src/home/components/HomePage/HomePage.tsx
View file

@ -55,7 +55,7 @@ const HomePage: React.FC<HomePageProps> = props => {
<DetailPageLayout withSavebar={false}>
<TopNav title={<HomeHeader userName={userName} />} />
<DetailPageLayout.Content>
<Box paddingLeft="s6" paddingRight="s8">
<Box paddingLeft={6} paddingRight={8}>
<CardSpacer />
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
@ -63,8 +63,8 @@ const HomePage: React.FC<HomePageProps> = props => {
<Box
display="grid"
__gridTemplateColumns="repeat(2, 1fr)"
gap="s5"
marginBottom="s5"
gap={5}
marginBottom={5}
>
<HomeAnalyticsCard
title={intl.formatMessage(homePageMessages.salesCardTitle)}

4
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -49,8 +49,8 @@ const useStyles = makeStyles(
cursor: "pointer",
/* Table to be replaced with Box */
"& .MuiTableCell-root": {
paddingLeft: `${vars.space.s5} !important`,
paddingRight: `${vars.space.s5} !important`,
paddingLeft: `${vars.spacing[5]} !important`,
paddingRight: `${vars.spacing[5]} !important`,
},
},
cardContent: {

2
src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
View file

@ -87,7 +87,7 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
{({ change, data, submit }) => (
<DetailPageLayout gridTemplateColumns={1}>
<DetailPageLayout.Content>
<Box padding="s6" margin="auto" height="100vh">
<Box padding={6} margin="auto" height="100vh">
<Backlink href={menuListUrl()}>
{intl.formatMessage(sectionNames.navigation)}
</Backlink>

2
src/orders/components/OrderDraftPage/OrderDraftPage.tsx
View file

@ -84,7 +84,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
<TopNav
href={orderDraftListUrl()}
title={
<Box display="flex" alignItems="center" gap="s3">
<Box display="flex" alignItems="center" gap={3}>
<span>{order?.number ? "#" + order?.number : undefined}</span>
<div>
{order && order.created ? (

2
src/orders/components/OrderDraftPage/styles.ts
View file

@ -7,7 +7,7 @@ export const useAlertStyles = makeStyles(
marginBottom: theme.spacing(3),
"& .MuiCardContent-root": {
backgroundColor: "unset",
paddingRight: vars.space.s8,
paddingRight: vars.spacing[8],
},
},
}),

2
src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
View file

@ -25,7 +25,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
return (
<Box
paddingY="s4"
paddingY={4}
borderColor="neutralHighlight"
borderBottomStyle={"solid"}
borderBottomWidth={1}

4
src/orders/components/OrderHistory/styles.ts
View file

@ -16,8 +16,8 @@ export const useStyles = makeStyles(
},
root: {
marginTop: theme.spacing(4),
paddingRight: vars.space.s6,
paddingLeft: vars.space.s6,
paddingRight: vars.spacing[6],
paddingLeft: vars.spacing[6],
},
user: {
marginBottom: theme.spacing(1),

2
src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
View file

@ -75,7 +75,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
onInvoiceGenerate && (
<Button
onClick={onInvoiceGenerate}
className={sprinkles({ marginRight: "s0.5" })}
className={sprinkles({ marginRight: 0.5 })}
>
<FormattedMessage
id="e0RKe+"

2
src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
View file

@ -133,7 +133,7 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
rowAnchor={handleRowAnchor}
/>
<Box paddingX="s6">
<Box paddingX={6}>
<TablePaginationWithContext
component="div"
settings={settings}

4
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -128,7 +128,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
alignItems="center"
>
<Box display="flex">
<Box marginX="s3" display="flex" alignItems="center">
<Box marginX={3} display="flex" alignItems="center">
<ChevronRightIcon />
</Box>
@ -149,7 +149,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
/>
</Box>
<Box display="flex" alignItems="center" gap="s2">
<Box display="flex" alignItems="center" gap={2}>
{!!onSettingsOpen && (
<CardMenu
className={classes.settings}

2
src/orders/components/OrderPayment/styles.ts
View file

@ -45,7 +45,7 @@ export const useStyles = makeStyles(
justifyContent: "right",
},
payments: {
paddingRight: vars.space.s6,
paddingRight: vars.spacing[6],
},
}),
{ name: "OrderPayment" },

4
src/orders/fixtures.ts
View file

@ -2244,8 +2244,8 @@ export const variants = [
];
export const prefixes = ["01", "02", "41", "49"];
export const shippingMethods = [
{ country: "whole world", id: "s1", name: "DHL", price: {} },
{ country: "Afghanistan", id: "s2", name: "UPS" },
{ country: "whole world", id: 1, name: "DHL", price: {} },
{ country: "Afghanistan", id: 2, name: "UPS" },
];
export const orderLineSearch = (
placeholderImage: string,

2
src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
View file

@ -128,7 +128,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
margin: "auto",
})}
>
<Box paddingTop="s6">
<Box paddingTop={6}>
<Typography>
{intl.formatMessage(commonMessages.generalInformations)}
</Typography>

2
src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
View file

@ -45,7 +45,7 @@ const useStyles = makeStyles(
colName: {
display: "flex",
alignItems: "center",
gap: vars.space.s2,
gap: vars.spacing[2],
},
avatarDefault: {
"& div": {

2
src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
View file

@ -212,7 +212,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
})}
name="hasVariants"
onChange={event => onHasVariantsToggle(event.target.value)}
className={sprinkles({ paddingLeft: "s6" })}
className={sprinkles({ paddingLeft: 6 })}
/>
{data.hasVariants && (
<>

2
src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
View file

@ -38,7 +38,7 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
<DashboardCard.Title>
{intl.formatMessage(commonMessages.generalInformations)}
</DashboardCard.Title>
<DashboardCard.Content display="grid" gap="s2" paddingX="s5">
<DashboardCard.Content display="grid" gap={2} paddingX={5}>
<Input
label={intl.formatMessage({
id: "6AMFki",

2
src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
View file

@ -262,7 +262,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
)}
/>
<Box paddingX="s6">
<Box paddingX={6}>
<TablePaginationWithContext
component="div"
colSpan={(products?.length === 0 ? 1 : 2) + settings.columns.length}

6
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -156,7 +156,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
alignItems="center"
>
<Box display="flex">
<Box marginX="s3" display="flex" alignItems="center">
<Box marginX={3} display="flex" alignItems="center">
<ChevronRightIcon />
</Box>
@ -178,7 +178,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
})}
/>
</Box>
<Box display="flex" alignItems="center" gap="s2">
<Box display="flex" alignItems="center" gap={2}>
{hasLimits(limits, "productVariants") && (
<Text variant="caption">
{intl.formatMessage(
@ -267,7 +267,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
defaultMessage: "Search Products...",
})}
actions={
<Box display="flex" gap="s4">
<Box display="flex" gap={4}>
<ProductListDeleteButton
ref={setBulkDeleteButtonRef}
onClick={onProductsDelete}

12
src/products/components/ProductListTiles/ProductListTiles.tsx
View file

@ -29,7 +29,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
const renderContent = useCallback(() => {
if (loading) {
return (
<Box display="flex" justifyContent="center" marginY="s9">
<Box display="flex" justifyContent="center" marginY={9}>
<CircularProgress />
</Box>
);
@ -40,9 +40,9 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
<Box
display="grid"
gridTemplateColumns={{ mobile: 3, tablet: 5, desktop: 6 }}
gap="s6"
padding="s6"
__paddingTop={`calc(${vars.space[9]} - ${vars.space[5]}`}
gap={6}
padding={6}
__paddingTop={`calc(${vars.spacing[9]} - ${vars.spacing[5]}`}
data-test-id="tile-view"
>
{products.map(product => (
@ -57,7 +57,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
}
return (
<Box padding="s6" textAlign="center">
<Box padding={6} textAlign="center">
<Text size="small">{intl.formatMessage(messages.emptyText)}</Text>
</Box>
);
@ -66,7 +66,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
return (
<>
{renderContent()}
<Box paddingX="s6">
<Box paddingX={6}>
<TablePaginationWithContext
component="div"
settings={settings}

14
src/products/components/ProductMedia/ProductMedia.tsx
View file

@ -134,7 +134,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
</Dropdown.Trigger>
<Dropdown.Content align="end">
<List
padding="s2"
padding={2}
borderRadius={4}
boxShadow="overlay"
backgroundColor="surfaceNeutralPlain"
@ -142,8 +142,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
<Dropdown.Item>
<List.Item
borderRadius={4}
paddingX="s1.5"
paddingY="s2"
paddingX={1.5}
paddingY={2}
onClick={() => imagesUpload.current.click()}
data-test-id="upload-images"
>
@ -153,8 +153,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
<Dropdown.Item>
<List.Item
borderRadius={4}
paddingX="s1.5"
paddingY="s2"
paddingX={1.5}
paddingY={2}
onClick={openMediaUrlModal}
data-test-id="upload-media-url"
>
@ -183,7 +183,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
</Box>
<Box position="relative">
{media === undefined ? (
<Box padding="s5">
<Box padding={5}>
<Skeleton />
</Box>
) : media.length > 0 ? (
@ -212,7 +212,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
onSortEnd={onImageReorder}
className={sprinkles({
display: "grid",
gap: "s5",
gap: 5,
gridTemplateColumns: { mobile: 2, tablet: 3, desktop: 4 },
opacity: isDragActive ? "0.2" : "1",
})}

4
src/products/components/ProductOrganization/ProductOrganization.tsx
View file

@ -99,7 +99,7 @@ export const ProductOrganization: React.FC<
description: "section header",
})}
</DashboardCard.Title>
<DashboardCard.Content gap="s5" display="flex" flexDirection="column">
<DashboardCard.Content gap={5} display="flex" flexDirection="column">
{canChangeType ? (
<SingleAutocompleteSelectField
displayValue={productTypeInputDisplayValue}
@ -119,7 +119,7 @@ export const ProductOrganization: React.FC<
{...fetchMoreProductTypes}
/>
) : (
<Box display="flex" flexDirection="column" gap="s3">
<Box display="flex" flexDirection="column" gap={3}>
<Box display="flex" flexDirection="column">
<Text variant="bodyEmp">
<FormattedMessage id="anK7jD" defaultMessage="Product Type" />

30
src/products/components/ProductStocks/ProductStocks.tsx
View file

@ -145,7 +145,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
/>
</Box>
<Box paddingY="s2" display="grid" gap="s2">
<Box paddingY={2} display="grid" gap={2}>
<Checkbox
checked={data.isPreorder}
name="isPreorder"
@ -158,7 +158,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
}}
disabled={disabled}
>
<Box display="flex" gap="s1" paddingY="s1.5">
<Box display="flex" gap={1} paddingY={1.5}>
<Text>
<FormattedMessage {...messages.variantInPreorder} />
</Text>
@ -187,7 +187,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
)}
{!data.isPreorder && (
<Box display="grid" gap="s2">
<Box display="grid" gap={2}>
<Box display="flex" flexDirection="column">
<Text>
<FormattedMessage {...messages.quantity} />
@ -233,7 +233,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Table>
<TableHead>
<TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...messages.warehouseName} />
</Text>
@ -260,7 +260,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
return (
<TableRowLink key={stock.id}>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text>{stock.label}</Text>
</TableCell>
<TableCell>
@ -298,13 +298,13 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<TableRowLink className={sprinkles({ cursor: "pointer" })}>
<TableCell
colSpan={3}
style={{ paddingLeft: vars.space.s6 }}
style={{ paddingLeft: vars.spacing[6] }}
>
<Text>
<FormattedMessage {...messages.assignWarehouse} />
</Text>
</TableCell>
<TableCell style={{ paddingRight: vars.space.s6 }}>
<TableCell style={{ paddingRight: vars.spacing[6] }}>
<Button
type="button"
icon={<PlusIcon />}
@ -317,7 +317,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Dropdown.Content align="end">
<Box>
<List
padding="s2"
padding={2}
borderRadius={4}
boxShadow="overlay"
backgroundColor="surfaceNeutralPlain"
@ -325,8 +325,8 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
{warehousesToAssign.map(warehouse => (
<Dropdown.Item key={warehouse.id}>
<List.Item
paddingX="s1.5"
paddingY="s2"
paddingX={1.5}
paddingY={2}
borderRadius={4}
onClick={() =>
handleWarehouseStockAdd(warehouse.id)
@ -346,7 +346,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
)}
{data.isPreorder && (
<DashboardCard.Content>
<Box display="grid" gap="s2">
<Box display="grid" gap={2}>
<Text variant="caption">
<FormattedMessage {...messages.preorderEndDateSetup} />
</Text>
@ -393,11 +393,11 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
</Box>
</Box>
<Box display="grid" gap="s1" paddingTop="s2">
<Box display="grid" gap={1} paddingTop={2}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...messages.preorderProductsAvailability} />
</Text>
<Box display="grid" gap="s1.5">
<Box display="grid" gap={1.5}>
<Box __width="50%">
<Input
min={0}
@ -432,7 +432,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Table>
<TableHead>
<TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...sectionNames.channels} />
</Text>
@ -457,7 +457,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
return (
<TableRowLink key={listing.id}>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text>{listing.name}</Text>
</TableCell>
<TableCell>

16
src/products/components/ProductTile/ProductTile.tsx
View file

@ -21,7 +21,7 @@ const commonThumbnailProps = {
borderColor: "neutralHighlight",
borderStyle: "solid",
borderWidth: 1,
marginBottom: "s1.5",
marginBottom: 1.5,
borderRadius: 3,
aspectRatio: "1 / 1",
} as const;
@ -65,7 +65,7 @@ export const ProductTile: React.FC<ProductTileProps> = ({
</Box>
)}
<Box display="flex" alignItems="center">
<Box paddingRight="s1">
<Box paddingRight={1}>
<StatusDot status={getTileStatus(product.channelListings)} />
</Box>
<Text
@ -74,12 +74,12 @@ export const ProductTile: React.FC<ProductTileProps> = ({
variant="caption"
size="small"
alignItems="center"
className={sprinkles({ paddingY: "s0.5" })}
className={sprinkles({ paddingY: 0.5 })}
>
{product.productType.name}
</Text>
</Box>
<Box display="flex" justifyContent="space-between" marginTop="s0.5">
<Box display="flex" justifyContent="space-between" marginTop={0.5}>
<Text ellipsis color="textNeutralDefault" variant="bodyEmp" size="small">
{product.name}
</Text>
@ -87,10 +87,10 @@ export const ProductTile: React.FC<ProductTileProps> = ({
<Box
position={"absolute"}
margin="auto"
__right={`calc(${vars.space.s5} / -2)`}
__top={`calc(${vars.space.s5} / -2)`}
__width={`calc(100% + ${vars.space.s5})`}
__height={`calc(100% + ${vars.space.s5})`}
__right={`calc(${vars.spacing[5]} / -2)`}
__top={`calc(${vars.spacing[5]} / -2)`}
__width={`calc(100% + ${vars.spacing[5]})`}
__height={`calc(100% + ${vars.spacing[5]})`}
__opacity={0.1}
borderRadius={5}
backgroundColor={{

4
src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
View file

@ -96,7 +96,7 @@ export const ProductVariantPrice: React.FC<
<ResponsiveTable>
<TableHead>
<TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued">
<FormattedMessage
id="c8UT0c"
@ -140,7 +140,7 @@ export const ProductVariantPrice: React.FC<
return (
<TableRowLink key={listing?.id || `skeleton-${index}`}>
<TableCell style={{ paddingLeft: vars.space.s6 }}>
<TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text>{listing?.name || <Skeleton />}</Text>
</TableCell>
<TableCell>

2
src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
View file

@ -60,7 +60,7 @@ const ShippingWeightUnitForm: React.FC<ShippingWeightUnitFormProps> = ({
onChange={change}
/>
</CardContent>
<CardActions style={{ paddingLeft: vars.space.s6 }}>
<CardActions style={{ paddingLeft: vars.spacing[6] }}>
<Button onClick={submit} data-test-id="save-unit">
<FormattedMessage {...buttonMessages.save} />
</Button>

2
src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
View file

@ -143,7 +143,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
title={intl.formatMessage(commonMessages.generalInformations)}
/>
<DetailPageLayout.Content>
<Box gap="s2" paddingLeft="s6">
<Box gap={2} paddingLeft={6}>
<Box display="grid" __gridTemplateColumns="1fr 3fr">
<PageSectionHeader
title={intl.formatMessage(messages.sectionCheckoutTitle)}

2
src/staff/components/StaffList/StaffList.tsx
View file

@ -123,7 +123,7 @@ const StaffList: React.FC<StaffListProps> = props => {
key={staffMember ? staffMember.id : "skeleton"}
>
<TableCell>
<Box display="flex" alignItems="center" gap="s2">
<Box display="flex" alignItems="center" gap={2}>
<UserAvatar
url={staffMember?.avatar?.url}
initials={getUserInitials(staffMember)}

2
src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
View file

@ -163,7 +163,7 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content>
<Box padding="s6">
<Box padding={6}>
<PageTabs value="channels" onChange={handleTabChange}>
<PageTab
label={intl.formatMessage(taxesMessages.channelsSection)}

2
src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
View file

@ -122,7 +122,7 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content>
<Box padding="s6">
<Box padding={6}>
<PageTabs value="tax-classes" onChange={handleTabChange}>
<PageTab
label={intl.formatMessage(taxesMessages.channelsSection)}

2
src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
View file

@ -94,7 +94,7 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content>
<Box padding="s6">
<Box padding={6}>
<PageTabs value="countries" onChange={handleTabChange}>
<PageTab
label={intl.formatMessage(taxesMessages.channelsSection)}

2
src/themeOverrides.ts
View file

@ -52,7 +52,7 @@ export const themeOverrides: Partial<Theme> = {
},
MuiCardHeader: {
root: {
paddingRight: vars.space.s8,
paddingRight: vars.spacing[8],
backgroundColor: vars.colors.background.surfaceNeutralPlain,
},
title: {

2
src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
View file

@ -29,7 +29,7 @@ const useStyles = makeStyles(
},
rowLink: {
"& .MuiTableCell-root": {
paddingLeft: `${vars.space.s6} !important`,
paddingLeft: `${vars.spacing[6]} !important`,
},
},
},