Bootstrap 5

[damithc]

Looks like Bootstrap has moved to v5

Some new things I noticed in passing: built-in support for icons, themes

[ang-zeyu]

Similar to #1716. Can be worked on incrementally.

[jovyntls]

Hello, I'm interested in working on this :)

I notice that Bootstrap 5 has quite a few breaking changes, which will break/change many of our styles. I think fixing the deprecated parts incrementally would be a good idea, otherwise the PR will be too big and hard to review. However, I realise that with one PR for each fix, MarkBind styles will be buggy/broken until the final PR is merged. I'm not sure what will be a good way to split up the migration?

[jonahtanjz]

I notice that Bootstrap 5 has quite a few breaking changes, which will break/change many of our styles. I think fixing the deprecated parts incrementally would be a good idea, otherwise the PR will be too big and hard to review. However, I realise that with one PR for each fix, MarkBind styles will be buggy/broken until the final PR is merged. I'm not sure what will be a good way to split up the migration?

Generally I don't think it's a good idea to split this up into multiple PRs. Like you have mentioned, this would mean having some functionalities/styles that will not work until the final PR is merged, which can take some time and also not able to test whether the newly introduced components are working as expected.

One way to do it incrementally is to open a single PR, then push changes to it periodically (with properly organised commits). Maybe after migrating a few components, you can ping someone to review it. Once it is good, you can start working on other components and continue this process until all the deprecated parts have been migrated. This should make it easier for reviewers as the changes that they will be looking at are much smaller and also ensure that all the changes can be properly tested before merging with the master branch :)

[damithc]

A long-lived feature branch might be suitable for this. That is, create a separate branch (in the main repo) for this task and keep sending PRs against that branch (instead of the master branch). Once everything has been migrated, the feature branch can be merged back to the master branch.

[jovyntls]

@jonahtanjz @damithc Thank you for the insights! A long-lived feature branch sounds like a good idea - I'll create a bootstrap-v5-migration branch in the main repo.

[jonahtanjz]

@jovyntls @damithc @ang-zeyu

While looking through the PR #1834, I noticed that our vue components are using bootstrap-vue for styling. From their current website, it seems that bootstrap-vue currently does not support Bootstrap 5 as of now. We may have to put this issue on hold until bootstrap-vue supports v5 or move to an alternative library that supports v5.

This is their current issue tracker bootstrap-vue/bootstrap-vue#5507

[damithc]

This is their current issue tracker bootstrap-vue/bootstrap-vue#5507

As mentioned in that thread, we have to consider the possibility that bootstrap-vue might die off and consider alternatives :-(

[jonahtanjz]

Some alternatives that we can consider:

1. BootstrapVue3

   • Still quite early, in alpha version (may not be stable yet)
   • Most similar to bootstrap-vue (don't have to change many components)
   • Only supports Vue 3 and Bootstrap 5 (we have to migrate both Vue and Bootstrap at the same time for this to work)

2. CoreUI Bootstrap Vue

   • Looks quite new as well, currently in beta version
   • Will have to change certain components (syntax, naming etc)
   • Looks like will have to use Vue 3 and Bootstrap 5 as well

These are the 2 alternatives I've found. Both require Vue 3 and Bootstrap 5 so we have to upgrade them before we can use the libraries.

Feel free to suggest other alternatives if there are any better options.

[jovyntls]

It looks like the bootstrap-vue components are Popovers, Tooltips and Modals, all of which are supported by Bootstrap. Is it viable to remove the dependency on a Vue UI library and instead write these components using Bootstrap only?