Fix opacity dimming on recalculating uiOutput() (#4028)

* Close #4027: Fix opacity dimming on recalculating uiOutput(). Also, only apply display:content when there are child elements * Update inst/www/shared/shiny_scss/shiny.bootstrap5.scss * Add news item
rstudio · Apr 10, 2024 · 3edf9bf · 3edf9bf
1 parent 420a2c0
commit 3edf9bf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,5 +1,8 @@
 # shiny (development version)
 
+## Bug fixes
+
+* Fixed a recent issue with `uiOutput()` and `conditionalPanel()` not properly lower opacity when recalculation (in a Bootstrap 5 context). (#4027)
 
 # shiny 1.8.1.1
 

diff --git a/inst/www/shared/shiny_scss/shiny.bootstrap5.scss b/inst/www/shared/shiny_scss/shiny.bootstrap5.scss
@@ -38,8 +38,15 @@ $datepicker-disabled-color:         $dropdown-link-disabled-color !default;
 
 $shiny-file-active-shadow:          $input-focus-box-shadow !default;
 
-/* Treat conditional panels and uiOutput as "pass-through" containers */
+
 .shiny-panel-conditional,
 div:where(.shiny-html-output) {
-  display: contents;
+  /* uiOutput()/ conditionalPanel() are "pass-through" containers when they have children. */
+  &:has(> *) {
+    display: contents;
+      /* Pass along styles that no longer impact the pass-through container */
+    &.recalculating > * {
+      opacity: 0.3;
+    }
+  }
 }