Skip to content

Commit 6e495cd

Browse files
chakrihackerchakrihacker
authored
fix(react): css scoping issue fixes
2 parents 3c8f935 + 773358c commit 6e495cd

13 files changed

Lines changed: 221 additions & 169 deletions

File tree

‎examples/next-rwa/src/app/globals.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
/* Import Tailwind CSS v4 */
22
@import 'tailwindcss';
3-
43
@import '@auth0/universal-components-react/styles';
54

5+
@theme {
6+
--color-background: var(--background);
7+
}
8+
69
/* Minimal Next.js specific fixes - keep only essential z-index fixes */
710
[data-radix-portal],
811
[data-radix-popper-content-wrapper] {

‎examples/next-rwa/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
2222
<body className={`${inter.className} h-full`}>
2323
<Auth0Provider>
2424
<ClientProvider>
25-
<div className="flex flex-col h-screen">
25+
<div className="flex flex-col h-screen bg-background">
2626
<Navbar />
2727
<div className="flex flex-1 overflow-hidden min-h-0">
2828
<Sidebar />

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@auth0/universal-components-core",
3-
"version": "1.0.0-beta.14",
3+
"version": "1.0.0-beta.15",
44
"description": "Core utilities for Auth0 Universal Components",
55
"main": "./dist/index.js",
66
"module": "./dist/index.mjs",

‎packages/core/src/styles/globals.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
}
4949
}
5050

