diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index cd23982888..28c3bcb8be 100644 --- a/src/components/Portal/Portal.tsx +++ b/src/components/Portal/Portal.tsx @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'; import {usePortalContainer} from '../../hooks'; import {ThemeProvider} from '../theme'; +import {useThemeContext} from '../theme/useThemeContext'; import {block} from '../utils/cn'; import './Portal.scss'; @@ -18,6 +19,7 @@ export interface PortalProps { export function Portal({container, children, disablePortal}: PortalProps) { const defaultContainer = usePortalContainer(); + const {scoped} = useThemeContext(); const containerNode = container ?? defaultContainer; @@ -27,9 +29,13 @@ export function Portal({container, children, disablePortal}: PortalProps) { return containerNode ? ReactDOM.createPortal( - - {children} - , + scoped ? ( + + {children} + + ) : ( + children + ), containerNode, ) : null; diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index 75fe5a51fe..b9bb81d2fc 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -76,8 +76,9 @@ export function ThemeProvider({ theme, themeValue, direction, + scoped, }) satisfies ThemeContextProps, - [theme, themeValue, direction], + [theme, themeValue, direction, scoped], ); const themeSettingsContext = React.useMemo( diff --git a/src/components/theme/__stories__/Theme.stories.tsx b/src/components/theme/__stories__/Theme.stories.tsx index 98542d3e93..b43b88ab24 100644 --- a/src/components/theme/__stories__/Theme.stories.tsx +++ b/src/components/theme/__stories__/Theme.stories.tsx @@ -4,6 +4,7 @@ import type {Meta, StoryObj} from '@storybook/react'; import {Button} from '../../Button'; import {Dialog} from '../../Dialog'; +import {Select} from '../../Select'; import {Text} from '../../Text'; import {Tooltip} from '../../Tooltip'; import {ThemeProvider} from '../ThemeProvider'; @@ -13,24 +14,9 @@ const meta: Meta = { title: 'Components/Utils/ThemeProvider', component: ThemeProvider, tags: ['nodocs'], - argTypes: { - theme: { - options: ['none', 'light', 'dark', 'light-hc', 'dark-hc', 'system'], - control: { - type: 'select', - }, - mapping: { - none: undefined, - }, - }, - direction: { - options: ['none', 'ltr', 'rtl'], - control: { - type: 'radio', - }, - mapping: { - none: undefined, - }, + parameters: { + controls: { + disable: true, }, }, }; @@ -52,7 +38,14 @@ function ScopedComponent() { setOpen(false)}> - Dialog.Body + + Dialog.Body + + ); @@ -60,13 +53,47 @@ function ScopedComponent() { export const Scoped: Story = { render: function ThemeScoped(props) { + const style: React.CSSProperties = { + border: '1px red dotted', + padding: 10, + height: '100%', + boxSizing: 'border-box', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + gap: 10, + }; return ( -
- - - -
- Inside scoped theme provider +
+ +
+ Inside scoped theme provider (light) + +
+
+ +
+ Inside scoped theme provider (dark) + +
+
+ +
+ Inside scoped theme provider (light-hc) + +
+
+ +
+ Inside scoped theme provider (dark-hc)
diff --git a/src/components/theme/types.ts b/src/components/theme/types.ts index 13940271b2..d87de74eb6 100644 --- a/src/components/theme/types.ts +++ b/src/components/theme/types.ts @@ -8,4 +8,5 @@ export interface ThemeContextProps { theme: Theme; themeValue: RealTheme; direction: Direction; + scoped: boolean; }