Merge pull request rancher#11880 from momesgin/11763-floating-vue-fixes

Fix Tooltip and Dropdown issues

pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue

@@ -49,7 +49,7 @@ export default defineComponent({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="isObject(value) ? { ...{content: value.content, popperClass: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />
@@ -92,39 +92,10 @@ export default defineComponent({
         z-index: z-index(hoverOverContent);
      }
 
-    // I DON'T THINK iT NEEDS FiXING... I think we delete it... CHECK EDIT->PODS->GENERAL TAB-> PULL SECRETS ::TODO-ALEX
-    .tooltip {
-        position: absolute;
-        width: calc(100% + 2px);
-        top: calc(100% + 6px);
-
-        .tooltip-arrow {
-            right: 30px;
-        }
-
-        .tooltip-inner {
-            padding: 10px;
-        }
-    }
-
     @mixin tooltipColors($color) {
         .status-icon {
             color: $color;
         }
-        .tooltip {
-            .tooltip-inner {
-                color: var(--input-bg);
-                background: $color;
-                border-color: $color;
-            }
-
-            .tooltip-arrow {
-                border-bottom-color: $color;
-                &:after {
-                    border: none;
-                }
-            }
-        }
     }
 
     &.error {
@@ -146,9 +117,9 @@ export default defineComponent({
 }
 
 // Ensure code blocks inside tootips don't look awful
-.tooltip {
-  .tooltip-inner {
-    > pre {
+.v-popper__popper.v-popper--theme-tooltip {
+  .v-popper__inner {
+    pre {
       padding: 2px;
       vertical-align: middle;
     }

shell/assets/styles/global/_layout.scss

@@ -131,6 +131,15 @@ HEADER {
     outline: 0;
   }
 
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
+      .v-popper__arrow-inner {
+        top: 0;
+        border-color: var(--tooltip-bg);
+      }
+    }
+  }
+
   li {
     padding: 8px 20px;
 

shell/assets/styles/global/_tooltip.scss

@@ -123,7 +123,6 @@
     color: var(--popover-text);
     padding: 10px;
     border-radius: var(--border-radius);
-    box-shadow: 0 5px 20px var(--shadow);
     border: none;
 
     a {
@@ -133,6 +132,19 @@
 
   .v-popper__arrow-container {
     border-color: transparent;
+    .v-popper__arrow-outer {
+      border-color: transparent;
+    }
+  }
+}
+
+.v-popper__popper.v-popper--theme-dropdown {
+  z-index: z-index('tooltip');
+
+  &.containerLogsDropdown {
+    .v-popper__arrow-container {
+      display: none;
+    }
   }
 }
 

shell/components/ActionDropdown.vue

@@ -66,7 +66,7 @@ export default {
         placement="bottom"
         :container="false"
         :disabled="disableButton"
-        :popper-options="{modifiers: { flip: { enabled: false } } }"
+        :flip="false"
       >
         <slot
           name="button-content"

shell/components/LocaleSelector.vue

@@ -52,9 +52,11 @@ export default {
     <div v-if="mode === 'login'">
       <div v-if="showLocale">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          distance="8"
+          skidding="12"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"

shell/components/auth/SelectPrincipal.vue

@@ -178,7 +178,7 @@ export default {
     v-clean-tooltip="{
       content: tooltipContent,
       placement: 'bottom',
-      classes: ['select-principal-tooltip']
+      popperClass: ['select-principal-tooltip']
     }"
     :mode="mode"
     :label="label"

shell/components/fleet/FleetStatus.vue

@@ -160,9 +160,9 @@ function toPercent(value, min, max) {
             ref="popover"
             placement="bottom-end"
             offset="-10"
-            trigger="manual"
+            :triggers="[]"
             :delay="{show: 0, hide: 0}"
-            :popper-options="{modifiers: { flip: { enabled: false } } }"
+            :flip="false"
             :container="false"
           >
             <div class="meta-title">

shell/components/formatter/AppSummaryGraph.vue

@@ -89,8 +89,8 @@ export default {
     v-if="show"
     class="text-center hand"
     placement="top"
-    :open-group="row.id"
-    :trigger="show ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="show ? ['click'] : []"
     offset="1"
   >
     <ProgressBarMulti

shell/components/formatter/FleetSummaryGraph.vue

@@ -63,8 +63,8 @@ export default {
     v-if="show"
     class="text-center hand"
     placement="top"
-    :open-group="row.id"
-    :trigger="show ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="show ? ['click'] : []"
     offset="1"
   >
     <ProgressBarMulti

shell/components/formatter/MachineSummaryGraph.vue

@@ -32,8 +32,8 @@ export default {
   <v-dropdown
     class="text-center hand machine-summary-graph"
     placement="top"
-    :open-group="row.id"
-    trigger="click"
+    :show-group="row.id"
+    :triggers="['click']"
     offset="1"
   >
     <template #popper>

shell/components/formatter/Scale.vue

@@ -52,8 +52,8 @@ export default {
   <v-dropdown
     :class="{'hand': showHover}"
     placement="top"
-    :open-group="row.id"
-    :trigger="showHover ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="showHover ? ['click'] : []"
     offset="1"
   >
     <span>

shell/components/formatter/Weight.vue

@@ -85,8 +85,8 @@ export default {
   <v-dropdown
     :class="{'hand': canAdjust}"
     placement="top"
-    :open-group="row.id"
-    :trigger="canAdjust ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="canAdjust ? ['click'] : []"
     offset="1"
     @apply-show="onShown"
   >

shell/components/nav/NamespaceFilter.vue

@@ -1129,7 +1129,7 @@ export default {
   }
 </style>
 <style lang="scss">
-  .tooltip {
+  .v-popper__popper {
     .ns-filter-tooltip {
       background-color: var(--body-bg);
       margin: -6px;

shell/components/nav/TopLevelMenu.vue

@@ -390,7 +390,7 @@ export default {
 
       let contentText = '';
       let content;
-      let classes = '';
+      let popperClass = '';
 
       // this is the normal tooltip scenario where we are just passing a string
       if (typeof item === 'string') {
@@ -415,7 +415,7 @@ export default {
       } else {
         contentText = item.label;
         // this adds a class to the tooltip container so that we can control the max width
-        classes = 'menu-description-tooltip';
+        popperClass = 'menu-description-tooltip';
 
         if (item.description) {
           contentText += `<br><br>${ item.description }`;
@@ -427,15 +427,15 @@ export default {
           content = this.shown ? contentText : null;
 
           // this adds a class to adjust tooltip position so it doesn't overlap the cluster pinning action
-          classes += ' description-tooltip-pos-adjustment';
+          popperClass += ' description-tooltip-pos-adjustment';
         }
       }
 
       return {
         content,
         placement:     'right',
         popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } },
-        classes
+        popperClass
       };
     },
   }

shell/components/nav/WindowManager/ContainerLogs.vue

@@ -621,8 +621,9 @@ export default {
 
         <div class="log-action log-action-group ml-5">
           <v-dropdown
-            trigger="click"
+            :triggers="['click']"
             placement="top"
+            popperClass="containerLogsDropdown"
           >
             <button class="btn bg-primary btn-cog">
               <i class="icon icon-gear" />

shell/detail/helm.cattle.io.projecthelmchart.vue

@@ -156,9 +156,9 @@ export default {
               ref="popover"
               placement="bottom-end"
               offset="-10"
-              trigger="manual"
+              :triggers="[]"
               :delay="{show: 0, hide: 0}"
-              :popper-options="{modifiers: { flip: { enabled: false } } }"
+              :flip="false"
               :container="false"
             >
               <div class="meta-title">