Skip to content

refactor: Upgrade bootstrap vue

Enrique Alcántara requested to merge upgrade-bootstrap-vue into master

Upgrade bootstrap vue to a stable version.

TODO

  • Fix Invalid prop: type check failed for prop "fields". Expected Array, got Object [Enrique]
  • Fix "export 'Modal' was not found in 'bootstrap-vue' [Enrique]
  • Fix unit test tests/components/base/sorting/sorting.spec.js [Enrique]
  • Fix warning tooltip unable to find target element in document [Paul]
  • Fix tabs visual tests [Enrique]
  • Fix tooltip visual tests [Paul]
    • BootstrapVue's Tooltip component was heavily refactored in v2.0.0. The component seems to rely on $nextTick to create its own DOM: https://github.com/bootstrap-vue/bootstrap-vue/pull/3908/files#diff-0732597cd96cb9d201490dfa8fe61b4b. This change affected our stories because we're trying to show tooltip when the story loads. We do this by focusing on the trigger button, which doesn't work properly anymore because the tooltip isn't actually constructed until one more tick. Thus, we had to delay the .focus() by one tick for all tooltip stories.
  • Fix dropdown visual tests [Paul]
  • Fix form radio visual tests [Enrique]
  • Set up MR to test breaking changes in the gitlab product (gitlab!18913 (merged)) [Enrique]

Breaking changes

  • Import statement for components and directives changed. From import BButton from 'bootstrap-vue/src/components/button/button'; to import { BButton } from 'bootstrap-vue'; for components. Directive components are preceded with VB, i.e.: import { VBModal } from 'bootstrap-vue';
  • To add a contentless tab, use the v-slot:tabs-start or v-slot:tabs-end slots.
  • GlTable fields property expects an array instead of an object now https://bootstrap-vue.js.org/docs/components/table#field-definition-reference
  • GlDropdown: sub-components' class bindings are now placed on the root element.
  • For GlFormRadio and GlFormRadioGroup does not support sizing if the plain property is set to true (removing custom styles).
  • BTooltip and BPopover have been heavily refactored and the associated DOM elements might not be available in the document until the next tick. Associated effects:
    • [data-original-title] attribute is not added when the directive is bound. This change breaks karma, jest, and capybara tests in production.
    • Tooltip directive is running an assertion that checks if the directive target element is attached to the document root. This assertion breaks karma, jest, and capybara tests in production.

EDIT: Remove task to create GlTooltip adapter as it won’t be necessary after migrating all Karma specs that failed because of this upgrade.

Edited by Enrique Alcántara

Merge request reports