Skip to content

Commit c1448cc

Browse files
authored
Replace theme=useTheme() instances with default theme (#6897)
1 parent dd36f5b commit c1448cc

File tree

9 files changed

+20
-32
lines changed

9 files changed

+20
-32
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": major
3+
---
4+
5+
Replaces `useTheme` usage with `theme`. If an application uses a custom theme that modifies one of the following 5 tokens, they will be reset to the default theme values. (`space.2, colors.success.fg, colors.border.default, colors.border.muted, animation.easeOutCubic`)

packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type React from 'react'
22
import {useState, useCallback} from 'react'
33
import type {Meta} from '@storybook/react-vite'
4-
import {useTheme} from '..'
54
import {Button} from '../Button'
65
import {ActionMenu} from '../ActionMenu'
76
import {ActionList} from '../ActionList'
@@ -15,18 +14,17 @@ export default {
1514

1615
export const ShorthandHook = () => {
1716
const confirm = useConfirm()
18-
const {theme} = useTheme()
1917
const onButtonClick = useCallback(
2018
async (event: React.MouseEvent) => {
2119
if (
2220
(await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
2321
event.target instanceof HTMLElement
2422
) {
25-
event.target.style.color = theme?.colors.success.fg ?? 'green'
23+
event.target.style.color = 'var(--fgColor-success)'
2624
event.target.textContent = "I'm green!"
2725
}
2826
},
29-
[confirm, theme],
27+
[confirm],
3028
)
3129
return (
3230
<div className={classes.ButtonContainer}>

packages/react/src/LabelGroup/LabelGroup.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {get} from '../constants'
66
import VisuallyHidden from '../_VisuallyHidden'
77
import {AnchoredOverlay} from '../AnchoredOverlay'
88
import {Button, IconButton} from '../Button'
9-
import {useTheme} from '../ThemeProvider'
9+
import theme from '../theme'
1010
import classes from './LabelGroup.module.css'
1111

1212
export type LabelGroupProps = {
@@ -171,9 +171,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
171171
toJSON: () => undefined,
172172
})
173173

174-
const {theme} = useTheme()
175-
176-
const overlayPaddingPx = parseInt(get('space.2')(theme), 10)
174+
const overlayPaddingPx = parseInt(theme.space[2], 10)
177175

178176
const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key])
179177

packages/react/src/Overlay/Overlay.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import type {ComponentPropsWithRef, ReactElement} from 'react'
22
import React, {useEffect, useRef} from 'react'
33
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
4-
import {get} from '../constants'
54
import type {AriaRole, Merge} from '../utils/types'
65
import type {TouchOrMouseEvent} from '../hooks'
76
import {useOverlay} from '../hooks'
87
import Portal from '../Portal'
98
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
109
import type {AnchorSide} from '@primer/behaviors'
11-
import {useTheme} from '../ThemeProvider'
1210
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
1311
import {useFeatureFlag} from '../FeatureFlags'
1412
import classes from './Overlay.module.css'
1513
import {clsx} from 'clsx'
14+
import theme from '../theme'
1615

1716
type StyledOverlayProps = {
1817
width?: keyof typeof widthMap
@@ -192,9 +191,8 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
192191
): ReactElement => {
193192
const overlayRef = useRef<HTMLDivElement>(null)
194193
useRefObjectAsForwardedRef(forwardedRef, overlayRef)
195-
const {theme} = useTheme()
196-
const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''))
197-
const slideAnimationEasing = get('animation.easeOutCubic')(theme)
194+
const slideAnimationDistance = parseInt(theme.space[2], 10)
195+
const slideAnimationEasing = theme.animation.easeOutCubic
198196

199197
useOverlay({
200198
overlayRef,

packages/react/src/SegmentedControl/SegmentedControl.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type {SegmentedControlIconButtonProps} from './SegmentedControlIconButton
55
import SegmentedControlIconButton from './SegmentedControlIconButton'
66
import {ActionList} from '../ActionList'
77
import {ActionMenu} from '../ActionMenu'
8-
import {useTheme} from '../ThemeProvider'
98
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
109
import {useResponsiveValue} from '../hooks/useResponsiveValue'
1110
import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
@@ -40,7 +39,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
4039
...rest
4140
}) => {
4241
const segmentedControlContainerRef = useRef<HTMLUListElement>(null)
43-
const {theme} = useTheme()
4442
const isUncontrolled =
4543
onChange === undefined ||
4644
React.Children.toArray(children).some(
@@ -176,7 +174,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
176174
selected: index === selectedIndex,
177175
style: {
178176
'--separator-color':
179-
index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default,
177+
index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : 'var(--borderColor-default)',
180178
...child.props.style,
181179
},
182180
}

packages/react/src/UnderlineNav/UnderlineNav.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react
33
import {UnderlineNavContext} from './UnderlineNavContext'
44
import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
55
import {useResizeObserver} from '../hooks/useResizeObserver'
6-
import {useTheme} from '../ThemeProvider'
76
import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
87
import VisuallyHidden from '../_VisuallyHidden'
9-
import {moreBtnStyles, getDividerStyle, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
8+
import {moreBtnStyles, dividerStyles, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
109
import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
1110
import styled from 'styled-components'
1211
import {Button} from '../Button'
@@ -151,7 +150,6 @@ export const UnderlineNav = forwardRef(
151150
const containerRef = React.useRef<HTMLUListElement>(null)
152151
const disclosureWidgetId = useId()
153152

154-
const {theme} = useTheme()
155153
const [isWidgetOpen, setIsWidgetOpen] = useState(false)
156154
const [iconsVisible, setIconsVisible] = useState<boolean>(true)
157155
const [childWidthArray, setChildWidthArray] = useState<ChildWidthArray>([])
@@ -298,7 +296,6 @@ export const UnderlineNav = forwardRef(
298296
return (
299297
<UnderlineNavContext.Provider
300298
value={{
301-
theme,
302299
setChildrenWidth,
303300
setNoIconChildrenWidth,
304301
loadingCounters,
@@ -311,7 +308,7 @@ export const UnderlineNav = forwardRef(
311308
{listItems}
312309
{menuItems.length > 0 && (
313310
<MoreMenuListItem ref={moreMenuRef}>
314-
{!onlyMenuVisible && <div style={getDividerStyle(theme)}></div>}
311+
{!onlyMenuVisible && <div style={dividerStyles}></div>}
315312
<Button
316313
ref={moreMenuBtnRef}
317314
sx={moreBtnStyles}

packages/react/src/UnderlineNav/UnderlineNavContext.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import type React from 'react'
22
import {createContext} from 'react'
3-
import type {Theme} from '../ThemeProvider'
43

54
export const UnderlineNavContext = createContext<{
6-
theme: Theme | undefined
75
setChildrenWidth: React.Dispatch<{text: string; width: number}>
86
setNoIconChildrenWidth: React.Dispatch<{text: string; width: number}>
97
loadingCounters: boolean
108
iconsVisible: boolean
119
}>({
12-
theme: {},
1310
setChildrenWidth: () => null,
1411
setNoIconChildrenWidth: () => null,
1512
loadingCounters: false,

packages/react/src/UnderlineNav/styles.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import type {Theme} from '../ThemeProvider'
21
import type {BetterSystemStyleObject} from '../sx'
32
import {getAnchoredPosition} from '@primer/behaviors'
43

5-
export const getDividerStyle = (theme?: Theme) => ({
4+
export const dividerStyles = {
65
display: 'inline-block',
76
borderLeft: '1px solid',
87
width: '1px',
9-
borderLeftColor: `${theme?.colors.border.muted}`,
10-
marginRight: '4px',
8+
borderLeftColor: 'var(--borderColor-muted)',
9+
marginRight: 'var(--base-size-4)',
1110
height: '24px', // The height of the divider - reference from Figma
12-
})
11+
}
1312

1413
export const moreBtnStyles = {
1514
//set margin 0 here because safari puts extra margin around the button, rest is to reset style to make it look like a list element

packages/react/src/stories/useFocusZone.stories.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Link from '../Link'
66
import {FocusKeys} from '@primer/behaviors'
77
import type {Direction} from '@primer/behaviors'
88
import {useFocusZone} from '../hooks/useFocusZone'
9-
import {useTheme} from '../ThemeProvider'
109
import classes from './FocusZoneStories.module.css'
1110

1211
export default {
@@ -482,15 +481,14 @@ export const ActiveDescendant = () => {
482481

483482
const containerRef = useRef<HTMLElement>(null)
484483
const controllingElementRef = useRef<HTMLElement>(null)
485-
const {theme: themeFromContext} = useTheme()
486484

487485
useFocusZone({
488486
containerRef,
489487
activeDescendantFocus: controllingElementRef,
490488
bindKeys: FocusKeys.ArrowVertical,
491489
onActiveDescendantChanged: (current, previous) => {
492490
if (current) {
493-
current.style.outline = `2px solid ${themeFromContext?.colors.accent.fg}`
491+
current.style.outline = `2px solid var(--fgColor-accent)`
494492
}
495493
if (previous) {
496494
previous.style.outline = ''

0 commit comments

Comments
 (0)