search

OnTopicCMS / OnTopic-Editor-AspNetCore

ASP.NET Core version of an editor for Ignia's OnTopic CMS.
4 stars 0 forks source link

Upgrade to Bootstrap 5.0.0 #41

Closed JeremyCaney closed 3 years ago

JeremyCaney commented 3 years ago

Bootstrap 5.0.0 is now in Beta 3, and should be releasing in the next couple of months. Unfortunately, on initial assessment, it appears to introduce quite a few breaking changes: The OnTopic Editor template does not render correctly after an evaluation upgrade. This will require further effort to isolate and resolve the issues introduced.

It may be worth combining this with #20, #21, and #22, and especially if this ends up necessitating a more invasive effort.

JeremyCaney commented 3 years ago

On further evaluation, this isn't as involved as it initially seemed. A couple of issues were resulting in an outsized impact on the user interface, primarily due to Bootstrap rearranging their *.scss file structure, thus requiring some additions to our @imports. Given this, I'm earmarking the upgrade to Bootstrap 5.0.0—or, at least, the current beta—to OnTopic 5.1.0. If we run into any stability issues, we may end up postponing this until the release version, but we can at least get the primary migration completed now.

JeremyCaney commented 3 years ago

This required adding the helpers (9219afe) and containers (8d4579f) imports, while removing the legacy input-group import (8a95e47). Bootstrap 5.0.0 introduced some global styles which needed to be reset; these included a large padding-left on lists (1b76a3a) and underlines on links (64dd614). The markup needed to be updated to use the new input-group format (8a95e47), form-label class (4e3686d), and close button (70deb94). Finally, the row class was removed from the IsModal page, as it was causing it to exceed the boundaries of the modal—an issue we've noticed previously, but which was worse with Bootstrap 5.0.0 (b7b71b6).

For now, this appears to be stable enough to deploy Bootstrap 5.0.0 Beta 3 with OnTopic Editor 5.1.0; for that reason, I've merged these updated into develop (1709b82). If we need to rollback to Bootstrap 4.6.0, that's easy enough, though unexpected. We'll plan on doing a patch of the OnTopic Editor once Bootstrap 5.0.0 releases officially.

JeremyCaney commented 3 years ago

Caching issues with the vendor JavaScript were obscuring problems with the Bootstrap 5.0.0 components. There remain a number of issues that now need to be resolved. These include:

Some of these issues are due to the new name spacing of Bootstrap data attributes (i.e., data-bs-*). Others are due to Bootstrap no longer using jQuery, and thus operations off of jQuery elements will no longer work. The latter will require some refactoring of our scripts, which are heavily integrated with jQuery currently.

JeremyCaney commented 3 years ago

Addressed issues with JavaScript components left behind by the original migration (1709b82). Most of these updates were pretty straight forward; for instance, the tabs (258d0b1, 46fe748) and dropdown box (d791523) were broken because they were using the legacy data-* attributes instead of the newly namespaced data-bs-* attributes. Others, such as the modal window, required more work due to the previous code being heavily integrated with jQuery elements, instead of working directly with the bootstrap namespace (87ab811).

While I was at it, I updated the aria attributes and markup to match the latest reference documentation (258d0b1, 46fe748, d791523). And, in the case of the Modal.js script, I updated the source to use straight JavaScript instead of relying on jQuery. We still rely on jQuery in plenty of other places, but this was a good excuse to start moving away from it (87ab811, 9b5ea80).

These fixes were merged into develop as part of 9c49c3c.

JeremyCaney commented 3 years ago

While I was updating the Bootstrap components to maintain compatibility with Bootstrap 5.0.0 Beta 3's JavaScript implementation, I updated the markup for the tabs to be consistent with the Bootstrap examples in their documentation (258d0b1). This wasn't strictly necessary, but makes it easier to debug if there aren't arbitrary differences in the markup. One of the changes I made was updating the tabs to use buttons instead of anchor links. This broke the implementation of our error validation code for highlighting tabs with errors on them, since the selectors were still expecting an anchor link. This is resolved by updating the selectors in both the CSS (6af63f7) and the JavaScript (4d1b5f7) files.

I also noticed that while I had established a new script for initializing the Bootstrap tooltips (9b5ea80), this overlooked that we already had one in place. I've consolidated this code into the UserInterface.js (which makes more sense) and merged it with the previous configuration that it was using. To ensure this was working, I also picked up a missing data-bs-* namespace change (1d151fc).