chore: remove ThemeProvider from stories (#7013)

francinelucca · Copilot · web-flow · commit a15faefa58c2 · 2025-10-15T17:23:37.000Z
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -2,7 +2,7 @@ import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
-import {BaseStyles, Stack, ThemeProvider, registerPortalRoot} from '..'
+import {BaseStyles, Stack, registerPortalRoot} from '..'
 import {Dialog} from '../DialogV1'
 import TextInputTokens from '../TextInputWithTokens'
 import Autocomplete from './Autocomplete'
@@ -112,18 +112,16 @@ const autocompleteStoryMeta: Meta = {
       }, [])
 
       return (
-        <ThemeProvider>
-          <BaseStyles>
-            <div onKeyDownCapture={reportKey}>
-              <p className={classes.LastKeyPressed} id="key-press-label">
-                Last key pressed: {lastKey}
-              </p>
-              <div className={classes.StoryPadding}>
-                <Story />
-              </div>
+        <BaseStyles>
+          <div onKeyDownCapture={reportKey}>
+            <p className={classes.LastKeyPressed} id="key-press-label">
+              Last key pressed: {lastKey}
+            </p>
+            <div className={classes.StoryPadding}>
+              <Story />
             </div>
-          </BaseStyles>
-        </ThemeProvider>
+          </div>
+        </BaseStyles>
       )
     },
   ],
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,7 +1,7 @@
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles, ThemeProvider} from '..'
+import {BaseStyles} from '..'
 import Autocomplete from './Autocomplete'
 import FormControl from '../FormControl'
 import type {ComponentProps} from '../utils/types'
@@ -112,18 +112,16 @@ const autocompleteStoryMeta: Meta = {
       }, [])
 
       return (
-        <ThemeProvider>
-          <BaseStyles>
-            <div onKeyDownCapture={reportKey}>
-              <p className={classes.KeyPressLabel} id="key-press-label">
-                Last key pressed: {lastKey}
-              </p>
-              <div className={classes.StoryContent}>
-                <Story />
-              </div>
+        <BaseStyles>
+          <div onKeyDownCapture={reportKey}>
+            <p className={classes.KeyPressLabel} id="key-press-label">
+              Last key pressed: {lastKey}
+            </p>
+            <div className={classes.StoryContent}>
+              <Story />
             </div>
-          </BaseStyles>
-        </ThemeProvider>
+          </div>
+        </BaseStyles>
       )
     },
   ],
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
@@ -2,7 +2,7 @@ import type {Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import {Button, IconButton, LinkButton} from '../Button'
 import {CopilotIcon} from '@primer/octicons-react'
-import {Tooltip, ThemeProvider, BaseStyles} from '..'
+import {Tooltip, BaseStyles} from '..'
 
 const meta: Meta<typeof ButtonGroup> = {
   title: 'Components/ButtonGroup/Dev',
@@ -11,11 +11,9 @@ const meta: Meta<typeof ButtonGroup> = {
     Story => {
       // Add some padding to the wrapper box to make sure tooltip v1 is always in the viewport
       return (
-        <ThemeProvider>
-          <BaseStyles>
-            <div style={{padding: 'var(--base-size-32)'}}>{Story()}</div>
-          </BaseStyles>
-        </ThemeProvider>
+        <BaseStyles>
+          <div style={{padding: 'var(--base-size-32)'}}>{Story()}</div>
+        </BaseStyles>
       )
     },
   ],
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,24 +1,11 @@
 import {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles, Button, ThemeProvider} from '..'
+import {Button} from '..'
 import {ConfirmationDialog} from './ConfirmationDialog'
 
 export default {
   title: 'Components/ConfirmationDialog',
   component: ConfirmationDialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
 } as Meta
 
 export const Default = () => {
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -1,8 +1,6 @@
 import type React from 'react'
 import {useCallback} from 'react'
 import {createRoot} from 'react-dom/client'
-import type {ThemeProviderProps} from '../ThemeProvider'
-import {ThemeProvider, useTheme} from '../ThemeProvider'
 import {FocusKeys} from '@primer/behaviors'
 import type {DialogProps, DialogHeaderProps, DialogButtonProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
 import {Dialog} from '../Dialog/Dialog'
@@ -181,7 +179,7 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
 
 let hostElement: Element | null = null
 export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
-async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
+async function confirm(options: ConfirmOptions): Promise<boolean> {
   const {content, ...confirmationDialogProps} = options
   return new Promise(resolve => {
     hostElement ||= document.createElement('div')
@@ -196,13 +194,11 @@ async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions):
       }
     }
     root.render(
-      <ThemeProvider {...themeProps}>
-        <BaseStyles>
-          <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
-            {content}
-          </ConfirmationDialog>
-        </BaseStyles>
-      </ThemeProvider>,
+      <BaseStyles>
+        <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
+          {content}
+        </ConfirmationDialog>
+      </BaseStyles>,
     )
   })
 }
@@ -213,13 +209,8 @@ async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions):
  * resolved with `true` or `false` depending on whether or not the confirm button was used.
  */
 export function useConfirm() {
-  const {theme, colorMode, dayScheme, nightScheme} = useTheme()
-  const result = useCallback(
-    (options: ConfirmOptions) => {
-      const themeProps: ThemeProviderProps = {theme, colorMode, dayScheme, nightScheme}
-      return confirm(themeProps, options)
-    },
-    [theme, colorMode, dayScheme, nightScheme],
-  )
+  const result = useCallback((options: ConfirmOptions) => {
+    return confirm(options)
+  }, [])
   return result
 }
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.stories.tsx b/packages/react/src/FilteredActionList/FilteredActionList.stories.tsx
@@ -1,22 +1,11 @@
 import type {Meta} from '@storybook/react-vite'
 import React from 'react'
