Skip to content

Commit

Permalink
fix(clerk-js): Fix border inconsistencies (#2841)
Browse files Browse the repository at this point in the history
* fix(clerk-js): Fix border inconsistencies

* chore(repo): Add Changeset

* fix(clerk-js): Don't apply borders to empty elements
  • Loading branch information
octoper authored Feb 23, 2024
1 parent 237d483 commit 17846f3
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 39 deletions.
2 changes: 2 additions & 0 deletions .changeset/dirty-mayflies-heal.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
Expand Up @@ -177,7 +177,6 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
sx={t => ({
width: '100%',
paddingRight: t.space.$5,
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
<OrganizationPreview
Expand All @@ -204,24 +203,28 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
{...rest}
>
<PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
{currentOrg
? selectedOrganizationPreview(currentOrg)
: !hidePersonal && (
<PersonalWorkspacePreview
user={userWithoutIdentifiers}
sx={t => ({
padding: `${t.space.$4} ${t.space.$5}`,
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
width: '100%',
})}
title={localizationKeys('organizationSwitcher.personalWorkspace')}
/>
)}
<OrganizationActionList
onCreateOrganizationClick={handleCreateOrganizationClicked}
onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}
onOrganizationClick={handleOrganizationClicked}
/>
<Actions
elementDescriptor={descriptors.organizationSwitcherPopoverActions}
role='menu'
>
{currentOrg
? selectedOrganizationPreview(currentOrg)
: !hidePersonal && (
<PersonalWorkspacePreview
user={userWithoutIdentifiers}
sx={t => ({
padding: `${t.space.$4} ${t.space.$5}`,
width: '100%',
})}
title={localizationKeys('organizationSwitcher.personalWorkspace')}
/>
)}
<OrganizationActionList
onCreateOrganizationClick={handleCreateOrganizationClicked}
onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}
onOrganizationClick={handleOrganizationClicked}
/>
</Actions>
</PopoverCard.Content>
<PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />
</PopoverCard.Root>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useUser } from '@clerk/shared/react';
import React from 'react';

import { descriptors, localizationKeys } from '../../customizables';
import { Action, Actions } from '../../elements';
import { Action } from '../../elements';
import { Add } from '../../icons';
import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
import type { UserMembershipListProps } from './UserMembershipList';
Expand Down Expand Up @@ -33,7 +33,6 @@ const CreateOrganizationButton = ({
label={localizationKeys('organizationSwitcher.action__createOrganization')}
onClick={onCreateOrganizationClick}
sx={t => ({
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
padding: `${t.space.$5} ${t.space.$5}`,
})}
iconSx={t => ({
Expand All @@ -55,13 +54,8 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
return (
<>
<UserInvitationSuggestionList onOrganizationClick={onOrganizationClick} />
<Actions
elementDescriptor={descriptors.organizationSwitcherPopoverActions}
role='menu'
>
<UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
<CreateOrganizationButton {...{ onCreateOrganizationClick }} />
</Actions>
<UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
<CreateOrganizationButton {...{ onCreateOrganizationClick }} />
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ const Preview = (
sx={t => ({
justifyContent: 'space-between',
padding: `${t.space.$4} ${t.space.$5}`,
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
<OrganizationPreview
Expand Down Expand Up @@ -225,6 +224,11 @@ export const UserInvitationSuggestionList = (props: UserInvitationSuggestionList
// Solve weird bug with swr while running unit tests
const userInvitationsData = userInvitations.data?.filter(a => !!a);
const userSuggestionsData = userSuggestions.data?.filter(a => !!a);

if (!hasAnyData && !isLoading) {
return null;
}

return (
<SwitcherInvitationActions
showBorder={hasAnyData || isLoading}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,12 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
// 4 items + 4px border (four 1px borders)
maxHeight: `calc((4 * ${t.sizes.$17}) + 4px)`,
overflowY: 'auto',
...common.unstyledScrollbar(t),
'> button:not(:first-of-type)': {
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100} `,
'> button,div': { border: `0 solid ${t.colors.$neutralAlpha100}` },
'>:not([hidden])~:not([hidden])': {
borderTopWidth: '1px',
borderBottomWidth: '0',
},
...common.unstyledScrollbar(t),
})}
role='group'
aria-label={hidePersonal ? 'List of all organization memberships' : 'List of all accounts'}
Expand All @@ -93,6 +95,9 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
icon={SwitchArrowRight}
onClick={() => onOrganizationClick(organization)}
role='menuitem'
sx={t => ({
border: `0 solid ${t.colors.$neutralAlpha100}`,
})}
>
<OrganizationPreview
elementId='organizationSwitcherListedOrganization'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const _SignInAccountSwitcher = () => {
<Col
elementDescriptor={descriptors.main}
gap={8}
sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}` })}
sx={t => ({
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
<Actions role='menu'>
{activeSessions.map(s => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
role='menu'
elementDescriptor={descriptors.userButtonPopoverActions}
elementId={descriptors.userButtonPopoverActions.setId('singleSession')}
sx={t => ({
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
<Action
elementDescriptor={descriptors.userButtonPopoverActionButton}
Expand Down Expand Up @@ -83,9 +86,6 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
role='menu'
elementDescriptor={descriptors.userButtonPopoverActions}
elementId={descriptors.userButtonPopoverActions.setId('multiSession')}
sx={t => ({
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
<Flex
justify='between'
Expand Down Expand Up @@ -115,7 +115,12 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
/>
</Flex>
</SmallActions>
<Actions role='menu'>
<Actions
role='menu'
sx={t => ({
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
})}
>
{otherSessions.map(session => (
<PreviewButton
key={session.id}
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/elements/Actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ export const Actions = (props: PropsOfComponent<typeof Flex>) => {
<Col
sx={[
t => ({
'> button:not(:first-of-type)': {
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100} `,
'> button,div': { border: `0 solid ${t.colors.$neutralAlpha100}` },
'>:not([hidden],:empty)~:not([hidden],:empty)': {
borderTopWidth: '1px',
borderBottomWidth: '0',
},
}),
sx,
Expand Down

0 comments on commit 17846f3

Please sign in to comment.