From 139bd5a96119c2b4f42e4e61de1fd5da215e91dd Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 27 May 2026 16:36:39 -0300 Subject: [PATCH 1/5] Add mobile header --- .../components/ConfigureSSO/ConfigureSSO.tsx | 2 + .../ConfigureSSO/ConfigureSSOMobileHeader.tsx | 107 ++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx index 678f1212793..c6184bd8cd0 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx @@ -16,6 +16,7 @@ import { Route, Switch } from '@/router'; import { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext'; import { ConfigureSSOHeader } from './ConfigureSSOHeader'; +import { ConfigureSSOMobileHeader } from './ConfigureSSOMobileHeader'; import { ConfigureSSONavbar } from './ConfigureSSONavbar'; import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton'; import { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard'; @@ -58,6 +59,7 @@ const AuthenticatedContent = withCoreUserGuard(() => { flex: 1, })} > + diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx new file mode 100644 index 00000000000..4a546e1c1e5 --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx @@ -0,0 +1,107 @@ +import { __internal_useOrganizationBase } from '@clerk/shared/react'; + +import { useEnvironment } from '@/contexts'; +import { Box, Col, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables'; +import { ApplicationLogo } from '@/elements/ApplicationLogo'; +import { BoxIcon } from '@/icons'; +import { mqu } from '@/styledSystem'; + +export const ConfigureSSOMobileHeader = () => { + const { parsedOptions } = useAppearance(); + const { + organizationSettings, + displayConfig: { applicationName, logoImageUrl }, + } = useEnvironment(); + + const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl); + + return ( + ({ + display: 'none', + [mqu.md]: { + display: 'flex', + }, + gap: t.space.$4, + padding: t.space.$5, + borderBottomWidth: t.borderWidths.$normal, + borderBottomStyle: t.borderStyles.$solid, + borderBottomColor: t.colors.$borderAlpha100, + })} + > + ({ + gap: t.space.$2, + maxWidth: '100%', + })} + > + {hasLogo ? ( + ({ + width: t.space.$9, + height: t.space.$9, + borderRadius: t.radii.$md, + overflow: 'hidden', + })} + /> + ) : ( + ({ + width: t.space.$9, + height: t.space.$9, + flexShrink: 0, + borderRadius: t.radii.$md, + backgroundColor: t.colors.$primary500, + color: t.colors.$colorPrimaryForeground, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + })} + aria-hidden + > + ({ width: t.sizes.$4, height: t.sizes.$4 })} + /> + + )} + + + + {applicationName} + + {organizationSettings.enabled && } + + + + ({ fontSize: t.fontSizes.$lg })} + /> + + ); +}; + +const OrganizationSubtitle = (): JSX.Element | null => { + const organization = __internal_useOrganizationBase(); + + if (!organization) { + return null; + } + + return ( + ({ color: t.colors.$colorMutedForeground })} + > + {organization.name} + + ); +}; From 17e7b3f6b879ef222129924228730569b834a53a Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 27 May 2026 17:15:18 -0300 Subject: [PATCH 2/5] Add changeset --- .changeset/sharp-terms-boil.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sharp-terms-boil.md diff --git a/.changeset/sharp-terms-boil.md b/.changeset/sharp-terms-boil.md new file mode 100644 index 00000000000..8cab2538001 --- /dev/null +++ b/.changeset/sharp-terms-boil.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Add mobile header for `` to display application name, logo and organization name From 6c1372f40058cf6e246a54339ba69c0e68073a10 Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 27 May 2026 17:29:57 -0300 Subject: [PATCH 3/5] Move content to navbar module --- .changeset/sharp-terms-boil.md | 2 +- .../components/ConfigureSSO/ConfigureSSO.tsx | 22 +--- .../ConfigureSSO/ConfigureSSOMobileHeader.tsx | 107 ----------------- .../ConfigureSSO/ConfigureSSONavbar.tsx | 112 +++++++++++++++++- 4 files changed, 109 insertions(+), 134 deletions(-) delete mode 100644 packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx diff --git a/.changeset/sharp-terms-boil.md b/.changeset/sharp-terms-boil.md index 8cab2538001..b6f1405c609 100644 --- a/.changeset/sharp-terms-boil.md +++ b/.changeset/sharp-terms-boil.md @@ -2,4 +2,4 @@ '@clerk/ui': patch --- -Add mobile header for `` to display application name, logo and organization name +Add mobile support for `` navbar to display application name, logo and organization name diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx index c6184bd8cd0..70095ea44bd 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { useProtect } from '@/common'; import { withCoreUserGuard } from '@/contexts'; -import { Col, descriptors, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables'; +import { Col, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables'; import { useCardState, withCardStateProvider } from '@/elements/contexts'; import { ProfileCard } from '@/elements/ProfileCard'; import { ExclamationTriangle } from '@/icons'; @@ -16,7 +16,6 @@ import { Route, Switch } from '@/router'; import { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext'; import { ConfigureSSOHeader } from './ConfigureSSOHeader'; -import { ConfigureSSOMobileHeader } from './ConfigureSSOMobileHeader'; import { ConfigureSSONavbar } from './ConfigureSSONavbar'; import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton'; import { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard'; @@ -44,24 +43,7 @@ const AuthenticatedContent = withCoreUserGuard(() => { sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })} > - ({ - backgroundColor: t.colors.$colorBackground, - position: 'relative', - borderRadius: t.radii.$lg, - width: '100%', - overflow: 'hidden', - borderWidth: t.borderWidths.$normal, - borderStyle: t.borderStyles.$solid, - borderColor: t.colors.$borderAlpha150, - flex: 1, - })} - > - - - + ); diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx deleted file mode 100644 index 4a546e1c1e5..00000000000 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSOMobileHeader.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { __internal_useOrganizationBase } from '@clerk/shared/react'; - -import { useEnvironment } from '@/contexts'; -import { Box, Col, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables'; -import { ApplicationLogo } from '@/elements/ApplicationLogo'; -import { BoxIcon } from '@/icons'; -import { mqu } from '@/styledSystem'; - -export const ConfigureSSOMobileHeader = () => { - const { parsedOptions } = useAppearance(); - const { - organizationSettings, - displayConfig: { applicationName, logoImageUrl }, - } = useEnvironment(); - - const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl); - - return ( - ({ - display: 'none', - [mqu.md]: { - display: 'flex', - }, - gap: t.space.$4, - padding: t.space.$5, - borderBottomWidth: t.borderWidths.$normal, - borderBottomStyle: t.borderStyles.$solid, - borderBottomColor: t.colors.$borderAlpha100, - })} - > - ({ - gap: t.space.$2, - maxWidth: '100%', - })} - > - {hasLogo ? ( - ({ - width: t.space.$9, - height: t.space.$9, - borderRadius: t.radii.$md, - overflow: 'hidden', - })} - /> - ) : ( - ({ - width: t.space.$9, - height: t.space.$9, - flexShrink: 0, - borderRadius: t.radii.$md, - backgroundColor: t.colors.$primary500, - color: t.colors.$colorPrimaryForeground, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - })} - aria-hidden - > - ({ width: t.sizes.$4, height: t.sizes.$4 })} - /> - - )} - - - - {applicationName} - - {organizationSettings.enabled && } - - - - ({ fontSize: t.fontSizes.$lg })} - /> - - ); -}; - -const OrganizationSubtitle = (): JSX.Element | null => { - const organization = __internal_useOrganizationBase(); - - if (!organization) { - return null; - } - - return ( - ({ color: t.colors.$colorMutedForeground })} - > - {organization.name} - - ); -}; diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx index e45f1d871b2..855e1c7552d 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx @@ -1,11 +1,12 @@ -import { useOrganization } from '@clerk/shared/react/index'; +import { __internal_useOrganizationBase } from '@clerk/shared/react/index'; import React from 'react'; import { useEnvironment } from '@/contexts'; -import { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables'; +import { Box, Col, descriptors, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables'; import { ApplicationLogo } from '@/elements/ApplicationLogo'; import { NavBar, NavbarContextProvider } from '@/elements/Navbar'; import { BoxIcon } from '@/icons'; +import { mqu } from '@/styledSystem'; type ConfigureSSONavbarProps = React.PropsWithChildren<{ contentRef: React.RefObject; @@ -73,18 +74,117 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP > {applicationName} - {organizationSettings.enabled && } + {organizationSettings.enabled && } } /> - {children} + ({ + backgroundColor: t.colors.$colorBackground, + position: 'relative', + borderRadius: t.radii.$lg, + width: '100%', + overflow: 'hidden', + borderWidth: t.borderWidths.$normal, + borderStyle: t.borderStyles.$solid, + borderColor: t.colors.$borderAlpha150, + flex: 1, + })} + > + + {children} + ); }; -const OrganizationSidebarSubtitle = (): JSX.Element | null => { - const { organization } = useOrganization(); +const ConfigureSSOMobileNavbar = () => { + const { parsedOptions } = useAppearance(); + const { + organizationSettings, + displayConfig: { applicationName, logoImageUrl }, + } = useEnvironment(); + + const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl); + + return ( + ({ + display: 'none', + [mqu.md]: { + display: 'flex', + }, + gap: t.space.$4, + padding: t.space.$5, + borderBottomWidth: t.borderWidths.$normal, + borderBottomStyle: t.borderStyles.$solid, + borderBottomColor: t.colors.$borderAlpha100, + })} + > + ({ + gap: t.space.$2, + maxWidth: '100%', + })} + > + {hasLogo ? ( + ({ + width: t.space.$9, + height: t.space.$9, + borderRadius: t.radii.$md, + overflow: 'hidden', + })} + /> + ) : ( + ({ + width: t.space.$9, + height: t.space.$9, + flexShrink: 0, + borderRadius: t.radii.$md, + backgroundColor: t.colors.$primary500, + color: t.colors.$colorPrimaryForeground, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + })} + aria-hidden + > + ({ width: t.sizes.$4, height: t.sizes.$4 })} + /> + + )} + + + + {applicationName} + + {organizationSettings.enabled && } + + + + ({ fontSize: t.fontSizes.$lg })} + /> + + ); +}; + +const OrganizationSubtitle = (): JSX.Element | null => { + const organization = __internal_useOrganizationBase(); if (!organization) { return null; From 7455b449447ff990ce20257c235942f7c5e7189c Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 27 May 2026 17:32:21 -0300 Subject: [PATCH 4/5] Add descriptor --- packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx | 1 + packages/ui/src/customizables/elementDescriptors.ts | 1 + packages/ui/src/internal/appearance.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx index 855e1c7552d..28fffea2d2d 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx @@ -113,6 +113,7 @@ const ConfigureSSOMobileNavbar = () => { return ( ({ display: 'none', [mqu.md]: { diff --git a/packages/ui/src/customizables/elementDescriptors.ts b/packages/ui/src/customizables/elementDescriptors.ts index 40600bfd2fd..688e0728bc5 100644 --- a/packages/ui/src/customizables/elementDescriptors.ts +++ b/packages/ui/src/customizables/elementDescriptors.ts @@ -538,6 +538,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'enterpriseConnectionButtonText', 'configureSSOHeader', + 'configureSSOMobileNavbar', 'configureSSOStepper', 'configureSSOStepperItem', 'configureSSOStepperItemBullet', diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts index fbdd5e1fefa..daade5167bc 100644 --- a/packages/ui/src/internal/appearance.ts +++ b/packages/ui/src/internal/appearance.ts @@ -674,6 +674,7 @@ export type ElementsConfig = { enterpriseConnectionButtonText: WithOptions; configureSSOHeader: WithOptions; + configureSSOMobileNavbar: WithOptions; configureSSOStepper: WithOptions; configureSSOStepperItem: WithOptions; configureSSOStepperItemBullet: WithOptions; From 5283c8cb90749eb88a73d33dc1ea3639fd1858bc Mon Sep 17 00:00:00 2001 From: Jacek Date: Wed, 27 May 2026 16:41:35 -0500 Subject: [PATCH 5/5] ci(repo): bump snapi to latest main --- .changeset/snapi-bump-version.md | 2 ++ .github/workflows/api-changes.yml | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .changeset/snapi-bump-version.md diff --git a/.changeset/snapi-bump-version.md b/.changeset/snapi-bump-version.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/snapi-bump-version.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.github/workflows/api-changes.yml b/.github/workflows/api-changes.yml index 8d838b8ccdf..471f9a7727c 100644 --- a/.github/workflows/api-changes.yml +++ b/.github/workflows/api-changes.yml @@ -30,7 +30,7 @@ concurrency: cancel-in-progress: ${{ github.event_name == 'pull_request' }} env: - SNAPI_PACKAGE: https://pkg.pr.new/clerk/snapi/@clerk/snapi@d42ed8b7857f9254bbb2a6e9ead44d5e7b1aa60c + SNAPI_PACKAGE: https://pkg.pr.new/clerk/snapi/@clerk/snapi@763ad1bb1da1da52fd8525a038405bb6ee1b7347 SNAPI_FILTERS: >- --filter=@clerk/backend --filter=@clerk/clerk-js