BTUI utility props

additionalClassNames?

🚮

* OK, not entirely. More of a relegation

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

https://system-ui.com/theme

https://styled-system.com/)

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?

deck

By itsravenous