btui-react
utility props
⚛︎ 📏
additionalClassNames
🚮
*
* OK, not entirely.
Making BTUI layout primitives a little less ...primitive
Why?
Simple use cases, like laying out a divider, either require extra markup or custom CSS
How?
Expose an expressive style API via props
[storybook demo]
(inspired by
Title Text
Today
.bgui-c-divider {
margin: 0 var(--spacing-medium);
}
@media (min-width: 768px) {
.confirmation-car-card {
display: flex;
}
.bgui-c-divider {
margin: 0;
}
.confirmation-car-card__location .bgui-c-divider {
display: none;
}
.confirmation-car-card__pricing {
border-left: 1px solid rgb(var(--bui_color_greyscale_lighter));
}
}
<Card additionalClassNames="confirmation-car-card">
<div className="bgui-u-3/4">
<div className="confirmation-car-card__details">
<Box>Vehicle details</Box>
<Divider />
</div>
<div className="confirmation-car-card__location">
<Box>Supplier and flight locations</Box>
<Divider />
</div>
</div>
<div className="confirmation-car-card__pricing">
<Box>Pricing and booking actions</Box>
</div>
</Card>
Future
@media (min-width: 768px) {
.confirmation-car-card {
display: flex;
}
}
<Card additionalClassNames="confirmation-car-card">
<div className="bgui-u-3/4">
<Box>Vehicle details</Box>
<Divider mh={[3, 0]} />
<Box>Supplier and flight locations</Box>
</div>
<Divider mh={[3, 0]} show={[true, false]} />
<Card
bt="none"
bb="none"
br="none"
bl={["none", "none", "greyscale_lighter"]}
pa={3}
>
Pricing and booking actions
</Card>
</Card>
- Fewer wrapper divs to think of class names for
- No targeting of dividers in css via classname
- Code managing borders is all colocated, not split across JSX and CSS - clearer intent
- Terser source code - not always a win, but in this case more readable
- Terser DOM output - possibly a perf win on cheaper mobile devices
WIP WIP WIP
Tell us!
What problems would this solve for your team?
👍
👎
Any concerns?
BTUI React Utility Props
By itsravenous
BTUI React Utility Props
- 568