Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

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

Priority

Components

Affects versions

None

Fix versions

None

Labels

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 , 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

 

100% Done
Loading...

Activity

Show:

Esther Ortega Cañón October 6, 2021 at 9:27 AM

Manual Test validation - Round 1

PASSED Manual Testing following the steps in the description.

Verified on:
Environment: localhost
Github: https://github.com/liferay/liferay-portal.git
Branch: master
Bundle: Liferay CE
Database: MySQL 5.7.22
Last Commit: 524c34f3322fda41f88ffdc731276db822eaead1

  

  • Impeditive:
     No impeditive bugs found.

  • Not impeditive:
     No not impeditive bugs found.

  

Test Scenarios:
  

Requirement

Test Scenarios

Covered by frontend/backend Unit Test?

Test Priority (business impact) 

Chrome
Pass/Fail

Comments

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

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 , 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

 

Exploratory testing of the portal, it seems that the Bootstrap upgrade works fine and has not affected the components in the portal. 

 

Exploratory testing to consider:
 

Test Scenarios

Covered by frontend/backend Unit Test?

Test Priority (business impact) 

Firefox
Pass/Fail

Chrome
Pass/Fail

Safari Pass/Fail

Edge
Pass/Fail

Comments

  

 Follow the test cases of General Features in Chrome / FF / Edge / Safari

 2-low

 

 

 - Quick exploratory testing around the portal, not possible to check all the test scenarios, just a quick look to check that there are no major UI problems.

  • No tested in Edge due to lack of time.

 

Follow the test cases of General Features in the mobile device (smart phone, tablet)

2-low

 n/a

 n/a

 n/a

 n/a

Workflow that will not be used in mobile. 

Esther Ortega Cañón September 10, 2021 at 9:01 AM

Test cases added to the epic.

Bryce Osterhaus June 30, 2021 at 2:58 PM

Published both @liferay/bs3-bs4-compat package and a new version of liferay-theme-tasks which now includes an option for using the compat layer when upgrading to 7.4.

Bryce Osterhaus June 28, 2021 at 9:58 AM

Sent a PR to add the compat layer as a separate package and included it in our theme upgrade task. https://github.com/liferay/liferay-frontend-projects/pull/597

Next steps for completing this epic, https://github.com/liferay/liferay-frontend-projects/pull/597#issuecomment-869846327

Bryce Osterhaus June 9, 2021 at 12:23 PM

cc how do we want to evaluate the "completeness" of this epic? I created a separate npm package to contain the compat layer and added some docs in the repo to show to to use it. https://github.com/bryceosterhaus/liferay-bs3-to-bs4-compat

Completed
Pinned fields
Click on the next to a field label to start pinning.

Details

Assignee

Reporter

Epic/Theme

Zendesk Support

Created January 15, 2021 at 1:46 AM
Updated May 30, 2022 at 9:58 AM
Resolved October 8, 2021 at 1:32 AM