feat(organizations): add theming/story for Mantine Select TASK-1379

[pauloamorimbr]

🗒️ Checklist

1. run linter locally
2. update all related docs (API, README, inline, etc.), if any
3. draft PR with a title <type>(<scope>)<!>: <title> TASK-1234
4. tag PR: at least frontend or backend unless it's global
5. fill in the template below and delete template comments
6. review thyself: read the diff and repro the preview as written
7. open PR & confirm that CI passes
8. request reviewers, if needed
9. delete this section before merging

📣 Summary

Theming for Mantine's Select was added to match our KoboSelect visual

📖 Description

• Story was added in storybook under Mantine/Select
• Theming was added for Mantine's Select component
• A new Select component was created to wrap Mantine's Select and add visual functionalities:
  • Select chevron changes when select list is opened
  • Clear button appears by the side of the chevron

⚠️ There are some behaviors and styling that differs from our current select implementation. I checked with Tessa regarding the styling and some of the behaviors, but we still have 2 BUG that I tried hard but wasn't able to fix by using the MantineSelect as it is, which may cause us to end up adding our own implementation based on Matine's one:

• When you have the dropdown opened and press TAB, it won't close, and you cannot do it with the ESC key anymore.
• When clearable is enabled and an item is selected, the chevron becomes unclickable

Also:

• Members table role selector was updated to use the Select component as a POC
• Some logic was changed to be simplified and match the new implementation
• ⚠️ A LoadingOverlay is being used in the members table to keep the user from doing other actions while processing the role change. The functionality seems good, but we need to setup the Loader theme as well for it to be used like that. Preferably in another task.

👀 Preview steps

• Use storybook to check the visual and basic functionality
• Check Organization's Members table. It's recommended to change other user's role for testing.

[Akuukis]

LGTM 👌 not tested

[jamesrkiger]

Weird issue here:

To reproduce:

1. Open up the select component for an org member (member role specifically)
2. Use arrow down to navigate to member option
3. Move the mouse to highlight the admin option
4. Notice that the text color on 'member' remains white, so it basically disappears.

Obviously this is an edge case and I'm not sure if it's really a bug or if it's more a question of how our hover and focus style choices are interacting. Let me know what you think.

[jamesrkiger]

Can we make it so the select closes when a user tabs to the next element? On the members table, if I open the select then tab to the member actions button, the select stays open and now I can't close it with 'esc'. I am noticing that this is also how the select behaves in Mantine examples, unfortunately, but I do think it's wrong and would be worth fixing if possible.

[pauloamorimbr]

Can we make it so the select closes when a user tabs to the next element? On the members table, if I open the select then tab to the member actions button, the select stays open and now I can't close it with 'esc'. I am noticing that this is also how the select behaves in Mantine examples, unfortunately, but I do think it's wrong and would be worth fixing if possible.

I tried hard but I just wasn't able to fix this behavior. I came to a point where it would be better to just get Mantine's select code and change it's implementation to add our needed behaviors and have a better control to fix this. 😞

We may end up doing just that in a future task.

[pauloamorimbr]

Weird issue here:

To reproduce:

1. Open up the select component for an org member (member role specifically)
2. Use arrow down to navigate to member option
3. Move the mouse to highlight the admin option
4. Notice that the text color on 'member' remains white, so it basically disappears.

Obviously this is an edge case and I'm not sure if it's really a bug or if it's more a question of how our hover and focus style choices are interacting. Let me know what you think.

Just to mention that in geenral some styles were changed (this one you found was really a bug tho) so we aren't really following the current koboSelect styling in favor of following Tessa's indications.

[jamesrkiger]

Would appreciate it if could deprecate the old KoboSelect story. Other than that, lgtm