refactor: replace self-onboarding checkbox with switchfield card comp… #583
Conversation
| <Components.Card> | ||
| <SwitchField | ||
| name="selfOnboarding" | ||
| description={t('selfOnboardingDescription')} | ||
| label={t('selfOnboardingLabel')} | ||
| isDisabled={ | ||
| employee?.onboarded || | ||
| employee?.onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED || | ||
| employee?.onboardingStatus === | ||
| EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW | ||
| } | ||
| /> | ||
| </Components.Card> |
There was a problem hiding this comment.
@aaronlee777 i'm wondering about using Components.Card for this. I think it might be preferable just to add one off styling to this. My thought there is that a partner using the adapter is probably wiring card up to be a more traditional card in the UI. That might have a bigger drop shadow or other design elements that might not be suited to the usage here (thinking they might even have a max width on there. Curious on your thoughts!
There was a problem hiding this comment.
I'm assuming that the same would also need to be applied to contractor onboarding as well, correct?
There was a problem hiding this comment.
Yup i'd say the same thing there!
…m. styling for the switchfield
There was a problem hiding this comment.
Pull Request Overview
Refactors employee onboarding UI to replace checkbox with switch component for self-onboarding toggle, aligning with contractor onboarding design patterns.
- Replace checkbox with switch component for self-onboarding control
- Add consistent card styling with new
cardRadiustheme property - Add descriptive text for self-onboarding switch component
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/i18n/en/Employee.Profile.json | Adds description text for self-onboarding switch |
| src/contexts/ThemeProvider/theme.ts | Introduces cardRadius theme property for consistent styling |
| src/components/Employee/Profile/Profile.tsx | Wraps profile sections in Grid layout for better organization |
| src/components/Employee/Profile/AdminPersonalDetails.tsx | Replaces checkbox with switch component and reorders form elements |
| src/components/Employee/Profile/AdminPersonalDetails.module.scss | Defines card container styling for switch field |
| src/components/Contractor/Profile/ContractorProfileForm.tsx | Updates contractor form to use consistent card styling |
| src/components/Contractor/Profile/ContractorProfileForm.module.scss | Defines matching card container styling |
| src/components/Common/UI/Card/Card.module.scss | Updates Card component to use new theme radius and adds shadow |
Comments suppressed due to low confidence (1)
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <SelfPersonalDetails /> | ||
| <HomeAddress /> | ||
| <WorkAddress /> | ||
| <Grid gridTemplateColumns="1fr" gap={24} className="mb-8"> |
There was a problem hiding this comment.
Whoops! we don't have utility classes so this can be removed
| <Grid gridTemplateColumns="1fr" gap={24} className="mb-8"> | |
| <Grid gridTemplateColumns="1fr" gap={24}> |
Replaces self-onboarding trigger to use the switch component instead of a checkbox. This aligns with what is implemented in contractor onboarding.
Previous
New
