@primer/components 31.2.0-rc.58429c9f → 31.2.0-rc.5ccefd7d

package/docs/content/theming.md

@@ -3,6 +3,8 @@ title: Theming
 description: Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.
 ---
 
+import Code from '@primer/gatsby-theme-doctocat/src/components/code'
+
 ## ThemeProvider
 
 To give components access to the theme object, you must add `ThemeProvider` to the root of your application:
@@ -50,6 +52,27 @@ Some components may break if your custom theme does not include all the same key
 
 You can reference theme values in your application using [system props](/system-props), the [`sx` prop](/overriding-styles), the `themeGet` function, or the `useTheme` hook.
 
+<Note variant="warning">
+
+Only use `theme` objects accessed via Primer's theme context to ensure your application’s styling draws from the same theme as Primer components’ internal styling. The `sx` prop, styled system props, `themeGet`, and `useTheme` all use the theme from context.
+
+<DoDontContainer>
+  <Do>
+    <Code className="language-jsx">
+      {`<Box textShadow="shadow.medium">`}
+    </Code>
+    <Caption>Use the theme from the same context as Primer.</Caption>
+  </Do>
+  <Dont>
+    <Code className="language-jsx">
+      {`import {theme} from '@primer/components'\n\n<Box textShadow={theme.shadows.shadow.medium}>`}
+    </Code>
+    <Caption>Don't style components with any other instance of theme</Caption>
+  </Dont>
+</DoDontContainer>
+
+</Note>
+
 ### System props and the `sx` prop
 
 Some [system props](/system-props) and [`sx` prop](/overriding-styles) keys are theme-aware. For example, the `bg` prop maps to the `colors` theme key which means you can use the `bg` prop to reference values in the `colors` object:

package/lib/ActionList/Header.js

@@ -45,7 +45,7 @@ function Header({
   return /*#__PURE__*/_react.default.createElement(StyledHeader, _extends({
     role: "heading",
     variant: variant
-  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, "auxiliaryText"));
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
 }
 
 Header.displayName = "Header";

package/lib/__tests__/KeyPaths.types.test.d.ts

@@ -1,3 +1,4 @@
+import { Union } from 'ts-toolbelt';
 import { KeyPaths } from '../utils/types/KeyPaths';
 declare type NestedObject = {
     a: string;
@@ -6,5 +7,5 @@ declare type NestedObject = {
         b2: string;
     };
 };
-export declare function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2';
+export declare function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never;
 export {};

package/lib/utils/types/KeyPaths.d.ts

@@ -1,3 +1,3 @@
 export declare type KeyPaths<O extends Record<string, unknown>> = {
-    [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never;
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
 }[keyof O];

package/lib-esm/ActionList/Header.js

@@ -28,6 +28,6 @@ export function Header({
   return /*#__PURE__*/React.createElement(StyledHeader, _extends({
     role: "heading",
     variant: variant
-  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, "auxiliaryText"));
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
 }
 Header.displayName = "Header";

package/lib-esm/__tests__/KeyPaths.types.test.d.ts

@@ -1,3 +1,4 @@
+import { Union } from 'ts-toolbelt';
 import { KeyPaths } from '../utils/types/KeyPaths';
 declare type NestedObject = {
     a: string;
@@ -6,5 +7,5 @@ declare type NestedObject = {
         b2: string;
     };
 };
-export declare function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2';
+export declare function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never;
 export {};

package/lib-esm/utils/types/KeyPaths.d.ts

@@ -1,3 +1,3 @@
 export declare type KeyPaths<O extends Record<string, unknown>> = {
-    [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never;
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
 }[keyof O];

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@primer/components",
-  "version": "31.0.1",
+  "version": "31.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/components",
-      "version": "31.0.1",
+      "version": "31.1.0",
       "license": "MIT",
       "dependencies": {
         "@primer/octicons-react": "^13.0.0",
@@ -100,6 +100,7 @@
         "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": {
@@ -35601,6 +35602,12 @@
         }
       }
     },
+    "node_modules/ts-toolbelt": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz",
+      "integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
+      "dev": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
@@ -64793,6 +64800,12 @@
       "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
       "dev": true
     },
+    "ts-toolbelt": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz",
+      "integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
+      "dev": true
+    },
     "tsconfig-paths": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.58429c9f",
+  "version": "31.2.0-rc.5ccefd7d",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -134,6 +134,7 @@
     "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/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

@@ -1,3 +1,4 @@
+import {Union} from 'ts-toolbelt'
 import {KeyPaths} from '../utils/types/KeyPaths'
 
 type NestedObject = {
@@ -8,6 +9,6 @@ type NestedObject = {
   }
 }
 
-export function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2' {
+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/utils/types/KeyPaths.ts

@@ -1,4 +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}` : `${K}.${KeyPaths<O[K]>}`) : never
+  [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]