Migrate to Bootstrap 5 #1882

jovyntls · 2022-04-05T14:09:56Z

What is the purpose of this pull request?

Overview of changes:
Migrate Bootstrap to v5.1.3

Anything you'd like to highlight / discuss:
Breaking change to MarkBind: text-dark now needs to be manually applied on badges with bg-warning, bg-info, bg-light (previously text would automatically be dark for these classes).

Testing instructions:

Full functionality should be supported
No disruptive changes in the UI
- Major UI changes should be listed below

Proposed commit message: (wrap lines at 72 characters)

Migrate Bootstrap to v5.1.3

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Breaking Changes (for MarkBind)

text-dark must be manually applied for bg-warning, bg-info, bg-light (previously text would automatically be dark for these classes).

Notable UI Changes

Before	After
Theme colours: Lower contrast (applies to any component using Bootstrap theme colours, e.g. badges, tipboxes)	Increased contrast. See badges for comparison
	Badges: increased padding
	Tables: Divider between table header and body Less padding in tables
	Panels: Slimmer panel, less padding
	Popovers: Border below popover headers; increased padding
No RFS (Responsive Font Sizes)	RFS support: font sizes are now scaled relative to the viewport, instead of absolute. (e.g. h1 on a smaller screen will be smaller than h1 on a larger screen)

Breaking Changes in Bootstrap 4 -> 5

This list serves to account for all the changes needed/made for this migration.
Full list of breaking changes from Bootstrap 4->5 may be found in the Bootstrap migration docs.

Utilities

