feat(clerk-js): Enable element descriptors & ids for active devices […

…SDK-859] (#1994) (#2010)

(cherry picked from commit 78fc5ee)

Co-authored-by: Tom Milewski <me@tm.codes>

.changeset/mean-houses-juggle.md

@@ -0,0 +1,11 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces new element appearance descriptors:
+
+- `activeDeviceListItem` allows you to customize the appearance of the active device list (accordion) item
+  - `activeDeviceListItem__current` allows you to customize the appearance of the _current_ active device list (accordion) item
+- `activeDevice` allows you to customize the appearance of the active device item
+  - `activeDevice__current` allows you to customize the appearance of the _current_ active device item

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -47,21 +47,25 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
   };
 
   return (
-    <UserProfileAccordion title={<DeviceInfo session={props.session} />}>
+    <UserProfileAccordion
+      elementDescriptor={descriptors.activeDeviceListItem}
+      elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
+      title={<DeviceInfo session={props.session} />}
+    >
       <Col gap={4}>
         {isCurrent && (
           <LinkButtonWithDescription
-            title={localizationKeys('userProfile.start.activeDevicesSection.detailsTitle')}
             subtitle={localizationKeys('userProfile.start.activeDevicesSection.detailsSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.detailsTitle')}
           />
         )}
         {!isCurrent && (
           <LinkButtonWithDescription
-            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
-            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
             actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
             colorScheme='danger'
             onClick={revoke}
+            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
           />
         )}
       </Col>
@@ -82,6 +86,8 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
 
   return (
     <Flex
+      elementDescriptor={descriptors.activeDevice}
+      elementId={isCurrent ? descriptors.activeDevice.setId('current') : undefined}
       align='center'
       sx={t => ({
         gap: t.space.$8,

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -246,6 +246,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'page',
   'pageHeader',
 
+  'activeDevice',
+  'activeDeviceListItem',
   'activeDeviceIcon',
 
   'impersonationFab',

packages/clerk-js/src/ui/elements/Accordion.tsx

@@ -2,18 +2,20 @@ import React from 'react';
 
 import { Col, descriptors } from '../customizables';
 import { Caret } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
 import { animations } from '../styledSystem';
 import { ArrowBlockButton } from './ArrowBlockButton';
 
-type AccordionItemProps = React.PropsWithChildren<{
-  title: React.ReactElement | string;
-  icon?: React.ReactElement;
-  badge?: React.ReactElement;
-  defaultOpen?: boolean;
-  toggleable?: boolean;
-  scrollOnOpen?: boolean;
-  onCloseCallback?: () => void;
-}>;
+type AccordionItemProps = Omit<PropsOfComponent<typeof Col>, 'title'> &
+  React.PropsWithChildren<{
+    title: React.ReactElement | string;
+    icon?: React.ReactElement;
+    badge?: React.ReactElement;
+    defaultOpen?: boolean;
+    toggleable?: boolean;
+    scrollOnOpen?: boolean;
+    onCloseCallback?: () => void;
+  }>;
 
 export const AccordionItem = (props: AccordionItemProps) => {
   const {
@@ -25,6 +27,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
     scrollOnOpen = false,
     badge,
     onCloseCallback = null,
+    ...rest
   } = props;
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -52,10 +55,10 @@ export const AccordionItem = (props: AccordionItemProps) => {
     }
 
     return () => cancelAnimationFrame(requestRef);
-  }, [isOpen]);
+  }, [isOpen, scrollOnOpen]);
 
   return (
-    <Col>
+    <Col {...rest}>
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'

packages/types/src/appearance.ts

@@ -399,6 +399,8 @@ export type ElementsConfig = {
   page: WithOptions;
   pageHeader: WithOptions;
 
+  activeDevice: WithOptions<'current'>;
+  activeDeviceListItem: WithOptions<'current'>;
   activeDeviceIcon: WithOptions<'mobile' | 'desktop'>;
 
   impersonationFab: WithOptions;