Skip to content

Upgrade BootstrapVue to latest stable version

Our current dependencies state

GitLab UI

GitLab

BootstrapVue's current state

What we're aiming for

GitLab UI

  • bootstrap-vue@2.13.1 (direct dependency)
  • bootstrap@4.4.1 (peer dependency)

GitLab

  • bootstrap@4.4.1 (direct dependency, matches @gitlab/ui peer dependency)

Migration plan

  • Upgrade to bootstrap-vue@2.13.1 and bootstrap@4.4.1 in GitLab UI: !1354 (merged)
  • Upgrade to bootstrap@4.4.1 and @gitlab/ui@next in GitLab: gitlab!30846 (merged)
    • By looking at Bootstrap's changelog, estimate what changes could present a risk to GitLab
    • Document a migration path for every risky change
    • Proceed with the upgrade and smoke test the app

BootstrapVue's Changelogs from 2.1.0 to 2.13.1

v2.13.1

Released: 2020-05-05

Bug Fixes v2.13.1

  • b-table, b-table-lite, b-table-simple: handle head/foot variant for sticky columns (fixes #5278) (#5279) (53e309e)

Other v2.13.1

  • documentation updates
  • dev dependency updates

v2.13.0

Released: 2020-04-27

Features v2.13.0

  • b-calendar, b-form-datepicker: relax YYYY-MM-DD string parsing (closes #5232) (#5242) (f362802)
  • b-form-rating: add show-value-max prop to show possible max rating when show-value is true (#5200) (e9d54e6)
  • b-overlay: add support for overlay click event (closes #5243) (#5248) (582560f)

Bug Fixes v2.13.0

  • b-avatar: set align-items: center for default slot content (fixes: #5205) (#5207) (c4981fd)
  • b-calendar, b-form-datepicker: minor adjustments to styling and example updates (#5211) (f0d8ffe)
  • b-form-datepicker, b-form-timepicker: fix menu padding in button only mode (fixes #5251) (#5252) (d57a643)
  • b-form-datepicker, b-form-timepicker: adjust scss to support input-groups (#5231) (7b1adc4)
  • b-form-datepicker, b-form-timepicker: prevent duplicate validation icons (fixes #5237) (#5238) (6354e6e)
  • types: update table field definition types to include sticky column (fixes #5263) (#5265) (20eb3ac)
  • handle nested form options normalization (#5247) (0c57ffe)

Other v2.13.0

v2.12.0

Released: 2020-04-20

Features v2.12.0

  • b-avatar: add support for badges on avatars (#5124) (a2e465b)
  • b-avatar: if variant is empty string, then remove spacing around image (closes #5154) (#5156) (7ff87fc)
  • b-calendar, b-form-datepicker: add prop weekday-header-format to specify weekday header length (closes #5171) (#5175) (8241644)
  • b-calendar, b-form-datepicker: add scoped slots for date navigation buttons (closes #5117) (#5147) (5f69864)
  • b-form-datepicker: add pass through prop date-info-fn (closes #4826) (#5150) (bf35f80)
  • b-form-rating: new b-form-rating custom component (#5132) (30ad7fe)
  • b-sidebar: add optional backdrop support (#5182) (c6375e5)
  • custom components: avoid using padding/margin utility classes where possible (closes #5117) (#5121) (8c6cfe0)
  • icons: new throb and fade animations (#5122) (bc0117c)

Bug Fixes v2.12.0

  • b-alert: fix memory leak by using the correct method to clear the countdown timeout (#5158) (7a7f33d)
  • b-avatar: fix button type font size inheritance (#5177) (441ebdc)
  • b-calendar: use Intl.NumberFormat for formatting the number in the date buttons (closes #5171) (#5179) (cbf2cd0)
  • b-form-datepicker: make datepicker respect no-highlight-today prop (#5159) (c4ead33)

Other v2.12.0

  • documentation updates
  • dev dependency updates

v2.11.0

Released: 2020-04-07

Features v2.11.0

  • b-avatar: if image src fails to load, then show icon, text or fallback icon (#5079) (ed6704d)
  • b-calendar, b-form-datepicker: add optional decade navigation buttons (addresses #4976) (#5112) (b1f74a8)

Bug Fixes v2.11.0

  • b-calendar, b-form-datepicker: handle keyboard navigation when selected date is out of range (fixes #5057) (#5108) (6ed09f4)
  • b-link: don't render target or rel attrs when router-tag other than a or area provided (#5107) (33c6cef)
  • tooltip, popover: handle 'click blur' trigger on iOS webkit browsers (fixes #5099) (#5103) (27da76c)

Other v2.11.0

  • additional unit testing
  • dev dependencies updates
  • minor documentation updates

v2.10.1

Released: 2020-04-02

Bug Fixes v2.10.1

  • b-avatar: remove default padding when in button mode (fixes #5073) (#5076) (26377b3)
  • b-table: fix context object currentPage issue introduced in v2.10.0 (fixes #5065) (#5067) (874dca2)

Other v2.10.1

  • dev dependency updates

v2.10.0

Released: 2020-04-01

Features v2.10.0

Bug Fixes v2.10.0

  • b-avatar: remove duplicate button variant class (#5056) (9f78f32)
  • b-card: handle header-html and footer-html props correctly (fixes #5038) (#5039) (f378aef)
  • types: add missing declaration for b-form-timepicker (closes #5035) (#5036) (ae84118)

Other v2.10.0

  • documentation site improvements and updates
  • dev dependency updates

v2.9.0

Released: 2020-03-25

Features v2.9.0

  • b-aspect: new custom component <b-aspect> (#5008) (662c8e0)
  • b-avatar: add alt prop for adding alt attribute to image and icon avatars (closes #4990) (#4991) (d1474f2)
  • b-drodpown-item-button, b-drodpown-item-button: add button-class and link-class prop (#5014) (b39d31c)
  • b-form-datepicker, b-form-timepicker: emit shown and hidden events (#5004) (eb259b9)
  • b-navbar-toggle: make default slot scoped (#4995) (144d45f)

Docs v2.9.0

  • Ensure that the IconsPlugin is imported when exporting from playground to CodePen, CodeSandbox, and JsFiddle (#5003)

Other v2.9.0

  • dev dependency updates

v2.8.0

Released: 2020-03-22

Features v2.8.0

  • icons: upgrade to Bootstrap Icons 1.0.0.alpha3 (#4966) (d481365)
    • 200+ new icons
    • skip-* icon names fixed (closes #4733)
    • document-* icons renamed to file-*
    • alert-* icons renamed to exclamation-*
    • columns-gutters icon renamed to columns-gap
    • diamond icon renamed to gem because of new diamond-* shape icons
  • b-avatar: new <b-avatar> component (#4974) (b2325a3)
  • b-form-spinbutton: add slots for increment and decrement button content (closes #4958) (#4963) (5684405)

Other v2.8.0

  • docs updates
  • dev dependencies updates

v2.7.0

Released: 2020-03-14

Features v2.7.0

Bug Fixes v2.7.0

  • b-form-file: fix value prop validation when using directory mode (fixes #4912) (#4913) (498a262)
  • b-form-file: make sure to catch all errors when resetting the input (#4936) (682bc46)

Other v2.7.0

  • deps: update devDependency rollup to 2.0.x
  • minor docs updates

v2.6.1

Released: 2020-03-06

Bug Fixes v2.6.1

  • b-form-spinbutton: respect step value for initial decrement when wrap enabled (closes #4884) (#4885) (28e7245)

Other v2.6.1

  • documentation updates and fixes
  • dev dependency updates

v2.6.0

Released: 2020-03-05

Features v2.6.0

  • b-calendar, b-form-datepicker: allow customization of in-component displayed date format (closes #4797) (#4835) (85c7e75)
  • b-form-datepicker: add button-content optionally scoped slot for calendar icon (#4795) (7a00910)
  • b-form-datepicker: add calendar-width prop (closes #4817) (#4822) (91b77bc)
  • b-pagination, b-pagination-nav: improve aria accessibility - changes to inner structure and aria attributes (closes: #4811, #4160) (#4810) (7ee4baa)
  • b-tabs: add ability to provide custom tab button attributes (closes: #4803) (#4806) (c541d3d)
  • b-time, b-form-timepicker: new components b-time and b-form-timepicker (#4783) (417ef8f)

Bug Fixes v2.6.0

  • b-form-datepicker: menu focus handling for Firefox and Safari on MacOS, and fix v-model update issue (closes #4814, #4827) (#4824) (09fa920)
  • b-form-spinbutton: prevent buttons from re-ordering when parent element is RTL (#4802) (ae2cce9)
  • b-form-spinbutton: prevent double increment/decrement on mobile (fixes #4838) (#4842) (9c2c700)

Other v2.6.0

  • documentation updates
  • dev dependency updates

v2.5.0

Released: 2020-02-18

Features v2.5.0

  • b-calendar, b-form-datepicker: new components b-calendar and b-form-datepicker (closes #3676, #1428) (#4712) (af0ded0)
  • b-form-spinbutton: new form control component b-form-spinbutton (#4744) (da5e473)
  • v-b-hover: new directive for reacting to hover changes (#4771) (b7adc6d)

Bug Fixes v2.5.0

  • b-form-tags: improve accessibility for screen reader users (#4775) (2328630)
  • b-modal: additional fixes for show transition behaviour (closes #4761) (#4777) (1113c6f)

Other v2.5.0

  • documentation updates
  • documentation accessibility improvements
  • dev dependency updates

v2.4.2

Released: 2020-02-15

Bug Fixes v2.4.2

  • b-button: when href is "#" add role=button and appropriate keydown handlers for A11Y (#4768) (087a128)
  • b-modal: fix transition show enter timing (closes #4761) (#4766) (968c957)

Other v2.4.2

  • documentation updates
  • dev dependency updates

v2.4.1

Released: 2020-02-12

Bug Fixes v2.4.1

  • b-form-input, b-form-textarea: handle change event for all mobile device keyboards (closes #4724) (#4739) (166a932)
  • b-tooltip, v-b-tooltip: fix arrow margin (#4727) (865a655)

Other v2.4.1

  • dev dependency updates
  • minor docs updates

v2.4.0

Released: 2020-02-01

Features v2.4.0

  • b-modal: add ignore-enforce-focus-selector prop (closes #4537) (#4702) (c3ac992)
  • b-nav-item-dropdown: add boundary prop, applicable when not in b-navbar (closes #4684) (#4691) (3a50ad8)

Bug Fixes v2.4.0

  • b-dropdown: focus-in handling for Safari and Firefox on macOS/iOS (closes #4328) (#4426) (2eab55b)
  • b-form-input, b-form-textarea: properly handle out-of-sync values (closes #4695) (#4701) (954176d)

v2.3.0

Released: 2020-01-24

Features v2.3.0

  • b-button-close: add content prop (#4574) (7379c6d)
  • b-form-tags: new option to specify input type (closes #4644) (#4645) (b899fac)
  • b-pagination, b-pagination-nav: add page button class props and option to show first/last page numbers (closes #4597, #4533) (#4622) (3a3ee1d)
  • icons: add stacking support (#4658) (b185cdb)

Bug Fixes v2.3.0

  • v-b-modal: only unbind/rebind during componentUpdated hook if trigger element or modal ID changes (closes #4669) (#4672) (e53a05d)
  • utils: pass all Array/Object util shortcuts as functions, for handling late loaded polyfills (#4647) (f584425)

v2.2.2

Released: 2020-01-15

Bug Fixes v2.2.2

  • nuxt module: remove unnecessary export statements (#4624) (27f066c)

Other v2.2.2

  • dev dependencies updates
  • minor docs updates

v2.2.1

Released: 2020-01-13

Bug Fixes v2.2.1

  • icons: make icon transform props work with IE 11 (closes #4607) (#4608) (899779f)
  • types: add missing declarations for b-form-select-option & b-form-select-option-group (#4595) (8d60832)
  • types: include named export BootstrapVue in declaration file (#4590) (603307a)
  • modal, tooltips, popovers: remove nextTick delay when updating content in transporter portal (closes #4589) (#4604) (0e3e7e0)
  • utils: correct identity spelling error (#4579) (7fed191)

Docs v2.2.1

  • add live validation examples in validation reference section (#4584) (aca4a5c)

Other v2.2.1

  • dev dependencies updates

v2.2.0

Released: 2020-01-08

Overview v2.2.0

  • New optional icon components based on BootstrapIcons v1.0.0-alpha2
  • New tagged input component <b-form-tags>
  • Support for Bootstrap v4.4.1 CSS/SCSS

Features v2.2.0

  • icons: new optional icon components (#4489) (d2bef17)
  • b-collapse: add new prop appear to animate an initially visible collapse (#4317) (136a72b)
  • b-collapse: add optional scoping to default slot (#4405) (8e95bac)
  • b-container: add support for Bootstrap v4.4.x new responsive containers (0e318f4)
  • b-dropdown: add splitClass property to dropdown component (#4394) (a5f342e)
  • b-dropdown-form: new form-class prop for adding classes to the form element (closes #4474) (#4475) (eef4200)
  • b-form-select: add group/tree support and dedicated option and option-group components (closes #3222) (#4267) (f1ed017)
  • b-form-select: support paths for valueField, textField, htmlField and disabledField props (#4386) (ed3b736)
  • b-form-tags: new tagged input component (#4409) (00eb9d9)
  • b-row: add Bootstrap v4.4 row columns support (#4439) (833b028)
  • b-table: better sort labeling for screen readers (closes #4487) (#4488) (d4e66fa)
  • b-table, b-table-lite: new tbody-tr-attr prop for arbitrary row attributes (closes #1864) (#4481) (4acf6ed)
  • b-tooltip: add noninteractive prop (closes #4556) (#4563) (b3ad726)
  • build: configure pre-commit hook (closes #4532) (#4552) (1bf9e59)

Bug Fixes v2.2.0

  • b-table, b-table-lite: handle edge case with row events when table is removed from dom. instantiate row event handlers only when listeners are registered (fixes #4384) (#4388) (9a81cd4)
  • b-toast: fix internal ensureToaster method call when toaster name changes (#4468) (744bb7a)
  • tooltips, popovers: fix memory leak (closes #4400) (#4401) (c71352d)
  • docs: handle undocumented breaking changes in babel-standalone for IE 11 (#4484) (56f8bb5)

Bootstrap's Changelogs from 4.3.1 to 4.4.1

v4.4.1

  • Fix Dart Sass compatibility
  • Add :disabled for disabled fieldset

v4.4.0

Highlights Here's what you need to know about v4.4.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work.- New responsive containers! Over a year in the making, fluid up to a particular breakpoint, available for all responsive tiers.

  • New responsive .row-cols classes for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.
  • New escape-svg() function for simplifying our embedded background-image SVGs for forms and more.
  • New add() and subtract() functions for avoiding errors and zero values from CSS's built in calc feature.
  • New make-col-auto() mixin to make our .col-auto class available with custom HTML.
  • Fixed an issue with Microsoft Edge not picking up :disabled styles by moving selectors to [disabled].
  • Deprecated: bg-variant(), nav-divider(), and form-control-focus() mixins are now deprecated as they're going away in v5.
  • Updated our spacing and alignment for modal footer elements like buttons to automatically wrap when space is constrained.
  • More flexible form control validation styles thanks to fewer chained selectors. Also updated the :invalid validation icon to be an alert instead of an × to avoid confusion with browser functionality for clearing the form field value.
  • Fixed a couple dozen CSS and JS bugs.
  • Moved to GitHub Actions for CI/CD! Expect more updates to our CI setup over time here while Actions evolves.
  • Updated documentation to fix links and typos, improved landmarks for secondary navigation, and a new security doc for guidelines on reporting potential vulnerabilities.

Key takeaways

Looking at BootsrapVue's and Bootstrap's changelogs, here a few key takeaways that we might want to consider.

Upgrading to BootstrapVue 2.13.0 brings in a few new components and directives, most notably:

Bootstrap itself comes with some style updates, some of which seem to impact our components visually:

  • Modals' footer spacing has been adjusted, resulting in slight visual diff in GlModal:

storyshots-spec-js-image-storyshots-base-modal-opened-modal-1-diff

Modals are widely used in GitLab's projects, but this impact seems acceptable considering that GlModal doesn't comply with Pajamas specifications at the moment. Let's smoke test a few modals in GitLab anyway, to make sure there aren't unexpected effect to this change.

  • Flush list groups now remove the top border from the first list item, which impacts GlPaginatedList:

storyshots-spec-js-image-storyshots-base-paginated-list-default-1-diff

This has a very low impact on GitLab as GlPaginatedList is only used in the License Compliance app:

Before After
image image

Overall, there doesn't seem to be any negative impact.

/cc @ealcantara

Edited by Paul Gascou-Vaillancourt