kobotoolbox / kpi / 12895414045

81%

master: 76%

push

github

feat(organizations): add theming/story for Mantine Select TASK-1382  (#5414)

### 📣 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.

---------

Co-authored-by: Kalvis Kalniņš <kalvis.kalnins@kobotoolbox.org>

5850 of 9358 branches covered (62.51%)

22327 of 27726 relevant lines covered (80.53%)

0.81 hits per line