@primer/components 31.0.2-rc.95622264 → 31.2.0-rc.50908ce9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.95622264",
+  "version": "31.2.0-rc.50908ce9",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -132,7 +132,9 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
+    "ts-toolbelt": "9.6.0",
     "typescript": "4.2.2"
   },
   "peerDependencies": {

package/script/build

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 # Clean up
 rm -rf dist
 rm -rf lib

package/src/ActionList/Header.tsx

@@ -68,7 +68,7 @@ export function Header({
   return (
     <StyledHeader role="heading" variant={variant} {...props}>
       {title}
-      {auxiliaryText && <span>auxiliaryText</span>}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
     </StyledHeader>
   )
 }

package/src/__tests__/KeyPaths.types.test.ts

@@ -0,0 +1,14 @@
+import {Union} from 'ts-toolbelt'
+import {KeyPaths} from '../utils/types/KeyPaths'
+
+type NestedObject = {
+  a: string
+  b: {
+    b1: string
+    b2: string
+  }
+}
+
+export function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never {
+  return x
+}

package/src/stories/Button.stories.tsx

@@ -77,7 +77,7 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
 export const buttonTableList = (args: ButtonStyleProps) => (
   <ButtonTableList {...args}>Button Table List</ButtonTableList>
 )
-export const disabledButton = (args: ButtonStyleProps) => {
+export const disabledButton = (args: StrictButtonStyleProps) => {
   const props = {disabled: true, ...args}
   return <Button {...props}>Disabled</Button>
 }

package/src/stories/Token.stories.tsx

@@ -7,6 +7,7 @@ import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
 import Token, {TokenProps} from '../Token/Token'
 import Text from '../Text'
+import {GitBranchIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Tokens/Default',
@@ -29,7 +30,7 @@ export default {
   ]
 } as Meta
 
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
 
 const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
   <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
 }
 Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
 
+export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
+  return (
+    <ExampleCollectionContainer>
+      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
+    </ExampleCollectionContainer>
+  )
+}
+WithLeadingVisual.storyName = 'with leadingVisual'
+WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
+
 export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
   return (
     <ExampleCollectionContainer>

package/src/sx.ts

@@ -1,7 +1,19 @@
-import css, {SystemStyleObject} from '@styled-system/css'
+import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
+import {ThemeColorPaths, ThemeShadowPaths} from './theme'
+import {ColorProps, ShadowProps} from 'styled-system'
+
+export type BetterCssProperties = {
+  [K in keyof SystemCssProperties]: K extends keyof ColorProps
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof ShadowProps
+    ? ThemeShadowPaths | SystemCssProperties[K]
+    : SystemCssProperties[K]
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
 
 export interface SxProp {
-  sx?: SystemStyleObject
+  sx?: BetterSystemStyleObject
 }
 
 const sx = (props: SxProp) => css(props.sx)

package/src/theme.ts

@@ -1,3 +1,89 @@
 import {theme} from './theme-preval'
+import {KeyPaths} from './utils/types/KeyPaths'
 
 export default theme
+
+// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+type ThemeColors = {
+  fg: {
+    default: string
+    muted: string
+    subtle: string
+    onEmphasis: string
+  }
+  canvas: {
+    default: string
+    overlay: string
+    inset: string
+    subtle: string
+  }
+  border: {
+    default: string
+    muted: string
+    subtle: string
+  }
+
+  // Roles
+  neutral: {
+    emphasisPlus: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  accent: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  success: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  attention: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  severe: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  danger: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  done: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  sponsors: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+}
+
+type ThemeShadows = {
+  shadow: {
+    small: string
+    medium: string
+    large: string
+    extraLarge: string
+  }
+}
+
+export type ThemeColorPaths = KeyPaths<ThemeColors>
+export type ThemeShadowPaths = KeyPaths<ThemeShadows>

package/src/utils/types/KeyPaths.ts

@@ -0,0 +1,10 @@
+// Produces a union of dot-delimited keypaths to the string values in a nested object:
+export type KeyPaths<O extends Record<string, unknown>> = {
+  [K in keyof O]: K extends string
+    ? O[K] extends string
+      ? `${K}`
+      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TypeScript has bested me, but the KeyPaths type is tested.
+        `${K}.${KeyPaths<O[K]>}`
+    : never
+}[keyof O]