Skip to content

Commit dc7190e

Browse files
langermanklangermank
authored
Bump PRC + add new color dev story (#1161)
* add new stories * install * fix dark cb * fix imports * vscode, you good bro?
1 parent e2e4c44 commit dc7190e

23 files changed

+292
-956
lines changed

‎docs/storybook/package-lock.json

Lines changed: 48 additions & 932 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"dependencies": {
2828
"@primer/octicons-react": "^18.0.0",
29-
"@primer/react": "^36.7.0",
29+
"@primer/react": "^37.10.0",
3030
"react": "18.3",
3131
"react-dom": "18.3"
3232
},

‎docs/storybook/stories/Color/DataVis/Charts.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
44
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../../utilities/getTokensByName'
88

‎docs/storybook/stories/Color/Functional/Display.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
44
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../../utilities/getTokensByName'
88

‎docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
44
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../../utilities/getTokensByName'
88

‎docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
44
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../../utilities/getTokensByName'
88

‎docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import lightHCColorTokens from '../../../../../dist/docs/functional/themes/light
66
import darkHCColorTokens from '../../../../../dist/docs/functional/themes/dark-high-contrast.json'
77
import darkDimmedColorTokens from '../../../../../dist/docs/functional/themes/dark-dimmed.json'
88
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
9-
import {DataTable, Table, Stack} from '@primer/react/drafts'
9+
import {DataTable, Table, Stack} from '@primer/react/experimental'
1010
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
1111

1212
export default {

‎docs/storybook/stories/Demo/BorderColorTesting.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {DataTable, Table} from '@primer/react/drafts'
2+
import {DataTable, Table} from '@primer/react/experimental'
33
import './BorderTesting.css'
44
import {
55
ThreeBarsIcon,
@@ -29,7 +29,7 @@ import {
2929
PeopleIcon,
3030
SearchIcon,
3131
} from '@primer/octicons-react'
32-
import {PageLayout, Button, TextInput, SegmentedControl, NavList, Box, Text, IconButton, Octicon} from '@primer/react'
32+
import {PageLayout, Button, TextInput, SegmentedControl, NavList, Box, Text, IconButton} from '@primer/react'
3333

3434
export default {
3535
title: 'Testing/Borders',
@@ -128,7 +128,7 @@ export const BorderDemo = () => {
128128
}}
129129
>
130130
<IconButton icon={ThreeBarsIcon} aria-label="Menu" />
131-
<Octicon icon={MarkGithubIcon} size={32} />
131+
<MarkGithubIcon size={32} />
132132
<Box sx={{display: 'flex', gap: 2}}>
133133
<Text sx={{fontSize: 1, fontWeight: 'bold'}}>Settings</Text>
134134
</Box>

‎docs/storybook/stories/Demo/Diff/Diff.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import './Diff.css'
3-
import {Box, Link} from '@primer/react'
3+
import {Link} from '@primer/react'
44

55
export default {
66
title: 'Testing/Diff',

‎docs/storybook/stories/Migration/v8/TokenComparison.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import cssShadowVars from './DeprecatedShadowTokensMap.json'
1313
import noChangeCssVars from './NoChangeTokensMap.json'
1414
// eslint-disable-next-line import/extensions
1515
import fallbackVars from './static-fallbacks.json'
16-
import {DataTable, Table} from '@primer/react/drafts'
16+
import {DataTable, Table} from '@primer/react/experimental'
1717

1818
export default {
1919
title: 'Migration/Tables',

‎docs/storybook/stories/Motion/Base.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import baseMotionTokens from '../../../../dist/docs/base/motion/motion.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {getTokensByName} from '../utilities/getTokensByName'
77
import {CubicBezier} from '../StorybookComponents/BezierCurve/BezierCurve'

‎docs/storybook/stories/Size/Border.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {getTokensByName} from '../utilities/getTokensByName'
77
import sizeTokens from '../../../../dist/docs/functional/size/border.json'

‎docs/storybook/stories/Size/Breakpoints.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/functional/size/breakpoints.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {getTokensByName} from '../utilities/getTokensByName'
77

‎docs/storybook/stories/Size/Control.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import sizeTokensCoarse from '../../../../dist/docs/functional/size/size-coarse.
66
import {ControlSizeDemo} from '../StorybookComponents/ControlSizeDemo/ControlSizeDemo'
77
import {ControlStackDemo} from '../StorybookComponents/ControlStackDemo/ControlStackDemo'
88
import {TouchTargetDemo} from '../StorybookComponents/TouchTargetDemo/TouchTargetDemo'
9-
import {DataTable, Table} from '@primer/react/drafts'
9+
import {DataTable, Table} from '@primer/react/experimental'
1010
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
1111
import {getTokensByName} from '../utilities/getTokensByName'
1212

‎docs/storybook/stories/Size/Overlay.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/functional/size/size.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {getTokensByName} from '../utilities/getTokensByName'
77

‎docs/storybook/stories/Size/Size.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/base/size/size.json'
44
import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../utilities/getTokensByName'
88

‎docs/storybook/stories/Size/Stack.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/functional/size/size.json'
44
import {StackDemo} from '../StorybookComponents/StackDemo/StackDemo'
5-
import {DataTable, Table} from '@primer/react/drafts'
5+
import {DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../utilities/getTokensByName'
88

‎docs/storybook/stories/Size/ViewportRange.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/functional/size/viewport.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {getTokensByName} from '../utilities/getTokensByName'
77

‎docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react'
22
import {toHex, readableColor} from 'color2k'
33
import './ColorScale.css'
4-
import {useTheme} from '@primer/react/lib-esm/ThemeProvider'
54

65
export type ColorScaleProps = {
76
color?: string
87
border?: boolean
98
}
109

1110
export const ColorScale = ({color, border}: ColorScaleProps) => {
12-
const {resolvedColorScheme: theme} = useTheme()
1311
const ref = React.useRef<HTMLDivElement | null>(null)
1412
const [hex, setHex] = React.useState<string | null>(null)
1513
const [textColor, setTextColor] = React.useState<string>('currentColor')
@@ -25,7 +23,7 @@ export const ColorScale = ({color, border}: ColorScaleProps) => {
2523
setHex(asHex)
2624
setTextColor(asHex ? readableColor(asHex) : 'currentColor')
2725
}, 0)
28-
}, [color, theme])
26+
}, [color])
2927

3028
return (
3129
<div

‎docs/storybook/stories/Typography/Base.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/base/typography/typography.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {TypographyDemo} from '../StorybookComponents/TypographyDemo/TypographyDemo'
77
import {getTokensByName} from '../utilities/getTokensByName'

‎docs/storybook/stories/Typography/Functional.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import sizeTokens from '../../../../dist/docs/functional/typography/typography.json'
4-
import {DataTable, Table} from '@primer/react/drafts'
4+
import {DataTable, Table} from '@primer/react/experimental'
55
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
66
import {TypographyDemo} from '../StorybookComponents/TypographyDemo/TypographyDemo'
77
import {getTokensByName} from '../utilities/getTokensByName'

‎docs/storybook/stories/VisualRegressionTesting/AllColorsTable.module.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.swatch {
2+
height: 50px;
3+
width: 50px;
4+
background: var(--bgColor-default);
5+
border: solid 1px var(--borderColor-default);
6+
display: grid;
7+
place-content: center;
8+
font: var(--text-codeInline-shorthand);
9+
font-size: 12px;
10+
}
11+
12+
.name {
13+
width: 300px;
14+
display: grid;
15+
place-content: center end;
16+
background: #ffffff;
17+
}
18+
19+
.sticky {
20+
position: sticky;
21+
top: 0;
22+
}

0 commit comments

Comments
 (0)