diff --git a/.changeset/wise-lions-type.md b/.changeset/wise-lions-type.md new file mode 100644 index 00000000000..0b919c26ccc --- /dev/null +++ b/.changeset/wise-lions-type.md @@ -0,0 +1,9 @@ +--- +'@clerk/clerk-js': major +'@clerk/types': patch +--- + +Introducing some changes and some addition for the appearence descriptors for the organization preview in ``: +- `.cl-organizationPreview__organizationSwitcher` has been renamed to `.cl-organizationPreview__organizationSwitcherTrigger`. +- `.cl-organizationPreview__organizationSwitcherListedOrganization` was added to allow you to customize the appearance of all the listed organization previews. +- `.cl-organizationPreview__organizationSwitcherActiveOrganizationn` was added to allow you to customize the appearance of the active organization. diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index ed8b95db73c..f584cc151bb 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -141,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef {organization && ( ({ margin: `0 calc(${t.space.$3}/2)` })} organization={publicOrganizationData} size='sm' diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx index c3aa09dc32a..5d40e722668 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx @@ -94,7 +94,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => { role='menuitem' > ({ margin: `0 calc(${t.space.$3}/2)` })} organization={organization} size='sm' diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index ed8b95db73c..f584cc151bb 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -141,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef {organization && ( ({ margin: `0 calc(${t.space.$3}/2)` })} organization={publicOrganizationData} size='sm' diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx index c3aa09dc32a..5d40e722668 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx @@ -94,7 +94,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => { role='menuitem' > ({ margin: `0 calc(${t.space.$3}/2)` })} organization={organization} size='sm' diff --git a/packages/types/src/elementIds.ts b/packages/types/src/elementIds.ts index 88c52f3bef0..7b5e4cf4020 100644 --- a/packages/types/src/elementIds.ts +++ b/packages/types/src/elementIds.ts @@ -38,7 +38,11 @@ export type ProfileSectionId = export type ProfilePageId = 'account' | 'security' | 'organizationSettings' | 'organizationMembers'; export type UserPreviewId = 'userButton' | 'personalWorkspace'; -export type OrganizationPreviewId = 'organizationSwitcher' | 'organizationList'; +export type OrganizationPreviewId = + | 'organizationSwitcherTrigger' + | 'organizationList' + | 'organizationSwitcherListedOrganization' + | 'organizationSwitcherActiveOrganization'; export type FooterActionId = 'havingTrouble' | 'alternativeMethods' | 'signUp' | 'signIn';