fix(VDialog/VMenu/VTooltip): hide wrapper element when not attached (#…

…9163) * fix(VDialog/VMenu/VTooltip): hide wrapper element when not attached fixes #6951 * fix(VTooltip): correct class name Co-Authored-By: Daan Roet <DRoet@users.noreply.github.com>
vuetifyjs · Oct 1, 2019 · 5a100ac · 5a100ac
1 parent 1e62a4e
commit 5a100ac
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -43,14 +43,11 @@
   z-index: 6
   outline: none
 
-.v-dialog__activator
-  cursor: pointer
-
-  *
-    cursor: pointer
-
 .v-dialog__container
-  display: inline
+  display: none
+
+  &--attached
+    display: inline
 
 // Modifier
 .v-dialog--animated

diff --git a/packages/vuetify/src/components/VDialog/VDialog.ts b/packages/vuetify/src/components/VDialog/VDialog.ts
@@ -314,6 +314,12 @@ export default baseMixins.extend({
 
     return h('div', {
       staticClass: 'v-dialog__container',
+      class: {
+        'v-dialog__container--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
+      },
       attrs: { role: 'dialog' },
     }, children)
   },

diff --git a/packages/vuetify/src/components/VMenu/VMenu.sass b/packages/vuetify/src/components/VMenu/VMenu.sass
@@ -2,15 +2,10 @@
 @import './_variables.scss'
 
 .v-menu
-  display: inline
+  display: none
 
-  &__activator
-    align-items: center
-    cursor: pointer
-    display: flex
-
-    *
-      cursor: pointer
+  &--attached
+    display: inline
 
   &__content
     position: absolute

diff --git a/packages/vuetify/src/components/VMenu/VMenu.ts b/packages/vuetify/src/components/VMenu/VMenu.ts
@@ -438,6 +438,12 @@ export default baseMixins.extend({
   render (h): VNode {
     const data = {
       staticClass: 'v-menu',
+      class: {
+        'v-menu--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
+      },
       directives: [{
         arg: '500',
         name: 'resize',

diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.sass b/packages/vuetify/src/components/VTooltip/VTooltip.sass
@@ -2,7 +2,10 @@
 @import ./_variables
 
 .v-tooltip
-  display: inline
+  display: none
+
+  &--attached
+    display: inline
 
   &__content
     background: $tooltip-background-color
@@ -17,7 +20,7 @@
     width: auto
     opacity: 1
     pointer-events: none
-    
+
     &--fixed
       position: fixed
 

diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.ts b/packages/vuetify/src/components/VTooltip/VTooltip.ts
@@ -110,6 +110,10 @@ export default mixins(Colorable, Delayable, Dependent, Detachable, Menuable, Tog
         'v-tooltip--right': this.right,
         'v-tooltip--bottom': this.bottom,
         'v-tooltip--left': this.left,
+        'v-tooltip--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
       }
     },
     computedTransition (): string {