@primer/components 33.0.0-rc.265a717f → 33.0.0-rc.42d465c3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +2 -0
- package/dist/browser.esm.js +2 -2209
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2209
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Header.js +1 -1
- package/lib/ActionList/Item.js +10 -10
- package/lib/ActionList/List.js +1 -1
- package/lib/ActionList2/Item.js +1 -1
- package/lib/ActionList2/List.js +1 -1
- package/lib/BaseStyles.js +2 -20
- package/lib/BorderBox.js +1 -1
- package/lib/Box.js +1 -1
- package/lib/Breadcrumbs.js +3 -3
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonGroup.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Details.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +1 -1
- package/lib/Flex.js +1 -1
- package/lib/LabelGroup.js +1 -1
- package/lib/Overlay.js +1 -1
- package/lib/Pagination/Pagination.js +2 -2
- package/lib/Position.js +1 -1
- package/lib/SelectMenu/SelectMenu.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib/StateLabel.js +1 -1
- package/lib/StyledOcticon.js +1 -1
- package/lib/SubNav.js +3 -3
- package/lib/ThemeProvider.d.ts +1 -0
- package/lib/ThemeProvider.js +17 -4
- package/lib/Timeline.js +4 -4
- package/lib/Token/AvatarToken.js +1 -1
- package/lib/Token/TokenBase.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/__tests__/ThemeProvider.test.js +114 -0
- package/lib/stories/ActionList.stories.js +3 -3
- package/lib/stories/ActionList2.stories.js +1 -1
- package/lib/stories/Checkbox.stories.js +2 -2
- package/lib/stories/ThemeProvider.stories.js +1 -5
- package/lib/stories/useFocusTrap.stories.js +1 -11
- package/lib/stories/useFocusZone.stories.js +2 -6
- package/lib-esm/ActionList/Header.js +1 -1
- package/lib-esm/ActionList/Item.js +10 -10
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/ActionList2/Item.js +1 -1
- package/lib-esm/ActionList2/List.js +1 -1
- package/lib-esm/BaseStyles.js +2 -20
- package/lib-esm/BorderBox.js +1 -1
- package/lib-esm/Box.js +1 -1
- package/lib-esm/Breadcrumbs.js +3 -3
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonGroup.js +1 -1
- package/lib-esm/Checkbox.js +1 -1
- package/lib-esm/Details.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
- package/lib-esm/Flex.js +1 -1
- package/lib-esm/LabelGroup.js +1 -1
- package/lib-esm/Overlay.js +1 -1
- package/lib-esm/Pagination/Pagination.js +2 -2
- package/lib-esm/Position.js +1 -1
- package/lib-esm/SelectMenu/SelectMenu.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/StyledOcticon.js +1 -1
- package/lib-esm/SubNav.js +3 -3
- package/lib-esm/ThemeProvider.d.ts +1 -0
- package/lib-esm/ThemeProvider.js +17 -4
- package/lib-esm/Timeline.js +4 -4
- package/lib-esm/Token/AvatarToken.js +1 -1
- package/lib-esm/Token/TokenBase.js +1 -1
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/__tests__/ThemeProvider.test.js +114 -0
- package/lib-esm/stories/ActionList.stories.js +3 -3
- package/lib-esm/stories/ActionList2.stories.js +1 -1
- package/lib-esm/stories/Checkbox.stories.js +2 -2
- package/lib-esm/stories/ThemeProvider.stories.js +1 -5
- package/lib-esm/stories/useFocusTrap.stories.js +1 -11
- package/lib-esm/stories/useFocusZone.stories.js +2 -6
- package/package-lock.json +41 -747
- package/package.json +2 -2
- package/src/ThemeProvider.tsx +22 -5
- package/src/__tests__/ThemeProvider.test.tsx +116 -0
- package/stats.html +1 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/components",
|
3
|
-
"version": "33.0.0-rc.
|
3
|
+
"version": "33.0.0-rc.42d465c3",
|
4
4
|
"description": "Primer react components",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"module": "lib-esm/index.js",
|
@@ -100,7 +100,7 @@
|
|
100
100
|
"babel-plugin-add-react-displayname": "0.0.5",
|
101
101
|
"babel-plugin-macros": "3.1.0",
|
102
102
|
"babel-plugin-preval": "5.0.0",
|
103
|
-
"babel-plugin-styled-components": "
|
103
|
+
"babel-plugin-styled-components": "2.0.2",
|
104
104
|
"babel-plugin-transform-replace-expressions": "0.2.0",
|
105
105
|
"babel-polyfill": "6.26.0",
|
106
106
|
"chroma-js": "2.1.2",
|
package/src/ThemeProvider.tsx
CHANGED
@@ -24,6 +24,7 @@ const ThemeContext = React.createContext<{
|
|
24
24
|
colorScheme?: string
|
25
25
|
colorMode?: ColorModeWithAuto
|
26
26
|
resolvedColorMode?: ColorMode
|
27
|
+
resolvedColorScheme?: string
|
27
28
|
dayScheme?: string
|
28
29
|
nightScheme?: string
|
29
30
|
setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
|
@@ -52,7 +53,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
|
|
52
53
|
const systemColorMode = useSystemColorMode()
|
53
54
|
const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
|
54
55
|
const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
|
55
|
-
const resolvedTheme = React.useMemo(
|
56
|
+
const {resolvedTheme, resolvedColorScheme} = React.useMemo(
|
57
|
+
() => applyColorScheme(theme, colorScheme),
|
58
|
+
[theme, colorScheme]
|
59
|
+
)
|
56
60
|
|
57
61
|
// Update state if props change
|
58
62
|
React.useEffect(() => {
|
@@ -74,6 +78,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
|
|
74
78
|
colorScheme,
|
75
79
|
colorMode,
|
76
80
|
resolvedColorMode,
|
81
|
+
resolvedColorScheme,
|
77
82
|
dayScheme,
|
78
83
|
nightScheme,
|
79
84
|
setColorMode,
|
@@ -156,9 +161,15 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme:
|
|
156
161
|
}
|
157
162
|
}
|
158
163
|
|
159
|
-
function applyColorScheme(
|
164
|
+
function applyColorScheme(
|
165
|
+
theme: Theme,
|
166
|
+
colorScheme: string
|
167
|
+
): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
|
160
168
|
if (!theme.colorSchemes) {
|
161
|
-
return
|
169
|
+
return {
|
170
|
+
resolvedTheme: theme,
|
171
|
+
resolvedColorScheme: undefined
|
172
|
+
}
|
162
173
|
}
|
163
174
|
|
164
175
|
if (!theme.colorSchemes[colorScheme]) {
|
@@ -167,10 +178,16 @@ function applyColorScheme(theme: Theme, colorScheme: string) {
|
|
167
178
|
|
168
179
|
// Apply the first defined color scheme
|
169
180
|
const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
|
170
|
-
return
|
181
|
+
return {
|
182
|
+
resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
|
183
|
+
resolvedColorScheme: defaultColorScheme
|
184
|
+
}
|
171
185
|
}
|
172
186
|
|
173
|
-
return
|
187
|
+
return {
|
188
|
+
resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
|
189
|
+
resolvedColorScheme: colorScheme
|
190
|
+
}
|
174
191
|
}
|
175
192
|
|
176
193
|
export default ThemeProvider
|
@@ -439,3 +439,119 @@ describe('useColorSchemeVar', () => {
|
|
439
439
|
expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue')
|
440
440
|
})
|
441
441
|
})
|
442
|
+
|
443
|
+
describe('useTheme().resolvedColorScheme', () => {
|
444
|
+
it('is undefined when not in a theme', () => {
|
445
|
+
const Component = () => {
|
446
|
+
const {resolvedColorScheme} = useTheme()
|
447
|
+
|
448
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
449
|
+
}
|
450
|
+
|
451
|
+
render(<Component />)
|
452
|
+
|
453
|
+
expect(screen.getByTestId('text').textContent).toEqual('')
|
454
|
+
})
|
455
|
+
|
456
|
+
it('is undefined when the theme has no colorScheme object', () => {
|
457
|
+
const Component = () => {
|
458
|
+
const {resolvedColorScheme} = useTheme()
|
459
|
+
|
460
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
461
|
+
}
|
462
|
+
|
463
|
+
render(
|
464
|
+
<ThemeProvider theme={{color: 'red'}}>
|
465
|
+
<Component />
|
466
|
+
</ThemeProvider>
|
467
|
+
)
|
468
|
+
|
469
|
+
expect(screen.getByTestId('text').textContent).toEqual('')
|
470
|
+
})
|
471
|
+
|
472
|
+
it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
|
473
|
+
const Component = () => {
|
474
|
+
const {resolvedColorScheme} = useTheme()
|
475
|
+
|
476
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
477
|
+
}
|
478
|
+
|
479
|
+
const schemeToApply = 'dark'
|
480
|
+
|
481
|
+
render(
|
482
|
+
<ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
|
483
|
+
<Component />
|
484
|
+
</ThemeProvider>
|
485
|
+
)
|
486
|
+
|
487
|
+
expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
|
488
|
+
expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
|
489
|
+
})
|
490
|
+
|
491
|
+
it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
|
492
|
+
const Component = () => {
|
493
|
+
const {resolvedColorScheme} = useTheme()
|
494
|
+
|
495
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
496
|
+
}
|
497
|
+
|
498
|
+
const schemeToApply = 'totally-invalid-colorscheme'
|
499
|
+
render(
|
500
|
+
<ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
|
501
|
+
<Component />
|
502
|
+
</ThemeProvider>
|
503
|
+
)
|
504
|
+
|
505
|
+
const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
|
506
|
+
|
507
|
+
expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
|
508
|
+
expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
|
509
|
+
expect(screen.getByTestId('text').textContent).toEqual('light')
|
510
|
+
})
|
511
|
+
|
512
|
+
describe('nested theme', () => {
|
513
|
+
it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
|
514
|
+
const Component = () => {
|
515
|
+
const {resolvedColorScheme} = useTheme()
|
516
|
+
|
517
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
518
|
+
}
|
519
|
+
|
520
|
+
const schemeToApply = 'dark'
|
521
|
+
|
522
|
+
render(
|
523
|
+
<ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
|
524
|
+
<ThemeProvider>
|
525
|
+
<Component />
|
526
|
+
</ThemeProvider>
|
527
|
+
</ThemeProvider>
|
528
|
+
)
|
529
|
+
|
530
|
+
expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
|
531
|
+
expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
|
532
|
+
})
|
533
|
+
|
534
|
+
it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
|
535
|
+
const Component = () => {
|
536
|
+
const {resolvedColorScheme} = useTheme()
|
537
|
+
|
538
|
+
return <Text data-testid="text">{resolvedColorScheme}</Text>
|
539
|
+
}
|
540
|
+
|
541
|
+
const schemeToApply = 'totally-invalid-colorscheme'
|
542
|
+
render(
|
543
|
+
<ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
|
544
|
+
<ThemeProvider>
|
545
|
+
<Component />
|
546
|
+
</ThemeProvider>
|
547
|
+
</ThemeProvider>
|
548
|
+
)
|
549
|
+
|
550
|
+
const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
|
551
|
+
|
552
|
+
expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
|
553
|
+
expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
|
554
|
+
expect(screen.getByTestId('text').textContent).toEqual('light')
|
555
|
+
})
|
556
|
+
})
|
557
|
+
})
|