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..a91891deed 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', + + 'paginationPageButton', + 'paginationInfoText', + '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..767eab1d03 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.paginationPageButton} {...rest} /> ); @@ -52,32 +53,27 @@ const RowInformation = (props: RowInfoProps) => { } = props; return ( - + ({ - color: t.colors.$blackAlpha700, - })} + colorScheme='inherit' localizationKey={localizationKeys('paginationRowText__displaying')} />{' '} ({ fontWeight: t.fontWeights.$medium })} > {startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`} {' '} ({ - color: t.colors.$blackAlpha700, - })} + colorScheme='inherit' localizationKey={localizationKeys('paginationRowText__of')} />{' '} ({ - color: t.colors.$blackAlpha700, - })} + colorScheme='inherit' > {allRowsCount} diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index a06b59352d..8fb69f4bc8 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; + + paginationPageButton: WithOptions; + paginationInfoText: WithOptions; + selectButton: WithOptions; selectSearchInput: WithOptions; selectButtonIcon: WithOptions;