-import {ThemeProvider} from '..'
 import {FilteredActionList} from '../FilteredActionList'
-import BaseStyles from '../BaseStyles'
 import classes from './FilteredActionList.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/FilteredActionList',
   component: FilteredActionList,
-  decorators: [
-    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
-      <ThemeProvider>
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
-      </ThemeProvider>
-    ),
-  ],
   parameters: {
     controls: {
       disable: true,
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -2,7 +2,6 @@ import React, {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {
   Autocomplete,
-  BaseStyles,
   Button,
   Checkbox,
   CheckboxGroup,
@@ -15,8 +14,6 @@ import {
   TextInput,
   TextInputWithTokens,
   Textarea,
-  ThemeProvider,
-  theme,
 } from '..'
 import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react'
 import type {ItemInput} from '../SelectPanel'
@@ -25,17 +22,6 @@ import classes from './FormControl.features.stories.module.css'
 
 export default {
   title: 'Components/FormControl/Features',
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
   argTypes: {
     disabled: {
       type: 'boolean',
diff --git a/packages/react/src/FormControl/useFormControlForwardedProps.stories.tsx b/packages/react/src/FormControl/useFormControlForwardedProps.stories.tsx
@@ -1,19 +1,8 @@
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles, FormControl, ThemeProvider, theme, useFormControlForwardedProps} from '..'
+import {FormControl, useFormControlForwardedProps} from '..'
 
 export default {
   title: 'Hooks/useFormControlForwardedProps',
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
   argTypes: {
     disabled: {
       type: 'boolean',
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -8,15 +8,6 @@ import classes from './LabelGroupStories.module.css'
 const meta: Meta = {
   title: 'Components/LabelGroup/Features',
   component: LabelGroup,
-  decorators: [
-    Story => {
-      return (
-        <>
-          <Story />
-        </>
-      )
-    },
-  ],
 }
 
 const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
@@ -1,6 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
-import {BaseStyles, ThemeProvider} from '..'
 import Token from './Token'
 import {GitBranchIcon} from '@primer/octicons-react'
 import IssueLabelToken from './IssueLabelToken'
@@ -9,17 +8,6 @@ import classes from './Token.features.stories.module.css'
 export default {
   title: 'Components/Token/Features',
   component: Token,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
 } as Meta
 
 export const InteractiveToken = () => {
diff --git a/packages/react/src/Tooltip/Tooltip.features.stories.tsx b/packages/react/src/Tooltip/Tooltip.features.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles, ThemeProvider, IconButton, Button} from '..'
+import {IconButton, Button} from '..'
 import Tooltip from './Tooltip'
 import {SearchIcon} from '@primer/octicons-react'
 import classes from './Tooltip.features.stories.module.css'
@@ -9,18 +9,6 @@ import classes from './Tooltip.features.stories.module.css'
 export default {
   title: 'Deprecated/Components/Tooltip/Features',
   component: Tooltip,
-
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
 } as Meta
 
 export const AllDirections = () => (
diff --git a/packages/react/src/Tooltip/Tooltip.stories.tsx b/packages/react/src/Tooltip/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles, ThemeProvider, Button} from '..'
+import {Button} from '..'
 import Link from '../Link'
 import {Banner} from '../Banner'
 import Tooltip from './Tooltip'
@@ -10,18 +10,6 @@ import classes from './Tooltip.stories.module.css'
 export default {
   title: 'Deprecated/Components/Tooltip',
   component: Tooltip,
-
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
 } as Meta
 
 export const Default = () => (
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -13,10 +13,9 @@ import {
 } from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import React, {forwardRef} from 'react'
-import {Label, ThemeProvider} from '../..'
+import {Label} from '../..'
 import {ActionList as _ActionList} from '../../deprecated/ActionList'
 import {Header} from '../../deprecated/ActionList/Header'
-import BaseStyles from '../../BaseStyles'
 import {ReactRouterLikeLink} from '../../Pagination/mocks/ReactRouterLink'
 import classes from './ActionListStories.module.css'
 
@@ -27,15 +26,6 @@ const ActionList = Object.assign(_ActionList, {
 const meta: Meta = {
   title: 'Deprecated/Components/ActionList',
   component: ActionList,
-  decorators: [
-    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
-      <ThemeProvider>
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
-      </ThemeProvider>
-    ),
-  ],
   parameters: {
     controls: {
       disable: true,
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
