UI/UX Update (Part 2)

[donyunardi]

Continuation of #1289

• https://github.com/insightsengineering/coredev-tasks/issues/578
• [Feature Request]: Use bootstrap theme for all elements #735
• https://github.com/insightsengineering/coredev-tasks/issues/586
• https://github.com/insightsengineering/coredev-tasks/issues/588
• https://github.com/insightsengineering/coredev-tasks/issues/589
• https://github.com/insightsengineering/coredev-tasks/issues/591#issue-2593660744
• https://github.com/insightsengineering/coredev-tasks/issues/587

When it's ready for implementation (we will create a new issue for this)

Definition of Done:

• All elements should be compatible with bootstrap 5
  • UI should be responsive and looks proper between large/small dimension
• All elements should react to bslib theme changes
  • Colors should not be hardcoded

Tasks

• Organize web assets (js and css) throughout all teal packages
• write/update unit tests
• update teal elements to support bootstrap 5
  • [Question]: button styles #1242
• manual testing
• update shinytest2 for teal framework packages and modules
• update teal.gallery demo apps
  • update gifs
  • possibly update app.R
• Review and update all vignettes or README that has screenshots of teal app in all teal frameworks packages

Previous tasks

• Enable bootstrap theming colors for all UI components of the filter panel teal.slice#252
• Support only minimum version of Bootstrap #802
• checkbox labels are not properly aligned in the center with respect to the checkboxes. teal.slice#338

bslib migration

As part of this issue, we agreed to migrate teal components to use bslib and Bootstrap 5 components and close the issue https://github.com/insightsengineering/coredev-tasks/issues/587

General guidelines during the tasks:

• Please use the feature branch for testing: bslib@main
• Use of bslib whenever possible to simplify what we already do with css/js.
• Make sure that the custom CSS/JS code is isolated to the current package.
• Testing - Run all the examples with main branch and this feature branch to check if the UI changes make sense or are there any changes needed. If there are new changes, mention it and create a small PR. This will invalidate the previous tests and we have to start the tests from the beginning.
• It is still okay to use shiny::fluidPage and older shiny components inside a bigger bslib::fluid_page or equivalent component and the looks will remain similar. But, it’s a good idea to migrate completely as much as possible so it is easy to maintain. Additionally, the column layout from bslib is very powerful.

Sub-tasks

• teal: Bring the sidebar (data summary, filter panel, transform panel) to the left side based on the discussion.
• teal, teal.modules.general, teal.goshawk: Remove the custom css “teal-tooltip” feature that is used outside teal. Replace it with bslib::tooltip.
• All packages: Create namespace classes and only add style class that affect these namespaces without affecting elements created outside the scope of these elements.
• teal_slice: Make sure the style changes work on a normal shiny app that does not use teal.
• teal_widget: Support only bootstrap 5 components and remove code related to bs3 and bs4.