From e004034678013b756a897941b266db6f945d8afd Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 17:20:29 -0400
Subject: [PATCH 1/6] init

---
 .../ui/components/PricingTable/PlanCard.tsx   | 63 ++++++++++++++-----
 .../PricingTable/PlanDetailDrawer.tsx         |  5 +-
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index e6e980b021b..18cc455c9db 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -341,10 +341,11 @@ export const PlanCardHeader = React.forwardRef<HTMLDivElement, PlanCardHeaderPro
 interface PlanCardFeaturesListProps {
   plan: __experimental_CommercePlanResource;
   isCompact?: boolean;
+  variant?: 'checkmark' | 'avatar';
 }
 
 export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFeaturesListProps>((props, ref) => {
-  const { plan, isCompact } = props;
+  const { plan, isCompact, variant = 'checkmark' } = props;
   const totalFeatures = plan.features.length;
   const [showAllFeatures, setShowAllFeatures] = React.useState(false);
   const canToggleFeatures = isCompact && totalFeatures > 3;
@@ -354,10 +355,7 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
   return (
     <Box
       ref={ref}
-      elementDescriptor={descriptors.planCardFeaturesList}
-      elementId={isCompact ? descriptors.planCardFeaturesList.setId('compact') : undefined}
-      as='ul'
-      role='list'
+      elementDescriptor={descriptors.planCardFeaturesListRoot}
       sx={t => ({
         display: 'grid',
         flex: '1',
@@ -366,12 +364,13 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
     >
       <Box
         elementDescriptor={descriptors.planCardFeaturesList}
+        elementId={isCompact ? descriptors.planCardFeaturesList.setId('compact') : undefined}
         as='ul'
         role='list'
         sx={t => ({
           display: 'grid',
           flex: '1',
-          rowGap: isCompact ? t.space.$2 : t.space.$3,
+          rowGap: variant === 'avatar' ? t.space.$6 : isCompact ? t.space.$2 : t.space.$3,
         })}
       >
         {plan.features.slice(0, showAllFeatures ? totalFeatures : 3).map(feature => (
@@ -383,19 +382,49 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
             sx={t => ({
               display: 'flex',
               alignItems: 'baseline',
-              gap: t.space.$2,
+              gap: variant === 'checkmark' ? t.space.$2 : t.space.$3,
             })}
           >
-            <Icon
-              icon={Check}
-              colorScheme='neutral'
-              size='sm'
-              aria-hidden
-              sx={t => ({
-                transform: `translateY(${t.space.$0x25})`,
-              })}
-            />
-            <Text colorScheme='body'>{feature.description || feature.name}</Text>
+            {variant === 'checkmark' ? (
+              <Icon
+                icon={Check}
+                colorScheme='neutral'
+                size='sm'
+                aria-hidden
+                sx={t => ({
+                  transform: `translateY(${t.space.$0x25})`,
+                })}
+              />
+            ) : feature.avatarUrl ? (
+              <Avatar
+                size={_ => 24}
+                title={feature.name}
+                initials={feature.name[0]}
+                rounded={false}
+                imageUrl={feature.avatarUrl}
+              />
+            ) : null}
+            <Span>
+              <Text
+                colorScheme='body'
+                sx={t => ({
+                  fontWeight: variant === 'checkmark' ? t.fontWeights.$normal : t.fontWeights.$medium,
+                })}
+              >
+                {feature.name}
+              </Text>
+              {variant === 'avatar' && feature.description ? (
+                <Text
+                  colorScheme='secondary'
+                  sx={t => ({
+                    marginBlockStart: t.space.$0x25,
+                    fontSize: t.fontSizes.$xs,
+                  })}
+                >
+                  {feature.description}
+                </Text>
+              ) : null}
+            </Span>
           </Box>
         ))}
       </Box>
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx
index 258c7c7eb57..fb661bae89d 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx
@@ -82,7 +82,10 @@ export function PlanDetailDrawer({
                 padding: t.space.$4,
               })}
             >
-              <PlanCardFeaturesList plan={plan} />
+              <PlanCardFeaturesList
+                plan={plan}
+                variant='avatar'
+              />
             </Box>
           </Drawer.Body>
         ) : null}

From e56fe2f419056b0efaf004907275955ca944096b Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 17:21:34 -0400
Subject: [PATCH 2/6] descriptor

---
 packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 18cc455c9db..2795751c4c1 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -355,7 +355,7 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
   return (
     <Box
       ref={ref}
-      elementDescriptor={descriptors.planCardFeaturesListRoot}
+      elementDescriptor={descriptors.planCardFeatures}
       sx={t => ({
         display: 'grid',
         flex: '1',

From fd6a44cd3bb5a089cee31b64b9f2f383dfa659bf Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 18:04:57 -0400
Subject: [PATCH 3/6] wip

---
 .../src/ui/components/PricingTable/PlanCard.tsx    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 2795751c4c1..46ef2980ecd 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -340,7 +340,13 @@ export const PlanCardHeader = React.forwardRef<HTMLDivElement, PlanCardHeaderPro
 
 interface PlanCardFeaturesListProps {
   plan: __experimental_CommercePlanResource;
+  /**
+   * @default false
+   */
   isCompact?: boolean;
+  /**
+   * @default `checkmark`
+   */
   variant?: 'checkmark' | 'avatar';
 }
 
@@ -364,13 +370,17 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
     >
       <Box
         elementDescriptor={descriptors.planCardFeaturesList}
-        elementId={isCompact ? descriptors.planCardFeaturesList.setId('compact') : undefined}
+        elementId={
+          isCompact
+            ? descriptors.planCardFeaturesList.setId('compact')
+            : descriptors.planCardFeaturesList.setId(variant)
+        }
         as='ul'
         role='list'
         sx={t => ({
           display: 'grid',
           flex: '1',
-          rowGap: variant === 'avatar' ? t.space.$6 : isCompact ? t.space.$2 : t.space.$3,
+          rowGap: variant === 'avatar' ? t.space.$4 : isCompact ? t.space.$2 : t.space.$3,
         })}
       >
         {plan.features.slice(0, showAllFeatures ? totalFeatures : 3).map(feature => (

From 1637e7f72edd580d2a2a3191166aba2fdb5e14a9 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 18:08:27 -0400
Subject: [PATCH 4/6] add changeset

---
 .changeset/violet-schools-repair.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/violet-schools-repair.md

diff --git a/.changeset/violet-schools-repair.md b/.changeset/violet-schools-repair.md
new file mode 100644
index 00000000000..4d180c3fa12
--- /dev/null
+++ b/.changeset/violet-schools-repair.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Introduce `<PlanCardFeaturesList/>` variants to render the avatar and description fields within `<PlanDetailsDrawer />`.

From c01c0a2ea3bac009b805b2203615b6fc9c0be73c Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 18:13:56 -0400
Subject: [PATCH 5/6] descriptors

---
 packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx | 2 ++
 packages/clerk-js/src/ui/customizables/elementDescriptors.ts  | 2 ++
 packages/types/src/appearance.ts                              | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 46ef2980ecd..8629c68acec 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -416,6 +416,7 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
             ) : null}
             <Span>
               <Text
+                elementDescriptor={descriptors.planCardFeaturesListItemTitle}
                 colorScheme='body'
                 sx={t => ({
                   fontWeight: variant === 'checkmark' ? t.fontWeights.$normal : t.fontWeights.$medium,
@@ -425,6 +426,7 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
               </Text>
               {variant === 'avatar' && feature.description ? (
                 <Text
+                  elementDescriptor={descriptors.planCardFeaturesListItemDescription}
                   colorScheme='secondary'
                   sx={t => ({
                     marginBlockStart: t.space.$0x25,
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 529457b7db0..683cf1e8130 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -239,6 +239,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'planCardFeatures',
   'planCardFeaturesList',
   'planCardFeaturesListItem',
+  'planCardFeaturesListItemTitle',
+  'planCardFeaturesListItemDescription',
   'planCardAction',
   'planCardPeriodToggle',
   'planCardFeeContainer',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 3802a0b1b03..2f8e87ff709 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -367,6 +367,8 @@ export type ElementsConfig = {
   planCardFeatures: WithOptions;
   planCardFeaturesList: WithOptions<string>;
   planCardFeaturesListItem: WithOptions<string>;
+  planCardFeaturesListItemTitle: WithOptions;
+  planCardFeaturesListItemDescription: WithOptions;
   planCardAction: WithOptions;
   planCardPeriodToggle: WithOptions;
   planCardFeeContainer: WithOptions;

From e880ba3ec100a487e0284d8f34b7e5974f25a106 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 19:47:05 -0400
Subject: [PATCH 6/6] descriptor

---
 packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx | 2 +-
 packages/clerk-js/src/ui/customizables/elementDescriptors.ts  | 1 +
 packages/types/src/appearance.ts                              | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 8629c68acec..691c52b4742 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -414,7 +414,7 @@ export const PlanCardFeaturesList = React.forwardRef<HTMLDivElement, PlanCardFea
                 imageUrl={feature.avatarUrl}
               />
             ) : null}
-            <Span>
+            <Span elementDescriptor={descriptors.planCardFeaturesListItemContent}>
               <Text
                 elementDescriptor={descriptors.planCardFeaturesListItemTitle}
                 colorScheme='body'
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 683cf1e8130..aaf612f7781 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -239,6 +239,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'planCardFeatures',
   'planCardFeaturesList',
   'planCardFeaturesListItem',
+  'planCardFeaturesListItemContent',
   'planCardFeaturesListItemTitle',
   'planCardFeaturesListItemDescription',
   'planCardAction',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 2f8e87ff709..ab917078729 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -367,6 +367,7 @@ export type ElementsConfig = {
   planCardFeatures: WithOptions;
   planCardFeaturesList: WithOptions<string>;
   planCardFeaturesListItem: WithOptions<string>;
+  planCardFeaturesListItemContent: WithOptions;
   planCardFeaturesListItemTitle: WithOptions;
   planCardFeaturesListItemDescription: WithOptions;
   planCardAction: WithOptions;