Improves badge border and look

R/module_picks.R

@@ -327,6 +327,7 @@ picks_srv.picks <- function(id, picks, data) {
 .pick_ui_fixed <- function(id, selected) {
   htmltools::tags$div(
     class = "form-group shiny-input-container",
+    style = "visibility: hidden; position: absolute;",
     htmltools::tags$input(
       id = id,
       disabled = "disabled",

R/ui_containers.R

@@ -17,7 +17,7 @@ badge_dropdown <- function(id, label, content) {
       htmltools::includeScript(system.file("badge-dropdown", "script.js", package = "teal.picks"))
     )),
     htmltools::tags$div(
-      class = "badge-dropdown-wrapper",
+      class = "badge-wrapper",
       htmltools::tags$span(
         id = ns("summary_badge"),
         class = "badge bg-primary rounded-pill badge-dropdown",
@@ -32,7 +32,7 @@ badge_dropdown <- function(id, label, content) {
         style = htmltools::css(
           visibility = "hidden",
           width = "0",
-          position = "absolute",
+          position = "fixed",
           background = "white",
           border = "1px solid #ccc",
           `border-radius` = "4px",
@@ -61,6 +61,7 @@ badge_fixed <- function(id, label, content) {
       htmltools::includeCSS(system.file("badge-dropdown", "style.css", package = "teal.picks"))
     )),
     htmltools::tags$div(
+      class = "badge-wrapper",
       htmltools::tags$span(
         id = ns("fixed_badge"),
         class = "fixed-picks badge-dropdown",
@@ -69,8 +70,9 @@ badge_fixed <- function(id, label, content) {
       ),
       htmltools::tags$div(
         id = ns("inputs_container"),
+        class = "zero-width-inputs",
         content,
-        style = "visibility: hidden; width: 0; height: 0;"
+        style = "visibility: hidden; width: 0; height: 0; position: fixed;"
       )
     )
   )

inst/badge-dropdown/script.js

@@ -8,6 +8,7 @@ function toggleBadgeDropdown(summaryId, containerId) {
       container.removeEventListener('transitionend', onHidden);
       container.style.visibility = 'hidden';
       container.style.width = "0";
+      container.style.position = "fixed";
       $(container).trigger('hidden');
       if (container._originalParent) {
         container._originalParent.appendChild(container);
@@ -21,6 +22,10 @@ function toggleBadgeDropdown(summaryId, containerId) {
       container._originalParent = container.parentNode;
     }
 
+    if (container.querySelectorAll('.shiny-input-validation-error').length > 0) {
+      container._originalParent.classList.add("has-validation-error");
+    }
+
     // Position relative to the badge
     var rect = summary.getBoundingClientRect();
     container.style.position = 'absolute';
@@ -44,6 +49,7 @@ function toggleBadgeDropdown(summaryId, containerId) {
     setTimeout(function() {
       function handleClickOutside(event) {
         if (!container.contains(event.target) && !summary.contains(event.target)) {
+          container._originalParent.classList.remove("has-validation-error");
           hideContainer();
           document.removeEventListener('click', handleClickOutside);
         }

inst/badge-dropdown/style.css

@@ -18,11 +18,13 @@
 .badge-dropdown {
   overflow-x: auto;
   padding-right: 0.5rem;
+  border: 2px solid transparent;
 }
 
 .badge-dropdown:has(~ * .shiny-validation-message),
-.badge-dropdown:has(~ * .shiny-output-error) {
-  border: 2px solid red;
+.badge-dropdown:has(~ * .shiny-output-error),
+.badge-wrapper.has-validation-error .badge-dropdown {
+  border: 2px solid var(--bs-danger);
 }
 
 .badge-dropdown-label,
@@ -83,4 +85,10 @@
 
 .fixed-picks i {
   flex-shrink: 0;
-}
+}
+
+.zero-width-inputs .form-group.shiny-input-container {
+  width: 0;
+  padding: 0;
+  border: none;
+}