-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@bem-react/classname: Allow multi-valued modifiers #617
Comments
hey @Sidnioulz! thank you for your contribution and glad to see such deep understanding of our methodology and tools but that ability to have multiply value for one modifier is against basics (see https://en.bem.info/methodology/key-concepts/#modifier) — so it would be misconcept to allow to do it in one of implementations I would suggest you to use a set of boolean modifiers in case you wish to provide a set of orthogonal variants (which can be presented simultaneously on some block/element), eg. |
I'm writing this ticket in support of allowing modifiers to be defined with multiple modvalues.
It is often the case that, in a component library, you want to enable style modifications on components across multiple semantic ranges, eg:
In many cases, each of these ranges can be exposed to users of the component with a separate, unique prop (eg.
<MyComponent size="small" color="light" density="compact" />
).However, this design pattern is not very flexible and future-proof, especially when developing unstyled components. In my company, the person writing the component API and the person writing the style are two different people (sometimes those are even from a different company). We need to be able to expose a future-proof, multi-valued prop where multiple style modifications can be expressed, eg.
<MyComponent variant="small light compact" />
.This is not currently possible with @bem-react/classname. I'd like to add support for passing arrays of string values to a mod, resulting in multiple mod modifiers being produced:
The text was updated successfully, but these errors were encountered: