Skip to content

Commit 6632432

Browse files
desiprisgdesiprisg
authored
chore(clerk-js,types): Remove unused internal components, rename text color schemes (#2956)
1 parent ce0b68e commit 6632432

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+59
-354
lines changed

‎.changeset/polite-beds-juggle.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@clerk/clerk-js': minor
3+
'@clerk/types': minor
4+
---
5+
6+
Remove the unused appearance keys for accordion and breadcrumb elements.

‎packages/clerk-js/src/ui/common/CalloutWithAction.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
3636
/>
3737
<Col gap={4}>
3838
<Text
39-
colorScheme='neutral'
39+
colorScheme='secondary'
4040
sx={textSx}
4141
localizationKey={text}
4242
>

‎packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const StatusRow = (props: { status: VerificationStatus }) => {
7171
<StatusIcon status={props.status} />
7272
<Text
7373
elementDescriptor={descriptors.verificationLinkStatusText}
74-
colorScheme='neutral'
74+
colorScheme='secondary'
7575
localizationKey={localizationKeys('signIn.emailLink.unusedTab.title')}
7676
/>
7777
</>

‎packages/clerk-js/src/ui/common/RemoveResourceForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps)
3232
<Form.Root onSubmit={handleSubmit}>
3333
{messageLine2 ? (
3434
<Text
35-
colorScheme='neutral'
35+
colorScheme='secondary'
3636
localizationKey={messageLine2}
3737
/>
3838
) : null}

‎packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
7171
})}
7272
>
7373
<Text
74-
colorScheme='neutral'
74+
colorScheme='secondary'
7575
elementDescriptor={descriptors.impersonationFabTitle}
7676
variant='buttonLarge'
7777
truncate

‎packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
2727
if (props.status === 'accepted') {
2828
return (
2929
<Text
30-
colorScheme='neutral'
30+
colorScheme='secondary'
3131
localizationKey={localizationKeys('organizationList.suggestionsAcceptedLabel')}
3232
/>
3333
);

‎packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
159159
<Col>
160160
<Text
161161
localizationKey={messageLine1}
162-
colorScheme='neutral'
162+
colorScheme='secondary'
163163
/>
164164
<Text
165165
localizationKey={messageLine2}

‎packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const InvitationRow = (props: {
8282
<Td>{invitation.createdAt.toLocaleDateString()}</Td>
8383
<Td>
8484
<Text
85-
colorScheme={'neutral'}
85+
colorScheme='secondary'
8686
localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
8787
/>
8888
</Td>

‎packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const RoleSelect = (props: {
205205
{prefixLocalizationKey && (
206206
<Text
207207
as='span'
208-
colorScheme='neutral'
208+
colorScheme='secondary'
209209
localizationKey={prefixLocalizationKey}
210210
/>
211211
)}
@@ -245,7 +245,7 @@ const RolesListItem = memo((props: RolesListItemProps) => {
245245
]}
246246
{...rest}
247247
>
248-
<Text colorScheme='neutral'>{option?.label}</Text>
248+
<Text colorScheme='secondary'>{option?.label}</Text>
249249
</Flex>
250250
);
251251
});

‎packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const OrganizationDomainsSection = () => {
161161
sx={t => ({
162162
paddingLeft: t.space.$9,
163163
})}
164-
colorScheme='neutral'
164+
colorScheme='secondary'
165165
/>
166166
</Col>
167167
</Action.Trigger>

‎packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44
import { useProtect } from '../../common';
55
import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
66
import { useOrganizationProfileContext } from '../../contexts';
7-
import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
7+
import { NavBar, NavbarContextProvider } from '../../elements';
88
import { localizationKeys } from '../../localization';
99
import type { PropsOfComponent } from '../../styledSystem';
1010

@@ -41,13 +41,3 @@ export const OrganizationProfileNavbar = (
4141
</NavbarContextProvider>
4242
);
4343
};
44-
45-
export const OrganizationProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
46-
const { pages } = useOrganizationProfileContext();
47-
return (
48-
<Breadcrumbs
49-
{...props}
50-
pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
51-
/>
52-
);
53-
};

‎packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
5757
if (props.status === 'accepted') {
5858
return (
5959
<Text
60-
colorScheme='neutral'
60+
colorScheme='secondary'
6161
localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
6262
/>
6363
);

‎packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
109109
{isResettingPassword(signIn) && (
110110
<Text
111111
localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}
112-
colorScheme='neutral'
112+
colorScheme='secondary'
113113
/>
114114
)}
115115
</VerificationCodeCard>

‎packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -139,11 +139,11 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
139139
/>
140140
)}
141141
</Flex>
142-
<Text colorScheme='neutral'>{browser}</Text>
143-
<Text colorScheme='neutral'>
142+
<Text colorScheme='secondary'>{browser}</Text>
143+
<Text colorScheme='secondary'>
144144
{ipAddress} ({location})
145145
</Text>
146-
<Text colorScheme='neutral'>{t(getRelativeToNowDateKey(props.session.lastActiveAt))}</Text>
146+
<Text colorScheme='secondary'>{t(getRelativeToNowDateKey(props.session.lastActiveAt))}</Text>
147147
</Col>
148148
</Flex>
149149
);