.float-left and .float-right -> .float-start and .float-end (Bootstrap v5: Base & Utilities #1834)
.font-weight-* -> .fw-* (Bootstrap v5: Base & Utilities #1834)
.ml-* and mr-* -> ms-* and me-* (Bootstrap v5: Base & Utilities #1834)
.pl-* and pr-* -> ps-* and pe-* (Bootstrap v5: Base & Utilities #1834)
All other breaking changes do not affect MarkBind

Components

Sass

(not used in MarkBind, no action needed)

Color system

(not used in MarkBind, no action needed)

Grid updates

Several changes in default positioning
- Directly affected: QOption (Bootstrap 5: Fix quizzes and questions #1890)
- Indirectly affected: Navbar padding (Bootstrap 5: Spacing fixes #1900)
- Indirectly affected: Some changes in padding, either reverted or listed below under "Notable UI Changes"

Content, Reboot, etc

Remove newly default underline for links (Bootstrap v5: Base & Utilities #1834)
<hr> is no longer implemented using borders (Bootstrap 5: Horizontal rules #1901)

RTL

Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right.

Forms

Dropped classes are not used anywhere in MarkBind

Helpers

All changes do not affect MarkBind

JavaScript

Data attributes are now namespaced with data-bs (Bootstrap 5: Namespace data attributes #1892)
- accounted for: toggle, spy, parent, target, offset, method, dismiss
All other changes do not affect MarkBind

Other changes required

Dependencies on Bootstrap 4 are removed (bootstrap-vue removed in Migrate modals from bootstrap-vue to vue-final-modal #1849, Migrate popovers and tooltips to floating-vue #1856, Migrate popovers and tooltips to floating-vue #1868)
Bootswatch is bumped to v5.1.3 (Bootstrap 5: Upgrade Bootswatch #1898)

jonahtanjz · 2022-04-12T07:13:23Z

Indirectly affected: to check manually afterwards

Not sure if you can see it but on the mobile navbar, will need to remove the spacing at the sides. Probably related to the grid updates.

Will also need to give some padding to the navbar in general.

Before:

After (A little bit tight around the edges):

jonahtanjz · 2022-04-12T17:46:51Z

Just a heads up. Since this PR involves multiple changes with organised commits, we will be using the merge commit strategy (all commit messages will be added to the master branch). Would be good to remove these "merge commits" :)

jovyntls · 2022-04-13T02:08:50Z

Just a heads up. Since this PR involves multiple changes with organised commits, we will be using the merge commit strategy (all commit messages will be added to the master branch). Would be good to remove these "merge commits" :)

I see, thanks for the info! I'll rebase this branch on top of the master branch to avoid merge conflicts.

In Bootstrap 5, `<hr>` elements now use height instead of border to better support the size attribute. However, since MarkBind's hr styles support dotted/dashed/double lines, `<hr>` needs a border-based implementation. Let's minimally override Bootstrap 5's `<hr>` styling to continue supporting styled horizontal rules.

jonahtanjz · 2022-04-15T10:39:17Z

Overall looks good @jovyntls!

Just one regression:

Navbars (breaking changes won't affect us)

Seems like the navbar in bootstrap 5 is included during printing.

Will need to add the d-print-none class to the navbar.

jovyntls · 2022-04-15T14:18:45Z

Thank for the catch @jonahtanjz, I forgot about the printing :o I've opened #1906 to address this!

jonahtanjz

Nice work @jovyntls!

Overall looks good on my end. Thanks again for tackling this :)

LGTM 👍🎉

commit 32f2e64 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Mon Apr 18 01:11:00 2022 +0800 Fix typos in docs (MarkBind#1902) commit cac6027 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Sun Apr 17 22:34:15 2022 +0800 Remove package-lock file in packages/core (MarkBind#1908) commit 6a7ea88 Merge: 30e3637 8106d48 Author: Jonah Tan <47470981+jonahtanjz@users.noreply.github.com> Date: Fri Apr 15 23:52:47 2022 +0800 Migrate Bootstrap to v5.1.3 (MarkBind#1882) commit 8106d48 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Fri Apr 15 23:31:54 2022 +0800 Prevent Navbars from being printed (MarkBind#1906) commit 30e3637 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Fri Apr 15 18:40:55 2022 +0800 Update CI steps to set up Graphviz and Java for PlantUML support (MarkBind#1905) PlantUML feature requires both Java and Graphviz to be installed. Current CI steps do not guarantee the presence of these dependencies. This means some PlantUML diagrams were unable to be generated correctly. Let's update our CI steps to ensure both Java and Graphviz are available in the build image to support PlantUML syntax. This will ensure usage of PlantUML syntax can be supported in our tests and our documentation. commit d7c6819 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Fri Apr 15 12:35:54 2022 +0800 Migrate Bootswatch themes to v5.1.3 (MarkBind#1898) commit aadc9b6 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Wed Apr 13 16:25:34 2022 +0800 Refactor includePanelProcessor and MdAttributeRenderer (MarkBind#1896) commit 33383ca Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Wed Apr 13 01:11:23 2022 +0800 Migrate horizontal rules (MarkBind#1901) In Bootstrap 5, `<hr>` elements now use height instead of border to better support the size attribute. However, since MarkBind's hr styles support dotted/dashed/double lines, `<hr>` needs a border-based implementation. Let's minimally override Bootstrap 5's `<hr>` styling to continue supporting styled horizontal rules. commit eef4089 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Wed Apr 13 01:10:58 2022 +0800 Fix spacing for navbars and searchbars (MarkBind#1900) commit 84099ac Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 12 15:05:17 2022 +0800 Migrate MarkBind's quizzes and questions (MarkBind#1890) commit 5485206 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 12 13:23:14 2022 +0800 Namespace Bootstrap data attributes with data-bs- (MarkBind#1892) commit 0ad144d Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 12 11:57:14 2022 +0800 Migrate dropdown components (MarkBind#1888) commit 5f9cc95 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 12 00:02:32 2022 +0800 Remove jumbotron class (MarkBind#1885) commit c1436a1 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Sat Apr 9 11:53:07 2022 +0800 Migrate close buttons (MarkBind#1886) commit 7bc7878 Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Thu Apr 7 15:46:51 2022 +0800 Migrate breaking changes for badges (MarkBind#1884) commit e35c32b Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 5 21:15:24 2022 +0800 Migrate utilities to Bootstrap V5 (MarkBind#1834) commit 9d1dcdd Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Tue Apr 12 11:56:53 2022 +0800 Update GitHub issue template checkbox to dropdown (MarkBind#1897) commit 950b422 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Sat Apr 9 18:15:17 2022 +0800 Fix UG display issues when using the outputBox boilerplate (MarkBind#1889) commit 7608553 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Thu Apr 7 15:10:37 2022 +0800 Add an explanation on how to use JavaScript chart libraries (MarkBind#1872) Charts can be useful in MarkBind sites to display data. Let's include a section in our UG to highlight the existing (basic) support for JavaScript chart libraries in MarkBind. This is the most flexible option that MarkBind users can go for to utilize a JavaScript chart library of their choice. commit f14ea43 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Wed Apr 6 01:59:22 2022 +0800 Fix edge cases of link validation and conversion (MarkBind#1875) Invalid intralinks have been reported in MarkBind docs. The reasons are 1. actual invalid link 2. file path contains a space 3. Email link wrongly validated. Let's fix all three link validation & conversion errors. File paths with %20 will be correctly checked for existence. Email(tel) links will no longer be appended with the base URL or validated as intralink. The removal of invalid link behavior will allow the link & link validation mechanism to function properly. commit 4f060c6 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Tue Apr 5 21:50:39 2022 +0800 Update CI to run on all PR events (MarkBind#1878) commit 7673e66 Author: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Tue Apr 5 21:44:19 2022 +0800 Update documentation on MarkBind GitHub Actions (MarkBind#1880) The existing GitHub Action "markbind-action" has been revamped to improve its functionalities. Let's add a reference to "markbind-action" in our user guide to highlight this helper workflow. Let's also include a section in our developer guide to explain how to develop and maintain the "markbind-action" repo. This helps users discover "markbind-action" and use it in their CI/CD workflow. The dev docs will help developers continue to improve "markbind-action" commit feee60a Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Tue Apr 5 11:19:51 2022 +0800 Remove bootstrap-vue (MarkBind#1873) bootstrap-vue is no longer used in MarkBind as it relies on Vue 2 and Bootstrap 4, both which we plan to upgrade. Its components have been migrated to other libraries. Let's remove all mentions and instances of bootstrap-vue from MarkBind to fully remove this dependency. commit 1bd81ff Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Mon Apr 4 13:35:06 2022 +0800 Add Components page to developer guide (MarkBind#1865) Add Writing Components page to dev docs commit dac728d Author: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> Date: Mon Apr 4 12:00:48 2022 +0800 Migrate popovers and tooltips to floating-vue (MarkBind#1868) Popovers and tooltips are implemented using bootstrap-vue. bootstrap-vue has dependencies on both Vue and Bootstrap, and has not migrated the latest versions. This is a blocker for MarkBind's migration of these dependencies. Let's use floating-vue's Menu and Tooltip components for Popovers and Tooltips respectively. floating-vue supports both Vue 2 and Vue 3, and has fewer dependencies. This allows us to migrate to Vue 3 and Bootstrap 5 more easily in the future.

jovyntls added 9 commits April 13, 2022 10:16

Migrate utilities to Bootstrap V5 (#1834)

e35c32b

Migrate breaking changes for badges (#1884)

7bc7878

Migrate close buttons (#1886)

c1436a1

Remove jumbotron class (#1885)

5f9cc95

Migrate dropdown components (#1888)

0ad144d

Namespace Bootstrap data attributes with data-bs- (#1892)

5485206

Migrate MarkBind's quizzes and questions (#1890)

84099ac

Fix spacing for navbars and searchbars (#1900)

eef4089

jovyntls force-pushed the bootstrap-v5-migration branch from 46ac4f8 to 33383ca Compare April 13, 2022 02:17

Migrate Bootswatch themes to v5.1.3 (#1898)

d7c6819

jovyntls changed the title ~~[WIP] Migrate to Bootstrap 5~~ Migrate to Bootstrap 5 Apr 15, 2022

jovyntls marked this pull request as ready for review April 15, 2022 07:57

Prevent Navbars from being printed (#1906)

8106d48

jonahtanjz approved these changes Apr 15, 2022

View reviewed changes

jonahtanjz added this to the 4.0 milestone Apr 15, 2022

jonahtanjz merged commit 6a7ea88 into master Apr 15, 2022

jonahtanjz deleted the bootstrap-v5-migration branch April 15, 2022 15:52

jonahtanjz added the breakingChange 💥 Feature will behave significantly different, or is made obsolete label Apr 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate to Bootstrap 5 #1882

Migrate to Bootstrap 5 #1882

jovyntls commented Apr 5, 2022 •

edited by jonahtanjz

Loading

jonahtanjz commented Apr 12, 2022

jonahtanjz commented Apr 12, 2022

jovyntls commented Apr 13, 2022

jonahtanjz commented Apr 15, 2022 •

edited

Loading

jovyntls commented Apr 15, 2022

jonahtanjz left a comment

Migrate to Bootstrap 5 #1882

Migrate to Bootstrap 5 #1882

Conversation

jovyntls commented Apr 5, 2022 • edited by jonahtanjz Loading

Breaking Changes (for MarkBind)

Notable UI Changes

Breaking Changes in Bootstrap 4 -> 5

Utilities

Components

Sass

Color system

Grid updates

Content, Reboot, etc

RTL

Forms

Helpers

JavaScript

Other changes required

jonahtanjz commented Apr 12, 2022

jonahtanjz commented Apr 12, 2022

jovyntls commented Apr 13, 2022

jonahtanjz commented Apr 15, 2022 • edited Loading

jovyntls commented Apr 15, 2022

jonahtanjz left a comment

Choose a reason for hiding this comment

jovyntls commented Apr 5, 2022 •

edited by jonahtanjz

Loading

jonahtanjz commented Apr 15, 2022 •

edited

Loading