Skip to content

Commit 6e9edd3

Browse files
avelinekyledurand
aveline
and
kyledurand
authored
[Box] Add border width support (#7621)
### WHY are these changes introduced? Part of [#7601](#7601) ### WHAT is this pull request doing? - Adds border with support only with this PR as further exploration is needed to implement border color - Sets the initial border width to `--p-border-width-1` which works currently as all the existing shorthand border properties use that width. Setting to `initial` doesn't work as the browser initial is `medium` which overrides the shorthand width. <details> <summary>Playground code</summary> ```jsx <AlphaStack fullWidth> <Box paddingInlineEnd="10" paddingInlineStart="10" border="divider" borderWidth="1" > test </Box> <Box border="dark" borderWidth="3"> test </Box> <Box border="dark" borderBlockStartWidth="3"> test </Box> <Box border="dark" borderBlockEndWidth="3"> test </Box> <Box border="dark" borderInlineStartWidth="3"> test </Box> <Box border="dark" borderInlineEndWidth="3"> test </Box> <Box border="dark" borderBlockEndWidth="2"> test </Box> <Box border="divider" borderBlockEndColor="border" paddingInlineEnd="10" paddingInlineStart="10" > test </Box> </AlphaStack> ``` </details> Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
1 parent 1364be7 commit 6e9edd3

File tree

9 files changed

+2041
-1800
lines changed

9 files changed

+2041
-1800
lines changed

‎.changeset/gorgeous-dryers-wash.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@shopify/polaris': minor
3+
'@shopify/polaris-tokens': minor
4+
---
5+
6+
- Added border width prop to `Box`
7+
- Exported color token subset alias types from tokens package and remove from `Box`

‎polaris-react/src/components/Box/Box.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
--pc-box-padding-inline-end: initial;
2424
--pc-box-padding-block-start: initial;
2525
--pc-box-width: initial;
26+
--pc-box-border-width: var(--p-border-width-1);
2627
background-color: var(--pc-box-background);
2728
box-shadow: var(--pc-box-shadow);
2829
border-radius: var(--pc-box-border-radius);
@@ -46,6 +47,22 @@
4647
border-inline-start: var(--pc-box-border-inline-start, var(--pc-box-border));
4748
border-inline-end: var(--pc-box-border-inline-end, var(--pc-box-border));
4849
border-block-start: var(--pc-box-border-block-start, var(--pc-box-border));
50+
border-block-start-width: var(
51+
--pc-box-border-block-start-width,
52+
var(--pc-box-border-width)
53+
);
54+
border-block-end-width: var(
55+
--pc-box-border-block-end-width,
56+
var(--pc-box-border-width)
57+
);
58+
border-inline-start-width: var(
59+
--pc-box-border-inline-start-width,
60+
var(--pc-box-border-width)
61+
);
62+
border-inline-end-width: var(
63+
--pc-box-border-inline-end-width,
64+
var(--pc-box-border-width)
65+
);
4966
color: var(--pc-box-color);
5067
min-height: var(--pc-box-min-height);
5168
min-width: var(--pc-box-min-width);

‎polaris-react/src/components/Box/Box.stories.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import type {ComponentMeta} from '@storybook/react';
3+
import {Box, Icon} from '@shopify/polaris';
4+
import {PaintBrushMajor} from '@shopify/polaris-icons';
5+
6+
export default {
7+
component: Box,
8+
} as ComponentMeta<typeof Box>;
9+
10+
export function Default() {
11+
return (
12+
<Box>
13+
<Icon source={PaintBrushMajor} color="base" />
14+
</Box>
15+
);
16+
}
17+
18+
export function BoxWithDarkBorder() {
19+
return (
20+
<Box background="surface" padding="4" border="dark">
21+
<Icon source={PaintBrushMajor} color="base" />
22+
</Box>
23+
);
24+
}
25+
26+
export function BoxWithBorderRadius() {
27+
return (
28+
<Box background="surface" padding="4" borderRadius="2">
29+
<Icon source={PaintBrushMajor} color="highlight" />
30+
</Box>
31+
);
32+
}

‎polaris-react/src/components/Box/Box.tsx‎

Lines changed: 58 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React, {createElement, forwardRef} from 'react';
22
import type {
3+
ColorsActionTokenAlias,
4+
ColorsBackdropTokenAlias,
5+
ColorsBackgroundTokenAlias,
6+
ColorsOverlayTokenAlias,
7+
ColorsSurfaceTokenAlias,
8+
ShapeBorderWidthScale,
39
DepthShadowAlias,
410
SpacingSpaceScale,
511
} from '@shopify/polaris-tokens';
@@ -12,72 +18,6 @@ type Element = 'div' | 'span' | 'section';
1218

1319
type Overflow = 'hidden' | 'scroll';
1420

15-
export type BackgroundColorTokenScale =
16-
| 'action-critical'
17-
| 'action-critical-depressed'
18-
| 'action-critical-disabled'
19-
| 'action-critical-hovered'
20-
| 'action-critical-pressed'
21-
| 'action-primary'
22-
| 'action-primary-depressed'
23-
| 'action-primary-disabled'
24-
| 'action-primary-hovered'
25-
| 'action-primary-pressed'
26-
| 'action-secondary'
27-
| 'action-secondary-depressed'
28-
| 'action-secondary-disabled'
29-
| 'action-secondary-hovered'
30-
| 'action-secondary-hovered-dark'
31-
| 'action-secondary-pressed'
32-
| 'action-secondary-pressed-dark'
33-
| 'backdrop'
34-
| 'background'
35-
| 'background-hovered'
36-
| 'background-pressed'
37-
| 'background-selected'
38-
| 'overlay'
39-
| 'surface'
40-
| 'surface-attention'
41-
| 'surface-critical'
42-
| 'surface-critical-subdued'
43-
| 'surface-critical-subdued-depressed'
44-
| 'surface-critical-subdued-hovered'
45-
| 'surface-critical-subdued-pressed'
46-
| 'surface-dark'
47-
| 'surface-depressed'
48-
| 'surface-disabled'
49-
| 'surface-highlight'
50-
| 'surface-highlight-subdued'
51-
| 'surface-highlight-subdued-hovered'
52-
| 'surface-highlight-subdued-pressed'
53-
| 'surface-hovered'
54-
| 'surface-hovered-dark'
55-
| 'surface-neutral'
56-
| 'surface-neutral-disabled'
57-
| 'surface-neutral-hovered'
58-
| 'surface-neutral-pressed'
59-
| 'surface-neutral-subdued'
60-
| 'surface-neutral-subdued-dark'
61-
| 'surface-pressed'
62-
| 'surface-pressed-dark'
63-
| 'surface-primary-selected'
64-
| 'surface-primary-selected-hovered'
65-
| 'surface-primary-selected-pressed'
66-
| 'surface-search-field'
67-
| 'surface-search-field-dark'
68-
| 'surface-selected'
69-
| 'surface-selected-hovered'
70-
| 'surface-selected-pressed'
71-
| 'surface-subdued'
72-
| 'surface-success'
73-
| 'surface-success-subdued'
74-
| 'surface-success-subdued-hovered'
75-
| 'surface-success-subdued-pressed'
76-
| 'surface-warning'
77-
| 'surface-warning-subdued'
78-
| 'surface-warning-subdued-hovered'
79-
| 'surface-warning-subdued-pressed';
80-
8121
export type ColorTokenScale =
8222
| 'text'
8323
| 'text-critical'
@@ -121,6 +61,13 @@ export type BorderRadiusTokenScale =
12161
| 'large'
12262
| 'half';
12363

64+
export type BackgroundColors =
65+
| ColorsBackdropTokenAlias
66+
| ColorsBackgroundTokenAlias
67+
| ColorsOverlayTokenAlias
68+
| ColorsActionTokenAlias
69+
| ColorsSurfaceTokenAlias;
70+
12471
interface BorderRadius {
12572
startStart: BorderRadiusTokenScale;
12673
startEnd: BorderRadiusTokenScale;
@@ -135,11 +82,18 @@ interface Spacing {
13582
inlineEnd: SpacingSpaceScale;
13683
}
13784

85+
interface BorderWidth {
86+
blockStart: ShapeBorderWidthScale;
87+
blockEnd: ShapeBorderWidthScale;
88+
inlineStart: ShapeBorderWidthScale;
89+
inlineEnd: ShapeBorderWidthScale;
90+
}
91+
13892
export interface BoxProps {
13993
/** HTML Element type */
14094
as?: Element;
14195
/** Background color */
142-
background?: BackgroundColorTokenScale;
96+
background?: BackgroundColors;
14397
/** Border style */
14498
border?: BorderTokenAlias;
14599
/** Vertical end border style */
@@ -160,6 +114,16 @@ export interface BoxProps {
160114
borderRadiusStartStart?: BorderRadiusTokenScale;
161115
/** Verital start horizontal end border radius */
162116
borderRadiusStartEnd?: BorderRadiusTokenScale;
117+
/** Border width */
118+
borderWidth?: ShapeBorderWidthScale;
119+
/** Vertical start border width */
120+
borderBlockStartWidth?: ShapeBorderWidthScale;
121+
/** Vertical end border width */
122+
borderBlockEndWidth?: ShapeBorderWidthScale;
123+
/** Horizontal start border width */
124+
borderInlineStartWidth?: ShapeBorderWidthScale;
125+
/** Horizontal end border width */
126+
borderInlineEndWidth?: ShapeBorderWidthScale;
163127
/** Color of children */
164128
color?: ColorTokenScale;
165129
/** HTML id attribute */
@@ -202,6 +166,11 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
202166
borderInlineStart,
203167
borderInlineEnd,
204168
borderBlockStart,
169+
borderWidth,
170+
borderBlockStartWidth,
171+
borderBlockEndWidth,
172+
borderInlineStartWidth,
173+
borderInlineEndWidth,
205174
borderRadius,
206175
borderRadiusEndStart,
207176
borderRadiusEndEnd,
@@ -239,6 +208,13 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
239208
startEnd: borderRadiusStartEnd,
240209
} as BorderRadius;
241210

211+
const borderWidths = {
212+
blockStart: borderBlockStartWidth,
213+
blockEnd: borderBlockEndWidth,
214+
inlineStart: borderInlineStartWidth,
215+
inlineEnd: borderInlineEndWidth,
216+
} as BorderWidth;
217+
242218
const paddings = {
243219
blockEnd: paddingBlockEnd,
244220
inlineStart: paddingInlineStart,
@@ -277,6 +253,21 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
277253
'--pc-box-border-radius-start-end': borderRadiuses.startEnd
278254
? `var(--p-border-radius-${borderRadiuses.startEnd})`
279255
: undefined,
256+
'--pc-box-border-width': borderWidth
257+
? `var(--p-border-width-${borderWidth})`
258+
: undefined,
259+
'--pc-box-border-block-start-width': borderWidths.blockStart
260+
? `var(--p-border-width-${borderWidths.blockStart})`
261+
: undefined,
262+
'--pc-box-border-block-end-width': borderWidths.blockEnd
263+
? `var(--p-border-width-${borderWidths.blockEnd})`
264+
: undefined,
265+
'--pc-box-border-inline-start-width': borderWidths.inlineStart
266+
? `var(--p-border-width-${borderWidths.inlineStart})`
267+
: undefined,
268+
'--pc-box-border-inline-end-width': borderWidths.inlineEnd
269+
? `var(--p-border-width-${borderWidths.inlineEnd})`
270+
: undefined,
280271
'--pc-box-min-height': minHeight,
281272
'--pc-box-min-width': minWidth,
282273
'--pc-box-max-width': maxWidth,

‎polaris-react/src/components/Box/tests/Box.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {ColorsTokenName, ShapeTokenName} from '@shopify/polaris-tokens';
44

55
import {Box} from '..';
66
import type {
7-
BackgroundColorTokenScale as BoxBackgroundColorTokenScale,
7+
BackgroundColors as BoxBackgroundColorTokenScale,
88
ColorTokenScale as BoxColorTokenScale,
99
BorderTokenAlias as BoxBorderTokenAlias,
1010
BorderRadiusTokenScale as BoxBorderRadiusTokenScale,

‎polaris-tokens/src/index.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,16 @@ export type {
1313
BreakpointsAlias,
1414
} from './token-groups/breakpoints';
1515

16-
export type {ColorsTokenGroup, ColorsTokenName} from './token-groups/colors';
16+
export type {
17+
ColorsTokenGroup,
18+
ColorsTokenName,
19+
ColorsBackgroundTokenAlias,
20+
ColorsActionTokenAlias,
21+
ColorsSurfaceTokenAlias,
22+
ColorsBackdropTokenAlias,
23+
ColorsOverlayTokenAlias,
24+
ColorsBorderTokenAlias,
25+
} from './token-groups/colors';
1726

1827
export type {
1928
DepthTokenGroup,
@@ -43,6 +52,7 @@ export type {
4352
ShapeTokenName,
4453
ShapeBorderRadiusScale,
4554
ShapeBorderRadiusAlias,
55+
ShapeBorderWidthScale,
4656
} from './token-groups/shape';
4757

4858
export type {

‎polaris-tokens/src/token-groups/colors.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -650,3 +650,106 @@ export const colors = {
650650

651651
export type ColorsTokenGroup = TokenGroup<typeof colors>;
652652
export type ColorsTokenName = keyof ColorsTokenGroup;
653+
654+
export const colorsBackgroundTokenAlias = [
655+
'background',
656+
'background-hovered',
657+
'background-pressed',
658+
'background-selected',
659+
] as const;
660+
export type ColorsBackgroundTokenAlias =
661+
typeof colorsBackgroundTokenAlias[number];
662+
663+
export const colorsActionTokenAlias = [
664+
'action-critical',
665+
'action-critical-depressed',
666+
'action-critical-disabled',
667+
'action-critical-hovered',
668+
'action-critical-pressed',
669+
'action-primary',
670+
'action-primary-depressed',
671+
'action-primary-disabled',
672+
'action-primary-hovered',
673+
'action-primary-pressed',
674+
'action-secondary',
675+
'action-secondary-depressed',
676+
'action-secondary-disabled',
677+
'action-secondary-hovered',
678+
'action-secondary-hovered-dark',
679+
'action-secondary-pressed',
680+
'action-secondary-pressed-dark',
681+
] as const;
682+
export type ColorsActionTokenAlias = typeof colorsActionTokenAlias[number];
683+
684+
export const colorsSurfaceTokenAlias = [
685+
'surface',
686+
'surface-attention',
687+
'surface-critical',
688+
'surface-critical-subdued',
689+
'surface-critical-subdued-depressed',
690+
'surface-critical-subdued-hovered',
691+
'surface-critical-subdued-pressed',
692+
'surface-dark',
693+
'surface-depressed',
694+
'surface-disabled',
695+
'surface-highlight',
696+
'surface-highlight-subdued',
697+
'surface-highlight-subdued-hovered',
698+
'surface-highlight-subdued-pressed',
699+
'surface-hovered',
700+
'surface-hovered-dark',
701+
'surface-neutral',
702+
'surface-neutral-disabled',
703+
'surface-neutral-hovered',
704+
'surface-neutral-pressed',
705+
'surface-neutral-subdued',
706+
'surface-neutral-subdued-dark',
707+
'surface-pressed',
708+
'surface-pressed-dark',
709+
'surface-primary-selected',
710+
'surface-primary-selected-hovered',
711+
'surface-primary-selected-pressed',
712+
'surface-search-field',
713+
'surface-search-field-dark',
714+
'surface-selected',
715+
'surface-selected-hovered',
716+
'surface-selected-pressed',
717+
'surface-subdued',
718+
'surface-success',
719+
'surface-success-subdued',
720+
'surface-success-subdued-hovered',
721+
'surface-success-subdued-pressed',
722+
'surface-warning',
723+
'surface-warning-subdued',
724+
'surface-warning-subdued-hovered',
725+
'surface-warning-subdued-pressed',
726+
] as const;
727+
export type ColorsSurfaceTokenAlias = typeof colorsSurfaceTokenAlias[number];
728+
729+
export const colorsBackdropTokenAlias = ['backdrop'] as const;
730+
export type ColorsBackdropTokenAlias = typeof colorsBackdropTokenAlias[number];
731+
732+
export const colorsOverlayTokenAlias = ['overlay'] as const;
733+
export type ColorsOverlayTokenAlias = typeof colorsOverlayTokenAlias[number];
734+
735+
export const colorsBorderTokenAlias = [
736+
'border',
737+
'border-on-dark',
738+
'border-neutral-subdued',
739+
'border-hovered',
740+
'border-disabled',
741+
'border-subdued',
742+
'border-depressed',
743+
'border-shadow',
744+
'border-shadow-subdued',
745+
'border-critical',
746+
'border-critical-subdued',
747+
'border-critical-disabled',
748+
'border-warning',
749+
'border-warning-subdued',
750+
'border-highlight',
751+
'border-highlight-subdued',
752+
'border-success',
753+
'border-success-subdued',
754+
] as const;
755+
export type ColorsBorderTokenAlias = typeof colorsBorderTokenAlias[number];

0 commit comments

Comments
 (0)