Bump PRC + add new color dev story (#1161)

* add new stories * install * fix dark cb * fix imports * vscode, you good bro?
primer · Jan 24, 2025 · dc7190e · dc7190e
1 parent e2e4c44
commit dc7190e
Show file tree

Hide file tree

Showing 23 changed files with 292 additions and 956 deletions.
diff --git a/docs/storybook/package-lock.json b/docs/storybook/package-lock.json
diff --git a/docs/storybook/package.json b/docs/storybook/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^18.0.0",
-    "@primer/react": "^36.7.0",
+    "@primer/react": "^37.10.0",
     "react": "18.3",
     "react-dom": "18.3"
   },

diff --git a/docs/storybook/stories/Color/DataVis/Charts.stories.tsx b/docs/storybook/stories/Color/DataVis/Charts.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Color/Functional/Display.stories.tsx b/docs/storybook/stories/Color/Functional/Display.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx b/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx b/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
@@ -6,7 +6,7 @@ import lightHCColorTokens from '../../../../../dist/docs/functional/themes/light
 import darkHCColorTokens from '../../../../../dist/docs/functional/themes/dark-high-contrast.json'
 import darkDimmedColorTokens from '../../../../../dist/docs/functional/themes/dark-dimmed.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table, Stack} from '@primer/react/drafts'
+import {DataTable, Table, Stack} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 
 export default {

diff --git a/docs/storybook/stories/Demo/BorderColorTesting.stories.tsx b/docs/storybook/stories/Demo/BorderColorTesting.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import './BorderTesting.css'
 import {
   ThreeBarsIcon,
@@ -29,7 +29,7 @@ import {
   PeopleIcon,
   SearchIcon,
 } from '@primer/octicons-react'
-import {PageLayout, Button, TextInput, SegmentedControl, NavList, Box, Text, IconButton, Octicon} from '@primer/react'
+import {PageLayout, Button, TextInput, SegmentedControl, NavList, Box, Text, IconButton} from '@primer/react'
 
 export default {
   title: 'Testing/Borders',
@@ -128,7 +128,7 @@ export const BorderDemo = () => {
             }}
           >
             <IconButton icon={ThreeBarsIcon} aria-label="Menu" />
-            <Octicon icon={MarkGithubIcon} size={32} />
+            <MarkGithubIcon size={32} />
             <Box sx={{display: 'flex', gap: 2}}>
               <Text sx={{fontSize: 1, fontWeight: 'bold'}}>Settings</Text>
             </Box>

diff --git a/docs/storybook/stories/Demo/Diff/Diff.stories.tsx b/docs/storybook/stories/Demo/Diff/Diff.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import './Diff.css'
-import {Box, Link} from '@primer/react'
+import {Link} from '@primer/react'
 
 export default {
   title: 'Testing/Diff',

diff --git a/docs/storybook/stories/Migration/v8/TokenComparison.stories.tsx b/docs/storybook/stories/Migration/v8/TokenComparison.stories.tsx
@@ -13,7 +13,7 @@ import cssShadowVars from './DeprecatedShadowTokensMap.json'
 import noChangeCssVars from './NoChangeTokensMap.json'
 // eslint-disable-next-line import/extensions
 import fallbackVars from './static-fallbacks.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 
 export default {
   title: 'Migration/Tables',

diff --git a/docs/storybook/stories/Motion/Base.stories.tsx b/docs/storybook/stories/Motion/Base.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import baseMotionTokens from '../../../../dist/docs/base/motion/motion.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 import {CubicBezier} from '../StorybookComponents/BezierCurve/BezierCurve'

diff --git a/docs/storybook/stories/Size/Border.stories.tsx b/docs/storybook/stories/Size/Border.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 import sizeTokens from '../../../../dist/docs/functional/size/border.json'

diff --git a/docs/storybook/stories/Size/Breakpoints.stories.tsx b/docs/storybook/stories/Size/Breakpoints.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/functional/size/breakpoints.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Size/Control.stories.tsx b/docs/storybook/stories/Size/Control.stories.tsx
@@ -6,7 +6,7 @@ import sizeTokensCoarse from '../../../../dist/docs/functional/size/size-coarse.
 import {ControlSizeDemo} from '../StorybookComponents/ControlSizeDemo/ControlSizeDemo'
 import {ControlStackDemo} from '../StorybookComponents/ControlStackDemo/ControlStackDemo'
 import {TouchTargetDemo} from '../StorybookComponents/TouchTargetDemo/TouchTargetDemo'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Size/Overlay.stories.tsx b/docs/storybook/stories/Size/Overlay.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/functional/size/size.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Size/Size.stories.tsx b/docs/storybook/stories/Size/Size.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/base/size/size.json'
 import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Size/Stack.stories.tsx b/docs/storybook/stories/Size/Stack.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/functional/size/size.json'
 import {StackDemo} from '../StorybookComponents/StackDemo/StackDemo'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/Size/ViewportRange.stories.tsx b/docs/storybook/stories/Size/ViewportRange.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/functional/size/viewport.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
 

diff --git a/docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx b/docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx
@@ -1,15 +1,13 @@
 import React from 'react'
 import {toHex, readableColor} from 'color2k'
 import './ColorScale.css'
-import {useTheme} from '@primer/react/lib-esm/ThemeProvider'
 
 export type ColorScaleProps = {
   color?: string
   border?: boolean
 }
 
 export const ColorScale = ({color, border}: ColorScaleProps) => {
-  const {resolvedColorScheme: theme} = useTheme()
   const ref = React.useRef<HTMLDivElement | null>(null)
   const [hex, setHex] = React.useState<string | null>(null)
   const [textColor, setTextColor] = React.useState<string>('currentColor')
@@ -25,7 +23,7 @@ export const ColorScale = ({color, border}: ColorScaleProps) => {
       setHex(asHex)
       setTextColor(asHex ? readableColor(asHex) : 'currentColor')
     }, 0)
-  }, [color, theme])
+  }, [color])
 
   return (
     <div

diff --git a/docs/storybook/stories/Typography/Base.stories.tsx b/docs/storybook/stories/Typography/Base.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/base/typography/typography.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {TypographyDemo} from '../StorybookComponents/TypographyDemo/TypographyDemo'
 import {getTokensByName} from '../utilities/getTokensByName'

diff --git a/docs/storybook/stories/Typography/Functional.stories.tsx b/docs/storybook/stories/Typography/Functional.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 // eslint-disable-next-line import/extensions
 import sizeTokens from '../../../../dist/docs/functional/typography/typography.json'
-import {DataTable, Table} from '@primer/react/drafts'
+import {DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {TypographyDemo} from '../StorybookComponents/TypographyDemo/TypographyDemo'
 import {getTokensByName} from '../utilities/getTokensByName'

diff --git a/docs/storybook/stories/VisualRegressionTesting/AllColorsTable.module.css b/docs/storybook/stories/VisualRegressionTesting/AllColorsTable.module.css
@@ -0,0 +1,22 @@
+.swatch {
+  height: 50px;
+  width: 50px;
+  background: var(--bgColor-default);
+  border: solid 1px var(--borderColor-default);
+  display: grid;
+  place-content: center;
+  font: var(--text-codeInline-shorthand);
+  font-size: 12px;
+}
+
+.name {
+  width: 300px;
+  display: grid;
+  place-content: center end;
+  background: #ffffff;
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}