Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use portalling for <b-modal>, <b-popover>/<b-tooltip>, and <b-toast> components #2261

Closed
tmorehouse opened this issue Dec 10, 2018 · 6 comments · Fixed by #3908

Comments

@tmorehouse
Copy link
Member

commented Dec 10, 2018

This issue is more of a note to the core team.

Consider using portal-vue for placing modals, tooltips, popovers, and toasts at the bottom of the document. Although we need to wait for release 2.0.0 (as there is a feature LinusBorg/portal-vue#161 needed that will be available in release 2)

I've been working on the new Bootstrap V4.2 toast component which needs portal-vue's features (as toasts need to be stacked in the same container), and have found that it will be also very handy for modals (for fixing z-index/stacking issues) and tooltips/popovers.

Currently portal-vue renders placeholder elements for the portal component, which can break layout in some situations (hence the need to wait for release 2.0), although there is a temporary workaround that can fix this (but will need to change when 2.0 is released).

UPDATE: (2019-06-05)

  • Toasts require PortalVue (specifically for the ability to use transition groups)
  • Modal now uses an internal custom portalling routine (which preserves parent/child relationships and injections)
  • Tooltips/Popover conversions are in progress, and will be using the new internal custom portalling routines
@tmorehouse tmorehouse self-assigned this Dec 10, 2018
@jackmu95 jackmu95 removed the Version: 2.x label Apr 2, 2019
@jackmu95 jackmu95 changed the title Use portal-vue for modal, popover/tooltip, and toast components Use `portal-vue` for <b-modal>, <b-popover>/<b-tooltip>, and <b-toast> components Apr 9, 2019
@TitanFighter

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2019

@tmorehouse FYI, portal-vue v2 already released.

@tmorehouse

This comment has been minimized.

Copy link
Member Author

commented Apr 12, 2019

@TitanFighter yeah, working on it this weekend, although we may wait for a patch release of it to come out first before we release it into the wild.

@tmorehouse

This comment has been minimized.

Copy link
Member Author

commented Apr 17, 2019

@TitanFighter Toasts will be available in v2.0.0-rc.19

@tmorehouse

This comment has been minimized.

Copy link
Member Author

commented Apr 17, 2019

Modal will be the next to be converted to using Portal-Vue (minimal change required to support it), followed by Tooltips/Popovers (they need the most re-work)

@tmorehouse tmorehouse added this to In Progress in 2.0.0 Stable Apr 19, 2019
@stigok

This comment has been minimized.

Copy link

commented Jun 5, 2019

It would be great if the documentation was updated to specify exactly which components needs portal to work. Right now it says "Toasts etc". E.g if I was only using b-container, I don't need portal in my build.
https://github.com/bootstrap-vue/bootstrap-vue/blame/9267d1205b25091ecc5ac532f619825ae53f5375/docs/markdown/intro/README.md#L506

@tmorehouse

This comment has been minimized.

Copy link
Member Author

commented Jun 5, 2019

Right now, the only component using PortalVue is Toasts (modal is using a custom portallaing component (built into BootstrapVue).

If you were importing only individual components, only the components that use PortalVue (or any external dependency) would import it into your bundle. Importing, say, the layout components only would not import PortalVue into your bundle.

@tmorehouse tmorehouse moved this from In Progress to On Hold in 2.0.0 Stable Jul 9, 2019
@tmorehouse tmorehouse changed the title Use `portal-vue` for <b-modal>, <b-popover>/<b-tooltip>, and <b-toast> components Use portalling for <b-modal>, <b-popover>/<b-tooltip>, and <b-toast> components Aug 12, 2019
@tmorehouse tmorehouse moved this from On Hold to In Progress in 2.0.0 Stable Aug 28, 2019
2.0.0 Stable automation moved this from In Progress to Completed Aug 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
2.0.0 Stable
  
Completed
4 participants
You can’t perform that action at this time.