Skip to content

Commit b07afc4

Browse files
LauraBeatrisLauraBeatris
authored
chore(ui): Add mobile support for <ConfigureSSO /> navbar (#8675)
1 parent bbbe654 commit b07afc4

5 files changed

Lines changed: 116 additions & 24 deletions

File tree

‎.changeset/sharp-terms-boil.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/ui': patch
3+
---
4+
5+
Add mobile support for `<ConfigureSSO />` navbar to display application name, logo and organization name

‎packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React from 'react';
88

99
import { useProtect } from '@/common';
1010
import { withCoreUserGuard } from '@/contexts';
11-
import { Col, descriptors, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';
11+
import { Col, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';
1212
import { useCardState, withCardStateProvider } from '@/elements/contexts';
1313
import { ProfileCard } from '@/elements/ProfileCard';
1414
import { ExclamationTriangle } from '@/icons';
@@ -43,23 +43,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
4343
sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
4444
>
4545
<ConfigureSSONavbar contentRef={contentRef}>
46-
<Col
47-
ref={contentRef}
48-
elementDescriptor={descriptors.scrollBox}
49-
sx={t => ({
50-
backgroundColor: t.colors.$colorBackground,
51-
position: 'relative',
52-
borderRadius: t.radii.$lg,
53-
width: '100%',
54-
overflow: 'hidden',
55-
borderWidth: t.borderWidths.$normal,
56-
borderStyle: t.borderStyles.$solid,
57-
borderColor: t.colors.$borderAlpha150,
58-
flex: 1,
59-
})}
60-
>
61-
<ConfigureSSOContent contentRef={contentRef} />
62-
</Col>
46+
<ConfigureSSOContent contentRef={contentRef} />
6347
</ConfigureSSONavbar>
6448
</ProfileCard.Root>
6549
);

‎packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx‎

Lines changed: 107 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useOrganization } from '@clerk/shared/react/index';
1+
import { __internal_useOrganizationBase } from '@clerk/shared/react/index';
22
import React from 'react';
33

44
import { useEnvironment } from '@/contexts';
5-
import { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
5+
import { Box, Col, descriptors, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
66
import { ApplicationLogo } from '@/elements/ApplicationLogo';
77
import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
88
import { BoxIcon } from '@/icons';
9+
import { mqu } from '@/styledSystem';
910

1011
type ConfigureSSONavbarProps = React.PropsWithChildren<{
1112
contentRef: React.RefObject<HTMLDivElement>;
@@ -73,18 +74,118 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
7374
>
7475
{applicationName}
7576
</Text>
76-
{organizationSettings.enabled && <OrganizationSidebarSubtitle />}
77+
{organizationSettings.enabled && <OrganizationSubtitle />}
7778
</Col>
7879
</Flex>
7980
}
8081
/>
81-
{children}
82+
<Col
83+
ref={contentRef}
84+
elementDescriptor={descriptors.scrollBox}
85+
sx={t => ({
86+
backgroundColor: t.colors.$colorBackground,
87+
position: 'relative',
88+
borderRadius: t.radii.$lg,
89+
width: '100%',
90+
overflow: 'hidden',
91+
borderWidth: t.borderWidths.$normal,
92+
borderStyle: t.borderStyles.$solid,
93+
borderColor: t.colors.$borderAlpha150,
94+
flex: 1,
95+
})}
96+
>
97+
<ConfigureSSOMobileNavbar />
98+
{children}
99+
</Col>
82100
</NavbarContextProvider>
83101
);
84102
};
85103

86-
const OrganizationSidebarSubtitle = (): JSX.Element | null => {
87-
const { organization } = useOrganization();
104+
const ConfigureSSOMobileNavbar = () => {
105+
const { parsedOptions } = useAppearance();
106+
const {
107+
organizationSettings,
108+
displayConfig: { applicationName, logoImageUrl },
109+
} = useEnvironment();
110+
111+
const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
112+
113+
return (
114+
<Col
115+
as='header'
116+
elementDescriptor={descriptors.configureSSOMobileNavbar}
117+
sx={t => ({
118+
display: 'none',
119+
[mqu.md]: {
120+
display: 'flex',
121+
},
122+
gap: t.space.$4,
123+
padding: t.space.$5,
124+
borderBottomWidth: t.borderWidths.$normal,
125+
borderBottomStyle: t.borderStyles.$solid,
126+
borderBottomColor: t.colors.$borderAlpha100,
127+
})}
128+
>
129+
<Flex
130+
align='center'
131+
sx={t => ({
132+
gap: t.space.$2,
133+
maxWidth: '100%',
134+
})}
135+
>
136+
{hasLogo ? (
137+
<ApplicationLogo
138+
sx={t => ({
139+
width: t.space.$9,
140+
height: t.space.$9,
141+
borderRadius: t.radii.$md,
142+
overflow: 'hidden',
143+
})}
144+
/>
145+
) : (
146+
<Box
147+
sx={t => ({
148+
width: t.space.$9,
149+
height: t.space.$9,
150+
flexShrink: 0,
151+
borderRadius: t.radii.$md,
152+
backgroundColor: t.colors.$primary500,
153+
color: t.colors.$colorPrimaryForeground,
154+
display: 'flex',
155+
alignItems: 'center',
156+
justifyContent: 'center',
157+
})}
158+
aria-hidden
159+
>
160+
<Icon
161+
icon={BoxIcon}
162+
sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
163+
/>
164+
</Box>
165+
)}
166+
167+
<Col sx={{ minWidth: 0 }}>
168+
<Text
169+
as='p'
170+
truncate
171+
>
172+
{applicationName}
173+
</Text>
174+
{organizationSettings.enabled && <OrganizationSubtitle />}
175+
</Col>
176+
</Flex>
177+
178+
<Heading
179+
as='h3'
180+
localizationKey={localizationKeys('configureSSO.navbar.title')}
181+
sx={t => ({ fontSize: t.fontSizes.$lg })}
182+
/>
183+
</Col>
184+
);
185+
};
186+
187+
const OrganizationSubtitle = (): JSX.Element | null => {
188+
const organization = __internal_useOrganizationBase();
88189

89190
if (!organization) {
90191
return null;

‎packages/ui/src/customizables/elementDescriptors.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,6 +538,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
538538
'enterpriseConnectionButtonText',
539539

540540
'configureSSOHeader',
541+
'configureSSOMobileNavbar',
541542
'configureSSOStepper',
542543
'configureSSOStepperItem',
543544
'configureSSOStepperItemBullet',

‎packages/ui/src/internal/appearance.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -674,6 +674,7 @@ export type ElementsConfig = {
674674
enterpriseConnectionButtonText: WithOptions;
675675

676676
configureSSOHeader: WithOptions;
677+
configureSSOMobileNavbar: WithOptions;
677678
configureSSOStepper: WithOptions;
678679
configureSSOStepperItem: WithOptions<string, ActiveState>;
679680
configureSSOStepperItemBullet: WithOptions<string, ActiveState>;

0 commit comments

Comments
 (0)