chore(ui): Add mobile support for <ConfigureSSO /> navbar

.changeset/sharp-terms-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Add mobile support for `<ConfigureSSO />` navbar to display application name, logo and organization name

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';
@@ -43,23 +43,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
       sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
     >
       <ConfigureSSONavbar contentRef={contentRef}>
-        <Col
-          ref={contentRef}
-          elementDescriptor={descriptors.scrollBox}
-          sx={t => ({
-            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,
-          })}
-        >
-          <ConfigureSSOContent contentRef={contentRef} />
-        </Col>
+        <ConfigureSSOContent contentRef={contentRef} />
       </ConfigureSSONavbar>
     </ProfileCard.Root>
   );

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<HTMLDivElement>;
@@ -73,18 +74,118 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
               >
                 {applicationName}
               </Text>
-              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}
+              {organizationSettings.enabled && <OrganizationSubtitle />}
             </Col>
           </Flex>
         }
       />
-      {children}
+      <Col
+        ref={contentRef}
+        elementDescriptor={descriptors.scrollBox}
+        sx={t => ({
+          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,
+        })}
+      >
+        <ConfigureSSOMobileNavbar />
+        {children}
+      </Col>
     </NavbarContextProvider>
   );
 };
 
-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 (
+    <Col
+      as='header'
+      elementDescriptor={descriptors.configureSSOMobileNavbar}
+      sx={t => ({
+        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,
+      })}
+    >
+      <Flex
+        align='center'
+        sx={t => ({
+          gap: t.space.$2,
+          maxWidth: '100%',
+        })}
+      >
+        {hasLogo ? (
+          <ApplicationLogo
+            sx={t => ({
+              width: t.space.$9,
+              height: t.space.$9,
+              borderRadius: t.radii.$md,
+              overflow: 'hidden',
+            })}
+          />
+        ) : (
+          <Box
+            sx={t => ({
+              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
+          >
+            <Icon
+              icon={BoxIcon}
+              sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
+            />
+          </Box>
+        )}
+
+        <Col sx={{ minWidth: 0 }}>
+          <Text
+            as='p'
+            truncate
+          >
+            {applicationName}
+          </Text>
+          {organizationSettings.enabled && <OrganizationSubtitle />}
+        </Col>
+      </Flex>
+
+      <Heading
+        as='h3'
+        localizationKey={localizationKeys('configureSSO.navbar.title')}
+        sx={t => ({ fontSize: t.fontSizes.$lg })}
+      />
+    </Col>
+  );
+};
+
+const OrganizationSubtitle = (): JSX.Element | null => {
+  const organization = __internal_useOrganizationBase();
 
   if (!organization) {
     return null;

packages/ui/src/customizables/elementDescriptors.ts

@@ -538,6 +538,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'enterpriseConnectionButtonText',
 
   'configureSSOHeader',
+  'configureSSOMobileNavbar',
   'configureSSOStepper',
   'configureSSOStepperItem',
   'configureSSOStepperItemBullet',

packages/ui/src/internal/appearance.ts

@@ -674,6 +674,7 @@ export type ElementsConfig = {
   enterpriseConnectionButtonText: WithOptions;
 
   configureSSOHeader: WithOptions;
+  configureSSOMobileNavbar: WithOptions;
   configureSSOStepper: WithOptions;
   configureSSOStepperItem: WithOptions<string, ActiveState>;
   configureSSOStepperItemBullet: WithOptions<string, ActiveState>;