Skip to content
GitLab
v5.0.0-beta2
e50c11b8 · Release v5.0.0-beta2 (#32467) ·
Release v5.0.0-beta2

Highlights

  • Dropdowns:
    • Updated dropdown plugin to add data-bs-popper="static" via JS to the .dropdown-menu when the trigger has add data-bs-display="static" and data-bs-popper="none" when in navbars.
    • Modified several selectors to separate our positioning styles from the Popper.js styles.
  • Navbars:
    • Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It's customizable via Sass and a CSS variable. Read more in the docs.
    • We've re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.
  • Forms:
    • Removed vertical-align from .form-select
    • Form validation mixin updated with additional parameters
    • Fixed validation icon placement in .form-select
    • Checkboxes and radio buttons are aligned better in input groups
  • Buttons:
    • Added variables for tinting and shading button state colors
    • Suppressed the default focus outline for buttons in Chromium
  • Toasts:
    • Added word-break to .toast-body
    • Added a live example to the docs to trigger a real toast
  • Carousels:
    • Updated docs examples to use <button>s wherever possible instead of <a> elements.
    • CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).
  • Bundles:
    • Added our helpers to the utilities CSS bundle
  • JavaScript:
    • Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
    • Restored the offset option for dropdowns.
    • Fixed modal toggling when clicking on data-bs-toggle="modal".
    • We now build our base component as a separate .js file.
    • We now prevent getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins.
    • Refactored components to use a utility function to define jQuery plugins

🚀 Features

  • #32037: Add .navbar-nav-scroll for vertical scrolling of navbar content
  • #32317: Add variables for modifying button state colours.
  • #32376: Support Popper virtual elements

⚡ Performance Improvements

  • #32348: Use box shadows instead of linear gradients to colorize tables

🎨 CSS

  • #31757: Extended Form validation states capabilities
  • #32037: Add .navbar-nav-scroll for vertical scrolling of navbar content
  • #32317: Add variables for modifying button state colours.
  • #32318: Remove vertical-align from .form-select
  • #32324: Add helpers to utilities bundle
  • #32348: Use box shadows instead of linear gradients to colorize tables
  • #32397: Utility API, RFS option: Only generate responsive classes when needed
  • #32415: Reset Popper position in RTL
  • #32419: Tweak .form-select padding
  • #32423: Add two new variables for pagination border-radius values
  • #32436: RTL improvements
  • #32440: Expand visually-hidden-focusable so it can be used on a container, …
  • #32492: Fix: variables collide with globals
  • #32501: .ratio missing variable prefix
  • #32524: Remove the initial margin from dropdown/popover in favor of Popper
  • #32575: docs(sidebar): invalid CSS value
  • #32627: Carousel: use buttons, not links, for prev/next controls
  • #32630: Dynamic tabs: use buttons rather than links
  • #32631: Remove old/unnecessary reboot bug fix
  • #32661: Make carousel indicators actual buttons
  • #32670: Add word-break to .toast-body
  • #32689: Suppress focus outline for buttons when it shouldn't be visible in Chromium
  • #32751: Consistently use outline:0 rather than outline:none
  • #32754: Darken dropdown item hover style
  • #32761: Mention stretched-link constraints with table elements
  • #32785: Lighten disabled dropdown text to $gray-500
  • #32787: Remove popover-arrow margin to fix alignment of the arrow
  • #32793: Change .form-check background to $input-bg and change transitions
  • #32819: Color utils docs
  • #32899: Re-add flex-grow to .navbar-collapse
  • #32912: Update checks and radios in input groups
  • #32930: Fix hardcoded custom prop. in .navbar-nav-scroll
  • #32951: fix(accordion): ensure .accordion-button stays left-aligned
  • #32986: Dropdown menu alignment fixes
  • #33003: Dropdown - Change the selector to check the use of Popper
  • #33022: Ensure .navbar-collapse behaves as intended

☕️ JavaScript

  • #32285: Refactor components to use a utility function to define jQuery plugins
  • #32303: Use the ternary operator in a few more places
  • #32309: tests: replace deprecated jQuery method
  • #32313: build-plugins: build Base component too
  • #32339: Remove SelectorEngine.matches().
  • #32376: Support Popper virtual elements
  • #32391: SelectorEngine: drop variable used once
  • #32392: alert: rename variables for consistency
  • #32393: carousel: switch to string constants
  • #32394: Remove TRANSITION_END from utils
  • #32395: carousel: switch to if/else
  • #32405: Add Popper fallback behaviour
  • #32420: Tooltip - check if tip and its parent node exist in dispose method
  • #32436: RTL improvements
  • #32437: Tooltip/popover - change the default value for fallbackPlacements
  • #32438: collapse: prevent url change if A nested tag is clicked
  • #32443: Restore offset option for dropdown component
  • #32465: Tooltip - Add missing callback in async spec
  • #32511: modal: move common code to reusable functions
  • #32523: Tooltip refactoring
  • #32524: Remove the initial margin from dropdown/popover in favor of Popper
  • #32585: Throw a TypeError instead of the generic Error
  • #32586: Prevent getSelector from returning URLs as selector
  • #32603: Scrollspy - Remove unnecessary event argument
  • #32625: Dropdown - Emit events on the .dropdown-toggle button
  • #32661: Make carousel indicators actual buttons
  • #32691: Fix toggling modal when clicking on data-bs-toggle="modal"
  • #32750: Fix dropdown keys to open menu
  • #32843: Remove custom fallbackPlacements from the dropdown
  • #32845: Fix Popper preventOverflow boundary config
  • #32882: Add function type for popperConfig option
  • #32986: Dropdown menu alignment fixes

