From 122c1e74cddcf0962d64ace8c2cf49066ce9f7e9 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Wed, 20 Dec 2023 19:15:09 -0500 Subject: [PATCH] refactor: pass-through containers in BS5 only (#3960) --- NEWS.md | 2 +- inst/www/shared/shiny.min.css | 2 +- inst/www/shared/shiny_scss/shiny.bootstrap5.scss | 6 ++++++ inst/www/shared/shiny_scss/shiny.scss | 6 ------ 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/NEWS.md b/NEWS.md index b6f4815aa5..0c3d4c1215 100644 --- a/NEWS.md +++ b/NEWS.md @@ -2,7 +2,7 @@ ## Breaking changes -* Both `conditionalPanel()` and `uiOutput()` are now styled with `display: contents` by default. This means that the elements they contain are positioned as if they were direct children of the parent container holding the `conditionalPanel()` or `uiOutput()`. This is probably what most users intend when they use these functions, but it may break apps that applied styles directly to the container elements created by these two functions. In that case, you may include CSS rules to set `display: block` for the `.shiny-panel-conditional` or `.shiny-html-output` classes. (#3957) +* Both `conditionalPanel()` and `uiOutput()` are now styled with `display: contents` by default in Shiny apps that use Bootstrap 5. This means that the elements they contain are positioned as if they were direct children of the parent container holding the `conditionalPanel()` or `uiOutput()`. This is probably what most users intend when they use these functions, but it may break apps that applied styles directly to the container elements created by these two functions. In that case, you may include CSS rules to set `display: block` for the `.shiny-panel-conditional` or `.shiny-html-output` classes. (#3957, #3960) ## New features and improvements diff --git a/inst/www/shared/shiny.min.css b/inst/www/shared/shiny.min.css index ee1891c260..73d8b52de6 100644 --- a/inst/www/shared/shiny.min.css +++ b/inst/www/shared/shiny.min.css @@ -1,2 +1,2 @@ /*! shiny 1.8.0.9000 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */ -pre.shiny-text-output:empty:before{content:" "}pre.shiny-text-output.noplaceholder:empty{margin:0;padding:0;border-width:0;height:0}pre.shiny-text-output{word-wrap:normal}.shiny-image-output img.shiny-scalable,.shiny-plot-output img.shiny-scalable{max-width:100%;max-height:100%}#shiny-disconnected-overlay{position:fixed;inset:0;background-color:#999;opacity:.5;overflow:hidden;z-index:99998;pointer-events:none}html.autoreload-enabled #shiny-disconnected-overlay.reloading{opacity:0;animation:fadeIn .25s forwards;animation-delay:1s}@keyframes fadeIn{to{opacity:.1}}.table.shiny-table>thead>tr>th,.table.shiny-table>thead>tr>td,.table.shiny-table>tbody>tr>th,.table.shiny-table>tbody>tr>td,.table.shiny-table>tfoot>tr>th,.table.shiny-table>tfoot>tr>td{padding-right:12px;padding-left:12px}.shiny-table.spacing-xs>thead>tr>th,.shiny-table.spacing-xs>thead>tr>td,.shiny-table.spacing-xs>tbody>tr>th,.shiny-table.spacing-xs>tbody>tr>td,.shiny-table.spacing-xs>tfoot>tr>th,.shiny-table.spacing-xs>tfoot>tr>td{padding-top:3px;padding-bottom:3px}.shiny-table.spacing-s>thead>tr>th,.shiny-table.spacing-s>thead>tr>td,.shiny-table.spacing-s>tbody>tr>th,.shiny-table.spacing-s>tbody>tr>td,.shiny-table.spacing-s>tfoot>tr>th,.shiny-table.spacing-s>tfoot>tr>td{padding-top:5px;padding-bottom:5px}.shiny-table.spacing-m>thead>tr>th,.shiny-table.spacing-m>thead>tr>td,.shiny-table.spacing-m>tbody>tr>th,.shiny-table.spacing-m>tbody>tr>td,.shiny-table.spacing-m>tfoot>tr>th,.shiny-table.spacing-m>tfoot>tr>td{padding-top:8px;padding-bottom:8px}.shiny-table.spacing-l>thead>tr>th,.shiny-table.spacing-l>thead>tr>td,.shiny-table.spacing-l>tbody>tr>th,.shiny-table.spacing-l>tbody>tr>td,.shiny-table.spacing-l>tfoot>tr>th,.shiny-table.spacing-l>tfoot>tr>td{padding-top:10px;padding-bottom:10px}.shiny-table .NA{color:#909090}.shiny-output-error{color:red;white-space:pre-wrap}.shiny-output-error:before{content:"Error: ";font-weight:700}.shiny-output-error-validation{color:#888}.shiny-output-error-validation:before{content:"";font-weight:inherit}@supports (-ms-ime-align:auto){.shiny-bound-output{transition:0}}.recalculating{opacity:.3;transition:opacity .25s ease .5s}.slider-animate-container{text-align:right;margin-top:-9px}.slider-animate-button{position:relative;z-index:1;opacity:.5}.slider-animate-button .pause{display:none}.slider-animate-button.playing .pause,.slider-animate-button .play{display:inline}.slider-animate-button.playing .play{display:none}.progress.shiny-file-input-progress{visibility:hidden}.progress.shiny-file-input-progress .progress-bar.bar-danger{transition:none}.btn-file{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.shiny-input-container input[type=file]{overflow:hidden;max-width:100%}.shiny-progress-container{position:fixed;top:0;width:100%;z-index:2000}.shiny-progress .progress{position:absolute;width:100%;top:0;height:3px;margin:0}.shiny-progress .bar{opacity:.6;transition-duration:.25s}.shiny-progress .progress-text{position:absolute;right:10px;width:240px;background-color:#eef8ff;margin:0;padding:2px 3px;opacity:.85}.shiny-progress .progress-text .progress-message{padding:0 3px;font-weight:700;font-size:90%}.shiny-progress .progress-text .progress-detail{padding:0 3px;font-size:80%}.shiny-progress-notification .progress{margin-bottom:5px;height:10px}.shiny-progress-notification .progress-text .progress-message{font-weight:700;font-size:90%}.shiny-progress-notification .progress-text .progress-detail{font-size:80%}.shiny-label-null{display:none}.crosshair{cursor:crosshair}.grabbable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.grabbing{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.ns-resize{cursor:ns-resize}.ew-resize{cursor:ew-resize}.nesw-resize{cursor:nesw-resize}.nwse-resize{cursor:nwse-resize}.qt pre,.qt code{font-family:monospace!important}.qt5 .radio input[type=radio],.qt5 .checkbox input[type=checkbox]{margin-top:0}.qtmac input[type=radio],.qtmac input[type=checkbox]{zoom:1.0000001}.shiny-frame{border:none}.shiny-flow-layout>div{display:inline-block;vertical-align:top;padding-right:12px;width:220px}.shiny-split-layout{width:100%;white-space:nowrap}.shiny-split-layout>div{display:inline-block;vertical-align:top;box-sizing:border-box;overflow:auto}.shiny-input-panel{padding:6px 8px;margin-top:6px;margin-bottom:6px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:2px}.shiny-input-checkboxgroup label~.shiny-options-group,.shiny-input-radiogroup label~.shiny-options-group{margin-top:-10px}.shiny-input-checkboxgroup.shiny-input-container-inline label~.shiny-options-group,.shiny-input-radiogroup.shiny-input-container-inline label~.shiny-options-group{margin-top:-1px}.shiny-input-container:not(.shiny-input-container-inline){width:300px;max-width:100%}.well .shiny-input-container{width:auto}.shiny-input-container>div>select:not(.selectized){width:100%}#shiny-notification-panel{position:fixed;bottom:0;right:0;background-color:#0000;padding:2px;width:300px;max-width:100%;z-index:99999}.shiny-notification{position:relative;background-color:#e8e8e8;color:#333;border:1px solid #ccc;border-radius:3px;opacity:.85;padding:10px 2rem 10px 10px;margin:5px}.shiny-notification-message{color:#31708f;background-color:#d9edf7;border:1px solid #bce8f1}.shiny-notification-warning{color:#8a6d3b;background-color:#fcf8e3;border:1px solid #faebcc}.shiny-notification-error{color:#a94442;background-color:#f2dede;border:1px solid #ebccd1}.shiny-notification-close{position:absolute;width:2rem;height:2rem;top:0;right:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:1.125em;padding:.25rem;color:#444;cursor:pointer}.shiny-notification-close:hover{color:#000;font-weight:700}.shiny-notification-content-action a{color:#337ab7;text-decoration:underline;font-weight:700}.shiny-file-input-active{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999}.shiny-file-input-over{box-shadow:inset 0 1px 1px #00000013,0 0 8px #4cae4c99}.datepicker table tbody tr td.disabled,.datepicker table tbody tr td.disabled:hover,.datepicker table tbody tr td span.disabled,.datepicker table tbody tr td span.disabled:hover{color:#aaa;cursor:not-allowed}.nav-hidden{display:none!important}.shiny-panel-conditional,div:where(.shiny-html-output){display:contents} +pre.shiny-text-output:empty:before{content:" "}pre.shiny-text-output.noplaceholder:empty{margin:0;padding:0;border-width:0;height:0}pre.shiny-text-output{word-wrap:normal}.shiny-image-output img.shiny-scalable,.shiny-plot-output img.shiny-scalable{max-width:100%;max-height:100%}#shiny-disconnected-overlay{position:fixed;inset:0;background-color:#999;opacity:.5;overflow:hidden;z-index:99998;pointer-events:none}html.autoreload-enabled #shiny-disconnected-overlay.reloading{opacity:0;animation:fadeIn .25s forwards;animation-delay:1s}@keyframes fadeIn{to{opacity:.1}}.table.shiny-table>thead>tr>th,.table.shiny-table>thead>tr>td,.table.shiny-table>tbody>tr>th,.table.shiny-table>tbody>tr>td,.table.shiny-table>tfoot>tr>th,.table.shiny-table>tfoot>tr>td{padding-right:12px;padding-left:12px}.shiny-table.spacing-xs>thead>tr>th,.shiny-table.spacing-xs>thead>tr>td,.shiny-table.spacing-xs>tbody>tr>th,.shiny-table.spacing-xs>tbody>tr>td,.shiny-table.spacing-xs>tfoot>tr>th,.shiny-table.spacing-xs>tfoot>tr>td{padding-top:3px;padding-bottom:3px}.shiny-table.spacing-s>thead>tr>th,.shiny-table.spacing-s>thead>tr>td,.shiny-table.spacing-s>tbody>tr>th,.shiny-table.spacing-s>tbody>tr>td,.shiny-table.spacing-s>tfoot>tr>th,.shiny-table.spacing-s>tfoot>tr>td{padding-top:5px;padding-bottom:5px}.shiny-table.spacing-m>thead>tr>th,.shiny-table.spacing-m>thead>tr>td,.shiny-table.spacing-m>tbody>tr>th,.shiny-table.spacing-m>tbody>tr>td,.shiny-table.spacing-m>tfoot>tr>th,.shiny-table.spacing-m>tfoot>tr>td{padding-top:8px;padding-bottom:8px}.shiny-table.spacing-l>thead>tr>th,.shiny-table.spacing-l>thead>tr>td,.shiny-table.spacing-l>tbody>tr>th,.shiny-table.spacing-l>tbody>tr>td,.shiny-table.spacing-l>tfoot>tr>th,.shiny-table.spacing-l>tfoot>tr>td{padding-top:10px;padding-bottom:10px}.shiny-table .NA{color:#909090}.shiny-output-error{color:red;white-space:pre-wrap}.shiny-output-error:before{content:"Error: ";font-weight:700}.shiny-output-error-validation{color:#888}.shiny-output-error-validation:before{content:"";font-weight:inherit}@supports (-ms-ime-align:auto){.shiny-bound-output{transition:0}}.recalculating{opacity:.3;transition:opacity .25s ease .5s}.slider-animate-container{text-align:right;margin-top:-9px}.slider-animate-button{position:relative;z-index:1;opacity:.5}.slider-animate-button .pause{display:none}.slider-animate-button.playing .pause,.slider-animate-button .play{display:inline}.slider-animate-button.playing .play{display:none}.progress.shiny-file-input-progress{visibility:hidden}.progress.shiny-file-input-progress .progress-bar.bar-danger{transition:none}.btn-file{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.shiny-input-container input[type=file]{overflow:hidden;max-width:100%}.shiny-progress-container{position:fixed;top:0;width:100%;z-index:2000}.shiny-progress .progress{position:absolute;width:100%;top:0;height:3px;margin:0}.shiny-progress .bar{opacity:.6;transition-duration:.25s}.shiny-progress .progress-text{position:absolute;right:10px;width:240px;background-color:#eef8ff;margin:0;padding:2px 3px;opacity:.85}.shiny-progress .progress-text .progress-message{padding:0 3px;font-weight:700;font-size:90%}.shiny-progress .progress-text .progress-detail{padding:0 3px;font-size:80%}.shiny-progress-notification .progress{margin-bottom:5px;height:10px}.shiny-progress-notification .progress-text .progress-message{font-weight:700;font-size:90%}.shiny-progress-notification .progress-text .progress-detail{font-size:80%}.shiny-label-null{display:none}.crosshair{cursor:crosshair}.grabbable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.grabbing{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.ns-resize{cursor:ns-resize}.ew-resize{cursor:ew-resize}.nesw-resize{cursor:nesw-resize}.nwse-resize{cursor:nwse-resize}.qt pre,.qt code{font-family:monospace!important}.qt5 .radio input[type=radio],.qt5 .checkbox input[type=checkbox]{margin-top:0}.qtmac input[type=radio],.qtmac input[type=checkbox]{zoom:1.0000001}.shiny-frame{border:none}.shiny-flow-layout>div{display:inline-block;vertical-align:top;padding-right:12px;width:220px}.shiny-split-layout{width:100%;white-space:nowrap}.shiny-split-layout>div{display:inline-block;vertical-align:top;box-sizing:border-box;overflow:auto}.shiny-input-panel{padding:6px 8px;margin-top:6px;margin-bottom:6px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:2px}.shiny-input-checkboxgroup label~.shiny-options-group,.shiny-input-radiogroup label~.shiny-options-group{margin-top:-10px}.shiny-input-checkboxgroup.shiny-input-container-inline label~.shiny-options-group,.shiny-input-radiogroup.shiny-input-container-inline label~.shiny-options-group{margin-top:-1px}.shiny-input-container:not(.shiny-input-container-inline){width:300px;max-width:100%}.well .shiny-input-container{width:auto}.shiny-input-container>div>select:not(.selectized){width:100%}#shiny-notification-panel{position:fixed;bottom:0;right:0;background-color:#0000;padding:2px;width:300px;max-width:100%;z-index:99999}.shiny-notification{position:relative;background-color:#e8e8e8;color:#333;border:1px solid #ccc;border-radius:3px;opacity:.85;padding:10px 2rem 10px 10px;margin:5px}.shiny-notification-message{color:#31708f;background-color:#d9edf7;border:1px solid #bce8f1}.shiny-notification-warning{color:#8a6d3b;background-color:#fcf8e3;border:1px solid #faebcc}.shiny-notification-error{color:#a94442;background-color:#f2dede;border:1px solid #ebccd1}.shiny-notification-close{position:absolute;width:2rem;height:2rem;top:0;right:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:1.125em;padding:.25rem;color:#444;cursor:pointer}.shiny-notification-close:hover{color:#000;font-weight:700}.shiny-notification-content-action a{color:#337ab7;text-decoration:underline;font-weight:700}.shiny-file-input-active{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999}.shiny-file-input-over{box-shadow:inset 0 1px 1px #00000013,0 0 8px #4cae4c99}.datepicker table tbody tr td.disabled,.datepicker table tbody tr td.disabled:hover,.datepicker table tbody tr td span.disabled,.datepicker table tbody tr td span.disabled:hover{color:#aaa;cursor:not-allowed}.nav-hidden{display:none!important} diff --git a/inst/www/shared/shiny_scss/shiny.bootstrap5.scss b/inst/www/shared/shiny_scss/shiny.bootstrap5.scss index 86c092cd21..c56ee8b862 100644 --- a/inst/www/shared/shiny_scss/shiny.bootstrap5.scss +++ b/inst/www/shared/shiny_scss/shiny.bootstrap5.scss @@ -37,3 +37,9 @@ $notification-content-action-color: RGB(var(--#{$prefix}primary-rgb, #{to-rgb($p $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; +} diff --git a/inst/www/shared/shiny_scss/shiny.scss b/inst/www/shared/shiny_scss/shiny.scss index 11c85e582d..916b1b0b5e 100644 --- a/inst/www/shared/shiny_scss/shiny.scss +++ b/inst/www/shared/shiny_scss/shiny.scss @@ -469,9 +469,3 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading { /* override anything bootstrap sets for `.nav` */ display: none !important; } - -/* Conditional panels and uiOutput */ -.shiny-panel-conditional, -div:where(.shiny-html-output) { - display: contents; -}