Skip to content

Commit 8172b22

Browse files
iagodahlemiagodahlem
committed
refactor(ui): inline StepLayout chrome into each ConfigureSSO step
Removes the shared StepLayout wrapper from each step file and inlines the header (Heading + subtitle) plus body Col directly. Each step now owns its own visual chrome: - ProvideEmailStep, VerifyDomainStep, ConfigureCreateAppStep, TestConfigurationStep render their own header row and body. - ConfirmationStep drops the header entirely per the Figma design. Step files also switch wizard hook imports from the old wizard/ folder to the new elements/Wizard/ primitive, and each step attaches its own configureSSOWizardBody descriptor at its outermost rendered element. Flow.Part does not accept elementDescriptor / elementId props, so each step uses the fallback shape: a Col wrapper inside Flow.Part carries the descriptor. The wrapper Col keeps flex: 1 / minHeight: 0 so the inner body Col's flex: 1 / overflowY: auto continues to size against the layout's flex column context. useRegisterContinueAction usage is unchanged in this commit; the move to a Wizard.Step canContinue prop lands separately. The shared StepLayout file is left on disk (no more imports) and gets removed in a final cleanup commit.
1 parent 4b11db4 commit 8172b22

6 files changed

Lines changed: 143 additions & 42 deletions

File tree

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureCreateAppStep.tsx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,46 @@
1-
import { Flow, Text } from '@/customizables';
1+
import { Col, descriptors, Flex, Flow, Heading, Text } from '@/customizables';
22

3-
import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
4-
import { StepLayout } from './StepLayout';
3+
import { useRegisterContinueAction, useWizard } from '../elements/Wizard';
54

65
export const ConfigureCreateApp = (): JSX.Element => {
7-
const { goNext } = useConfigureSSOWizard();
6+
const { goNext } = useWizard();
87

98
useRegisterContinueAction({
109
handler: () => goNext(),
1110
});
1211

1312
return (
1413
<Flow.Part part='configureCreateApp'>
15-
<StepLayout
16-
title='Configure Okta Workforce'
17-
subtitle='Create a new enterprise application in your Okta Dashboard.'
14+
<Col
15+
elementDescriptor={descriptors.configureSSOWizardBody}
16+
elementId={descriptors.configureSSOWizardBody.setId('create-app')}
17+
sx={{ flex: 1, minHeight: 0 }}
1818
>
19-
<Text>UI goes here</Text>
20-
</StepLayout>
19+
<Flex
20+
align='center'
21+
justify='between'
22+
sx={theme => ({ gap: theme.space.$4, padding: theme.space.$5 })}
23+
>
24+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
25+
<Heading
26+
textVariant='h3'
27+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
28+
>
29+
Configure Okta Workforce
30+
</Heading>
31+
<Text
32+
as='p'
33+
variant='body'
34+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
35+
>
36+
Create a new enterprise application in your Okta Dashboard.
37+
</Text>
38+
</Col>
39+
</Flex>
40+
<Col sx={theme => ({ flex: 1, paddingInline: theme.space.$5, overflowY: 'auto' })}>
41+
<Text>UI goes here</Text>
42+
</Col>
43+
</Col>
2144
</Flow.Part>
2245
);
2346
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
1-
import { Flow, Text } from '@/customizables';
2-
3-
import { StepLayout } from './StepLayout';
1+
import { Col, descriptors, Flow, Text } from '@/customizables';
42

53
export const ConfirmationStep = (): JSX.Element => {
64
return (
75
<Flow.Part part='sso-confirmation'>
8-
<StepLayout>
9-
<Text>UI goes here</Text>
10-
</StepLayout>
6+
<Col
7+
elementDescriptor={descriptors.configureSSOWizardBody}
8+
elementId={descriptors.configureSSOWizardBody.setId('confirmation')}
9+
sx={{ flex: 1, minHeight: 0 }}
10+
>
11+
<Col
12+
sx={theme => ({
13+
flex: 1,
14+
paddingInline: theme.space.$5,
15+
paddingTop: theme.space.$5,
16+
overflowY: 'auto',
17+
})}
18+
>
19+
<Text>UI goes here</Text>
20+
</Col>
21+
</Col>
1122
</Flow.Part>
1223
);
1324
};

‎packages/ui/src/components/ConfigureSSO/steps/ProvideEmailStep.tsx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Flow, Text } from '@/customizables';
1+
import { Col, descriptors, Flex, Flow, Heading, Text } from '@/customizables';
22

3-
import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
4-
import { StepLayout } from './StepLayout';
3+
import { useRegisterContinueAction, useWizard } from '../elements/Wizard';
54