‎packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
6666
{displayFormat == 'uri' && (
6767
<>
6868
<Text
69-
colorScheme='neutral'
69+
colorScheme='secondary'
7070
localizationKey={localizationKeys(
7171
'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan1',
7272
)}
@@ -75,7 +75,7 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
7575
<ClipboardInput value={totp.secret} />
7676

7777
<Text
78-
colorScheme='neutral'
78+
colorScheme='secondary'
7979
localizationKey={localizationKeys(
8080
'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan2',
8181
)}

‎packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
8484
<Text
8585
truncate
8686
as='span'
87-
colorScheme='neutral'
87+
colorScheme='secondary'
8888
>
8989
{label ? `• ${label}` : ''}
9090
</Text>

‎packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
4343
<Form.Root onSubmit={deleteUser}>
4444
<Col gap={1}>
4545
<Text
46-
colorScheme='neutral'
46+
colorScheme='secondary'
4747
localizationKey={localizationKeys('userProfile.deletePage.messageLine1')}
4848
/>
4949
<Text

‎packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@ export const EnterpriseAccountsSection = () => {
4545
>
4646
<Text
4747
truncate
48-
colorScheme='primary'
48+
colorScheme='body'
4949
>
5050
{providerName}
5151
</Text>
5252
<Text
5353
truncate
5454
as='span'
55-
colorScheme='neutral'
55+
colorScheme='secondary'
5656
>
5757
{label ? `• ${label}` : ''}
5858
</Text>

‎packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
3939
<Text
4040
localizationKey={subtitle}
4141
variant='caption'
42-
colorScheme='neutral'
42+
colorScheme='secondary'
4343
/>
4444
</Col>
4545
{actionLabel && (

‎packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx

-31
This file was deleted.

‎packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
5252
<Text
5353
localizationKey={subtitle}
5454
variant='caption'
55-
colorScheme='neutral'
55+
colorScheme='secondary'
5656
/>
5757
</Col>
5858
<Box

‎packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const AddMfa = (props: AddMfaProps) => {
116116
? 'userProfile.mfaPhoneCodePage.subtitle__availablePhoneNumbers'
117117
: 'userProfile.mfaPhoneCodePage.subtitle__unavailablePhoneNumbers',
118118
)}
119-
colorScheme='neutral'
119+
colorScheme='secondary'
120120
/>
121121
{availableMethods.length > 0 && (
122122
<Col gap={2}>

‎packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const AddPhone = (props: AddPhoneProps) => {
8181
>
8282
<Text
8383
localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')}
84-
colorScheme='neutral'
84+
colorScheme='secondary'
8585
/>
8686
<Form.ControlRow elementId={phoneField.id}>
8787
<Form.PhoneInput

‎packages/clerk-js/src/ui/components/UserProfile/UserProfileAccordion.tsx

-13
This file was deleted.

‎packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { useUserProfileContext } from '../../contexts';
4-
import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
4+
import { NavBar, NavbarContextProvider } from '../../elements';
55
import { localizationKeys } from '../../localization';
66
import type { PropsOfComponent } from '../../styledSystem';
77

@@ -22,13 +22,3 @@ export const UserProfileNavbar = (
2222
</NavbarContextProvider>
2323
);
2424
};
25-
26-
export const UserProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
27-
const { pages } = useUserProfileContext();
28-
return (
29-
<Breadcrumbs
30-
{...props}
31-
pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
32-
/>
33-
);
34-
};

‎packages/clerk-js/src/ui/customizables/elementDescriptors.ts

-12
Original file line numberDiff line numberDiff line change
@@ -225,13 +225,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
225225
'formattedPhoneNumberFlag',
226226
'formattedPhoneNumberText',
227227

228-
'breadcrumbs',
229-
'breadcrumbsItems',
230-
'breadcrumbsItemBox',
231-
'breadcrumbsItem',
232-
'breadcrumbsItemIcon',
233-
'breadcrumbsItemDivider',
234-
235228
'scrollBox',
236229

237230
'navbar',
@@ -258,9 +251,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
258251
'invitationsSentIconBox',
259252
'invitationsSentIcon',
260253

261-
'accordionTriggerButton',
262-
'accordionContent',
263-
264254
'qrCodeRow',
265255
'qrCodeContainer',
266256

@@ -269,8 +259,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
269259
'buttonArrowIcon',
270260
'providerIcon',
271261
'spinner',
272-
// Decide if we want to keep the keys as camel cased in HTML as well,
273-
// if yes, refactor and remove the .map(camelize) method
274262
] as const).map(camelize) as (keyof ElementsConfig)[];
275263

276264
type TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;

0 commit comments

Comments
 (0)