refactor: Upgrade bootstrap vue
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.
- BootstrapVue's Tooltip component was heavily refactored in
-
Fix dropdown visual tests [Paul] - In BootstrapVue
v2.0.0
, a bug fix ensures that class bindings are placed on root element for all dropdown sub-components, thus we had to make sure that our own CSS selector still target the correct element. This change only affected dropdown headers.
- In BootstrapVue
-
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';
toimport { BButton } from 'bootstrap-vue';
for components. Directive components are preceded withVB
, i.e.:import { VBModal } from 'bootstrap-vue';
- To add a contentless tab, use the
v-slot:tabs-start
orv-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
andGlFormRadioGroup
does not support sizing if theplain
property is set to true (removing custom styles). -
BTooltip
andBPopover
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