Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-125918

As a Developer I want an upgrade path from Bootstrap3 markup to Bootstrap4

    Details

      Description

      With the removal of the Bootstrap3 compatibility layer in Remove BS3-BS4 CSS Compatibility Layer, code that previously relied on legacy Bootstrap3 markup no longer behaves as expected.

      This layer was always meant to work as a temporary band-aid that projects could use to get an upgrade done fast and out the door. Once the upgrade was completed, it was advised that the project was updated and the compat layer disabled as to speed up the site.

      With the removal of the layer, we speed up all pages by default avoiding to load a big amount of unnecessary CSS. However, developers still relying on this might have a hard time upgrading, so the goal of this epic is to provide a one-time solution to simplify this process.

      Acceptance Criteria

      • Developers have a well-defined procedure to keep using the BS3-BS4 layer in the themes, in case they need to.
      • Our tooling support that procedure as an opt-in logic when upgrading the theme, to allow users to add the compat layer to the theme as part of the upgrade process if they need to.
      • For new themes created for 7.4, tool won't provide this logic. Addition of this layer for new themes can still be done manually.
      • A reference article with the main changes needed to upgrade affected markup is available to theme/frontend developers. The basic material will be taken from the technical draft which documented the removal.

       

      Test Information

      Test Scenarios:

      Requirement Test Case Covered by frontend/backend unit test? (Yes/No) Test Priority (business impact)
      LPS-125918  Given the user wants to upgrade Liferay DXP to 7.4
      When the upgrade process is running
      Then a prompt will ask the user if adding BS3-BS4 layer to the theme
      And a message will be displayed informing the user about the lack of support for this layer
       no 4-major 
         Exploratory tests for the main areas of the portal that are affected by the Bootstrap upgrade accordingly to the tech draft document, to check that changes/removals work as expected and general visually and functionally are ok.
      • Focus on UI and the elements listed by priority below:
      • Max time: 2 h
         
        High priority (mandatory):
      • Themes: Styled, Classic, and Admin Themes only support Bootstrap 4.
      • Check places where we were still using Bootrasp 3 markup:
      • Commerce, Sync Connector Admin, Accounts, Mobile Device Families using the old management bar.
      • Search, Server Administration, Gogo Shell, Push Notifications, Monitoring, New Announcement, New Remote App, New Workflow, Social Activity, Blog New Entry, Social Activity convert to `sheet` instead of using `main-content-card` or `panel`.
      • Instance Settings and other places update `button-holder` to `sheet-footer`.
      • Update checkboxes in `search-iterator` to use `custom-control custom-checkbox`.
      • Update Taglib Empty Result Message to use markup from https://clayui.com/docs/components/empty-state/markup.html.
      • Update Product Menu and Simulation Menu to not use Panel or List Group markup
         
        Medium/low priority (if possible):  Here a detailed testing is not necessary as most of this things were don in the epic LPS-123359, so exploratory testing looks okay with the layer enabled, checking that everything works fine in Bootstrap 4.  Taking into account that the following element are regarding the Clay naming.
        Following elements should work:
      • variables
      • mixins
      • basic search
      • component animations
      • dropdowns
      • forms
      • grid
      • icons
      • liferay
      • list groups
      • management bar
      • modals
      • nav tabs
      • navbar
      • navs
      • pager
      • pagination
      • panels
      • popover
      • progress bars
      • sidebar
      • simple flex box grid
      • tables
      • toggle switch
      • toolbar
      • user icons
      no  3-medium 
       LPS-125918  Follow the test cases of General Features in Chrome / FF / Edge / Safari no 2-low
      LPS-125918  Follow the test cases of General Features in the mobile device (smart phone, tablet) no 2-low

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              jose.balsas Chema Balsas
              Recent user:
              Daniel Sanz
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package