Merge branch 'main' into elef/bill-1264-rename-descriptors

panteliselef · panteliselef · commit e439be32f59c · 2025-10-09T15:40:57.000+03:00
# Conflicts:
#	packages/types/src/billing.ts
diff --git a/.changeset/huge-feet-enter.md b/.changeset/huge-feet-enter.md
@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+---
+
+- Update checkbox checked background color and icon
+- Increase role select options contrast
+- Updates user preview subtitle text variant
diff --git a/.github/workflows/semgrep.yml b/.github/workflows/semgrep.yml
diff --git a/.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap b/.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap
@@ -86,7 +86,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "types/jwt-header.mdx",
   "types/legacy-redirect-props.mdx",
   "types/localization-resource.mdx",
-  "types/make-default-payment-source-params.mdx",
+  "types/make-default-payment-method-params.mdx",
   "types/multi-domain-and-or-proxy.mdx",
   "types/organization-custom-role-key.mdx",
   "types/organization-domain-resource.mdx",
@@ -109,7 +109,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "types/protect-props.mdx",
   "types/record-to-path.mdx",
   "types/redirect-options.mdx",
-  "types/remove-payment-source-params.mdx",
+  "types/remove-payment-method-params.mdx",
   "types/reverification-config.mdx",
   "types/saml-strategy.mdx",
   "types/sdk-metadata.mdx",
