feat(clerk-js,types): Add appearence keys for pagination and table head

clerk · Oct 2, 2023 · 9fc4ae6 · 9fc4ae6
1 parent 68259a2
commit 9fc4ae6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
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',
+
+  '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
@@ -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.paginationPageButton}
       {...rest}
     />
   );
@@ -52,32 +53,27 @@ const RowInformation = (props: RowInfoProps) => {
   } = props;
 
   return (
-    <Text>
+    <Text elementDescriptor={descriptors.paginationInfoText}>
       <Text
         as='span'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-        })}
+        colorScheme='inherit'
         localizationKey={localizationKeys('paginationRowText__displaying')}
       />{' '}
       <Text
         as='span'
+        colorScheme='inherit'
         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,
-        })}
+        colorScheme='inherit'
         localizationKey={localizationKeys('paginationRowText__of')}
       />{' '}
       <Text
         as='span'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-        })}
+        colorScheme='inherit'
       >
         {allRowsCount}
       </Text>

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>;
+
+  paginationPageButton: WithOptions<never, never, never>;
+  paginationInfoText: WithOptions<never, never, never>;
+
   selectButton: WithOptions<SelectId, never, never>;
   selectSearchInput: WithOptions<SelectId, never, never>;
   selectButtonIcon: WithOptions<SelectId, never, never>;