Make selectors feel more at home #3750
Conversation
ivarnakken
added
enhancement
ABA-243 Make Select component feel more at home
It uses blue colors that are not used elsewhere, the width and dimensions feel off and it is not so standardized (e.g. on the survey editor, it uses different hover/selected colors). Should fix this as well: |
| @@ -145,7 +145,6 @@ const RestrictedMailEditor = ({ | |||
| name="rawAddresses" | |||
| placeholder="Enkelte eposter du ønsker å sende til" | |||
| component={SelectInput.Field} | |||
| tags | |||
There was a problem hiding this comment.
Was tags just completely dead code?
There was a problem hiding this comment.
No, it enables the user to enter new things into the selector. Under the hood it uses a different component from react select. So it needs to stay.
There was a problem hiding this comment.
I thought it was dead code because it wasn't much needed that one places I tested it 🙃 I fixed it now
| @@ -35,7 +35,18 @@ type Props = { | |||
| }; | |||
|
|
|||
| export const selectStyles = { | |||
There was a problem hiding this comment.
I think you need to pass this into the Creatable component as well
They now share the styling of all the other input fields in all ways. This makes them feel much more at home, and they no longer stick out much. Also, add the custom styling to the select used for tags (specified by the `tags` prop), since that was missing.
ivarnakken
force-pushed
the
ivarnakken/aba-243-make-select-component-feel-more-at-home
branch
from
eb748b1
to
b07ecf1
Compare
| styles={selectStyle ?? selectStyles} | ||
| theme={selectTheme} |
There was a problem hiding this comment.
@erlingfn This was the fix.
There was a problem hiding this comment.
ah I now see that you commented on it above 👍🏼
erlingfn
deleted the
ivarnakken/aba-243-make-select-component-feel-more-at-home
branch
Description
They now share the styling of all the other input fields in all ways. This makes them feel much more at home, and they no longer stick out much.
Also, add the custom styling to the select used for tags (specified by the
tagsprop), since that was missing.Result
I don't feel like the images do its justice. They are now muuch better.
Overview
They are especially improved on dark theme.
Before
After
Open dropdown
Before
After
Error
Before
After
Bug?
Before
After
Testing
Tested that they still work. Multi selectors were tested after the removal of their
tagsprop.