Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Combine multiple variants/modifiers

See original GitHub issue

The option to use multiple variants / modifiers has been discussed at length on theme-ui. However, to my understanding, this hasn’t been implemented anywhere yet. While I like to stay within the theme-ui spec for this library, I’m not sure if it’s worth waiting for an implementation on their end.

I think this issue could serve as a way to think through the best way to do multiple variants (or modifiers) on components. An array syntax is a bit tricky, since it’s already used for responsive styles. An alternative could be comma-separated strings, but it’s not pretty, and there’s no type support there (unless we use some intense TS 4.1 template literals.)

Related discussions from theme UI: https://github.com/system-ui/theme-ui/issues/403

Since we’re considering building opinionated UI libraries on top of Dripsy, this seems like essential functionality to avoid tons of boilerplate.

To illustrate the need, consider the difficulty of building all the buttons on this page with multiple modifiers vs. without: https://react.geist-ui.dev/en-us/components/button

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

nandorojocommented, Oct 12, 2020

This is published, been working with it so far and I really like it. I don’t really use responsive styles in variants to begin with, but even so, the array syntax is pretty easy to understand.

0reactions

cmaycumbercommented, Oct 12, 2020

Sweet definitely have to try this out when I get the chance.

Top Results From Across the Web

Variants and Modifiers - BigCommerce Support

This chapter will walk you through the different attributes of variants and modifiers, how they appear on products in the storefront, and how...

Interpreting the clinical significance of combined variants in ...

(A) Genetic modifiers: Mutations in JBTS gene 2 and 3 modify the phenotypic outcome of the disorder, which is caused by bi-allelic mutations...

Rare Modifier Variants Alter the Severity of Cardiovascular ...

Contrary to modifiers with a high penetrance, it is assumed that multiple rare variants of low penetrance either within or across genes ...

Chainable BEM modifiers - We build Envato

When chaining modifiers together we start with a base class and then add modifiers to set or override properties. These are also delimited...

Compose modifiers - Jetpack - Android Developers

Multiple modifiers can be chained together to decorate or augment a composable. This chain is created via the Modifier interface which represents an...