feat(organizations): add theming/story for Mantine ActionIcon TASK-1448

[jamesrkiger]

🗒️ 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

Adds theming and storybook entry for a custom ActionIcon component that automatically includes an appropriate sized icon.

💭 Notes

We previously used our custom in-house button component to display icon buttons. With Mantine, however, these kinds of buttons are rendered with the ActionIcon component.

👀 Preview steps

Use storybook stories and compare to existing icon buttons in the repo. Existing examples include:

• archive/share/delete options in project list view
• edit/delete options in user permissions section of sharing view
• member actions dropdown trigger in organizations member table

[magicznyleszek]

I think that the blue color of the icon is lighter than our current icon buttons.

Also, is there a reason why these overrides doesn't happen at the styles file? I think that modifying styles through vars is not the approch we want to go (see https://github.com/kobotoolbox/kpi/pull/5366/files)

[Akuukis]

let's prefer CSS Modules file over styles prop, because that edits CSS class once, instead of adding style="font-size: calc(0.875rem * var(--mantine-scale)); border-top: 1px solid rgb(237, 238, 242);" to every cell individually (see DOM of storybook). Also, that's officially recommended.

Furthermore, would you agree to prefer vars prop over CSS Modules file, because that's a simple parameterization of the CSS Modules? Although performance is unknown and official docs lacks an opinion on using vars prop vs "hardcoded" values in CSS Modules.

Preferring vars over css is an option, let's talk in the meetup about our policy (options: prefer vars, prefer css, undefined).

[jamesrkiger]

I think that the blue color of the icon is lighter than our current icon buttons.

Good catch. I have fixed this for the 'light' and 'danger-secondary' variants.

[jamesrkiger]

@magicznyleszek I have updated this PR to include a wrapped customization of the ActionIcon component that takes an icon name as a prop and automatically includes the appropriate sized icon. Would you mind taking another look?

[pauloamorimbr]

LGTM!

Left 1 simple comment with an opinion, but it's up to you.