Skip to content

Commit fc5c2b1

Browse files
iagodahlemiagodahlem
committed
refactor(ui): tighten Configure step layout and form-wrap SP copy rows
Layout tightening across the inner Configure wizard: - Move Step.Body inside each sub-step component so the wizard switches bodies cleanly between sub-steps instead of nesting Wizard.Step children under a single outer Step.Body. - Wrap the ACS URL and Audience URI copy rows in Form.ControlRow + Form.CommonInputWrapper + ClipboardInput so the rows reuse the standard form chrome (label rendering, error slot, spacing) and the ClipboardInput primitive's readOnly + copyIcon/copiedIcon API. Adds 'acsUrl' to the FieldId union to back the new useFormControl call sites. - Bring group headings down to textVariant='subtitle' so the body reads as supporting content under the existing Step.Header title. - Tighten vertical spacing: Step.Section gap drops from $6 to $5, inner-group heading-to-content gap from $3 to $1x5, list-item gap from $1 to $1x5. - Soften the bold span in instructional lines from $semibold + $colorForeground to $medium + $colorMutedForeground so the emphasis feels like keyword highlighting rather than full bold.
1 parent 6379d9b commit fc5c2b1

2 files changed

Lines changed: 152 additions & 136 deletions

File tree

‎packages/shared/src/types/elementIds.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export type FieldId =
2727
| 'apiKeyRevokeConfirmation'
2828
| 'apiKeySecret'
2929
| 'idpMetadataUrl'
30+
| 'acsUrl'
3031
| 'web3WalletName';
3132
export type ProfileSectionId =
3233
| 'profile'

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

Lines changed: 151 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Col, descriptors, Flow, Heading, type LocalizationKey, localizationKeys
22
import { ClipboardInput } from '@/elements/ClipboardInput';
33
import { useCardState } from '@/elements/contexts';
44
import { Form } from '@/elements/Form';
5+
import { Check, ClipboardOutline } from '@/icons';
56
import { handleError } from '@/utils/errorHandler';
67
import { useFormControl } from '@/utils/useFormControl';
78

