UI changes on upgrade to bslib and Bootstrap 5

DESCRIPTION

@@ -34,7 +34,7 @@ BugReports: https://github.com/insightsengineering/teal.slice/issues
 Depends:
     R (>= 4.0)
 Imports:
-    bslib (>= 0.4.0),
+    bslib (>= 0.8.0),
     checkmate (>= 2.1.0),
     dplyr (>= 1.0.5),
     grDevices,

R/FilterState.R

@@ -338,7 +338,7 @@ FilterState <- R6::R6Class( # nolint
                 actionLink(
                   inputId = ns("back"),
                   label = NULL,
-                  icon = icon("circle-arrow-left", lib = "font-awesome"),
+                  icon = icon("far fa-circle-arrow-left"),
                   title = "Rewind state",
                   class = "filter-card-back",
                   style = "display: none"
@@ -348,7 +348,7 @@ FilterState <- R6::R6Class( # nolint
                 actionLink(
                   inputId = ns("reset"),
                   label = NULL,
-                  icon = icon("circle-arrow-up", lib = "font-awesome"),
+                  icon = icon("far fa-circle-arrow-up"),
                   title = "Restore original state",
                   class = "filter-card-back",
                   style = "display: none"
@@ -357,8 +357,8 @@ FilterState <- R6::R6Class( # nolint
               if (isFALSE(private$is_anchored())) {
                 actionLink(
                   inputId = ns("remove"),
-                  label = icon("circle-xmark", lib = "font-awesome"),
-                  title = "Remove filter",
+                  label = icon("far fa-circle-xmark"),
+                  title = "Remove filter asdfasdfaksdfk",
                   class = "filter-card-remove"
                 )
               }

R/FilteredData.R

@@ -501,8 +501,9 @@ FilteredData <- R6::R6Class( # nolint
     #' @return `shiny.tag`
     ui_filter_panel = function(id, active_datanames = self$datanames) {
       ns <- NS(id)
-      tags$div(
+      bslib::page_fluid(
         id = ns(NULL), # used for hiding / showing
+        class = "teal-slice filter-panel",
         include_css_files(pattern = "filter-panel"),
         include_js_files(pattern = "togglePanelItems"),
         shinyjs::useShinyjs(),
@@ -553,45 +554,61 @@ FilteredData <- R6::R6Class( # nolint
       ns <- NS(id)
       tags$div(
         id = id, # not used, can be used to customize CSS behavior
-        class = "well",
         include_js_files(pattern = "togglePanelItems"),
-        tags$div(
-          style = "display: flex; justify-content: space-between;",
-          tags$span("Active Filter Variables", class = "text-primary", style = "font-weight: 700;"),
-          tags$div(
-            style = "min-width: 60px;",
-            uiOutput(ns("remove_all_filters_ui")),
-            tags$a(
-              class = "remove_all",
-              tags$i(
-                class = "fa fa-angle-down",
-                title = "fold/expand ...",
-                onclick = sprintf(
-                  "togglePanelItems(this, ['%s', '%s'], 'fa-angle-down', 'fa-angle-right');",
-                  ns("filter_active_vars_contents"),
-                  ns("filters_active_count")
+        bslib::accordion(
+          id = ns("main_filter_accordian"),
+          bslib::accordion_panel(
+            "Filter Data",
+            icon = icon("fas fa-filter"),
+            tags$div(
+              div(
+                id = ns("available_filters_ui"),
+                style = "margin-left: -7rem; z-index: 100; display: flex; flex-direction: row-reverse; align-items: center; width: 4.5rem;",
+                private$ui_available_filters(ns("available_filters")),
+                  uiOutput(ns("remove_all_filters_ui"))
+              ),
+              tags$div(
+                id = ns("filter_active_vars_contents"),
+                tagList(
+                  lapply(
+                    isolate(active_datanames()),
+                    function(dataname) {
+                      fdataset <- private$get_filtered_dataset(dataname)
+                      fdataset$ui_active(id = ns(dataname), allow_add = private$allow_add)
+                    }
+                  )
                 )
+              ),
+              tags$div(
+                id = ns("filters_active_count"),
+                style = "display: none;",
+                textOutput(ns("teal_filters_count"))
               )
-            ),
-            private$ui_available_filters(ns("available_filters"))
+            )
           )
         ),
-        tags$div(
-          id = ns("filter_active_vars_contents"),
-          tagList(
-            lapply(
-              isolate(active_datanames()),
-              function(dataname) {
-                fdataset <- private$get_filtered_dataset(dataname)
-                fdataset$ui_active(id = ns(dataname), allow_add = private$allow_add)
-              }
+        tags$script(
+          HTML(
+            sprintf(
+              "
+            $(document).ready(function() {
+              $('#%s').appendTo('#%s > .accordion-item > .accordion-header');
+              $('#%s > .accordion-item > .accordion-header').css({
+                'display': 'flex'
+              });
+              $('#%s i').css({
+                'color': 'var(--bs-accordion-color)',
+                'font-size': '1.3rem',
+                'margin-bottom': '0.7rem'
+              });
+            });
+          ",
+              ns("available_filters_ui"),
+              ns("main_filter_accordian"),
+              ns("main_filter_accordian"),
+              ns("available_filters_ui")
             )
           )
-        ),
-        tags$div(
-          id = ns("filters_active_count"),
-          style = "display: none;",
-          textOutput(ns("teal_filters_count"))
         )
       )
     },
@@ -631,12 +648,14 @@ FilteredData <- R6::R6Class( # nolint
 
         output$remove_all_filters_ui <- renderUI({
           req(is_filter_removable())
-          actionLink(
-            inputId = session$ns("remove_all_filters"),
-            label = "",
-            icon("circle-xmark", lib = "font-awesome"),
-            title = "Remove active filters",
-            class = "remove_all"
+          tags$div(
+            style = "display: flex;",
+            actionLink(
+              inputId = session$ns("remove_all_filters"),
+              label = "Clear",
+              title = "Remove active filters",
+              class = "remove_all"
+            )
           )
         })
 
@@ -716,36 +735,33 @@ FilteredData <- R6::R6Class( # nolint
     #'
     ui_overview = function(id) {
       ns <- NS(id)
-      tags$div(
-        id = id, # not used, can be used to customize CSS behavior
-        class = "well",
-        tags$div(
-          class = "row",
-          tags$div(
-            class = "col-sm-9",
-            tags$label("Active Filter Summary", class = "text-primary mb-4")
-          ),
-          tags$div(
-            class = "col-sm-3",
-            tags$a(
-              class = "filter-icon",
-              tags$i(
-                class = "fa fa-angle-down",
-                title = "fold/expand ...",
-                onclick = sprintf(
-                  "togglePanelItems(this, '%s', 'fa-angle-down', 'fa-angle-right');",
-                  ns("filters_overview_contents")
+      bslib::accordion(
+        id = ns("main_filter_accordian"),
+        bslib::accordion_panel(
+          title = "Active Filter Summary",
+          tagList(
+            tags$div(
+              class = "col-sm-3",
+              tags$a(
+                class = "filter-icon",
+                tags$i(
+                  class = "fa fa-angle-down",
+                  title = "fold/expand ...",
+                  onclick = sprintf(
+                    "togglePanelItems(this, '%s', 'fa-angle-down', 'fa-angle-right');",
+                    ns("filters_overview_contents")
+                  )
                 )
               )
+            ),
+            tags$div(
+              id = ns("filters_overview_contents"),
+              tags$div(
+                class = "teal_active_summary_filter_panel",
+                tableOutput(ns("table"))
+              )
             )
           )
-        ),
-        tags$div(
-          id = ns("filters_overview_contents"),
-          tags$div(
-            class = "teal_active_summary_filter_panel",
-            tableOutput(ns("table"))
-          )
         )
       )
     },
@@ -927,7 +943,7 @@ FilteredData <- R6::R6Class( # nolint
           actionLink(
             ns("show"),
             label = NULL,
-            icon = icon("plus", lib = "font-awesome"),
+            icon = icon("far fa-square-check"),
             title = "Available filters",
             class = "remove pull-right"
           ),