Loading...
 

Bootstrap 4 to 5 Migration Checklist

  • From https://getbootstrap.com/docs/5.0/migration/.
  • Status icons (not all yet) have been added tentatively but checks need to be done about:
    • Is Tiki code affected by the particular migration change? and
    • Has the Tiki code been updated in response to the change?
  • Then when the Tiki code is updated and tested, "" can be changed to "" .
  • Add list sub-items for comments and questions.

Key
To do (or to investigate whether anything needs to be done) {icon name="square-o"}
Done {icon name="check-square-o"}
Not sure, etc. {icon name="question-circle-o"}
Instances in site content may need updating. {icon name="user-edit"}

Sass

[+]

Color system

[+]

Grid updates

[+]

Content, Reboot, etc

[+]

RTL

[+]

Forms

[+]

Components

[+]

Utilities

  • Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
    • Renamed .left-* and .right-* to .start-* and .end-*.
      • No instances found to update.
    • Renamed .float-left and .float-right to .float-start and .float-end.
    • Renamed .border-left and .border-right to .border-start and .border-end.
    • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
      • No instances found in .tpls, but a few in theme CSS files, doing no harm but reasons for being there ould be identified.
    • Renamed .ml-* and .mr-* to .ms-* and .me-*.
    • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
    • Renamed .text-left and .text-right to .text-start and .text-end.
  • Breaking Disabled negative margins by default.
  • Added new .bg-body class for quickly setting the <body>’s background to additional elements.
  • Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.
  • Added new .translate-middle-x and .translate-middle-y utilities to horizontally or vertically center absolute/fixed positioned elements.
  • Added new border-width utilities.
  • Breaking Renamed .text-monospace to .font-monospace.
    • No instances found to update.
  • Breaking Removed .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore.
  • Added .fs-* utilities for font-size utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.
  • Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.
  • Breaking Renamed .font-style-* utilities as .fst-* for brevity and consistency.
    • No instances of .font-weight-* and .font-style-* found in Tiki code.
  • Added .d-grid to display utilities and new gap utilities (-+.gap+-) for CSS Grid and flexbox layouts.
  • Breaking Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.
  • Added new line-height utilities: -+.lh-1, .lh-sm, .lh-base and .lh-lg. See here.
  • Moved the .d-none utility in our CSS to give it more weight over other display utilities.
  • Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

  • Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.
    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.
  • Breaking “Screen reader” classes are now “visually hidden” classes.
    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().
  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish
  • Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of -+data-toggle.
  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
    var modal = new bootstrap.Modal('#myModal')
    var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.
  • The default value for the fallbackPlacements is changed to 'top', 'right', 'bottom', 'left' for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.
  • Removed underscore from public static methods like _getInstance()getInstance().

TODO

reminder notes for before branching/release:


Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools