diff --git a/.changeset/warm-candles-thank.md b/.changeset/warm-candles-thank.md new file mode 100644 index 00000000000..3176272b1db --- /dev/null +++ b/.changeset/warm-candles-thank.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': minor +'@clerk/types': minor +--- + +Add descriptor for formatted dates in tables. Those elements can be identified by the `cl-formattedDate__tableCell` css class. diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx index f14d2660945..18a935a3dd6 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx @@ -2,7 +2,7 @@ import { useOrganization, useUser } from '@clerk/shared/react'; import type { OrganizationMembershipResource } from '@clerk/types'; import { Protect } from '../../common/Gate'; -import { Badge, localizationKeys, Td, Text } from '../../customizables'; +import { Badge, Box, descriptors, localizationKeys, Td, Text } from '../../customizables'; import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements'; import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles'; import { handleError } from '../../utils'; @@ -91,7 +91,15 @@ const MemberRow = (props: { badge={isCurrentUser && } /> - {membership.createdAt.toLocaleDateString()} + + + {membership.createdAt.toLocaleDateString()} + + - {invitation.createdAt.toLocaleDateString()} + + + {invitation.createdAt.toLocaleDateString()} + + - {request.createdAt.toLocaleDateString()} + + + {request.createdAt.toLocaleDateString()} + + diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index 64ad08c77e2..463aa036d10 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -228,6 +228,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'formattedPhoneNumberFlag', 'formattedPhoneNumberText', + 'formattedDate', + 'scrollBox', 'navbar', diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 294fdc3569d..eb44d134c9f 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -353,6 +353,8 @@ export type ElementsConfig = { formattedPhoneNumberFlag: WithOptions; formattedPhoneNumberText: WithOptions; + formattedDate: WithOptions<'tableCell'>; + scrollBox: WithOptions; navbar: WithOptions;