Skip to content

Commit c3f427c

Browse files
laurkimaaronccasanova
laurkim
and
aaronccasanova
authored
Refactor exported alias and scale types in polaris-tokens (#7385)
### WHY are these changes introduced? Resolves #7381. ### WHAT is this pull request doing? Removes instances where we use `Extract` and/or `Exclude` when defining types. Explicitly defines the token values/aliases instead, in addition with tests. I ran `yarn && yarn build` and our storybook and style guide locally to check that no regressions were introduced. <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide Co-authored-by: Aaron Casanova <[email protected]>
1 parent ea2a45b commit c3f427c

File tree

16 files changed

+234
-82
lines changed

16 files changed

+234
-82
lines changed

‎.changeset/mean-elephants-nail.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris-tokens': patch
3+
---
4+
5+
Refactored exported alias and scale types in `breakpoints`, `depth`, `font`, `motion`, `shape`, `spacing`, and `zIndex`.

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,5 @@ export const breakpoints = {
3131
export type BreakpointsTokenGroup = TokenGroup<typeof breakpoints>;
3232
export type BreakpointsTokenName = keyof BreakpointsTokenGroup;
3333

34-
// e.g. "xs" | "sm" | "md" | "lg" | "xl"
35-
export type BreakpointsAlias = Extract<
36-
BreakpointsTokenName,
37-
`breakpoints-${string}`
38-
> extends `breakpoints-${infer Alias}`
39-
? Alias
40-
: never;
34+
export const breakpointsAlias = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
35+
export type BreakpointsAlias = typeof breakpointsAlias[number];

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,16 @@ export const depth = {
4545
export type DepthTokenGroup = TokenGroup<typeof depth>;
4646
export type DepthTokenName = keyof DepthTokenGroup;
4747

48-
// temporary until shadows prefix is removed
49-
type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>;
50-
51-
// e.g. "transparent" | "faint" | "base" | "deep" | ...
52-
export type DepthShadowAlias = ShadowsTokenName extends `shadow-${infer Scale}`
53-
? Scale
54-
: never;
48+
export const depthShadowAlias = [
49+
'base',
50+
'transparent',
51+
'faint',
52+
'deep',
53+
'button',
54+
'top-bar',
55+
'card',
56+
'popover',
57+
'layer',
58+
'modal',
59+
] as const;
60+
export type DepthShadowAlias = typeof depthShadowAlias[number];

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

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -71,26 +71,25 @@ export const font = {
7171
export type FontTokenGroup = TokenGroup<typeof font>;
7272
export type FontTokenName = keyof FontTokenGroup;
7373

74-
// e.g. "400" | "500" | "600" | "700" | "100" | ...
75-
export type FontSizeScale = Extract<
76-
FontTokenName,
77-
`font-size-${number}`
78-
> extends `font-size-${infer Scale}`
79-
? Scale
80-
: never;
74+
export const fontSizeScale = [
75+
'75',
76+
'100',
77+
'200',
78+
'300',
79+
'400',
80+
'500',
81+
'600',
82+
'700',
83+
] as const;
84+
export type FontSizeScale = typeof fontSizeScale[number];
8185

82-
// e.g. "1" | "2" | "3" | "4" | "5" | "6" | "7"
83-
export type FontLineHeightScale = Extract<
84-
FontTokenName,
85-
`font-line-height-${number}`
86-
> extends `font-line-height-${infer Scale}`
87-
? Scale
88-
: never;
86+
export const fontLineHeightScale = ['1', '2', '3', '4', '5', '6', '7'] as const;
87+
export type FontLineHeightScale = typeof fontLineHeightScale[number];
8988

90-
// e.g. "bold" | "regular" | "medium" | "semibold"
91-
export type FontWeightAlias = Extract<
92-
FontTokenName,
93-
`font-weight-${string}`
94-
> extends `font-weight-${infer Alias}`
95-
? Alias
96-
: never;
89+
export const fontWeightAlias = [
90+
'regular',
91+
'medium',
92+
'semibold',
93+
'bold',
94+
] as const;
95+
export type FontWeightAlias = typeof fontWeightAlias[number];

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,26 @@ export const motion = {
7171
export type MotionTokenGroup = TokenGroup<typeof motion>;
7272
export type MotionTokenName = keyof MotionTokenGroup;
7373

74-
// e.g. "0" | "50" | "100" | "150" | ...
75-
export type MotionDurationScale = Extract<
76-
MotionTokenName,
77-
`duration-${number}`
78-
> extends `duration-${infer Scale}`
79-
? Scale
80-
: never;
74+
export const motionDurationScale = [
75+
'0',
76+
'50',
77+
'100',
78+
'150',
79+
'200',
80+
'250',
81+
'300',
82+
'350',
83+
'400',
84+
'450',
85+
'500',
86+
'5000',
87+
] as const;
88+
export type MotionDurationScale = typeof motionDurationScale[number];
8189

82-
// e.g. "bounce" | "fade-in" | "pulse" | "spin"
83-
export type MotionKeyframesAlias = Extract<
84-
MotionTokenName,
85-
`keyframes-${string}`
86-
> extends `keyframes-${infer Alias}`
87-
? Alias
88-
: never;
90+
export const motionKeyframesAlias = [
91+
'bounce',
92+
'fade-in',
93+
'pulse',
94+
'spin',
95+
] as const;
96+
export type MotionKeyframesAlias = typeof motionKeyframesAlias[number];

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

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -66,23 +66,16 @@ export const shape = {
6666
export type ShapeTokenGroup = TokenGroup<typeof shape>;
6767
export type ShapeTokenName = keyof ShapeTokenGroup;
6868

69-
type ShapeBorderRadiusTokenName = Extract<
70-
ShapeTokenName,
71-
`border-radius-${string}`
72-
>;
69+
export const shapeBorderRadiusScale = [
70+
'05',
71+
'1',
72+
'2',
73+
'3',
74+
'4',
75+
'5',
76+
'6',
77+
] as const;
78+
export type ShapeBorderRadiusScale = typeof shapeBorderRadiusScale[number];
7379

74-
// e.g. "05" | "1" | "2" | "3" | "4" | "5" | "6"
75-
export type ShapeBorderRadiusScale = Extract<
76-
ShapeBorderRadiusTokenName,
77-
`border-radius-${number}`
78-
> extends `border-radius-${infer Scale}`
79-
? Scale
80-
: never;
81-
82-
// e.g. "base" | "large" | "half"
83-
export type ShapeBorderRadiusAlias = Exclude<
84-
ShapeBorderRadiusTokenName,
85-
`border-radius-${number}`
86-
> extends `border-radius-${infer Alias}`
87-
? Alias
88-
: never;
80+
export const shapeBorderRadiusAlias = ['base', 'large', 'half'] as const;
81+
export type ShapeBorderRadiusAlias = typeof shapeBorderRadiusAlias[number];

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,23 @@ export const spacing = {
5757
export type SpacingTokenGroup = TokenGroup<typeof spacing>;
5858
export type SpacingTokenName = keyof SpacingTokenGroup;
5959

60-
// e.g. "0" | "025" | "05" | "1" | "2" | "3" | ...
61-
export type SpacingSpaceScale = Extract<
62-
SpacingTokenName,
63-
`space-${number}`
64-
> extends `space-${infer Scale}`
65-
? Scale
66-
: never;
60+
export const spacingSpaceScale = [
61+
'0',
62+
'025',
63+
'05',
64+
'1',
65+
'2',
66+
'3',
67+
'4',
68+
'5',
69+
'6',
70+
'8',
71+
'10',
72+
'12',
73+
'16',
74+
'20',
75+
'24',
76+
'28',
77+
'32',
78+
] as const;
79+
export type SpacingSpaceScale = typeof spacingSpaceScale[number];

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,18 @@ export const zIndex = {
4242
export type ZIndexTokenGroup = TokenGroup<typeof zIndex>;
4343
export type ZIndexTokenName = keyof ZIndexTokenGroup;
4444

45-
// e.g. "1" | "2" | "3" | "4" | "5" | "6" | ...
46-
export type ZIndexZScale = Extract<
47-
ZIndexTokenName,
48-
`z-${number}`
49-
> extends `z-${infer Scale}`
50-
? Scale
51-
: never;
45+
export const zIndexZScale = [
46+
'1',
47+
'2',
48+
'3',
49+
'4',
50+
'5',
51+
'6',
52+
'7',
53+
'8',
54+
'9',
55+
'10',
56+
'11',
57+
'12',
58+
] as const;
59+
export type ZIndexZScale = typeof zIndexZScale[number];

‎polaris-tokens/src/utilities.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,3 +205,10 @@ function getDownMediaCondition(breakpoint: string) {
205205
const offsetBreakpoint = parseFloat(toPx(breakpoint) ?? '') - 0.04;
206206
return `(max-width: ${toEm(`${offsetBreakpoint}px`)})`;
207207
}
208+
209+
export function isKeyOf<T extends {[key: string]: any}>(
210+
obj: T,
211+
key: PropertyKey | undefined,
212+
): key is keyof T {
213+
return Object.keys(obj).includes(key as string);
214+
}

‎polaris-tokens/tests/token-groups/breakpoints.test.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {isKeyOf} from '../../src/utilities';
2+
import {
3+
breakpoints,
4+
breakpointsAlias,
5+
} from '../../src/token-groups/breakpoints';
6+
7+
describe('BreakpointsAlias', () => {
8+
it('has a breakpoints token for each breakpoint alias', () => {
9+
for (const alias of breakpointsAlias) {
10+
expect(isKeyOf(breakpoints, `breakpoints-${alias}`)).toBe(true);
11+
}
12+
});
13+
});

0 commit comments

Comments
 (0)