Skip to content
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.

Sign up for GitHub

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

feat(fill): Use a @layer htmltools #425

Merged
merged 3 commits into from
Mar 19, 2024
Merged

feat(fill): Use a @layer htmltools #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8473d99
feat(fill): Use a `@layer htmltools`
gadenbuie Mar 17, 2024
456bbcb
`devtools::document()` (GitHub Actions)
gadenbuie Mar 17, 2024
c2ee205
docs: Add news item
gadenbuie Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DESCRIPTION
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Config/Needs/check: knitr
Config/Needs/website: rstudio/quillt, bench
Encoding: UTF-8
Roxygen: list(markdown = TRUE)
RoxygenNote: 7.2.3
RoxygenNote: 7.3.1
Collate:
'colors.R'
'fill.R'
Expand Down
6 changes: 5 additions & 1 deletion NEWS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
# htmltools (development version)

## Improvements
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went back and forth on putting this in "possible breaking changes". It's more likely this change will un-break unintentionally broken styles and less likely to break working styles, so I settled on calling it an "improvement".


* The fill CSS attached to fillable containers and fill items with `bindFillRole()` now uses a [CSS cascade layer](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) named `htmltools` to reduce the precedence order of the fill CSS. (#425)

## Bug fixes

* `bindFillRole()` now attaches its `HTMLDependency()` to fill items, thus reducing the possibility of filling layout breaking due to missing CSS. (#421)
* `bindFillRole()` now attaches its `HTMLDependency()` to fill items, thus reducing the possibility of filling layout breaking due to missing CSS. (#421)


# htmltools 0.5.7
Expand Down
38 changes: 20 additions & 18 deletions inst/fill/fill.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
.html-fill-container {
display: flex;
flex-direction: column;
/* Prevent the container from expanding vertically or horizontally beyond its
parent's constraints. */
min-height: 0;
min-width: 0;
}
.html-fill-container > .html-fill-item {
/* Fill items can grow and shrink freely within
available vertical space in fillable container */
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.html-fill-container > :not(.html-fill-item) {
/* Prevent shrinking or growing of non-fill items */
flex: 0 0 auto;
@layer htmltools {
.html-fill-container {
display: flex;
flex-direction: column;
/* Prevent the container from expanding vertically or horizontally beyond its
parent's constraints. */
min-height: 0;
min-width: 0;
}
.html-fill-container > .html-fill-item {
/* Fill items can grow and shrink freely within
available vertical space in fillable container */
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.html-fill-container > :not(.html-fill-item) {
/* Prevent shrinking or growing of non-fill items */
flex: 0 0 auto;
}
}
Loading