Replace usage of MUI date picker with Oxygen UI date picker #9367
Conversation
|
|
Hi @amandasiriwardane, even though the props are identical between two components, there can be differences in UX/runtime errors when replacing MUI components with the oxgen UI components. Therefore, it's strongly recommended to run the console in development mode and add a screencast of the changes done, especially for first time contributors. I'm afraid we wouldn't be able to accept this contribution without that kind of thorough testing. Thanks for your understanding! |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #9367 +/- ##
=======================================
Coverage 48.75% 48.75%
=======================================
Files 42 42
Lines 1003 1003
Branches 227 250 +23
=======================================
Hits 489 489
+ Misses 514 499 -15
- Partials 0 15 +15
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
pavinduLakshan
changed the title
Okay will do that |
...unt/java/org.wso2.identity.apps.myaccount.server.feature/src/main/resources/build.properties
Outdated
Show resolved
Hide resolved
Fixes #25669 - Updated DatePicker import to use @oxygen-ui/react/DatePicker - Added type assertions to handle Oxygen UI DatePicker generic types - Improved type safety with moment.isMoment() check in onChange handler
amandasiriwardane
force-pushed
the
issue-#25669-add-date-picker-to-oxygen-ui
branch
from
0d0ef27 to
5471bb8
Compare
| @@ -17,8 +17,8 @@ | |||
| */ | |||
|
|
|||
| import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; | |||
There was a problem hiding this comment.
Along with the date picker, the AdapterMoment adapter also needs to be wrapped via oxygen-ui and used in identity-apps. Shall we look into that as well?
| @@ -115,14 +115,14 @@ const DatePickerFieldAdapter: FunctionComponent<DatePickerFieldAdapterPropsInter | |||
| label={ label } | |||
| { ...input } | |||
| value={ formattedValue.isValid() ? formattedValue : null } | |||
| onChange={ (date: moment.Moment | null) => { | |||
| if (date && date.isValid()) { | |||
| onChange={ (date: any) => { | |||
There was a problem hiding this comment.
Avoid using any type. Try to define proper types.
|
Once finalized, add changesets as well. You can refer: https://github.com/wso2/identity-apps#releases |
|
Hey @amandasiriwardane, any updates on the progress? |
5 participants
Purpose
This PR updates the DatePicker component in the form module to use the Oxygen UI wrapper instead of importing directly from MUI, ensuring consistency with the design system.
Related Issues
Related PRs
Checklist
Security checks
Developer Checklist (Mandatory)
product-isissue to track any behavioral change or migration impact.Additional Context
Technical Details:
The Oxygen UI DatePicker (v2.4.6) is a wrapper around MUI's DatePicker component that provides consistent theming and styling across the Identity Server applications. The original implementation imported directly from MUI, bypassing the design system.
Type Handling:
Type assertions were necessary because the Oxygen UI DatePicker uses a generic type parameter
TEnableAccessibleFieldDOMStructurewhich defaults totrue. To maintain compatibility with the existingmoment.Momentdate handling, type assertions were applied to the rest props.Build Verification:
-Webpack dev server runs without errors
Impact:
Note: As an external contributor without the full Identity Server backend setup, manual UI testing was not performed. However, since the Oxygen UI DatePicker is a direct wrapper of the MUI DatePicker with identical props and behavior, functionality remains unchanged. Build validation confirms the code is correct.
