Skip to content

refactor(toast): Replace vue-toasted with BootstrapVue's Toast plugin

Paul Gascou-Vaillancourt requested to merge 246-bootstrap-vue-toast into main

What does this MR do?

  • Drops vue-toasted in favor of BootstrapVue's toast component.
  • Use shared CloseButton component as toasts close button.

Screenshots

Context Before After
Default (toasts are now stackable) Screen_Shot_2021-06-15_at_3.00.44_PM Screen_Shot_2021-06-18_at_8.28.32_AM
With action Screen_Shot_2021-06-15_at_3.00.56_PM Screen_Shot_2021-06-18_at_8.29.08_AM
Long content Screen_Shot_2021-06-15_at_3.01.21_PM Screen_Shot_2021-06-18_at_8.29.42_AM

Migration notes

  • The following options have been renamed:
    • duration now is autoHideDelay
    • className now is toasClass.
  • The following options are not supported anymore:
    • fullWidth
    • fitToScreen
    • containerClass
    • iconPack
    • Icon
    • theme
    • closeOnSwipe
    • keepOnHover
    • singleton
    • type (note that while this option was previously supported, it didn't have any effect visually and can thus be removed altogether)
  • It is not possible to render HTML in toasts' body anymore, make sure to only pass plain text to the .show() method.
  • To adhere with the design system, the position option has also been removed. Toasts should only appear in the bottom-left corner.
  • The callbacks have been backported:
    • onComplete should work as usual.
    • onClick's second argument is an object with the following properties:
      • id is the BootstrapVue toast's ID.
      • hide is a method that can be called to hide the toast. It replaces goAway(0).

Closes #246 (closed)

Closes #1125 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports