Skip to content

Commit 6ea39ae

Browse files
iagodahlemLauraBeatris
iagodahlem
and
LauraBeatris
authored
fix(clerk-js): Improve appearance selectors for tasks (#6861)
Co-authored-by: Laura Beatris <[email protected]>
1 parent 2c0128b commit 6ea39ae

File tree

4 files changed

+77
-64
lines changed

4 files changed

+77
-64
lines changed

‎.changeset/shy-times-wash.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
---
4+
5+
Improve appearance selectors for tasks, such as including it within `SignIn/SignUp` components

‎packages/clerk-js/src/ui/components/SessionTasks/index.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { eventComponentMounted } from '@clerk/shared/telemetry';
33
import type { SessionResource } from '@clerk/types';
44
import { useEffect, useRef } from 'react';
55

6+
import { Flow } from '@/ui/customizables';
67
import { Card } from '@/ui/elements/Card';
78
import { withCardStateProvider } from '@/ui/elements/contexts';
89
import { LoadingCardContainer } from '@/ui/elements/LoadingCard';
@@ -35,31 +36,35 @@ const SessionTasksStart = () => {
3536
}, [navigate, clerk, redirectUrlComplete]);
3637

3738
return (
38-
<Card.Root>
39-
<Card.Content>
40-
<LoadingCardContainer />
41-
</Card.Content>
42-
<Card.Footer />
43-
</Card.Root>
39+
<Flow.Part part='start'>
40+
<Card.Root>
41+
<Card.Content>
42+
<LoadingCardContainer />
43+
</Card.Content>
44+
<Card.Footer />
45+
</Card.Root>
46+
</Flow.Part>
4447
);
4548
};
4649

4750
function SessionTasksRoutes(): JSX.Element {
4851
const ctx = useSessionTasksContext();
4952

5053
return (
51-
<Switch>
52-
<Route path={INTERNAL_SESSION_TASK_ROUTE_BY_KEY['choose-organization']}>
53-
<TaskChooseOrganizationContext.Provider
54-
value={{ componentName: 'TaskChooseOrganization', redirectUrlComplete: ctx.redirectUrlComplete }}
55-
>
56-
<TaskChooseOrganization />
57-
</TaskChooseOrganizationContext.Provider>
58-
</Route>
59-
<Route index>
60-
<SessionTasksStart />
61-
</Route>
62-
</Switch>
54+
<Flow.Root flow='tasks'>
55+
<Switch>
56+
<Route path={INTERNAL_SESSION_TASK_ROUTE_BY_KEY['choose-organization']}>
57+
<TaskChooseOrganizationContext.Provider
58+
value={{ componentName: 'TaskChooseOrganization', redirectUrlComplete: ctx.redirectUrlComplete }}
59+
>
60+
<TaskChooseOrganization />
61+
</TaskChooseOrganizationContext.Provider>
62+
</Route>
63+
<Route index>
64+
<SessionTasksStart />
65+
</Route>
66+
</Switch>
67+
</Flow.Root>
6368
);
6469
}
6570

‎packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -34,52 +34,54 @@ const TaskChooseOrganizationInternal = () => {
3434

3535
return (
3636
<Flow.Root flow='taskChooseOrganization'>
37-
<Card.Root>
38-
<Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}`, gap: t.space.$7 })}>
39-
{isLoading ? (
40-
<Flex
41-
direction={'row'}
42-
align={'center'}
43-
justify={'center'}
44-
sx={t => ({
45-
height: '100%',
46-
minHeight: t.sizes.$100,
47-
})}
48-
>
49-
<Spinner
50-
size={'lg'}
51-
colorScheme={'primary'}
52-
elementDescriptor={descriptors.spinner}
53-
/>
54-
</Flex>
55-
) : (
56-
<TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
57-
)}
58-
</Card.Content>
59-
60-
<Card.Footer>
61-
<Card.Action
62-
elementId='signOut'
63-
gap={2}
64-
justify='center'
65-
sx={() => ({ width: '100%' })}
66-
>
67-
{identifier && (
68-
<Card.ActionText
69-
truncate
70-
localizationKey={localizationKeys('taskChooseOrganization.signOut.actionText', {
71-
identifier,
37+
<Flow.Part part='chooseOrganization'>
38+
<Card.Root>
39+
<Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}`, gap: t.space.$7 })}>
40+
{isLoading ? (
41+
<Flex
42+
direction={'row'}
43+
align={'center'}
44+
justify={'center'}
45+
sx={t => ({
46+
height: '100%',
47+
minHeight: t.sizes.$100,
7248
})}
73-
/>
49+
>
50+
<Spinner
51+
size={'lg'}
52+
colorScheme={'primary'}
53+
elementDescriptor={descriptors.spinner}
54+
/>
55+
</Flex>
56+
) : (
57+
<TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
7458
)}
75-
<Card.ActionLink
76-
sx={() => ({ flexShrink: 0 })}
77-
onClick={handleSignOut}
78-
localizationKey={localizationKeys('taskChooseOrganization.signOut.actionLink')}
79-
/>
80-
</Card.Action>
81-
</Card.Footer>
82-
</Card.Root>
59+
</Card.Content>
60+
61+
<Card.Footer>
62+
<Card.Action
63+
elementId='signOut'
64+
gap={2}
65+
justify='center'
66+
sx={() => ({ width: '100%' })}
67+
>
68+
{identifier && (
69+
<Card.ActionText
70+
truncate
71+
localizationKey={localizationKeys('taskChooseOrganization.signOut.actionText', {
72+
identifier,
73+
})}
74+
/>
75+
)}
76+
<Card.ActionLink
77+
sx={() => ({ flexShrink: 0 })}
78+
onClick={handleSignOut}
79+
localizationKey={localizationKeys('taskChooseOrganization.signOut.actionLink')}
80+
/>
81+
</Card.Action>
82+
</Card.Footer>
83+
</Card.Root>
84+
</Flow.Part>
8385
</Flow.Root>
8486
);
8587
};

‎packages/clerk-js/src/ui/elements/contexts/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export type FlowMetadata = {
100100
| 'apiKeys'
101101
| 'oauthConsent'
102102
| 'subscriptionDetails'
103-
| 'subscriptionDetails'
103+
| 'tasks'
104104
| 'taskChooseOrganization';
105105
part?:
106106
| 'start'
@@ -122,7 +122,8 @@ export type FlowMetadata = {
122122
| 'popupCallback'
123123
| 'popover'
124124
| 'complete'
125-
| 'accountSwitcher';
125+
| 'accountSwitcher'
126+
| 'chooseOrganization';
126127
};
127128

128129
const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('FlowMetadata');

0 commit comments

Comments
 (0)