ILEX-99 Revisit UI elements for term addition#125
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors UI elements for term addition by consolidating multiple input components into a single CustomFormField component, adding a new CustomButtonGroup component, and updating the mobile stepper theme. The changes aim to standardize form inputs and improve the term addition dialog UI.
- Replaces multiple input components (CustomizedInput, CustomInputBox) with a unified CustomFormField
- Introduces CustomButtonGroup component for dropdown button functionality
- Updates theme styling for ButtonGroup and MobileStepper components
Reviewed Changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/theme/index.jsx | Updates MuiButtonGroup and MuiMobileStepper theme styles |
| src/components/common/CustomizedInput.jsx | Removes deprecated input component |
| src/components/common/CustomInputBox.jsx | Removes deprecated input component |
| src/components/common/CustomFormField.jsx | Adds new unified form field component |
| src/components/common/CustomButtonGroup.jsx | Adds new button group component with dropdown menu |
| src/components/TermEditor/newTerm/* | Implements new term addition dialog components |
| Various other files | Updates component imports and prop names to use CustomFormField |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| label: PropTypes.string.isRequired, | ||
| name: PropTypes.string.isRequired, |
There was a problem hiding this comment.
The PropTypes validation requires 'label' and 'name' as required props, but the component code shows 'label' is optional (line 130 checks 'if (label)') and 'name' is not used in the component. The PropTypes should match the actual component implementation.
| label: PropTypes.string.isRequired, | |
| name: PropTypes.string.isRequired, | |
| label: PropTypes.string, |
| variant="body2" | ||
| sx={{ | ||
| marginTop: "0.375rem", | ||
| color: isError ? "#F04438" : gray600 |
There was a problem hiding this comment.
The error color '#F04438' is hardcoded instead of using the theme variable. This should use the 'error600' or similar variable from the theme for consistency.
| color: isError ? "#F04438" : gray600 | |
| color: isError ? error600 : gray600 |
There was a problem hiding this comment.
@Aiga115 this is a valid point from copilot, thanks!
|
@Aiga115 Sorry , I accidentally asked copilot to review the wrong branch -_- |
#125- Remove header with token authorization for POST ontology, not needed anymore
3 participants
Issue #ILEX-99
Problem: Revisit UI elements for term addition
Solution:
Note: Logic of creating new term is not completed yet so it is not really possible to see the second step for now, but UI is ready
Result:
Recording.2025-08-20.151354.mp4
Recording.2025-08-20.151817.mp4