Skip to content

Commit e323932

Browse files
davelinkechanceaclark
davelinke
and
chanceaclark
authored
feat(theme): add negative spacing utilities to spacing system (#1729)
* feat(theme): add negative spacing utilities to spacing system * feat(theme): export interface to fix lint failures * docs: update spacing informaiton * fix(docs): fix lint issues in spacing docs * feat(theme): add changeset to both theme and docs for spacing * feat(theme): update spacing defs Co-authored-by: Chancellor Clark <[email protected]> * feat(theme): update changeset Co-authored-by: Chancellor Clark <[email protected]> * feat(theme): delete extra changeset * feat(theme): refine programatic approach on negative values * fix(docs): fix lint issues in spacing docs * feat(theme): revert spacing definition to bare basics * feat(theme): fix lint error on spacing definitions * feat(docs): simplify spacing docs --------- Co-authored-by: Chancellor Clark <[email protected]>
1 parent c746d51 commit e323932

File tree

3 files changed

+114
-14
lines changed

3 files changed

+114
-14
lines changed

‎.changeset/giant-bears-wave.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@bigcommerce/big-design-theme': minor
3+
'@bigcommerce/docs': minor
4+
---
5+
6+
added negative values to spacing definitions

‎packages/big-design-theme/src/system/spacing.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ export interface Spacing {
1010
xLarge: string;
1111
xxLarge: string;
1212
xxxLarge: string;
13+
xxSmallN: string;
14+
xSmallN: string;
15+
smallN: string;
16+
mediumN: string;
17+
largeN: string;
18+
xLargeN: string;
19+
xxLargeN: string;
20+
xxxLargeN: string;
1321
}
1422

1523
export const createSpacing = (): Spacing => ({
@@ -22,4 +30,12 @@ export const createSpacing = (): Spacing => ({
2230
xLarge: remCalc(24),
2331
xxLarge: remCalc(32),
2432
xxxLarge: remCalc(48),
33+
xxSmallN: `-${remCalc(4)}`,
34+
xSmallN: `-${remCalc(8)}`,
35+
smallN: `-${remCalc(12)}`,
36+
mediumN: `-${remCalc(16)}`,
37+
largeN: `-${remCalc(20)}`,
38+
xLargeN: `-${remCalc(24)}`,
39+
xxLargeN: `-${remCalc(32)}`,
40+
xxxLargeN: `-${remCalc(48)}`,
2541
});

‎packages/docs/pages/spacing.tsx‎

Lines changed: 92 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
1-
import { Box, Button, Flex, H1, Panel, Text } from '@bigcommerce/big-design';
1+
import { Box, Button, Flex, H1, Panel, Table, Text } from '@bigcommerce/big-design';
22
import React, { Fragment, useContext } from 'react';
33
import styled, { ThemeContext } from 'styled-components';
44

55
import { Code, CodePreview, ContentRoutingTabs, List, NextLink } from '../components';
66

7+
// If your theme exports a SPACING_KEYS array, prefer importing it:
8+
// import { SPACING_KEYS } from '@bigcommerce/big-design-theme';
9+
10+
// Keep this local list in docs to control order & avoid negatives/none in the visual demo.
11+
// (If you later export SPACING_KEYS from the theme, swap to that single source of truth.)
12+
const BASE_KEYS = [
13+
'xxxLarge',
14+
'xxLarge',
15+
'xLarge',
16+
'large',
17+
'medium',
18+
'small',
19+
'xSmall',
20+
'xxSmall',
21+
'none',
22+
];
23+
724
const BlueBox = styled(Box)(({ theme }) => ({
825
backgroundColor: theme.colors.primary,
926
display: 'inline-block',
@@ -24,13 +41,18 @@ const SpacingPage = () => {
2441
with any of the <Code primary>padding</Code> and <Code primary>margin</Code> props. There
2542
are a few ways we can consume these values.
2643
</Text>
44+
2745
<Text bold>When to use:</Text>
2846
<List>
2947
<List.Item>
3048
Using the <NextLink href="/margin">Margin</NextLink> and{' '}
3149
<NextLink href="/padding">Padding</NextLink> props.
3250
</List.Item>
33-
<List.Item>Consuming it from the theme in a custom component.</List.Item>
51+
<List.Item>Consuming spacing from the theme in custom components.</List.Item>
52+
<List.Item>
53+
Using negative spacing tokens (e.g. <Code>xSmallN</Code>) for controlled overlap or
54+
gutter adjustments.
55+
</List.Item>
3456
</List>
3557
</Panel>
3658

@@ -64,9 +86,7 @@ const SpacingPage = () => {
6486
title: 'Applying to a style',
6587
render: () => (
6688
<Fragment key="style">
67-
<Text>
68-
You can also use spacing directly from the theme to style other components.
69-
</Text>
89+
<Text>You can also read spacing directly from the theme in styled code.</Text>
7090
<CodePreview>
7191
{/* jsx-to-string:start */}
7292
{function Example() {
@@ -83,20 +103,78 @@ const SpacingPage = () => {
83103
</Fragment>
84104
),
85105
},
106+
{
107+
id: 'negative',
108+
title: 'Negative spacing',
109+
render: () => (
110+
<Fragment key="negative">
111+
<Text>
112+
Every positive token has a negative counterpart formed by appending{' '}
113+
<Code>N</Code>. These are especially useful for collapsing gutters or creating
114+
controlled overlap, as demonstrated in the table within a panel component in the
115+
following example.
116+
</Text>
117+
<CodePreview>
118+
{/* jsx-to-string:start */}
119+
<Panel
120+
description="The contents of the panel can have negative margins to collapse gutters."
121+
header="Negative Margins"
122+
>
123+
<Box marginHorizontal={{ mobile: 'mediumN', tablet: 'xLargeN' }}>
124+
<Table
125+
columns={[
126+
{
127+
header: 'Sku',
128+
hash: 'sku',
129+
tooltip: 'Header tooltip',
130+
render: ({ sku }) => sku,
131+
},
132+
{ header: 'Name', hash: 'name', render: ({ name }) => name },
133+
{ header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
134+
]}
135+
items={[
136+
{ sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
137+
{ sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
138+
{ sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
139+
{ sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
140+
{ sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
141+
]}
142+
/>
143+
</Box>
144+
</Panel>
145+
{/* jsx-to-string:end */}
146+
</CodePreview>
147+
</Fragment>
148+
),
149+
},
86150
]}
87151
/>
88152
</Panel>
89153

90154
<Panel header="Spacing values" headerId="spacing-values">
91-
<Flex justifyContent="space-around">
92-
{Object.keys(spacing)
93-
.reverse()
94-
.map((key) => (
95-
<Flex alignItems="center" flexDirection="column" key={key} paddingBottom="small">
96-
<Code>{key}</Code>
97-
<BlueBox marginTop="medium" style={{ width: spacing[key], height: spacing[key] }} />
98-
</Flex>
99-
))}
155+
<Text>
156+
The grid below shows the{' '}
157+
<Text as="span" bold>
158+
positive
159+
</Text>{' '}
160+
spacing tokens. To use the same tokens for negative spacing, just append an <Code>N</Code>{' '}
161+
(e.g. <Code>mediumN</Code>).
162+
</Text>
163+
164+
<Flex flexWrap="wrap" justifyContent="space-around">
165+
{BASE_KEYS.map((key) => (
166+
<Flex
167+
alignItems="center"
168+
flexDirection="column"
169+
key={key}
170+
margin="xSmall"
171+
paddingBottom="small"
172+
>
173+
<Code>{key}</Code>
174+
{/* Using the theme value directly keeps this demo accurate. */}
175+
<BlueBox marginTop="medium" style={{ width: spacing[key], height: spacing[key] }} />
176+
</Flex>
177+
))}
100178
</Flex>
101179
</Panel>
102180
</>

0 commit comments

Comments
 (0)