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

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Themes Infrastructure > Compatibility Layer
• Labels:
  • 7.4-ce-ga4
  • 7.4-dxp-ga1
  • fc_21_05
  • fi-s-devexp
• Epic/Theme:
  • FI_Developer_Experience
• Epic Status: Done

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