rstudio / htmltools

Tools for HTML generation and output
https://rstudio.github.io/htmltools/
213 stars 67 forks source link

Use `:has()` to activate fillable containers in tandem with fill items #388

Open gadenbuie opened 12 months ago

gadenbuie commented 12 months ago

When (or if) support for :has() lands in Firefox or generally picks up, it could be nice to refactor fillable containers such that they only become flex containers when they include a fillable item as a direct child.

The immediate advantage of this approach would be that elements in a card body or other fillable container would be spaced "as expected", i.e. as if they were in a normal display: block container. Currently, the display: flex of .html-fill-container (fillable containers) changes the ideal spacing module from margin to gap, and bslib does some work to internally pick the right one.

.html-fill-container:has(> .html-fill-item) {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}