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;