diff --git a/.changeset/clean-bears-fold.md b/.changeset/clean-bears-fold.md
new file mode 100644
index 0000000000..50d1e2c21c
--- /dev/null
+++ b/.changeset/clean-bears-fold.md
@@ -0,0 +1,11 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/themes': patch
+'@clerk/types': minor
+---
+
+Introduces three new element appearence descriptors:
+
+- `tableHead` let's you customize the tables head styles.
+- `paginationButton` let's you customize the pagination buttons.
+- `paginationRowText` let's you customize the pagination text.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
index 43a5b19e2f..5e4fbcf820 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -2,7 +2,20 @@ import type { MembershipRole } from '@clerk/types';
import React from 'react';
import type { LocalizationKey } from '../../customizables';
-import { Col, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr, useLocalizations } from '../../customizables';
+import {
+ Col,
+ descriptors,
+ Flex,
+ Spinner,
+ Table,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
+ useLocalizations,
+} from '../../customizables';
import { Pagination, Select, SelectButton, SelectOptionList } from '../../elements';
import type { PropsOfComponent } from '../../styledSystem';
import { roleLocalizationKey } from '../../utils';
@@ -54,6 +67,7 @@ export const DataTable = (props: MembersListTableProps) => {
{headers.map((h, index) => (
|
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 675216aa3f..2a98c8463e 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -190,6 +190,11 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
'tabButton',
'tabListContainer',
+ 'tableHead',
+
+ 'paginationButton',
+ 'paginationRowText',
+
'selectButton',
'selectSearchInput',
'selectButtonIcon',
diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx
index 391a06b3f9..81a358cbbd 100644
--- a/packages/clerk-js/src/ui/elements/Pagination.tsx
+++ b/packages/clerk-js/src/ui/elements/Pagination.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
-import { Button, Flex, localizationKeys, Text } from '../customizables';
+import { Button, descriptors, Flex, localizationKeys, Text } from '../customizables';
import type { PropsOfComponent } from '../styledSystem';
import { mqu } from '../styledSystem';
import { range } from '../utils';
@@ -31,6 +31,7 @@ const PageButton = (props: PropsOfComponent & { isActive?: boolea
},
sx,
]}
+ elementDescriptor={descriptors.paginationButton}
{...rest}
/>
);
@@ -55,29 +56,30 @@ const RowInformation = (props: RowInfoProps) => {
({
- color: t.colors.$blackAlpha700,
- })}
+ elementDescriptor={descriptors.paginationRowText}
+ elementId={descriptors.paginationRowText?.setId('displaying')}
+ sx={t => ({ opacity: t.opacity.$inactive })}
localizationKey={localizationKeys('paginationRowText__displaying')}
/>{' '}
({ fontWeight: t.fontWeights.$medium })}
>
{startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`}
{' '}
({
- color: t.colors.$blackAlpha700,
- })}
+ elementDescriptor={descriptors.paginationRowText}
+ elementId={descriptors.paginationRowText?.setId('displaying')}
+ sx={t => ({ opacity: t.opacity.$inactive })}
localizationKey={localizationKeys('paginationRowText__of')}
/>{' '}
({
- color: t.colors.$blackAlpha700,
- })}
+ elementDescriptor={descriptors.paginationRowText}
+ elementId={descriptors.paginationRowText?.setId('allRowsCount')}
>
{allRowsCount}
diff --git a/packages/themes/src/createTheme.ts b/packages/themes/src/createTheme.ts
index 7eb78953bf..916eaf7124 100644
--- a/packages/themes/src/createTheme.ts
+++ b/packages/themes/src/createTheme.ts
@@ -4,12 +4,12 @@ import type { Appearance, BaseTheme, DeepPartial, Elements, Theme } from '@clerk
import type { InternalTheme } from '../../clerk-js/src/ui/foundations';
-type CreateClerkThemeParams = DeepPartial & {
+interface CreateClerkThemeParams extends DeepPartial {
/**
* {@link Theme.elements}
*/
elements?: Elements | ((params: { theme: InternalTheme }) => Elements);
-};
+}
export const unstable_createTheme = (appearance: Appearance): BaseTheme => {
// Placeholder method that might hande more transformations in the future
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index a06b59352d..657cd1cb4f 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -344,6 +344,11 @@ export type ElementsConfig = {
tabButton: WithOptions;
tabListContainer: WithOptions;
+ tableHead: WithOptions;
+
+ paginationButton: WithOptions;
+ paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying', never, never>;
+
selectButton: WithOptions;
selectSearchInput: WithOptions;
selectButtonIcon: WithOptions;