51+
.auth0-universal * {
52+
all: revert-layer;
53+
}
54+
5155
@theme inline {
5256
/**
5357
* STANDARD SHADCN VARIABLES (with auth0 fallbacks)
@@ -59,7 +63,7 @@
5963
--color-foreground: var(--auth0-foreground, var(--color-neutral-12));
6064
--color-card: var(--auth0-card, var(--color-neutral-min));
6165
--color-card-foreground: var(--auth0-card-foreground, var(--color-neutral-max));
62-
--color-primary: var(--auth0-primary, var(--color-carbon-9));
66+
--color-primary: var(--auth0-primary, var(--color-carbon-12));
6367
--color-primary-foreground: var(--auth0-primary-foreground, var(--color-neutral-min));
6468
--color-secondary: var(--auth0-secondary, var(--color-neutral-3));
6569
--color-secondary-foreground: var(--auth0-secondary-foreground, var(--color-neutral-1));

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@auth0/universal-components-react",
3-
"version": "1.0.0-beta.14",
3+
"version": "1.0.0-beta.15",
44
"private": false,
55
"sideEffects": [
66
"*.css"

‎packages/react/src/components/auth0/my-account/user-mfa-management.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { MFAEmptyState } from '@/components/auth0/my-account/shared/mfa/empty-st
88
import { MFAErrorState } from '@/components/auth0/my-account/shared/mfa/error-state';
99
import { FactorsList } from '@/components/auth0/my-account/shared/mfa/factors-list';
1010
import { UserMFASetupForm } from '@/components/auth0/my-account/shared/mfa/user-mfa-setup-form';
11+
import { StyledScope } from '@/components/auth0/shared/styled-scope';
1112
import { Badge } from '@/components/ui/badge';
1213
import { Button } from '@/components/ui/button';
1314
import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card';
@@ -191,15 +192,15 @@ function UserMFAMgmtView({ logic, handlers }: UserMFAMgmtViewProps) {
191192
setIsDeleteDialogOpen,
192193
} = handlers;
193194

194-
const { loader, isDarkMode, theme } = useTheme();
195+
const { loader, isDarkMode } = useTheme();
195196
const { t } = useTranslator('mfa', customMessages);
196197
const currentStyles = React.useMemo(
197198
() => getComponentStyles(styling, isDarkMode),
198199
[styling, isDarkMode],
199200
);
200201

201202
return (
202-
<div data-theme={theme || 'default'} style={currentStyles.variables}>
203+
<StyledScope style={currentStyles.variables}>
203204
{isLoading ? (
204205
<div className="flex items-center justify-center py-16">{loader || <Spinner />}</div>
205206
) : (
@@ -351,7 +352,7 @@ function UserMFAMgmtView({ logic, handlers }: UserMFAMgmtViewProps) {
351352
styling={styling}
352353
customMessages={customMessages}
353354
/>
354-
</div>
355+
</StyledScope>
355356
);
356357
}
357358

‎packages/react/src/components/auth0/my-organization/domain-table.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { DomainTableActionsColumn } from '@/components/auth0/my-organization/sha
1515
import { DomainVerifyModal } from '@/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal';
1616
import { DataTable, type Column } from '@/components/auth0/shared/data-table';
1717
import { Header } from '@/components/auth0/shared/header';
18+
import { StyledScope } from '@/components/auth0/shared/styled-scope';
1819
import { Badge } from '@/components/ui/badge';
1920
import { withMyOrganizationService } from '@/hoc/with-services';
2021
import { useDomainTable } from '@/hooks/my-organization/use-domain-table';
@@ -182,7 +183,7 @@ function DomainTableView({
182183
);
183184

184185
return (
185-
<div style={currentStyles.variables}>
186+
<StyledScope style={currentStyles.variables}>
186187
{!hideHeader && (
187188
<div className={currentStyles.classes?.['DomainTable-header']}>
188189
<Header
@@ -254,7 +255,7 @@ function DomainTableView({
254255
onDelete={handleDelete}
255256
customMessages={customMessages?.delete}
256257
/>
257-
</div>
258+
</StyledScope>
258259
);
259260
}
260261

‎packages/react/src/components/auth0/my-organization/organization-details-edit.tsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import * as React from 'react';
88

99
import { OrganizationDetails } from '@/components/auth0/my-organization/shared/organization-management/organization-details/organization-details';
1010
import { Header } from '@/components/auth0/shared/header';
11+
import { StyledScope } from '@/components/auth0/shared/styled-scope';
1112
import { Spinner } from '@/components/ui/spinner';
1213
import { withMyOrganizationService } from '@/hoc/with-services';
1314
import { useOrganizationDetailsEdit } from '@/hooks/my-organization/use-organization-details-edit';
@@ -107,44 +108,45 @@ function OrganizationDetailsEditView({ logic, handlers }: OrganizationDetailsEdi
107108

108109
if (isFetchLoading) {
109110
return (
110-
<div
111-
style={currentStyles.variables}
112-
className="flex items-center justify-center min-h-96 w-full"
113-
>
114-
<Spinner />
115-
</div>
111+
<StyledScope style={currentStyles.variables}>
112+
<div className="flex items-center justify-center min-h-96 w-full">
113+
<Spinner />
114+
</div>
115+
</StyledScope>
116116
);
117117
}
118118

119119
return (
120-
<div className="w-full" style={currentStyles.variables}>
121-
{!hideHeader && (
122-
<div className="mb-8">
123-
<Header
124-
title={t('header.title', {
125-
organizationName: organization.display_name || organization.name || '',
126-
})}
127-
backButton={
128-
backButton && {
129-
...backButton,
130-
text: t('header.back_button_text'),
120+
<StyledScope style={currentStyles.variables}>
121+
<div className="w-full">
122+
{!hideHeader && (
123+
<div className="mb-8">
124+
<Header
125+
title={t('header.title', {
126+
organizationName: organization.display_name || organization.name || '',
127+
})}
128+
backButton={
129+
backButton && {
130+
...backButton,
131+
text: t('header.back_button_text'),
132+
}
131133
}
132-
}
134+
/>
135+
</div>
136+
)}
137+
138+
<div className="mb-8">
139+
<OrganizationDetails
140+
organization={organization}
141+
schema={schema?.details}
142+
customMessages={customMessages?.details}
143+
styling={styling}
144+
readOnly={readOnly}
145+
formActions={formActions}
133146
/>
134147
</div>
135-
)}
136-
137-
<div className="mb-8">
138-
<OrganizationDetails
139-
organization={organization}
140-
schema={schema?.details}
141-
customMessages={customMessages?.details}
142-
styling={styling}
143-
readOnly={readOnly}
144-
formActions={formActions}
145-
/>
146148
</div>
147-
</div>
149+
</StyledScope>
148150
);
149151
}
150152

‎packages/react/src/components/auth0/my-organization/sso-provider-create.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ProviderConfigure from '@/components/auth0/my-organization/shared/idp-man
1010
import { ProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details';
1111
import { ProviderSelect } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-select';
1212
import { Header } from '@/components/auth0/shared/header';
13+
import { StyledScope } from '@/components/auth0/shared/styled-scope';
1314
import { Wizard } from '@/components/auth0/shared/wizard';
1415
import type { StepProps } from '@/components/auth0/shared/wizard';
1516
import { withMyOrganizationService } from '@/hoc/with-services';
@@ -216,32 +217,34 @@ function SsoProviderCreateView({ logic, handlers }: SsoProviderCreateViewProps)
216217
);
217218

218219
return (
219-
<div style={currentStyles.variables} className="w-full">
220-
<Header
221-
title={t('header.title')}
222-
backButton={
223-
backButton && {
224-
...backButton,
225-
text: t('header.back_button_text'),
220+
<StyledScope style={currentStyles.variables}>
221+
<div className="w-full">
222+
<Header
223+
title={t('header.title')}
224+
backButton={
225+
backButton && {
226+
...backButton,
227+
text: t('header.back_button_text'),
228+
}
226229
}
227-
}
228-
className={currentStyles?.classes?.['SsoProviderCreate-header']}
229-
/>
230-
<div className="sso-provider-create__content" data-testid="sso-provider-create-content">
231-
<Wizard
232-
isLoading={isCreating}
233-
hideStepperNumbers
234-
steps={wizardSteps}
235-
onComplete={handleCreate}
236-
formActionLabels={{
237-
nextButtonLabel: t('nextButtonLabel'),
238-
previousButtonLabel: t('previousButtonLabel'),
239-
completeButtonLabel: t('completeButtonLabel'),
240-
}}
241-
className={currentStyles?.classes?.['SsoProviderCreate-wizard']}
230+
className={currentStyles?.classes?.['SsoProviderCreate-header']}
242231
/>
232+
<div className="sso-provider-create__content" data-testid="sso-provider-create-content">
233+
<Wizard
234+
isLoading={isCreating}
235+
hideStepperNumbers
236+
steps={wizardSteps}
237+
onComplete={handleCreate}
238+
formActionLabels={{
239+
nextButtonLabel: t('nextButtonLabel'),
240+
previousButtonLabel: t('previousButtonLabel'),
241+
completeButtonLabel: t('completeButtonLabel'),
242+
}}
243+
className={currentStyles?.classes?.['SsoProviderCreate-wizard']}
244+
/>
245+
</div>
243246
</div>
244-
</div>
247+
</StyledScope>
245248
);
246249
}
247250

0 commit comments

Comments
 (0)