diff --git a/packages/clerk-js/src/ui/baseTheme.ts b/packages/clerk-js/src/ui/baseTheme.ts
@@ -191,13 +191,13 @@ const clerkTheme: Appearance = {
         appearance: 'none',
         borderRadius: theme.radii.$sm,
         border: 'none',
+        backgroundSize: `${theme.sizes.$2} ${theme.sizes.$2}`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
         '&:checked': {
-          backgroundImage: `url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 8L6.5 9.75L9.75 4.25' stroke='${theme.colors.$whiteAlpha900}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E")`,
+          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='${theme.colors.$white}' fill-rule='evenodd' d='M7.712.233a.889.889 0 0 1 .055 1.256C6.742 2.61 6.249 3.291 5.508 4.615c-.279.5-.589 1.194-.835 1.784a36.761 36.761 0 0 0-.382.95l-.021.057-.006.014-.001.003a.89.89 0 0 1-1.504.27L.218 4.765A.889.889 0 1 1 1.56 3.6l1.591 1.834c.235-.548.524-1.181.806-1.685.807-1.445 1.38-2.239 2.499-3.46A.889.889 0 0 1 7.712.234Z' clip-rule='evenodd'/%3E%3C/svg%3E")`,
           borderColor: theme.colors.$transparent,
-          backgroundColor: theme.colors.$primary900,
-          backgroundSize: '100% 100%',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
+          backgroundColor: theme.colors.$primary500,
         },
       },
       tagInputContainer: {
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -89,6 +89,7 @@ const MemberRow = (props: {
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
           subtitle={membership.publicUserData?.identifier}
+          subtitleProps={{ variant: 'caption' }}
           badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
@@ -80,6 +80,7 @@ const InvitationRow = (props: {
         <UserPreview
           sx={{ maxWidth: '30ch' }}
           user={{ primaryEmailAddress: { emailAddress: invitation.emailAddress } } as any}
+          subtitleProps={{ variant: 'caption' }}
         />
       </Td>
       <Td>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -20,7 +20,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
-import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
+import { common, type PropsOfComponent, type ThemableCssProp } from '../../styledSystem';
 
 type MembersListTableProps = {
   headers: LocalizationKey[];
@@ -174,10 +174,10 @@ export const RoleSelect = (props: {
           option={option}
           sx={theme => ({
             '&:hover': {
-              backgroundColor: theme.colors.$neutralAlpha100,
+              background: common.mutedBackground(theme),
             },
             '&[data-focused="true"]': {
-              backgroundColor: theme.colors.$neutralAlpha150,
+              background: common.mutedBackground(theme),
             },
           })}
         />
@@ -255,7 +255,7 @@ const RolesListItem = memo((props: RolesListItemProps) => {
       ]}
       {...rest}
     >
-      <Text colorScheme='secondary'>{option?.label}</Text>
+      <Text variant='subtitle'>{option?.label}</Text>
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -84,6 +84,7 @@ const RequestRow = withCardStateProvider(
             sx={{ maxWidth: '30ch' }}
             showAvatar={false}
             user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
+            subtitleProps={{ variant: 'caption' }}
           />
         </Td>
         <Td>
diff --git a/packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx b/packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
@@ -68,7 +68,7 @@ describe('PricingTable - trial info', () => {
           id: 'si_1',
           plan: trialPlan,
           createdAt: new Date('2021-01-01'),
-          paymentSourceId: 'src_1',
+          paymentMethodId: 'src_1',
           pastDueAt: null,
           canceledAt: null,
           periodStart: new Date('2021-01-01'),
@@ -213,7 +213,7 @@ describe('PricingTable - trial info', () => {
           id: 'si_1',
           plan: nonTrialPlan,
           createdAt: new Date('2021-01-01'),
-          paymentSourceId: 'src_1',
+          paymentMethodId: 'src_1',
           pastDueAt: null,
           canceledAt: null,
           periodStart: new Date('2021-02-01'),
@@ -332,7 +332,7 @@ describe('PricingTable - plans visibility', () => {
           id: 'si_active',
           plan: testPlan,
           createdAt: new Date('2021-01-01'),
-          paymentSourceId: 'src_1',
+          paymentMethodId: 'src_1',
           pastDueAt: null,
           canceledAt: null,
           periodStart: new Date('2021-01-01'),
@@ -458,7 +458,7 @@ describe('PricingTable - plans visibility', () => {
           id: 'si_active',
           plan: testPlan,
           createdAt: new Date('2021-01-01'),
-          paymentSourceId: 'src_1',
+          paymentMethodId: 'src_1',
           pastDueAt: null,
           canceledAt: null,
           periodStart: new Date('2021-01-01'),
diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts
@@ -30,7 +30,7 @@ const makeSub = (overrides: Partial<BillingSubscriptionItemResource>): BillingSu
   planPeriod: 'month',
   status: 'active',
   createdAt: new Date('2021-01-01'),
-  paymentSourceId: 'src_1',
+  paymentMethodId: 'src_1',
   pastDueAt: null,
   periodStart: new Date('2021-01-01'),
   periodEnd: new Date('2021-01-31'),
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
@@ -85,7 +85,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month',
           status: 'active',
         },
@@ -189,7 +189,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2022-01-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'annual' as const,
           status: 'active' as const,
         },
@@ -285,7 +285,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month' as const,
           status: 'active' as const,
         },
@@ -414,7 +414,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2022-01-01'),
           canceledAt: new Date('2021-04-01'),
-          paymentSourceId: 'src_annual',
+          paymentMethodId: 'src_annual',
           planPeriod: 'annual' as const,
           status: 'active' as const,
         },
@@ -425,7 +425,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2022-02-01'),
           periodEnd: new Date('2022-03-01'),
           canceledAt: null,
-          paymentSourceId: 'src_monthly',
+          paymentMethodId: 'src_monthly',
           planPeriod: 'month' as const,
           status: 'upcoming' as const,
         },
@@ -568,7 +568,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: new Date('2021-01-03'),
-          paymentSourceId: 'src_free_active',
+          paymentMethodId: 'src_free_active',
           planPeriod: 'month' as const,
           status: 'active' as const,
         },
@@ -578,7 +578,7 @@ describe('SubscriptionDetails', () => {
           createdAt: new Date('2021-01-03'),
           periodStart: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_free_upcoming',
+          paymentMethodId: 'src_free_upcoming',
           planPeriod: 'month' as const,
           status: 'upcoming' as const,
         },
@@ -675,7 +675,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month' as const,
           status: 'active' as const,
           cancel: cancelSubscriptionMock,
@@ -774,7 +774,7 @@ describe('SubscriptionDetails', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2022-01-01'),
       canceledAt: new Date('2021-04-01'),
-      paymentSourceId: 'src_annual',
+      paymentMethodId: 'src_annual',
       planPeriod: 'annual' as const,
       status: 'active' as const,
       cancel: vi.fn(),
@@ -875,7 +875,7 @@ describe('SubscriptionDetails', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2022-01-01'),
       canceledAt: null,
-      paymentSourceId: 'src_annual',
+      paymentMethodId: 'src_annual',
       planPeriod: 'annual' as const,
       status: 'active' as const,
       cancel: vi.fn(),
@@ -993,7 +993,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month' as const,
           status: 'past_due' as const,
           pastDueAt: new Date('2021-01-15'),
@@ -1077,7 +1077,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month',
           status: 'active',
           isFreeTrial: true,
@@ -1188,7 +1188,7 @@ describe('SubscriptionDetails', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-02-01'),
           canceledAt: null,
-          paymentSourceId: 'src_123',
+          paymentMethodId: 'src_123',
           planPeriod: 'month',
           status: 'active',
           isFreeTrial: true,
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx b/packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
@@ -91,7 +91,7 @@ describe('SubscriptionsList', () => {
           periodStart: new Date('2021-01-01'),
           periodEnd: new Date('2021-01-15'),
           canceledAt: null,
-          paymentSourceId: 'src_free',
+          paymentMethodId: 'src_free',
           planPeriod: 'month' as const,
           isFreeTrial: false,
           pastDueAt: null,
@@ -156,7 +156,7 @@ describe('SubscriptionsList', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2021-01-15'),
       canceledAt: null,
-      paymentSourceId: 'src_trial',
+      paymentMethodId: 'src_trial',
       planPeriod: 'month' as const,
       status: 'active' as const,
       isFreeTrial: true, // This subscription is in a free trial
@@ -220,7 +220,7 @@ describe('SubscriptionsList', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2021-02-01'),
       canceledAt: null,
-      paymentSourceId: 'src_past_due',
+      paymentMethodId: 'src_past_due',
       planPeriod: 'month' as const,
       status: 'past_due' as const,
       isFreeTrial: false,
@@ -285,7 +285,7 @@ describe('SubscriptionsList', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2021-02-01'),
       canceledAt: null,
-      paymentSourceId: 'src_active',
+      paymentMethodId: 'src_active',
       planPeriod: 'month' as const,
       status: 'active' as const,
       isFreeTrial: false,
@@ -349,7 +349,7 @@ describe('SubscriptionsList', () => {
       periodStart: new Date('2021-02-01'),
       periodEnd: new Date('2021-03-01'),
       canceledAt: null,
-      paymentSourceId: 'src_upcoming',
+      paymentMethodId: 'src_upcoming',
       planPeriod: 'month' as const,
       status: 'upcoming' as const,
       isFreeTrial: false,
@@ -385,7 +385,7 @@ describe('SubscriptionsList', () => {
       periodStart: new Date('2021-01-01'),
       periodEnd: new Date('2021-02-01'),
       canceledAt: new Date('2021-01-15'),
-      paymentSourceId: 'src_active_canceled',
+      paymentMethodId: 'src_active_canceled',
       planPeriod: 'month' as const,
       status: 'active' as const,
       isFreeTrial: false,
diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -25,6 +25,7 @@ export type UserPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'title' | 'el
   mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
   title?: LocalizationKey | string;
   subtitle?: LocalizationKey | string;
+  subtitleProps?: PropsOfComponent<typeof Text>;
   showAvatar?: boolean;
 } & (
     | {
@@ -63,6 +64,7 @@ export const UserPreview = (props: UserPreviewProps) => {
     avatarSx,
     mainIdentifierSx,
     mainIdentifierVariant,
+    subtitleProps,
     ...rest
   } = props;
   const { t } = useLocalizations();
@@ -171,6 +173,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             as='span'
             localizationKey={subtitle || identifier}
             colorScheme='secondary'
+            {...subtitleProps}
           />
         )}
       </Flex>
diff --git a/packages/types/src/billing.ts b/packages/types/src/billing.ts
@@ -270,7 +270,7 @@ export type RemovePaymentMethodParams = WithOptionalOrgType<unknown>;
 export type MakeDefaultPaymentMethodParams = WithOptionalOrgType<unknown>;
 
 /**
- * The `BillingPaymentMethodResource` type represents a payment source for a checkout session.
+ * The `BillingPaymentMethodResource` type represents a payment method for a checkout session.
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
