feat(clerk-js,types): Add appearance keys for pagination and table he…

…ad (#1803) * feat(clerk-js,types): Add appearence keys for pagination and table head * chore(clerk-js,types): Update names of descriptors * fix(themes): Converted CreateClerkThemeParams to an interface to avoid too complex union type errors * chore(repo): Adds Changeset * chore(repo): Update Changeset * feat(clerk-js): Improve the customization of paginationRowText
clerk · Oct 17, 2023 · 35be870 · 35be870
1 parent 8000e3a
commit 35be870
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 13 deletions.
diff --git a/.changeset/clean-bears-fold.md 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
@@ -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) => {
             <Tr>
               {headers.map((h, index) => (
                 <Th
+                  elementDescriptor={descriptors.tableHead}
                   key={index}
                   localizationKey={h}
                 />

diff --git 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
@@ -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<typeof Button> & { isActive?: boolea
         },
         sx,
       ]}
+      elementDescriptor={descriptors.paginationButton}
       {...rest}
     />
   );
@@ -55,29 +56,30 @@ const RowInformation = (props: RowInfoProps) => {
     <Text>
       <Text
         as='span'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-        })}
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('displaying')}
+        sx={t => ({ opacity: t.opacity.$inactive })}
         localizationKey={localizationKeys('paginationRowText__displaying')}
       />{' '}
       <Text
         as='span'
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('rowsCount')}
         sx={t => ({ fontWeight: t.fontWeights.$medium })}
       >
         {startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`}
       </Text>{' '}
       <Text
         as='span'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-        })}
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('displaying')}
+        sx={t => ({ opacity: t.opacity.$inactive })}
         localizationKey={localizationKeys('paginationRowText__of')}
       />{' '}
       <Text
         as='span'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-        })}
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('allRowsCount')}
       >
         {allRowsCount}
       </Text>

diff --git 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<Theme> & {
+interface CreateClerkThemeParams extends DeepPartial<Theme> {
   /**
    * {@link Theme.elements}
    */
   elements?: Elements | ((params: { theme: InternalTheme }) => Elements);
-};
+}
 
 export const unstable_createTheme = (appearance: Appearance<CreateClerkThemeParams>): 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
@@ -344,6 +344,11 @@ export type ElementsConfig = {
   tabButton: WithOptions<never, never, never>;
   tabListContainer: WithOptions<never, never, never>;
 
+  tableHead: WithOptions<never, never, never>;
+
+  paginationButton: WithOptions<never, never, never>;
+  paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying', never, never>;
+
   selectButton: WithOptions<SelectId, never, never>;
   selectSearchInput: WithOptions<SelectId, never, never>;
   selectButtonIcon: WithOptions<SelectId, never, never>;