@@ -24,23 +25,21 @@ export const ConfigureStep = (): JSX.Element => {
2425
<InnerStepCounter />
2526
</Step.Header>
2627

27-
<Step.Body>
28-
<Wizard.Step id='create-app'>
29-
<CreateAppSubStep />
30-
</Wizard.Step>
28+
<Wizard.Step id='create-app'>
29+
<CreateAppSubStep />
30+
</Wizard.Step>
3131

32-
<Wizard.Step id='configure-attributes'>
33-
<ConfigureAttributesSubStep />
34-
</Wizard.Step>
32+
<Wizard.Step id='configure-attributes'>
33+
<ConfigureAttributesSubStep />
34+
</Wizard.Step>
3535

36-
<Wizard.Step id='assign-users'>
37-
<AssignUsersSubStep />
38-
</Wizard.Step>
36+
<Wizard.Step id='assign-users'>
37+
<AssignUsersSubStep />
38+
</Wizard.Step>
3939

40-
<Wizard.Step id='submit-saml-config'>
41-
<SubmitSamlConfigSubStep />
42-
</Wizard.Step>
43-
</Step.Body>
40+
<Wizard.Step id='submit-saml-config'>
41+
<SubmitSamlConfigSubStep />
42+
</Wizard.Step>
4443
</Wizard>
4544
</Step>
4645
</Flow.Part>
@@ -79,7 +78,7 @@ const InstructionStep = ({ prefix, bold, suffix }: InstructionStepKeys): JSX.Ele
7978
as='span'
8079
variant='body'
8180
colorScheme='inherit'
82-
sx={theme => ({ fontWeight: theme.fontWeights.$semibold, color: theme.colors.$colorForeground })}
81+
sx={theme => ({ fontWeight: theme.fontWeights.$medium, color: theme.colors.$colorMutedForeground })}
8382
localizationKey={bold}
8483
/>
8584
<Text
@@ -98,123 +97,133 @@ export const CreateAppSubStep = (): JSX.Element => {
9897
const acsUrl = enterpriseConnection?.samlConnection?.acsUrl ?? '';
9998
const spEntityId = enterpriseConnection?.samlConnection?.spEntityId ?? '';
10099

100+
const acsUrlField = useFormControl('acsUrl', acsUrl, {
101+
type: 'text',
102+
label: localizationKeys('configureSSO.configureStep.createApp.serviceProvider.acsUrl.label'),
103+
isRequired: false,
104+
});
105+
const spEntityIdField = useFormControl('acsUrl', spEntityId, {
106+
type: 'text',
107+
label: localizationKeys('configureSSO.configureStep.createApp.serviceProvider.spEntityId.label'),
108+
isRequired: false,
109+
});
110+
101111
return (
102112
<>
103-
<Step.Section
104-
fill
105-
sx={theme => ({ gap: theme.space.$6 })}
106-
>
107-
<Col sx={theme => ({ gap: theme.space.$3 })}>
108-
<Heading
109-
as='h3'
110-
textVariant='h3'
111-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.createApp.title')}
112-
/>
113-
<Col
114-
as='ul'
115-
sx={theme => ({
116-
gap: theme.space.$1,
117-
margin: 0,
118-
paddingInlineStart: theme.space.$4,
119-
listStyleType: 'disc',
120-
})}
121-
>
122-
<InstructionStep
123-
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.prefix')}
124-
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.bold')}
125-
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.suffix')}
126-
/>
127-
<InstructionStep
128-
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.prefix')}
129-
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.bold')}
130-
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.suffix')}
131-
/>
132-
<InstructionStep
133-
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.prefix')}
134-
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.bold')}
135-
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.suffix')}
136-
/>
137-
<InstructionStep
138-
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.prefix')}
139-
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.bold')}
140-
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.suffix')}
141-
/>
142-
<InstructionStep
143-
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.prefix')}
144-
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.bold')}
145-
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.suffix')}
113+
<Step.Body>
114+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
115+
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
116+
<Heading
117+
as='h3'
118+
textVariant='subtitle'
119+
localizationKey={localizationKeys('configureSSO.configureStep.createApp.createApp.title')}
146120
/>
121+
<Col
122+
as='ul'
123+
sx={theme => ({
124+
gap: theme.space.$1x5,
125+
margin: 0,
126+
paddingInlineStart: theme.space.$4,
127+
listStyleType: 'disc',
128+
})}
129+
>
130+
<InstructionStep
131+
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.prefix')}
132+
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.bold')}
133+
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step1.suffix')}
134+
/>
135+
<InstructionStep
136+
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.prefix')}
137+
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.bold')}
138+
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step2.suffix')}
139+
/>
140+
<InstructionStep
141+
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.prefix')}
142+
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.bold')}
143+
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step3.suffix')}
144+
/>
145+
<InstructionStep
146+
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.prefix')}
147+
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.bold')}
148+
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step4.suffix')}
149+
/>
150+
<InstructionStep
151+
prefix={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.prefix')}
152+
bold={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.bold')}
153+
suffix={localizationKeys('configureSSO.configureStep.createApp.createApp.step5.suffix')}
154+
/>
155+
</Col>
147156
</Col>
148-
</Col>
149157

150-
<Col sx={theme => ({ gap: theme.space.$3 })}>
151-
<Heading
152-
as='h3'
153-
textVariant='h3'
154-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.title')}
155-
/>
156-
<Text
157-
as='p'
158-
variant='body'
159-
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
160-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.paragraph1')}
161-
/>
162-
<Text
163-
as='p'
164-
variant='body'
165-
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
166-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.paragraph2')}
167-
/>
168-
<Col sx={theme => ({ gap: theme.space.$2 })}>
158+
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
159+
<Heading
160+
as='h3'
161+
textVariant='subtitle'
162+
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.title')}
163+
/>
169164
<Text
170-
as='label'
165+
as='p'
171166
variant='body'
172-
sx={theme => ({ fontWeight: theme.fontWeights.$medium, color: theme.colors.$colorForeground })}
173-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.acsUrl.label')}
167+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
168+
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.paragraph1')}
174169
/>
175-
<ClipboardInput value={acsUrl} />
176-
</Col>
177-
<Col sx={theme => ({ gap: theme.space.$2 })}>
178170
<Text
179-
as='label'
171+
as='p'
180172
variant='body'
181-
sx={theme => ({ fontWeight: theme.fontWeights.$medium, color: theme.colors.$colorForeground })}
182-
localizationKey={localizationKeys(
183-
'configureSSO.configureStep.createApp.serviceProvider.spEntityId.label',
184-
)}
173+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
174+
localizationKey={localizationKeys('configureSSO.configureStep.createApp.serviceProvider.paragraph2')}
185175
/>
186-
<ClipboardInput value={spEntityId} />
187176
</Col>
188-
</Col>
189177

190-
<Col sx={theme => ({ gap: theme.space.$3 })}>
191-
<Heading
192-
as='h3'
193-
textVariant='h3'
194-
localizationKey={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.title')}
195-
/>
196-
<Col
197-
as='ul'
198-
sx={theme => ({
199-
gap: theme.space.$1,
200-
margin: 0,
201-
paddingInlineStart: theme.space.$4,
202-
listStyleType: 'disc',
203-
})}
204-
>
205-
<InstructionStep
206-
prefix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.prefix')}
207-
bold={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.bold')}
208-
suffix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.suffix')}
178+
<Form.ControlRow elementId={acsUrlField.id}>
179+
<Form.CommonInputWrapper {...acsUrlField.props}>
180+
<ClipboardInput
181+
value={acsUrl}
182+
readOnly
183+
copyIcon={ClipboardOutline}
184+
copiedIcon={Check}
185+
/>
186+
</Form.CommonInputWrapper>
187+
</Form.ControlRow>
188+
189+
<Form.CommonInputWrapper {...spEntityIdField.props}>
190+
<ClipboardInput
191+
value={spEntityId}
192+
readOnly
193+
copyIcon={ClipboardOutline}
194+
copiedIcon={Check}
209195
/>
210-
<InstructionStep
211-
prefix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.prefix')}
212-
bold={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.bold')}
213-
suffix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.suffix')}
196+
</Form.CommonInputWrapper>
197+
198+
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
199+
<Heading
200+
as='h3'
201+
textVariant='subtitle'
202+
localizationKey={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.title')}
214203
/>
204+
<Col
205+
as='ul'
206+
sx={theme => ({
207+
gap: theme.space.$1x5,
208+
margin: 0,
209+
paddingInlineStart: theme.space.$4,
210+
listStyleType: 'disc',
211+
})}
212+
>
213+
<InstructionStep
214+
prefix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.prefix')}
215+
bold={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.bold')}
216+
suffix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step1.suffix')}
217+
/>
218+
<InstructionStep
219+
prefix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.prefix')}
220+
bold={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.bold')}
221+
suffix={localizationKeys('configureSSO.configureStep.createApp.completeSamlIntegration.step2.suffix')}
222+
/>
223+
</Col>
215224
</Col>
216-
</Col>
217-
</Step.Section>
225+
</Step.Section>
226+
</Step.Body>
218227

219228
<Step.Footer>
220229
<Step.Footer.Previous
@@ -235,9 +244,11 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
235244

236245
return (
237246
<>
238-
<Step.Section fill>
239-
<Text>UI goes here</Text>
240-
</Step.Section>
247+
<Step.Body>
248+
<Step.Section fill>
249+
<Text>UI goes here</Text>
250+
</Step.Section>
251+
</Step.Body>
241252

242253
<Step.Footer>
243254
<Step.Footer.Previous
@@ -258,9 +269,11 @@ export const AssignUsersSubStep = (): JSX.Element => {
258269

259270
return (
260271
<>
261-
<Step.Section fill>
262-
<Text>UI goes here</Text>
263-
</Step.Section>
272+
<Step.Body>
273+
<Step.Section fill>
274+
<Text>UI goes here</Text>
275+
</Step.Section>
276+
</Step.Body>
264277

265278
<Step.Footer>
266279
<Step.Footer.Previous
@@ -311,20 +324,22 @@ export const SubmitSamlConfigSubStep = (): JSX.Element => {
311324

312325
return (
313326
<>
314-
<Step.Section
315-
fill
316-
sx={theme => ({ gap: theme.space.$5 })}
317-
>
318-
<Text
319-
as='p'
320-
variant='body'
321-
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
322-
localizationKey={localizationKeys('configureSSO.configureStep.metadataUrl.description')}
323-
/>
324-
<Form.ControlRow elementId={metadataUrlField.id}>
325-
<Form.PlainInput {...metadataUrlField.props} />
326-
</Form.ControlRow>
327-
</Step.Section>
327+
<Step.Body>
328+
<Step.Section
329+
fill
330+
sx={theme => ({ gap: theme.space.$5 })}
331+
>
332+
<Text
333+
as='p'
334+
variant='body'
335+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
336+
localizationKey={localizationKeys('configureSSO.configureStep.metadataUrl.description')}
337+
/>
338+
<Form.ControlRow elementId={metadataUrlField.id}>
339+
<Form.PlainInput {...metadataUrlField.props} />
340+
</Form.ControlRow>
341+
</Step.Section>
342+
</Step.Body>
328343

329344
<Step.Footer>
330345
<Step.Footer.Previous

0 commit comments

Comments
 (0)