65
export const ProvideEmail = (): JSX.Element => {
7-
const { goNext } = useConfigureSSOWizard();
6+
const { goNext } = useWizard();
87

98
useRegisterContinueAction({
109
handler: () => {
@@ -14,12 +13,36 @@ export const ProvideEmail = (): JSX.Element => {
1413

1514
return (
1615
<Flow.Part part='provideEmail'>
17-
<StepLayout
18-
title='Verify your domain'
19-
subtitle='Verify the domain you want to enable the enterprise connection on.'
16+
<Col
17+
elementDescriptor={descriptors.configureSSOWizardBody}
18+
elementId={descriptors.configureSSOWizardBody.setId('provide-email')}
19+
sx={{ flex: 1, minHeight: 0 }}
2020
>
21-
<Text as='p'>UI goes here</Text>
22-
</StepLayout>
21+
<Flex
22+
align='center'
23+
justify='between'
24+
sx={theme => ({ gap: theme.space.$4, padding: theme.space.$5 })}
25+
>
26+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
27+
<Heading
28+
textVariant='h3'
29+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
30+
>
31+
Verify your domain
32+
</Heading>
33+
<Text
34+
as='p'
35+
variant='body'
36+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
37+
>
38+
Verify the domain you want to enable the enterprise connection on.
39+
</Text>
40+
</Col>
41+
</Flex>
42+
<Col sx={theme => ({ flex: 1, paddingInline: theme.space.$5, overflowY: 'auto' })}>
43+
<Text as='p'>UI goes here</Text>
44+
</Col>
45+
</Col>
2346
</Flow.Part>
2447
);
2548
};

‎packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,38 @@
1-
import { Flow, Text } from '@/customizables';
2-
3-
import { StepLayout } from './StepLayout';
1+
import { Col, descriptors, Flex, Flow, Heading, Text } from '@/customizables';
42

53
export const TestConfigurationStep = (): JSX.Element => {
64
return (
75
<Flow.Part part='test-sso'>
8-
<StepLayout
9-
title='Test your SSO connection'
10-
subtitle='Test your SSO configuration to verify you can successfully authenticate via your identity provider'
6+
<Col
7+
elementDescriptor={descriptors.configureSSOWizardBody}
8+
elementId={descriptors.configureSSOWizardBody.setId('test')}
9+
sx={{ flex: 1, minHeight: 0 }}
1110
>
12-
<Text>UI goes here</Text>
13-
</StepLayout>
11+
<Flex
12+
align='center'
13+
justify='between'
14+
sx={theme => ({ gap: theme.space.$4, padding: theme.space.$5 })}
15+
>
16+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
17+
<Heading
18+
textVariant='h3'
19+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
20+
>
21+
Test your SSO connection
22+
</Heading>
23+
<Text
24+
as='p'
25+
variant='body'
26+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
27+
>
28+
Test your SSO configuration to verify you can successfully authenticate via your identity provider
29+
</Text>
30+
</Col>
31+
</Flex>
32+
<Col sx={theme => ({ flex: 1, paddingInline: theme.space.$5, overflowY: 'auto' })}>
33+
<Text>UI goes here</Text>
34+
</Col>
35+
</Col>
1436
</Flow.Part>
1537
);
1638
};

‎packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Flow, Text } from '@/customizables';
1+
import { Col, descriptors, Flex, Flow, Heading, Text } from '@/customizables';
22

3-
import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
4-
import { StepLayout } from './StepLayout';
3+
import { useRegisterContinueAction, useWizard } from '../elements/Wizard';
54

65
export const VerifyDomainStep = (): JSX.Element => {
7-
const { goNext } = useConfigureSSOWizard();
6+
const { goNext } = useWizard();
87

98
useRegisterContinueAction({
109
handler: () => goNext(),
@@ -14,12 +13,36 @@ export const VerifyDomainStep = (): JSX.Element => {
1413

1514
return (
1615
<Flow.Part part='verifyDomain'>
17-
<StepLayout
18-
title='Verify your domain'
19-
subtitle='Verify the domain you want to enable the enterprise connection on.'
16+
<Col
17+
elementDescriptor={descriptors.configureSSOWizardBody}
18+
elementId={descriptors.configureSSOWizardBody.setId('verify-domain')}
19+
sx={{ flex: 1, minHeight: 0 }}
2020
>
21-
<Text>UI goes here</Text>
22-
</StepLayout>
21+
<Flex
22+
align='center'
23+
justify='between'
24+
sx={theme => ({ gap: theme.space.$4, padding: theme.space.$5 })}
25+
>
26+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
27+
<Heading
28+
textVariant='h3'
29+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
30+
>
31+
Verify your domain
32+
</Heading>
33+
<Text
34+
as='p'
35+
variant='body'
36+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
37+
>
38+
Verify the domain you want to enable the enterprise connection on.
39+
</Text>
40+
</Col>
41+
</Flex>
42+
<Col sx={theme => ({ flex: 1, paddingInline: theme.space.$5, overflowY: 'auto' })}>
43+
<Text>UI goes here</Text>
44+
</Col>
45+
</Col>
2346
</Flow.Part>
2447
);
2548
};

‎packages/ui/src/components/ConfigureSSO/steps/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export { ConfigureCreateApp } from './ConfigureCreateAppStep';
22
export { ConfirmationStep } from './ConfirmationStep';
33
export { ProvideEmail } from './ProvideEmailStep';
4-
export { StepLayout } from './StepLayout';
54
export { TestConfigurationStep } from './TestConfigurationStep';
65
export { VerifyDomainStep } from './VerifyDomainStep';

0 commit comments

Comments
 (0)