Contrib.social

Fix regression issues between Layout Builder UX and Bootstrap Layout Builder Styles

Open on Drupal.org →
Created on 18 January 2023, almost 2 years ago
Updated 22 January 2023, almost 2 years ago

Problem/Motivation

📌 Update Bootstrap Styles module from 1.0.3 to 1.1.0 and keep needed patches Fixed
📌 Update Bootstrap Layout Builder module from 2.0.1 to 2.1.1 Fixed

Steps to reproduce

Scenario: Check if a site admin can create a landing page and add sections to it with different container types                                                                                                                                                                                                   
    Given I am a logged in user with the "Site admin" user                                                                                                                                                                                                                                                          
    When I go to "/node/add/landing_page_lb"                                                                                                                                                                                                                                                                        
    And I wait                                                                                                                                                                                                                                                                                                      
    Then I should see "Create Landing page (Layout Builder)"                                                                                                                                                                                                                                                        
    When I fill in "Test Landing page (Layout Builder) by Site Admin" for "Title"                                                                                                                                                                                                                                   
    And I fill in "Test Landing page (Layout Builder) description" for "Page description"                                                                                                                                                                                                                           
    And I select "published" from "Save as"                                                                                                                                                                                                                                                                         
    And I press the "Save" button                                                                                                                                                                                                                                                                                   
    And I wait                                                                                                                                                                                                                                                                                                      
    Then I should see "Landing page (Layout Builder) Test Landing page (Layout Builder) by Site Admin has been created"                                                                                                                                                                                             
    And I should see "This layout builder tool allows you to configure the layout of the main content area."                                                                                                                                                                                                        
    When I scroll to the bottom of the page                                                                                                                                                                                                                                                                         
    And I wait 1s                                                                                                                                                                                                                                                                                                   
    Then I should see "Add section at end of layout"                                                                                                                                                                                                                                                                
    When I add a basic "2 Cols" section at the end of layout                                                                                                                                                                                                                                                        
    And I select the "Boxed" container type with a "Tiny" width                                                                                                                                                                                                                                                     
    And I select the "md" "33% 67%" section breakpoint                                                                                                                                                                                                                                                              
    And I add section gutters                                                                                                                                                                                                                                                                                       
    Then I should not see "Keep gutters between columns"                                                                                                                                                                                                                                                            
    And I wait for AJAX to finish                                                                                                                                                                                                                                                                                   
    And I select the "Primary" section background color

The automated functional test will stop at this point with the follow screenshot by the robot
It can not see the section background color, as it is under the Bootstrap Navigation Tabs

Before the update of Bootstrap Styles .. and Using the Layout Builder UX

After the update of Bootstrap Styles .. and Using the Layout Builder UX

Only using Bootstrap Styles ... "NO" Layout Builder UX styles

After the update of Bootstrap Styles and Bootstrap Layout Builder
Having a sticky Bootstrap Navigation Tabs is failing the functional automated testing with media and small screens.

Proposed resolution

  • Switch to relative position for bs_nav-tabs Bootstrap Navigation Tabs
  • Keep the Layout Builder UX style for the ui-resizable-handle UI Re-sizable Handle for the ui-dialog-off-canvas UI dialog off canvas

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-9.0.11 → , varbase_layout_builder-10.0.25 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

After the fix, Even with small screens

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3334544 → : Fixed regression issues between Layout Builder UX and Bootstrap Layout Builder Styles
📌 Task
Status

Fixed

Version

10.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024