📖 Docs

  • #32246: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text
  • #32259: docs: SVG consistency changes
  • #32272: Add a callout for the sanitizer in popovers and tooltips
  • #32284: docs: Add Korean translation
  • #32287: Typo: show on xxl, if only xl should be hidden.
  • #32316: carousel.md: fix $carousel-transition-duration reference
  • #32332: Move migration sidebar entry to sidebar.yml
  • #32390: docs: Fix Popper-related docs
  • #32398: Fix missed occurrencies of "Popper.js"
  • #32399: Remove duplicated 'follow Bootstrap on Twitter' link in Getting Started
  • #32401: cheatsheet: Drop redundant (current) text
  • #32437: Tooltip/popover - change the default value for fallbackPlacements
  • #32449: examples: Update font utility classes to new v5 versions
  • #32455: docs: Add system-ui to the native font stack documentation
  • #32461: Docs: style clipboard button on :focus, not just :hover
  • #32463: Straggler lorem ipsum text
  • #32464: Add missing has-validation in checkout examples
  • #32478: Remove redundant pointer-events: none override for tooltip and popover disabled buttons
  • #32479: Clean up lorem ipsum text in popover examples
  • #32483: docs: Remove unneeded .form-group class
  • #32489: Fix popover docs example
  • #32490: Add keyboard-focusable elements for popover on disabled button
  • #32512: Docs v5: Fix Sass rounding precision and state Sass implementation
  • #32529: Tooltips: add missing space
  • #32534: Documentation: added class selector "." to "dropend"
  • #32543: API docs: add missing comma
  • #32575: docs(sidebar): invalid CSS value
  • #32589: Fix navbar docs - active nav-link
  • #32620: docs: work around Toast CSS conflict with utils
  • #32627: Carousel: use buttons, not links, for prev/next controls
  • #32630: Dynamic tabs: use buttons rather than links
  • #32632: Docs: Tweak the wording for collapse to indicate button is preferred/more semantic
  • #32634: Docs: Remove incorrect mention of dropdowns for dynamic tab behavior
  • #32638: Add an actual data-bs-touch="false" example in the carousel docs
  • #32661: Make carousel indicators actual buttons
  • #32684: Add functions and variables to the utilities API docs imports
  • #32685: Clarify the $enable-shadows option in our docs
  • #32688: Tweak wording for no-touch carousel
  • #32740: Fix typo
  • #32744: Document size and multiple aren't supported on floating label selects
  • #32745: Add a link to v4.x from the v5 homepage
  • #32758: Migration: mention the removal of .rounded-sm/lg utilities
  • #32759: Add mention of CSPs and SVGs
  • #32760: Add a live toast example to the docs
  • #32761: Mention stretched-link constraints with table elements
  • #32771: Improve docs regarding RTL migration
  • #32778: Document some basic code conventions for us
  • #32782: [docs] Update toasts.md
  • #32788: Remove role="button" from CTA links in carousel examples
  • #32795: Clarifies Sass variable defaults, adds bootstrap-npm-starter callout
  • #32819: Color utils docs
  • #32842: Docs: add v4.6.0
  • #32846: docs: Fix navbar-nav-scroll description
  • #32911: migration: mention .form-text changes
  • #32912: Update checks and radios in input groups
  • #32940: Fix default value for $enable-deprecation-messages
  • #32979: Fix boundary config description for dropdown and popover
  • #32995: Add a note to change the case type of option name
  • #33017: Docs on enforcing HTTPS and avoiding mixed content
  • #33027: Revamp sticky header offset to improve a11y

🌎 Accessibility

  • #32401: cheatsheet: Drop redundant (current) text
  • #32661: Make carousel indicators actual buttons
  • #33027: Revamp sticky header offset to improve a11y

🏭 Tests

  • #32309: tests: replace deprecated jQuery method
  • #32465: Tooltip - Add missing callback in async spec
  • #32486: BrowserStack: test on macOS Catalina instead of High Sierra
  • #32730: Move "active" class from .nav-item to .nav-link
  • #32769: JS: update karma config
  • #32904: Minor ESLint rules cleanup

🧰 Misc

  • #32185: terser: use 2 passes instead of the default 1.
  • #32238: CI: add a 30-min timeout for BrowserStack
  • #32312: build-plugins: switch to "bundled" for babel helpers
  • #32313: build-plugins: build Base component too
  • #32314: CONTRIBUTING: mention dist files
  • #32417: Update Release Drafter configuration
  • #32452: Update CodeQL Action
  • #32453: Few updates for v5.0.0-beta1 NuGet support
  • #32469: Improve zip-examples.js
  • #32635: CI: update to actions/setup-node@v2
  • #32737: package.json: move version_short variable under the config object
  • #32755: GitHub Actions cleanup
  • #32756: Stylelint: disallow some property values
  • #32770: .gitignore: remove Ruby/Jekyll entries
  • #32796: CI: change Node.js to 14
  • #32799: Update zip-examples.js
  • #32917: change-version: remove vendor, add resources
  • #32919: CI: switch to the coverallsapp/github-action tag
  • #33012: CI: remove the cache fallback and shorten cache key
  • #33016: vnu-jar.js: quote vnu path

📦 Dependencies