Merge branch 'main' into layout-components-beta

aveline · aveline · commit 88856f78b147 · 2022-10-12T13:49:26.000-07:00
diff --git a/.changeset/cyan-months-think.md b/.changeset/cyan-months-think.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `id` prop to `Text` and `Box`
diff --git a/.changeset/mean-elephants-nail.md b/.changeset/mean-elephants-nail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': patch
+---
+
+Refactored exported alias and scale types in `breakpoints`, `depth`, `font`, `motion`, `shape`, `spacing`, and `zIndex`.
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -89,6 +89,8 @@ export interface BoxProps {
   children: ReactNode;
   /** Color of children */
   color?: ColorTokenScale;
+  /** HTML id attribute */
+  id?: string;
   /** Spacing outside of container */
   maxWidth?: string;
   /** Spacing around children */
@@ -122,6 +124,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderRadiusTopRight,
       children,
       color,
+      id,
       maxWidth,
       padding,
       paddingBottom,
@@ -218,6 +221,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       as,
       {
         className,
+        id,
         ref,
         style: sanitizeCustomProperties(style),
       },
diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx
@@ -50,6 +50,8 @@ export interface TextProps {
   color?: Color;
   /** Adjust weight of text */
   fontWeight?: FontWeight;
+  /** HTML id attribute */
+  id?: string;
   /** Truncate text overflow with ellipsis */
   truncate?: boolean;
   /** Typographic style of text */
@@ -64,6 +66,7 @@ export const Text = ({
   children,
   color,
   fontWeight,
+  id,
   truncate = false,
   variant,
   visuallyHidden = false,
@@ -81,5 +84,9 @@ export const Text = ({
     visuallyHidden && styles.visuallyHidden,
   );
 
-  return <Component className={className}>{children}</Component>;
+  return (
+    <Component className={className} {...(id ? id : null)}>
+      {children}
+    </Component>
+  );
 };
diff --git a/polaris-tokens/src/token-groups/breakpoints.ts b/polaris-tokens/src/token-groups/breakpoints.ts
@@ -31,10 +31,5 @@ export const breakpoints = {
 export type BreakpointsTokenGroup = TokenGroup<typeof breakpoints>;
 export type BreakpointsTokenName = keyof BreakpointsTokenGroup;
 
-// e.g. "xs" | "sm" | "md" | "lg" | "xl"
-export type BreakpointsAlias = Extract<
-  BreakpointsTokenName,
-  `breakpoints-${string}`
-> extends `breakpoints-${infer Alias}`
-  ? Alias
-  : never;
+export const breakpointsAlias = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+export type BreakpointsAlias = typeof breakpointsAlias[number];
diff --git a/polaris-tokens/src/token-groups/depth.ts b/polaris-tokens/src/token-groups/depth.ts
@@ -45,10 +45,16 @@ export const depth = {
 export type DepthTokenGroup = TokenGroup<typeof depth>;
 export type DepthTokenName = keyof DepthTokenGroup;
 
-// temporary until shadows prefix is removed
-type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>;
-
-// e.g. "transparent" | "faint" | "base" | "deep" | ...
-export type DepthShadowAlias = ShadowsTokenName extends `shadow-${infer Scale}`
-  ? Scale
-  : never;
+export const depthShadowAlias = [
+  'base',
+  'transparent',
+  'faint',
+  'deep',
+  'button',
+  'top-bar',
+  'card',
+  'popover',
+  'layer',
+  'modal',
+] as const;
+export type DepthShadowAlias = typeof depthShadowAlias[number];
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
@@ -71,26 +71,25 @@ export const font = {
 export type FontTokenGroup = TokenGroup<typeof font>;
 export type FontTokenName = keyof FontTokenGroup;
 
-// e.g. "400" | "500" | "600" | "700" | "100" | ...
-export type FontSizeScale = Extract<
-  FontTokenName,
-  `font-size-${number}`
-> extends `font-size-${infer Scale}`
-  ? Scale
-  : never;
+export const fontSizeScale = [
+  '75',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+] as const;
+export type FontSizeScale = typeof fontSizeScale[number];
 
-// e.g. "1" | "2" | "3" | "4" | "5" | "6" | "7"
-export type FontLineHeightScale = Extract<
-  FontTokenName,
-  `font-line-height-${number}`
-> extends `font-line-height-${infer Scale}`
-  ? Scale
-  : never;
+export const fontLineHeightScale = ['1', '2', '3', '4', '5', '6', '7'] as const;
+export type FontLineHeightScale = typeof fontLineHeightScale[number];
 
-// e.g. "bold" | "regular" | "medium" | "semibold"
-export type FontWeightAlias = Extract<
-  FontTokenName,
-  `font-weight-${string}`
-> extends `font-weight-${infer Alias}`
-  ? Alias
-  : never;
+export const fontWeightAlias = [
+  'regular',
+  'medium',
+  'semibold',
+  'bold',
+] as const;
+export type FontWeightAlias = typeof fontWeightAlias[number];
diff --git a/polaris-tokens/src/token-groups/motion.ts b/polaris-tokens/src/token-groups/motion.ts
@@ -71,18 +71,26 @@ export const motion = {
 export type MotionTokenGroup = TokenGroup<typeof motion>;
 export type MotionTokenName = keyof MotionTokenGroup;
 
-// e.g. "0" | "50" | "100" | "150" | ...
-export type MotionDurationScale = Extract<
-  MotionTokenName,
-  `duration-${number}`
-> extends `duration-${infer Scale}`
-  ? Scale
-  : never;
+export const motionDurationScale = [
+  '0',
+  '50',
+  '100',
+  '150',
+  '200',
+  '250',
+  '300',
+  '350',
+  '400',
+  '450',
+  '500',
+  '5000',
+] as const;
+export type MotionDurationScale = typeof motionDurationScale[number];
 
-// e.g. "bounce" | "fade-in" | "pulse" | "spin"
-export type MotionKeyframesAlias = Extract<
-  MotionTokenName,
-  `keyframes-${string}`
-> extends `keyframes-${infer Alias}`
-  ? Alias
-  : never;
+export const motionKeyframesAlias = [
+  'bounce',
+  'fade-in',
+  'pulse',
+  'spin',
+] as const;
+export type MotionKeyframesAlias = typeof motionKeyframesAlias[number];
diff --git a/polaris-tokens/src/token-groups/shape.ts b/polaris-tokens/src/token-groups/shape.ts
@@ -66,23 +66,16 @@ export const shape = {
 export type ShapeTokenGroup = TokenGroup<typeof shape>;
 export type ShapeTokenName = keyof ShapeTokenGroup;
 
-type ShapeBorderRadiusTokenName = Extract<
-  ShapeTokenName,
-  `border-radius-${string}`
->;
+export const shapeBorderRadiusScale = [
+  '05',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+] as const;
+export type ShapeBorderRadiusScale = typeof shapeBorderRadiusScale[number];
 
-// e.g. "05" | "1" | "2" | "3" | "4" | "5" | "6"
-export type ShapeBorderRadiusScale = Extract<
-  ShapeBorderRadiusTokenName,
-  `border-radius-${number}`
-> extends `border-radius-${infer Scale}`
-  ? Scale
-  : never;
-
-// e.g. "base" | "large" | "half"
-export type ShapeBorderRadiusAlias = Exclude<
-  ShapeBorderRadiusTokenName,
-  `border-radius-${number}`
-> extends `border-radius-${infer Alias}`
-  ? Alias
-  : never;
+export const shapeBorderRadiusAlias = ['base', 'large', 'half'] as const;
+export type ShapeBorderRadiusAlias = typeof shapeBorderRadiusAlias[number];
diff --git a/polaris-tokens/src/token-groups/spacing.ts b/polaris-tokens/src/token-groups/spacing.ts
@@ -57,10 +57,23 @@ export const spacing = {
 export type SpacingTokenGroup = TokenGroup<typeof spacing>;
 export type SpacingTokenName = keyof SpacingTokenGroup;
 
-// e.g. "0" | "025" | "05" | "1" | "2" | "3" | ...
-export type SpacingSpaceScale = Extract<
-  SpacingTokenName,
-  `space-${number}`
-> extends `space-${infer Scale}`
-  ? Scale
-  : never;
+export const spacingSpaceScale = [
+  '0',
+  '025',
+  '05',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '8',
+  '10',
+  '12',
+  '16',
+  '20',
+  '24',
+  '28',
+  '32',
+] as const;
+export type SpacingSpaceScale = typeof spacingSpaceScale[number];
diff --git a/polaris-tokens/src/token-groups/zIndex.ts b/polaris-tokens/src/token-groups/zIndex.ts
@@ -42,10 +42,18 @@ export const zIndex = {
 export type ZIndexTokenGroup = TokenGroup<typeof zIndex>;
 export type ZIndexTokenName = keyof ZIndexTokenGroup;
 
-// e.g. "1" | "2" | "3" | "4" | "5" | "6" | ...
-export type ZIndexZScale = Extract<
-  ZIndexTokenName,
-  `z-${number}`
-> extends `z-${infer Scale}`
-  ? Scale
-  : never;
+export const zIndexZScale = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+] as const;
+export type ZIndexZScale = typeof zIndexZScale[number];
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
@@ -205,3 +205,10 @@ function getDownMediaCondition(breakpoint: string) {
   const offsetBreakpoint = parseFloat(toPx(breakpoint) ?? '') - 0.04;
   return `(max-width: ${toEm(`${offsetBreakpoint}px`)})`;
 }
+
+export function isKeyOf<T extends {[key: string]: any}>(
+  obj: T,
+  key: PropertyKey | undefined,
+): key is keyof T {
+  return Object.keys(obj).includes(key as string);
+}
diff --git a/polaris-tokens/tests/token-groups/breakpoints.test.ts b/polaris-tokens/tests/token-groups/breakpoints.test.ts
@@ -0,0 +1,13 @@
+import {isKeyOf} from '../../src/utilities';
+import {
+  breakpoints,
+  breakpointsAlias,
+} from '../../src/token-groups/breakpoints';
+
+describe('BreakpointsAlias', () => {
+  it('has a breakpoints token for each breakpoint alias', () => {
+    for (const alias of breakpointsAlias) {
+      expect(isKeyOf(breakpoints, `breakpoints-${alias}`)).toBe(true);
+    }
+  });
+});
diff --git a/polaris-tokens/tests/token-groups/depth.test.ts b/polaris-tokens/tests/token-groups/depth.test.ts
@@ -0,0 +1,10 @@
+import {isKeyOf} from '../../src/utilities';
+import {depth, depthShadowAlias} from '../../src/token-groups/depth';
+
+describe('DepthShadowAlias', () => {
+  it('has a depth token for each shadow alias', () => {
+    for (const alias of depthShadowAlias) {
+      expect(isKeyOf(depth, `shadow-${alias}`)).toBe(true);
+    }
+  });
+});
diff --git a/polaris-tokens/tests/token-groups/font.test.ts b/polaris-tokens/tests/token-groups/font.test.ts
@@ -0,0 +1,31 @@
+import {isKeyOf} from '../../src/utilities';
+import {
+  font,
+  fontSizeScale,
+  fontLineHeightScale,
+  fontWeightAlias,
+} from '../../src/token-groups/font';
+
+describe('FontSizeScale', () => {
+  it('has a font token for each font size scale', () => {
+    for (const sizeScale of fontSizeScale) {
+      expect(isKeyOf(font, `font-size-${sizeScale}`)).toBe(true);
+    }
+  });
+});
+
+describe('FontLineHeightScale', () => {
+  it('has a font token for each font line height scale', () => {
+    for (const lineHeightScale of fontLineHeightScale) {
+      expect(isKeyOf(font, `font-line-height-${lineHeightScale}`)).toBe(true);
+    }
+  });
+});
+
+describe('FontWeightAlias', () => {
+  it('has a font token for each font weight alias', () => {
+    for (const alias of fontWeightAlias) {
+      expect(isKeyOf(font, `font-weight-${alias}`)).toBe(true);
+    }
+  });
+});
diff --git a/polaris-tokens/tests/token-groups/motion.test.ts b/polaris-tokens/tests/token-groups/motion.test.ts
@@ -0,0 +1,22 @@
+import {isKeyOf} from '../../src/utilities';
+import {
+  motion,
+  motionDurationScale,
+  motionKeyframesAlias,
+} from '../../src/token-groups/motion';
+
+describe('MotionDurationScale', () => {
+  it('has a motion token for each duration scale', () => {
+    for (const scale of motionDurationScale) {
+      expect(isKeyOf(motion, `duration-${scale}`)).toBe(true);
+    }
+  });
+});
+
+describe('MotionKeyframesAlias', () => {
+  it('has a motion token for each keyframes alias', () => {
+    for (const alias of motionKeyframesAlias) {
+      expect(isKeyOf(motion, `keyframes-${alias}`)).toBe(true);
+    }
+  });
+});
diff --git a/polaris-tokens/tests/token-groups/shape.test.ts b/polaris-tokens/tests/token-groups/shape.test.ts
@@ -0,0 +1,22 @@
+import {isKeyOf} from '../../src/utilities';
+import {
+  shape,
+  shapeBorderRadiusScale,
+  shapeBorderRadiusAlias,
+} from '../../src/token-groups/shape';
+
+describe('ShapeBorderRadiusScale', () => {
+  it('has a shape token for each border radius scale', () => {
+    for (const scale of shapeBorderRadiusScale) {
+      expect(isKeyOf(shape, `border-radius-${scale}`)).toBe(true);
+    }
+  });
+});
+
+describe('ShapeBorderRadiusAlias', () => {
+  it('has a shape token for each border radius alias', () => {
+    for (const alias of shapeBorderRadiusAlias) {
+      expect(isKeyOf(shape, `border-radius-${alias}`)).toBe(true);
+    }
+  });
+});
diff --git a/polaris-tokens/tests/token-groups/spacing.test.ts b/polaris-tokens/tests/token-groups/spacing.test.ts
diff --git a/polaris-tokens/tests/token-groups/zIndex.test.ts b/polaris-tokens/tests/token-groups/zIndex.test.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/polaris': patch
 +---
++
 +Added `id` prop to `Text` and `Box`