Migrate to floating-vue

package.json

@@ -49,6 +49,7 @@
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^11.1.1",
 		"escape-html": "^1.0.3",
+		"floating-vue": "^1.0.0-beta.18",
 		"focus-trap": "^6.8.1",
 		"hammerjs": "^2.0.8",
 		"linkify-string": "^3.0.2",
@@ -59,7 +60,6 @@
 		"style-loader": "^3.3.1",
 		"tributejs": "^5.1.3",
 		"v-click-outside": "^3.0.1",
-		"v-tooltip": "^2.0.3",
 		"vue": "^2.6.14",
 		"vue-color": "^2.7.1",
 		"vue-material-design-icons": "^5.0.0",

src/components/Actions/Actions.vue

@@ -167,11 +167,11 @@ export default {
 		<!-- If more than one action, create a popovermenu -->
 		<Popover :delay="0"
 			:handle-resize="true"
-			:open.sync="opened"
+			:shown.sync="opened"
 			:placement="placement"
-			:boundaries-element="boundariesElement"
+			:boundary="boundariesElement"
 			:container="container"
-			popover-base-class="action-item__popover"
+			popover-base-class="action-item__popper"
 			@show="openMenu"
 			@after-show="onOpen"
 			@hide="closeMenu">
@@ -519,7 +519,7 @@ export default {
 			this.$emit('update:open', true)
 
 			/**
-			 * Event emitted when the popover menu is closed
+			 * Event emitted when the popover menu is opened
 			 */
 			this.$emit('open')
 		},
@@ -781,25 +781,13 @@ export default {
 		}
 	}
 }
-
-.popover__inner ul {
-	padding: 4px;
-}
-
-.ie,
-.edge {
-	.action-item__menu,
-	.action-item__menu .action-item__menu_arrow {
-		border: 1px solid var(--color-border);
-	}
-}
-
 </style>
 
 <style lang="scss">
 // We overwrote the popover base class, so we can style
 // the popover__inner for actions only.
-.popover.action-item__popover .popover__inner {
+.v-popper__popper.action-item__popper .v-popper__inner {
 	border-radius: var(--border-radius-large);
+	padding: 4px;
 }
 </style>

src/components/Avatar/Avatar.vue

@@ -654,7 +654,7 @@ export default {
 
 	&--with-menu {
 		cursor: pointer;
-		::v-deep .trigger {
+		::v-deep .v-popper {
 			position: absolute;
 			top: 0;
 			left: 0;

src/components/ColorPicker/ColorPicker.vue

@@ -72,7 +72,7 @@ export default {
 <template>
 	<div class="container1">
 		<button @click="open = !open"> Click Me </button>
-		<ColorPicker :value="color" @input="updateColor" :open.sync="open">
+		<ColorPicker :value="color" @input="updateColor" :shown.sync="open">
 			<div :style="{'background-color': color}" class="color1" />
 		</ColorPicker>
 	</div>

src/components/EmojiPicker/EmojiPicker.vue

@@ -32,7 +32,7 @@
 	```vue
 	<template>
 		<div>
-			<EmojiPicker @select="select">
+			<EmojiPicker @select="select" style="display: inline-block">
 				<button> Click Me </button>
 			</EmojiPicker>
 			<span>selected emoji: {{ emoji }}</span>
@@ -62,7 +62,8 @@
 			<EmojiPicker
 				:close-on-select="false"
 				:show-preview="true"
-				@select="select">
+				@select="select"
+				style="display: inline-block">
 				<button> Click Me </button>
 			</EmojiPicker>
 			<span>selected emoji: {{ emoji }}</span>
@@ -87,10 +88,8 @@
 </docs>
 
 <template>
-	<Popover :open.sync="open"
+	<Popover :shown.sync="open"
 		:container="container"
-		popover-class="emoji-popover"
-		popover-inner-class="popover-emoji-picker-inner"
 		v-bind="$attrs"
 		v-on="$listeners"
 		@after-show="afterShow"
@@ -264,22 +263,6 @@ export default {
 <style lang="scss">
 @import '~emoji-mart-vue-fast/css/emoji-mart.css';
 
-.emoji-popover {
-	& .tooltip-arrow,
-	&[x-placement^='top'] {
-		margin-left: 0 !important;
-	}
-	& .tooltip-arrow,
-	&[x-placement^='bottom'] {
-		margin-top: 0 !important;
-	}
-
-	// Remove the extra padding from VTooltip
-	.popover-emoji-picker-inner {
-		padding: 0;
-	}
-}
-
 .emoji-mart {
 	background-color: var(--color-main-background) !important;
 	border: 0;