Display red border around styled inputs when there are errors #9942
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR implements error state styling for input fields by utilizing the hasError prop to display a red border around invalid inputs.
- Modified
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsxto use theme-based danger color for border whenhasErroris true - Potential issue: Error styling only applies when
hasItemis true, which may not show validation errors in empty states - Consider extending error state styling to all input states, not just when
hasItemis true
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| ${({ hasError, hasItem, theme }) => | ||
| hasItem && | ||
| css` | ||
| background-color: ${theme.background.transparent.lighter}; | ||
| border-radius: 4px; | ||
| border: 1px solid ${theme.border.color.medium}; | ||
| border: 1px solid ${hasError ? theme.border.color.danger : theme.border.color.medium}; | ||
| `} |
There was a problem hiding this comment.
logic: Error styling only applies when hasItem is true. Consider if error state should be visible regardless of hasItem status.
|
Hi @khuddite, thank you for your PR ! Checked out on your branch, I notice this red border that we don't want, when inputing first item. Instead, there should be a red border like that. |
|
@etiennejouan Thanks for your review. If I understand correctly, the issue is that an unnecessary grey border is displayed around the red border. Correct? |
Fixes #9778
Summary
hasErrorprop was simply ignored inStyledInputwhen it should have been used to flag the text input as invalid by displaying a red border around it.Screenshot
with action items -
without action items -