[PoC] UI/UX Update

[donyunardi]

Related: insightsengineering/nestdevs-tasks#58

Summary

The work on the teal transform module has prompted us to take a second look at the teal UI to ensure it is efficient, intuitive. and easy to understand.

Below is the proposed design:

The most noticeable change is the location of the sidebar, which has been moved to the left side. The goal is to help users understand how the data transforms during module activities. With this design, users will work from left to right, as the data flows from being filtered, transformed, and finally to the module's encoding area.

The teal data module will consistently appear in the app, allowing users to rerun it if needed.

Definition of Done

• Create prototype of new design, deploy, and have another round of review.
  • One prototype without delayed data ?
  • One prototype with delayed data ?
  • One module with custom transformations
  • One module with transformations within the module (encoding panel) ?

For the PoC deliverable, we can start with a rough outline to get an overall idea before diving into the details and updating everything (e.g., unit tests, shinytest2, etc.).

Tasks

• teal sidebar UI
  • [PoC] HTML Layout UI Changes #1316 (8 SP)
    • Move the sidebar to the left-hand side.
    • Move Sidebar should be in the module.
    • Update the sidebar UI to a collapsible group or another preferred design for collapsibles. However, all groups should be able to be expanded at the same time.
    • Add a feature to minimize and expand the menu when the hamburger button is clicked.
  • [PoC] CSS UI Changes #1317 (8 SP)
    • To match the proposed design
• https://github.com/insightsengineering/coredev-tasks/issues/578 (3 SP)
• Gather feedback from SMEs and Super Users.

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

[kumamiao]

Also review previous issue here: insightsengineering/nestdevs-tasks#27

[vedhav]

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.

[donyunardi]

I moved all the comments and things to do to #1351.
PoC was successfully created and we received feedback.
Closing.