From a2ece4174dcef55faabbea03b6ab14ac8b41db06 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 29 Sep 2023 19:07:05 +0300 Subject: [PATCH 1/6] feat(clerk-js,types): Add appearence keys for pagination and table head --- .../OrganizationProfile/MemberListTable.tsx | 16 +++++++++++++++- .../src/ui/customizables/elementDescriptors.ts | 5 +++++ .../clerk-js/src/ui/elements/Pagination.tsx | 18 +++++++----------- packages/types/src/appearance.ts | 5 +++++ 4 files changed, 32 insertions(+), 12 deletions(-) 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; From 6b8daa27a8a43f7616863b86fe5192dd56a374bb Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 2 Oct 2023 11:55:28 +0300 Subject: [PATCH 2/6] chore(clerk-js,types): Update names of descriptors --- packages/clerk-js/src/ui/customizables/elementDescriptors.ts | 4 ++-- packages/clerk-js/src/ui/elements/Pagination.tsx | 4 ++-- packages/types/src/appearance.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index a91891deed..2a98c8463e 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -192,8 +192,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'tableHead', - 'paginationPageButton', - 'paginationInfoText', + 'paginationButton', + 'paginationRowText', 'selectButton', 'selectSearchInput', diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx index 767eab1d03..39b5dd8609 100644 --- a/packages/clerk-js/src/ui/elements/Pagination.tsx +++ b/packages/clerk-js/src/ui/elements/Pagination.tsx @@ -31,7 +31,7 @@ const PageButton = (props: PropsOfComponent & { isActive?: boolea }, sx, ]} - elementDescriptor={descriptors.paginationPageButton} + elementDescriptor={descriptors.paginationButton} {...rest} /> ); @@ -53,7 +53,7 @@ const RowInformation = (props: RowInfoProps) => { } = props; return ( - + ; - paginationPageButton: WithOptions; - paginationInfoText: WithOptions; + paginationButton: WithOptions; + paginationRowText: WithOptions; selectButton: WithOptions; selectSearchInput: WithOptions; From 5802690ce2ce20096f88a25ebe5cacb56e7a2450 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Wed, 11 Oct 2023 11:48:42 +0300 Subject: [PATCH 3/6] fix(themes): Converted CreateClerkThemeParams to an interface to avoid too complex union type errors --- packages/themes/src/createTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 From b1d3d9eb0aa8464c8a999f56183e0e110edd3859 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 12 Oct 2023 11:41:04 +0300 Subject: [PATCH 4/6] chore(repo): Adds Changeset --- .changeset/clean-bears-fold.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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..547e8980c7 --- /dev/null +++ b/.changeset/clean-bears-fold.md @@ -0,0 +1,11 @@ +--- +'@clerk/clerk-js': minor +'@clerk/themes': minor +'@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. From 5b51cc87e79554c8b70c8fdc1ac60a395d0b1905 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 12 Oct 2023 11:48:34 +0300 Subject: [PATCH 5/6] chore(repo): Update Changeset --- .changeset/clean-bears-fold.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clean-bears-fold.md b/.changeset/clean-bears-fold.md index 547e8980c7..50d1e2c21c 100644 --- a/.changeset/clean-bears-fold.md +++ b/.changeset/clean-bears-fold.md @@ -1,6 +1,6 @@ --- '@clerk/clerk-js': minor -'@clerk/themes': minor +'@clerk/themes': patch '@clerk/types': minor --- From 8dc7d8162d32abfbe596e71eb218fd3e8135be76 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Mon, 16 Oct 2023 13:21:16 +0300 Subject: [PATCH 6/6] feat(clerk-js): Improve the customization of paginationRowText --- packages/clerk-js/src/ui/elements/Pagination.tsx | 16 +++++++++++----- packages/types/src/appearance.ts | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx index 39b5dd8609..81a358cbbd 100644 --- a/packages/clerk-js/src/ui/elements/Pagination.tsx +++ b/packages/clerk-js/src/ui/elements/Pagination.tsx @@ -53,27 +53,33 @@ const RowInformation = (props: RowInfoProps) => { } = props; return ( - + ({ opacity: t.opacity.$inactive })} localizationKey={localizationKeys('paginationRowText__displaying')} />{' '} ({ fontWeight: t.fontWeights.$medium })} > {startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`} {' '} ({ opacity: t.opacity.$inactive })} localizationKey={localizationKeys('paginationRowText__of')} />{' '} {allRowsCount} diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 427b14cf5e..657cd1cb4f 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -347,7 +347,7 @@ export type ElementsConfig = { tableHead: WithOptions; paginationButton: WithOptions; - paginationRowText: WithOptions; + paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying', never, never>; selectButton: WithOptions; selectSearchInput: WithOptions;