feat(organizations): add theming/story for Mantine ActionIcon TASK-1448 #5412
Conversation
jamesrkiger
changed the title
| '--ai-hover': theme.colors.blue[5], | ||
| }), | ||
| ...(props.variant === 'light' && { | ||
| '--ai-color': theme.colors.blue[5], |
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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).
| iconS: { | ||
| description: 'Icon', | ||
| options: Object.keys(IconNames), | ||
| mapping: generateSizedIconElementMap('s'), |
There was a problem hiding this comment.
There is something weird happening when I switch the size - the icon that I've set is gone and instead no icon or some other icon appears. It seems it's somehow connected to this function. It's not a bug per se, but it works differently from what we have
| @@ -0,0 +1,7 @@ | |||
| .root { | |||
There was a problem hiding this comment.
Shouldn't this file be .scss? I see that it does work in the build, but the code in it is not really CSS given the nesting and &
There was a problem hiding this comment.
Weird that Mantine officially does the same, see https://mantine.dev/styles/css-modules/
🗒️ Checklist
<type>(<scope>)<!>: <title> TASK-1234frontendorbackendunless it's global📣 Summary
Adds theming and storybook entry for ActionIcon
💭 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: