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

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

@ -27,7 +27,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
} }
return ( return (
<Box display="flex" flexDirection="column" gap="s5" marginTop="s5"> <Box display="flex" flexDirection="column" gap={5} marginTop={5}>
{appsPairs.map(appPair => ( {appsPairs.map(appPair => (
<AppListRow <AppListRow
key={appPair[0].name.en} 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 { Box, GenericAppIcon } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
const avatarSize = "s8"; const avatarSize = 8;
export const AppAvatar: React.FC<{ export const AppAvatar: React.FC<{
logo?: AppLogo | undefined; logo?: AppLogo | undefined;
@ -11,7 +11,7 @@ export const AppAvatar: React.FC<{
return ( return (
<Box <Box
__backgroundColor={logo?.color} __backgroundColor={logo?.color}
padding="s1" padding={1}
width={avatarSize} width={avatarSize}
height={avatarSize} height={avatarSize}
borderRadius={2} borderRadius={2}
@ -26,7 +26,7 @@ export const AppAvatar: React.FC<{
<Box <Box
__backgroundColor={logo?.color} __backgroundColor={logo?.color}
backgroundColor="surfaceNeutralSubdued" backgroundColor="surfaceNeutralSubdued"
padding="s1" padding={1}
width={avatarSize} width={avatarSize}
height={avatarSize} height={avatarSize}
display="flex" display="flex"

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -18,13 +18,13 @@ const AppListCardLinks: React.FC<AppListCardLinksProps> = ({ links }) => {
display="flex" display="flex"
flexDirection="row" flexDirection="row"
flexWrap="wrap" flexWrap="wrap"
gap="s4" gap={4}
borderLeftStyle="solid" borderLeftStyle="solid"
borderRightStyle="solid" borderRightStyle="solid"
borderWidth={1} borderWidth={1}
borderColor="neutralPlain" borderColor="neutralPlain"
paddingY="s3" paddingY={3}
paddingX="s5" paddingX={5}
> >
{links?.map(link => ( {links?.map(link => (
<Box as="span" key={link.name}> <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} gridTemplateColumns={2}
__gridTemplateRows="repeat(4, auto)" __gridTemplateRows="repeat(4, auto)"
gridAutoFlow={isSingleApp ? "column" : "row"} gridAutoFlow={isSingleApp ? "column" : "row"}
columnGap="s5" columnGap={5}
padding="s5" padding={5}
> >
{appPair.map(app => ( {appPair.map(app => (
<AppListCardDescription key={app.name.en + "description"} app={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, children,
}) => ( }) => (
<Box <Box
width="s10" width={10}
height="s10" height={10}
display="flex" display="flex"
placeItems="center" placeItems="center"
borderRadius={3} borderRadius={3}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -30,11 +30,11 @@ export const ListFilters = ({
<Box <Box
display="grid" display="grid"
gridTemplateColumns={2} gridTemplateColumns={2}
gap="s4" gap={4}
paddingBottom="s2" paddingBottom={2}
paddingX="s6" paddingX={6}
> >
<Box display="flex" alignItems="center" gap="s4"> <Box display="flex" alignItems="center" gap={4}>
<FiltersSelect <FiltersSelect
errorMessages={errorMessages} errorMessages={errorMessages}
menu={filterStructure} 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"> <Dropdown.Content align="end">
<Box> <Box>
<List <List
padding="s2" padding={2}
borderRadius={4} borderRadius={4}
boxShadow="overlay" boxShadow="overlay"
backgroundColor="surfaceNeutralPlain" backgroundColor="surfaceNeutralPlain"
@ -40,8 +40,8 @@ export const Menu: React.FC<TopNavMenuProps> = ({ items, dataTestId }) => (
<Dropdown.Item key={item.label}> <Dropdown.Item key={item.label}>
<List.Item <List.Item
borderRadius={4} borderRadius={4}
paddingX="s1.5" paddingX={1.5}
paddingY="s2" paddingY={2}
onClick={item.onSelect} onClick={item.onSelect}
data-test-id={item.testId} 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; to: string;
variant?: "secondary" | "tertiary"; variant?: "secondary" | "tertiary";
}> = ({ to, variant = "secondary" }) => ( }> = ({ to, variant = "secondary" }) => (
<Link to={to} className={sprinkles({ marginRight: "s2" })}> <Link to={to} className={sprinkles({ marginRight: 2 })}>
<Button <Button
icon={<ArrowLeftIcon />} icon={<ArrowLeftIcon />}
variant={variant} variant={variant}

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

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

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

@ -199,11 +199,11 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
); );
case AttributeInputTypeEnum.BOOLEAN: case AttributeInputTypeEnum.BOOLEAN:
return ( 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 data-test-id="attribute-value">
<Box <Box
display="flex" display="flex"
gap="s0.5" gap={0.5}
flexDirection="column" flexDirection="column"
alignItems="flex-end" alignItems="flex-end"
> >
@ -224,7 +224,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
as="label" as="label"
htmlFor={`attribute:${attribute.label}`} htmlFor={`attribute:${attribute.label}`}
display="flex" display="flex"
gap="s1" gap={1}
cursor="pointer" cursor="pointer"
> >
<Text>{attribute.label}</Text> <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)} {title || intl.formatMessage(messages.header)}
</DashboardCard.Title> </DashboardCard.Title>
<DashboardCard.Content> <DashboardCard.Content>
<Box display="flex" flexDirection="column" gap="s2"> <Box display="flex" flexDirection="column" gap={2}>
<Accordion defaultValue="attributes-accordion"> <Accordion defaultValue="attributes-accordion">
<Accordion.Item value="attributes-accordion"> <Accordion.Item value="attributes-accordion">
<Accordion.Trigger buttonDataTestId="attributes-expand"> <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" as="li"
justifyContent="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
paddingY="s6" paddingY={6}
paddingX="s0.5" paddingX={0.5}
display="grid" display="grid"
gridTemplateColumns={2} gridTemplateColumns={2}
gap="s5" gap={5}
> >
<Box <Box
data-test-id="attribute-label" data-test-id="attribute-label"
as="label" as="label"
htmlFor={id} htmlFor={id}
display="flex" display="flex"
gap="s1" gap={1}
cursor={clickableLabel ? "pointer" : "auto"} cursor={clickableLabel ? "pointer" : "auto"}
> >
<Text>{label}</Text> <Text>{label}</Text>

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

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

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

@ -30,7 +30,7 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
<Dropdown.Content align="end"> <Dropdown.Content align="end">
<Box> <Box>
<List <List
padding="s2" padding={2}
borderRadius={4} borderRadius={4}
boxShadow="overlay" boxShadow="overlay"
backgroundColor="surfaceNeutralPlain" backgroundColor="surfaceNeutralPlain"
@ -39,8 +39,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
<Dropdown.Item> <Dropdown.Item>
<List.Item <List.Item
borderRadius={4} borderRadius={4}
paddingX="s1.5" paddingX={1.5}
paddingY="s2" paddingY={2}
onClick={item.onSelect} onClick={item.onSelect}
data-test-id={item.testId} 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"; import React from "react";
export const Content: React.FC<Sprinkles> = ({ children, ...rest }) => ( export const Content: React.FC<Sprinkles> = ({ children, ...rest }) => (
<Box paddingX="s6" {...rest}> <Box paddingX={6} {...rest}>
{children} {children}
</Box> </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"; import React from "react";
export const Root: React.FC<Sprinkles> = ({ children, ...rest }) => ( 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} {children}
</Box> </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"; import React from "react";
export const Title: React.FC = ({ children }) => ( export const Title: React.FC = ({ children }) => (
<Box paddingX="s6" paddingTop="s6"> <Box paddingX={6} paddingTop={6}>
<Text variant="heading">{children}</Text> <Text variant="heading">{children}</Text>
</Box> </Box>
); );

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

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

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

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

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

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

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

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

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

@ -27,7 +27,7 @@ const useStyles = makeStyles(
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "flex-end", justifyContent: "flex-end",
padding: vars.space["s1.5"], padding: vars.spacing[1.5],
}, },
columnPicker: { columnPicker: {
display: "flex", display: "flex",
@ -40,7 +40,7 @@ const useStyles = makeStyles(
}, },
ghostIcon: { ghostIcon: {
color: vars.colors.foreground.iconNeutralPlain, color: vars.colors.foreground.iconNeutralPlain,
padding: vars.space.s1, padding: vars.spacing[1],
}, },
portal: { portal: {
"& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": "& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button":
@ -74,7 +74,7 @@ const useStyles = makeStyles(
letterSpacing: vars.letterSpacing.bodyStrongSmall, letterSpacing: vars.letterSpacing.bodyStrongSmall,
lineHeight: vars.lineHeight.bodyEmpMedium, lineHeight: vars.lineHeight.bodyEmpMedium,
fontWeight: vars.fontWeight.bodySmall, fontWeight: vars.fontWeight.bodySmall,
padding: vars.space.s1, padding: vars.spacing[1],
outline: 0, outline: 0,
}, },
"& input[type='number']:not([class*='MuiInputBase'])": { "& 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: "" }; const parsedValue = value ? splitDateTime(value) : { date: "", time: "" };
return ( return (
<Box display="flex" gap="s0.5"> <Box display="flex" gap={0.5}>
<TextField <TextField
fullWidth fullWidth
disabled={disabled} 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"> <Box display="flex" justifyContent="flex-end">
{file.label ? ( {file.label ? (
<Box display="flex" gap="s2" alignItems="center"> <Box display="flex" gap={2} alignItems="center">
<Text variant="caption"> <Text variant="caption">
{loading ? ( {loading ? (
<Skeleton /> <Skeleton />

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

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

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

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

2
src/components/Hr.tsx
View file

@ -13,7 +13,7 @@ export const Hr: React.FC<{
backgroundColor="surfaceNeutralDepressed" backgroundColor="surfaceNeutralDepressed"
borderWidth={0} borderWidth={0}
width="100%" 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( className={clsx(
sprinkles({ sprinkles({
gridColumn: "8", gridColumn: "8",
marginBottom: "s2", marginBottom: 2,
}), }),
"remove-icon-background", "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 ( return (
<Box display="grid" gap="s2" paddingBottom="s6"> <Box display="grid" gap={2} paddingBottom={6}>
<MetadataCard <MetadataCard
data={data?.metadata} data={data?.metadata}
isPrivate={false} 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-id="metadata-editor"
data-test-is-private={isPrivate} data-test-is-private={isPrivate}
data-test-expanded={expanded} data-test-expanded={expanded}
gap="s1" gap={1}
> >
<DashboardCard.Title> <DashboardCard.Title>
<Box <Box
@ -124,7 +124,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<Table> <Table>
<TableHead> <TableHead>
<TableRowLink> <TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
<FormattedMessage <FormattedMessage
id="nudPsY" id="nudPsY"
@ -133,7 +133,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
/> />
</Text> </Text>
</TableCell> </TableCell>
<TableCell style={{ paddingLeft: vars.space.s8 }}> <TableCell style={{ paddingLeft: vars.spacing[8] }}>
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
<FormattedMessage <FormattedMessage
id="LkuDEb" id="LkuDEb"
@ -145,7 +145,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<TableCell <TableCell
style={{ style={{
textAlign: "end", textAlign: "end",
paddingRight: vars.space.s6, paddingRight: vars.spacing[6],
}} }}
> >
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
@ -161,7 +161,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
<TableBody> <TableBody>
{data.map((field, fieldIndex) => ( {data.map((field, fieldIndex) => (
<TableRowLink data-test-id="field" key={fieldIndex}> <TableRowLink data-test-id="field" key={fieldIndex}>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<TextField <TextField
InputProps={{ InputProps={{
classes: { classes: {
@ -194,7 +194,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
value={field.value} value={field.value}
/> />
</TableCell> </TableCell>
<TableCell style={{ paddingRight: vars.space.s6 }}> <TableCell style={{ paddingRight: vars.spacing[6] }}>
<Box display="flex" justifyContent="flex-end"> <Box display="flex" justifyContent="flex-end">
<Button <Button
variant="secondary" variant="secondary"
@ -217,7 +217,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
</TableBody> </TableBody>
</Table> </Table>
)} )}
<DashboardCard.Content marginTop="s2" paddingLeft="s6"> <DashboardCard.Content marginTop={2} paddingLeft={6}>
<Button <Button
variant="secondary" variant="secondary"
data-test-id="add-field" 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; const { title, description } = props;
return ( return (
<Box paddingTop="s6"> <Box paddingTop={6}>
{title && <Typography variant="h5">{title}</Typography>} {title && <Typography variant="h5">{title}</Typography>}
{title && description && <VerticalSpacer />} {title && description && <VerticalSpacer />}
{description && <Typography variant="body2">{description}</Typography>} {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", transition: theme.transitions.duration.short + "ms",
padding: theme.spacing(3, 2), padding: theme.spacing(3, 2),
paddingBottom: theme.spacing(), paddingBottom: theme.spacing(),
paddingLeft: vars.space[4], paddingLeft: vars.spacing[4],
"&:hover": { "&:hover": {
border: `1px solid ${vars.colors.border.neutralHighlight}`, 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> <DashboardCard.Content>
{shouldDisplayHelperText && <Text>{helperText}</Text>} {shouldDisplayHelperText && <Text>{helperText}</Text>}
{expanded && ( {expanded && (
<Box display="grid" gap="s2"> <Box display="grid" gap={2}>
<Box> <Box>
<Input <Input
error={!!getError(SeoField.slug) || slug.length > maxSlugLength} error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
name={SeoField.slug} name={SeoField.slug}
label={ label={
<Box display="flex" gap="s1"> <Box display="flex" gap={1}>
<Box as="span"> <Box as="span">
<FormattedMessage defaultMessage="Slug" id="IoDlcd" /> <FormattedMessage defaultMessage="Slug" id="IoDlcd" />
</Box> </Box>
@ -174,7 +174,7 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
maxLength={maxTitleLength} maxLength={maxTitleLength}
placeholder={titlePlaceholder} placeholder={titlePlaceholder}
label={ label={
<Box display="flex" gap="s1"> <Box display="flex" gap={1}>
<Box as="span"> <Box as="span">
<FormattedMessage <FormattedMessage
defaultMessage="Search engine title" defaultMessage="Search engine title"

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

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

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

@ -8,7 +8,7 @@ interface Props {
} }
export const Divider: React.FC<Props> = ({ menuItem }) => ( 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"> <Text variant="caption" size="small" color="textNeutralSubdued">
{menuItem.label} {menuItem.label}
</Text> </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`} data-test-id={`menu-list-item`}
> >
<List.ItemGroup.Trigger <List.ItemGroup.Trigger
paddingX="s2" paddingX={2}
paddingRight="s1" paddingRight={1}
borderRadius={3} borderRadius={3}
size="small" size="small"
active={isActive} active={isActive}
@ -43,8 +43,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
<Box <Box
display="flex" display="flex"
alignItems="center" alignItems="center"
gap="s3" gap={3}
paddingY="s1.5" paddingY={1.5}
borderRadius={3} borderRadius={3}
> >
{menuItem.icon} {menuItem.icon}
@ -59,13 +59,13 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
borderLeftWidth={1} borderLeftWidth={1}
borderLeftStyle="solid" borderLeftStyle="solid"
borderColor="neutralPlain" borderColor="neutralPlain"
paddingLeft="s4" paddingLeft={4}
marginLeft="s4" marginLeft={4}
display="flex" display="flex"
flexDirection="column" flexDirection="column"
marginBottom="s2" marginBottom={2}
marginTop="s1" marginTop={1}
gap="spx" gap="px"
> >
{menuItem.children?.map(child => ( {menuItem.children?.map(child => (
<MenuItem menuItem={child} key={child.id} /> <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(); const menuStructure = useMenuStructure();
return ( return (
<Box padding="s3" overflowY="auto" className="hide-scrollbar"> <Box padding={3} overflowY="auto" className="hide-scrollbar">
<List as="ol" display="grid" gap="s1" data-test-id="menu-list"> <List as="ol" display="grid" gap={1} data-test-id="menu-list">
{menuStructure.map(menuItem => ( {menuStructure.map(menuItem => (
<MenuItem menuItem={menuItem} key={menuItem.id} /> <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 ( return (
<List.Item <List.Item
borderRadius={3} borderRadius={3}
paddingX="s2" paddingX={2}
active={active} active={active}
onClick={handleMenuItemClick} onClick={handleMenuItemClick}
data-test-id={`menu-item-label-${menuItem.id}`} data-test-id={`menu-item-label-${menuItem.id}`}
@ -42,8 +42,8 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
> >
<Box <Box
className={sprinkles({ className={sprinkles({
paddingY: "s1.5", paddingY: 1.5,
gap: "s3", gap: 3,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
})} })}

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

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

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

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

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

@ -12,16 +12,16 @@ export const UserInfo = () => {
return ( return (
<Box <Box
display="flex" display="flex"
gap="s3" gap={3}
paddingX="s3" paddingX={3}
paddingY="s4" paddingY={4}
alignItems="center" alignItems="center"
borderTopWidth={1} borderTopWidth={1}
borderColor="neutralPlain" borderColor="neutralPlain"
borderTopStyle="solid" borderTopStyle="solid"
justifyContent="space-between" 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} /> <UserAvatar initials={getUserInitials(user)} url={user?.avatar?.url} />
<Box __width={128} className="ellipsis"> <Box __width={128} className="ellipsis">
<Text variant="bodyStrong" size="small"> <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 }) => ( export const StatusDot: React.FC<StatusDotProps> = ({ status }) => (
<Box <Box
width="s2" width={2}
height="s2" height={2}
borderRadius="50%" borderRadius="50%"
backgroundColor={getStatusColor(status)} backgroundColor={getStatusColor(status)}
/> />

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

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

2
src/configuration/ConfigurationPage.tsx
View file

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

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

@ -46,8 +46,8 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/> />
</Button> </Button>
</TopNav> </TopNav>
<Box padding="s6"> <Box padding={6}>
<Box marginBottom="s1.5"> <Box marginBottom={1.5}>
<Text as="p"> <Text as="p">
<FormattedMessage <FormattedMessage
defaultMessage="Local apps are custom webhooks & token pairs that can be used to 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} close={false}
className="remove-icon-background" className="remove-icon-background"
> >
<Box display="flex" gap="s2"> <Box display="flex" gap={2}>
{permissions.map(permission => ( {permissions.map(permission => (
<Chip size="small" key={permission}> <Chip size="small" key={permission}>
<Text variant="caption" size="small"> <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}> <DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} /> <TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
<DetailPageLayout.Content> <DetailPageLayout.Content>
<Box padding="s6"> <Box padding={6}>
<WebhookStatus <WebhookStatus
data={data.isActive} data={data.isActive}
disabled={disabled} disabled={disabled}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -7,7 +7,7 @@ export const useAlertStyles = makeStyles(
marginBottom: theme.spacing(3), marginBottom: theme.spacing(3),
"& .MuiCardContent-root": { "& .MuiCardContent-root": {
backgroundColor: "unset", 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 ( return (
<Box <Box
paddingY="s4" paddingY={4}
borderColor="neutralHighlight" borderColor="neutralHighlight"
borderBottomStyle={"solid"} borderBottomStyle={"solid"}
borderBottomWidth={1} borderBottomWidth={1}

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

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

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

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

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

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

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

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

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

@ -45,7 +45,7 @@ export const useStyles = makeStyles(
justifyContent: "right", justifyContent: "right",
}, },
payments: { payments: {
paddingRight: vars.space.s6, paddingRight: vars.spacing[6],
}, },
}), }),
{ name: "OrderPayment" }, { 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 prefixes = ["01", "02", "41", "49"];
export const shippingMethods = [ export const shippingMethods = [
{ country: "whole world", id: "s1", name: "DHL", price: {} }, { country: "whole world", id: 1, name: "DHL", price: {} },
{ country: "Afghanistan", id: "s2", name: "UPS" }, { country: "Afghanistan", id: 2, name: "UPS" },
]; ];
export const orderLineSearch = ( export const orderLineSearch = (
placeholderImage: string, placeholderImage: string,

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

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

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

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

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

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

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

@ -38,7 +38,7 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
<DashboardCard.Title> <DashboardCard.Title>
{intl.formatMessage(commonMessages.generalInformations)} {intl.formatMessage(commonMessages.generalInformations)}
</DashboardCard.Title> </DashboardCard.Title>
<DashboardCard.Content display="grid" gap="s2" paddingX="s5"> <DashboardCard.Content display="grid" gap={2} paddingX={5}>
<Input <Input
label={intl.formatMessage({ label={intl.formatMessage({
id: "6AMFki", 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 <TablePaginationWithContext
component="div" component="div"
colSpan={(products?.length === 0 ? 1 : 2) + settings.columns.length} 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" alignItems="center"
> >
<Box display="flex"> <Box display="flex">
<Box marginX="s3" display="flex" alignItems="center"> <Box marginX={3} display="flex" alignItems="center">
<ChevronRightIcon /> <ChevronRightIcon />
</Box> </Box>
@ -178,7 +178,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
})} })}
/> />
</Box> </Box>
<Box display="flex" alignItems="center" gap="s2"> <Box display="flex" alignItems="center" gap={2}>
{hasLimits(limits, "productVariants") && ( {hasLimits(limits, "productVariants") && (
<Text variant="caption"> <Text variant="caption">
{intl.formatMessage( {intl.formatMessage(
@ -267,7 +267,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
defaultMessage: "Search Products...", defaultMessage: "Search Products...",
})} })}
actions={ actions={
<Box display="flex" gap="s4"> <Box display="flex" gap={4}>
<ProductListDeleteButton <ProductListDeleteButton
ref={setBulkDeleteButtonRef} ref={setBulkDeleteButtonRef}
onClick={onProductsDelete} onClick={onProductsDelete}

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

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

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

@ -134,7 +134,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
</Dropdown.Trigger> </Dropdown.Trigger>
<Dropdown.Content align="end"> <Dropdown.Content align="end">
<List <List
padding="s2" padding={2}
borderRadius={4} borderRadius={4}
boxShadow="overlay" boxShadow="overlay"
backgroundColor="surfaceNeutralPlain" backgroundColor="surfaceNeutralPlain"
@ -142,8 +142,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
<Dropdown.Item> <Dropdown.Item>
<List.Item <List.Item
borderRadius={4} borderRadius={4}
paddingX="s1.5" paddingX={1.5}
paddingY="s2" paddingY={2}
onClick={() => imagesUpload.current.click()} onClick={() => imagesUpload.current.click()}
data-test-id="upload-images" data-test-id="upload-images"
> >
@ -153,8 +153,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
<Dropdown.Item> <Dropdown.Item>
<List.Item <List.Item
borderRadius={4} borderRadius={4}
paddingX="s1.5" paddingX={1.5}
paddingY="s2" paddingY={2}
onClick={openMediaUrlModal} onClick={openMediaUrlModal}
data-test-id="upload-media-url" data-test-id="upload-media-url"
> >
@ -183,7 +183,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
</Box> </Box>
<Box position="relative"> <Box position="relative">
{media === undefined ? ( {media === undefined ? (
<Box padding="s5"> <Box padding={5}>
<Skeleton /> <Skeleton />
</Box> </Box>
) : media.length > 0 ? ( ) : media.length > 0 ? (
@ -212,7 +212,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
onSortEnd={onImageReorder} onSortEnd={onImageReorder}
className={sprinkles({ className={sprinkles({
display: "grid", display: "grid",
gap: "s5", gap: 5,
gridTemplateColumns: { mobile: 2, tablet: 3, desktop: 4 }, gridTemplateColumns: { mobile: 2, tablet: 3, desktop: 4 },
opacity: isDragActive ? "0.2" : "1", 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", description: "section header",
})} })}
</DashboardCard.Title> </DashboardCard.Title>
<DashboardCard.Content gap="s5" display="flex" flexDirection="column"> <DashboardCard.Content gap={5} display="flex" flexDirection="column">
{canChangeType ? ( {canChangeType ? (
<SingleAutocompleteSelectField <SingleAutocompleteSelectField
displayValue={productTypeInputDisplayValue} displayValue={productTypeInputDisplayValue}
@ -119,7 +119,7 @@ export const ProductOrganization: React.FC<
{...fetchMoreProductTypes} {...fetchMoreProductTypes}
/> />
) : ( ) : (
<Box display="flex" flexDirection="column" gap="s3"> <Box display="flex" flexDirection="column" gap={3}>
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">
<Text variant="bodyEmp"> <Text variant="bodyEmp">
<FormattedMessage id="anK7jD" defaultMessage="Product Type" /> <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>
<Box paddingY="s2" display="grid" gap="s2"> <Box paddingY={2} display="grid" gap={2}>
<Checkbox <Checkbox
checked={data.isPreorder} checked={data.isPreorder}
name="isPreorder" name="isPreorder"
@ -158,7 +158,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
}} }}
disabled={disabled} disabled={disabled}
> >
<Box display="flex" gap="s1" paddingY="s1.5"> <Box display="flex" gap={1} paddingY={1.5}>
<Text> <Text>
<FormattedMessage {...messages.variantInPreorder} /> <FormattedMessage {...messages.variantInPreorder} />
</Text> </Text>
@ -187,7 +187,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
)} )}
{!data.isPreorder && ( {!data.isPreorder && (
<Box display="grid" gap="s2"> <Box display="grid" gap={2}>
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">
<Text> <Text>
<FormattedMessage {...messages.quantity} /> <FormattedMessage {...messages.quantity} />
@ -233,7 +233,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Table> <Table>
<TableHead> <TableHead>
<TableRowLink> <TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...messages.warehouseName} /> <FormattedMessage {...messages.warehouseName} />
</Text> </Text>
@ -260,7 +260,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
return ( return (
<TableRowLink key={stock.id}> <TableRowLink key={stock.id}>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text>{stock.label}</Text> <Text>{stock.label}</Text>
</TableCell> </TableCell>
<TableCell> <TableCell>
@ -298,13 +298,13 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<TableRowLink className={sprinkles({ cursor: "pointer" })}> <TableRowLink className={sprinkles({ cursor: "pointer" })}>
<TableCell <TableCell
colSpan={3} colSpan={3}
style={{ paddingLeft: vars.space.s6 }} style={{ paddingLeft: vars.spacing[6] }}
> >
<Text> <Text>
<FormattedMessage {...messages.assignWarehouse} /> <FormattedMessage {...messages.assignWarehouse} />
</Text> </Text>
</TableCell> </TableCell>
<TableCell style={{ paddingRight: vars.space.s6 }}> <TableCell style={{ paddingRight: vars.spacing[6] }}>
<Button <Button
type="button" type="button"
icon={<PlusIcon />} icon={<PlusIcon />}
@ -317,7 +317,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Dropdown.Content align="end"> <Dropdown.Content align="end">
<Box> <Box>
<List <List
padding="s2" padding={2}
borderRadius={4} borderRadius={4}
boxShadow="overlay" boxShadow="overlay"
backgroundColor="surfaceNeutralPlain" backgroundColor="surfaceNeutralPlain"
@ -325,8 +325,8 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
{warehousesToAssign.map(warehouse => ( {warehousesToAssign.map(warehouse => (
<Dropdown.Item key={warehouse.id}> <Dropdown.Item key={warehouse.id}>
<List.Item <List.Item
paddingX="s1.5" paddingX={1.5}
paddingY="s2" paddingY={2}
borderRadius={4} borderRadius={4}
onClick={() => onClick={() =>
handleWarehouseStockAdd(warehouse.id) handleWarehouseStockAdd(warehouse.id)
@ -346,7 +346,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
)} )}
{data.isPreorder && ( {data.isPreorder && (
<DashboardCard.Content> <DashboardCard.Content>
<Box display="grid" gap="s2"> <Box display="grid" gap={2}>
<Text variant="caption"> <Text variant="caption">
<FormattedMessage {...messages.preorderEndDateSetup} /> <FormattedMessage {...messages.preorderEndDateSetup} />
</Text> </Text>
@ -393,11 +393,11 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
</Box> </Box>
</Box> </Box>
<Box display="grid" gap="s1" paddingTop="s2"> <Box display="grid" gap={1} paddingTop={2}>
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...messages.preorderProductsAvailability} /> <FormattedMessage {...messages.preorderProductsAvailability} />
</Text> </Text>
<Box display="grid" gap="s1.5"> <Box display="grid" gap={1.5}>
<Box __width="50%"> <Box __width="50%">
<Input <Input
min={0} min={0}
@ -432,7 +432,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
<Table> <Table>
<TableHead> <TableHead>
<TableRowLink> <TableRowLink>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text variant="caption" color="textNeutralSubdued"> <Text variant="caption" color="textNeutralSubdued">
<FormattedMessage {...sectionNames.channels} /> <FormattedMessage {...sectionNames.channels} />
</Text> </Text>
@ -457,7 +457,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
return ( return (
<TableRowLink key={listing.id}> <TableRowLink key={listing.id}>
<TableCell style={{ paddingLeft: vars.space.s6 }}> <TableCell style={{ paddingLeft: vars.spacing[6] }}>
<Text>{listing.name}</Text> <Text>{listing.name}</Text>
</TableCell> </TableCell>
<TableCell> <TableCell>

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

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

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

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

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

@ -60,7 +60,7 @@ const ShippingWeightUnitForm: React.FC<ShippingWeightUnitFormProps> = ({
onChange={change} onChange={change}
/> />
</CardContent> </CardContent>
<CardActions style={{ paddingLeft: vars.space.s6 }}> <CardActions style={{ paddingLeft: vars.spacing[6] }}>
<Button onClick={submit} data-test-id="save-unit"> <Button onClick={submit} data-test-id="save-unit">
<FormattedMessage {...buttonMessages.save} /> <FormattedMessage {...buttonMessages.save} />
</Button> </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)} title={intl.formatMessage(commonMessages.generalInformations)}
/> />
<DetailPageLayout.Content> <DetailPageLayout.Content>
<Box gap="s2" paddingLeft="s6"> <Box gap={2} paddingLeft={6}>
<Box display="grid" __gridTemplateColumns="1fr 3fr"> <Box display="grid" __gridTemplateColumns="1fr 3fr">
<PageSectionHeader <PageSectionHeader
title={intl.formatMessage(messages.sectionCheckoutTitle)} 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"} key={staffMember ? staffMember.id : "skeleton"}
> >
<TableCell> <TableCell>
<Box display="flex" alignItems="center" gap="s2"> <Box display="flex" alignItems="center" gap={2}>
<UserAvatar <UserAvatar
url={staffMember?.avatar?.url} url={staffMember?.avatar?.url}
initials={getUserInitials(staffMember)} 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}> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content> <DetailPageLayout.Content>
<Box padding="s6"> <Box padding={6}>
<PageTabs value="channels" onChange={handleTabChange}> <PageTabs value="channels" onChange={handleTabChange}>
<PageTab <PageTab
label={intl.formatMessage(taxesMessages.channelsSection)} 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}> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content> <DetailPageLayout.Content>
<Box padding="s6"> <Box padding={6}>
<PageTabs value="tax-classes" onChange={handleTabChange}> <PageTabs value="tax-classes" onChange={handleTabChange}>
<PageTab <PageTab
label={intl.formatMessage(taxesMessages.channelsSection)} 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}> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<DetailPageLayout.Content> <DetailPageLayout.Content>
<Box padding="s6"> <Box padding={6}>
<PageTabs value="countries" onChange={handleTabChange}> <PageTabs value="countries" onChange={handleTabChange}>
<PageTab <PageTab
label={intl.formatMessage(taxesMessages.channelsSection)} label={intl.formatMessage(taxesMessages.channelsSection)}

2
src/themeOverrides.ts
View file

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

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

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