Skip to content

Commit

Permalink
feat(clerk-js): Add new button variants and stop using button color s…
Browse files Browse the repository at this point in the history
…cheme (#2296)
desiprisg authored Dec 8, 2023
1 parent 7bffc47 commit e98e35c
Showing 41 changed files with 104 additions and 107 deletions.
2 changes: 2 additions & 0 deletions .changeset/slow-eels-fly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@ export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps)
localizationKey={messageLine2}
variant='regularRegular'
/>
<FormButtons colorScheme={'danger'} />
<FormButtons variant='primaryDanger' />
</Form.Root>
</ContentPage>
<SuccessPage
Original file line number Diff line number Diff line change
@@ -125,7 +125,6 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
avatarPreviewPlaceholder={
<IconButton
variant='ghost'
colorScheme='secondary'
aria-label='Upload organization logo'
icon={
<Icon
Original file line number Diff line number Diff line change
@@ -206,7 +206,6 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
elementDescriptor={descriptors.button}
block
variant='secondary'
colorScheme='secondary'
textVariant='buttonExtraSmallBold'
onClick={handleCreateOrganizationClicked}
localizationKey={localizationKeys('organizationList.action__createOrganization')}
Original file line number Diff line number Diff line change
@@ -98,7 +98,6 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
elementDescriptor={descriptors.organizationListPreviewItemActionButton}
textVariant='buttonExtraSmallBold'
variant='secondary'
colorScheme='secondary'
size='sm'
{...props}
/>
Original file line number Diff line number Diff line change
@@ -90,7 +90,7 @@ type ActionConfirmationPageProps = {
successMessage: LocalizationKey;
submitLabel: LocalizationKey;
onConfirmation: () => Promise<any>;
colorScheme?: 'danger' | 'secondary' | 'primary';
variant?: 'primaryDanger' | 'primary';
};

const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
@@ -103,7 +103,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
successMessage,
submitLabel,
onConfirmation,
colorScheme = 'danger',
variant = 'primaryDanger',
} = props;
const wizard = useWizard();
const card = useCardState();
@@ -149,7 +149,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
<FormButtonContainer>
<Form.SubmitButton
block={false}
colorScheme={colorScheme}
variant={variant}
localizationKey={submitLabel}
isDisabled={!canSubmit}
/>
Original file line number Diff line number Diff line change
@@ -144,7 +144,6 @@ export const DomainList = withGate(
<ArrowBlockButton
key={d.id}
variant='ghost'
colorScheme='secondary'
badge={!verificationStatus ? <EnrollmentBadge organizationDomain={d} /> : undefined}
sx={t => ({
padding: `${t.space.$3} ${t.space.$4}`,
Original file line number Diff line number Diff line change
@@ -50,7 +50,6 @@ export const OrganizationMembersTabInvitations = () => {
<DomainList
fallback={
<BlockButton
colorScheme='primary'
textLocalizationKey={localizationKeys(
'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
)}
Original file line number Diff line number Diff line change
@@ -49,7 +49,6 @@ export const OrganizationMembersTabRequests = () => {
<DomainList
fallback={
<BlockButton
colorScheme='primary'
textLocalizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
)}
Original file line number Diff line number Diff line change
@@ -126,8 +126,7 @@ const OrganizationDangerSection = () => {
sx={t => ({ marginRight: t.space.$2 })}
/>
}
variant='secondary'
colorScheme='danger'
variant='secondaryDanger'
textVariant='buttonExtraSmallBold'
onClick={() => navigate('leave')}
localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
@@ -142,8 +141,7 @@ const OrganizationDangerSection = () => {
sx={t => ({ marginRight: t.space.$2 })}
/>
}
variant='secondary'
colorScheme='danger'
variant='secondaryDanger'
textVariant='buttonExtraSmallBold'
onClick={() => navigate('delete')}
localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
Original file line number Diff line number Diff line change
@@ -312,7 +312,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
actionLabel={localizationKeys(
'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
)}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`../../domain/${domain.id}/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -31,7 +31,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
<Button
elementDescriptor={descriptors.organizationSwitcherTrigger}
variant='ghost'
colorScheme='secondary'
sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
ref={ref}
aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
Original file line number Diff line number Diff line change
@@ -63,7 +63,6 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
textVariant='buttonExtraSmallBold'
variant='secondary'
colorScheme='secondary'
size='sm'
isLoading={card.isLoading}
onClick={handleAccept}
@@ -90,7 +89,6 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
textVariant='buttonExtraSmallBold'
variant='secondary'
colorScheme='secondary'
size='sm'
isLoading={card.isLoading}
onClick={handleAccept}
Original file line number Diff line number Diff line change
@@ -68,8 +68,9 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
icon={SignOut}
label={localizationKeys('userButton.action__signOutAll')}
onClick={handleSignOutAllClicked}
colorScheme='danger'
variant='ghostDanger'
sx={t => ({
color: t.colors.$colorText,
padding: `${t.space.$2} ${t.space.$3}`,
borderBottom: 'none',
borderRadius: t.radii.$lg,
Original file line number Diff line number Diff line change
@@ -62,7 +62,7 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
{!isCurrent && (
<LinkButtonWithDescription
actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
colorScheme='danger'
variant='linkDanger'
onClick={revoke}
subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
Original file line number Diff line number Diff line change
@@ -148,7 +148,7 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
actionLabel={localizationKeys(
'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
)}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`connected-account/${account.id}/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ export const DeletePage = withCardStateProvider(() => {
</Form.ControlRow>
<FormButtons
submitLabel={localizationKeys('userProfile.deletePage.confirm')}
colorScheme='danger'
variant='primaryDanger'
isDisabled={!canSubmit}
/>
</Form.Root>
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ export const DeleteSection = () => {
</Col>
<Button
aria-label='Delete account'
colorScheme='danger'
variant='primaryDanger'
textVariant='buttonExtraSmallBold'
onClick={() => navigate(`delete`)}
localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountButton')}
Original file line number Diff line number Diff line change
@@ -101,7 +101,7 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
title={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionTitle')}
subtitle={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionSubtitle')}
actionLabel={localizationKeys('userProfile.start.emailAddressesSection.destructiveAction')}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`email-address/${email.id}/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -46,7 +46,6 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
<Button
localizationKey={actionLabel}
loadingText={t(actionLabel)}
colorScheme='primary'
variant='link'
{...rest}
isLoading={status.isLoading}
Original file line number Diff line number Diff line change
@@ -75,7 +75,6 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
<Flex gap={6}>
<Button
variant='link'
colorScheme='primary'
onClick={onCopy}
localizationKey={
!hasCopied
@@ -86,14 +85,12 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {

<Button
variant='link'
colorScheme='primary'
onClick={onDownloadTxtFile}
localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__download')}
/>

<Button
variant='link'
colorScheme='primary'
onClick={print}
localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__print')}
/>
Original file line number Diff line number Diff line change
@@ -63,7 +63,7 @@ export const MfaPhoneCodeAccordion = ({ phone, showTOTP }: MfaPhoneCodeAccordion
title={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionTitle')}
subtitle={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle')}
actionLabel={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionLabel')}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`multi-factor/${phone.id}/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ export const MfaTOTPAccordion = () => {
title={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionTitle')}
subtitle={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionSubtitle')}
actionLabel={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionLabel')}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`multi-factor/totp/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
title={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionTitle')}
subtitle={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionSubtitle')}
actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction')}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`phone-number/${phone.id}/remove`)}
/>
</Col>
Original file line number Diff line number Diff line change
@@ -59,7 +59,7 @@ const Web3WalletAccordion = ({ wallet }: { wallet: Web3WalletResource }) => {
title={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionTitle')}
subtitle={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionSubtitle')}
actionLabel={localizationKeys('userProfile.start.web3WalletsSection.destructiveAction')}
colorScheme='danger'
variant='linkDanger'
onClick={() => navigate(`web3-wallet/${wallet.id}/remove`)}
/>
</Col>
1 change: 0 additions & 1 deletion packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
Original file line number Diff line number Diff line change
@@ -62,7 +62,6 @@ export const AccordionItem = (props: AccordionItemProps) => {
<ArrowBlockButton
elementDescriptor={descriptors.accordionTriggerButton}
variant='ghost'
colorScheme='secondary'
textVariant='smallRegular'
leftIcon={icon}
rightIcon={Caret}
2 changes: 0 additions & 2 deletions packages/clerk-js/src/ui.retheme/elements/Actions.tsx
Original file line number Diff line number Diff line change
@@ -60,7 +60,6 @@ export const Action = (props: ActionProps) => {
<Button
size='md'
variant='ghost'
colorScheme='secondary'
textVariant='buttonSmallRegular'
focusRing={false}
hoverAsFocus
@@ -152,7 +151,6 @@ export const SmallAction = (props: ActionProps) => {
<Button
size='xs'
variant='ghost'
colorScheme='secondary'
textVariant='buttonSmallRegular'
focusRing={false}
hoverAsFocus
Original file line number Diff line number Diff line change
@@ -49,7 +49,6 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
return (
<SimpleButton
variant='secondary'
colorScheme='secondary'
block
isLoading={isLoading}
{...rest}
1 change: 0 additions & 1 deletion packages/clerk-js/src/ui.retheme/elements/Card.tsx
Original file line number Diff line number Diff line change
@@ -120,7 +120,6 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
<IconButton
elementDescriptor={descriptors.modalCloseButton}
variant='ghost'
colorScheme='secondary'
aria-label='Close modal'
onClick={toggle}
icon={
Original file line number Diff line number Diff line change
@@ -24,7 +24,6 @@ export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
variant='secondary'
tabIndex={-1}
colorScheme={'primary'}
onClick={onCopy}
sx={theme => ({
position: 'absolute',
3 changes: 1 addition & 2 deletions packages/clerk-js/src/ui.retheme/elements/Menu.tsx
Original file line number Diff line number Diff line change
@@ -173,8 +173,7 @@ export const MenuItem = (props: MenuItemProps) => {
elementId={descriptors.menuItem.setId(elementId)}
focusRing={false}
hoverAsFocus
variant='ghost'
colorScheme={destructive ? 'danger' : 'secondary'}
variant={destructive ? 'secondaryDanger' : 'secondary'}
role='menuitem'
onKeyDown={onKeyDown}
onClick={e => {
2 changes: 0 additions & 2 deletions packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -299,7 +299,6 @@ const NavButton = (props: NavButtonProps) => {
return (
<Button
variant='ghost'
colorScheme='secondary'
textVariant='buttonRegularMedium'
size='md'
isActive={isActive}
@@ -348,7 +347,6 @@ export const NavbarMenuButtonRow = (props: PropsOfComponent<typeof Button>) => {
onClick={open}
size='xs'
variant='ghost'
colorScheme='secondary'
sx={t => ({
color: t.colors.$colorText,
gap: t.space.$1x5,
1 change: 0 additions & 1 deletion packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolea
<Button
size='xs'
variant='ghost'
colorScheme='secondary'
sx={t => [
{
color: t.colors.$colorText,
Original file line number Diff line number Diff line change
@@ -102,7 +102,6 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
aria-label={`${hidden ? 'Show' : 'Hide'} password`}
variant='secondary'
colorScheme={'secondary'}
tabIndex={-1}
onClick={() => setHidden(s => !s)}
sx={theme => ({
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ export const PreviewButton = (props: PreviewButtonProps) => {
return (
<Button
variant='ghost'
colorScheme='secondary'
focusRing={false}
block
hoverAsFocus
1 change: 0 additions & 1 deletion packages/clerk-js/src/ui.retheme/elements/Select.tsx
Original file line number Diff line number Diff line change
@@ -372,7 +372,6 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
elementDescriptor={descriptors.selectButton}
elementId={descriptors.selectButton.setId(elementId)}
ref={reference}
colorScheme='secondary'
variant='ghost'
textVariant='smallMedium'
onClick={onTriggerClick}
2 changes: 0 additions & 2 deletions packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
Original file line number Diff line number Diff line change
@@ -165,7 +165,6 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
elementDescriptor={descriptors.socialButtonsIconButton}
elementId={descriptors.socialButtonsIconButton.setId(id)}
variant='secondary'
colorScheme='secondary'
sx={t => ({
minHeight: t.sizes.$7x5,
width: '100%',
@@ -186,7 +185,6 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
elementDescriptor={descriptors.socialButtonsBlockButton}
elementId={descriptors.socialButtonsBlockButton.setId(id)}
variant='secondary'
colorScheme='secondary'
block
isLoading={isLoading}
{...rest}
Original file line number Diff line number Diff line change
@@ -30,7 +30,6 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
opacity: 1,
},
})}
colorScheme='secondary'
variant='ghost'
>
<Icon icon={ThreeDots} />
Loading

0 comments on commit e98e35c

Please sign in to comment.