From 35be8709d88f1d1eef043acdba4d49b07578c7b2 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <vaggelisyfantis@gmail.com>
Date: Tue, 17 Oct 2023 12:10:59 +0300
Subject: [PATCH] feat(clerk-js,types): Add appearance keys for pagination and
 table head (#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
---
 .changeset/clean-bears-fold.md                | 11 ++++++++++
 .../OrganizationProfile/MemberListTable.tsx   | 16 +++++++++++++-
 .../ui/customizables/elementDescriptors.ts    |  5 +++++
 .../clerk-js/src/ui/elements/Pagination.tsx   | 22 ++++++++++---------
 packages/themes/src/createTheme.ts            |  4 ++--
 packages/types/src/appearance.ts              |  5 +++++
 6 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/clean-bears-fold.md

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) => {
             <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
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<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
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<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
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<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>;