GitLab UI integration branch for 1226-make-popover-focus-by-default

Updates any gl-popovers that use the triggers property and
removes them since hover and focus will become
the default.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56660

app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue

@@ -37,7 +37,7 @@ export default {
 
 <template>
   <div id="popover-container">
-    <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
+    <gl-popover :target="target" placement="top" container="popover-container">
       <div
         class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-word-break-all"
       >

app/assets/javascripts/clusters_list/components/node_error_help_text.vue

@@ -34,7 +34,7 @@ export default {
 
     <gl-icon name="status_warning" :size="24" class="gl-p-2" />
 
-    <gl-popover :container="popoverId" :target="popoverId" placement="top" triggers="hover focus">
+    <gl-popover :container="popoverId" :target="popoverId" placement="top">
       <template #title>
         <span class="gl-display-block gl-text-left">{{ errorContent.title }}</span>
       </template>

app/assets/javascripts/feature_highlight/feature_highlight_popover.vue

@@ -71,7 +71,6 @@ export default {
       ref="popover"
       :target="$options.targetId"
       :css-classes="['feature-highlight-popover']"
-      triggers="hover"
       container="body"
       placement="right"
       boundary="viewport"

app/assets/javascripts/performance_bar/components/request_selector.vue

@@ -60,11 +60,7 @@ export default {
     </select>
     <span v-if="requestsWithWarnings.length">
       <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
-      <gl-popover
-        target="performance-bar-request-selector-warning"
-        :content="warningMessage"
-        triggers="hover focus"
-      />
+      <gl-popover target="performance-bar-request-selector-warning" :content="warningMessage" />
     </span>
   </div>
 </template>

app/assets/javascripts/performance_bar/components/request_warning.vue

@@ -37,6 +37,6 @@ export default {
 <template>
   <span v-if="hasWarnings">
     <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
-    <gl-popover :target="htmlId" :content="warningMessage" triggers="hover focus" />
+    <gl-popover :target="htmlId" :content="warningMessage" />
   </span>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue

@@ -153,7 +153,6 @@ export default {
             v-if="showPopover"
             :target="() => $refs.popover"
             placement="top"
-            triggers="hover focus"
           >
             <template #title>
               <div class="gl-font-weight-normal gl-font-base">

app/assets/javascripts/vue_shared/components/help_popover.vue

@@ -26,7 +26,7 @@ export default {
 <template>
   <span>
     <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
-    <gl-popover triggers="hover focus" :target="() => $refs.popoverTrigger.$el" v-bind="options">
+    <gl-popover :target="() => $refs.popoverTrigger.$el" v-bind="options">
       <template v-if="options.title" #title>
         <span v-safe-html="options.title"></span>
       </template>

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

@@ -60,7 +60,7 @@ export default {
 
 <template>
   <!-- 200ms delay so not every mouseover triggers Popover -->
-  <gl-popover :target="target" :delay="200" boundary="viewport" triggers="hover" placement="top">
+  <gl-popover :target="target" :delay="200" boundary="viewport" placement="top">
     <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover">
       <div class="gl-p-2 flex-shrink-1">
         <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-3!" />

ee/app/assets/javascripts/approvals/components/empty_rule_name.vue

@@ -29,12 +29,7 @@ export default {
         :size="14"
         class="author-link suggestion-help-hover"
       />
-      <gl-popover
-        target="pop-approver"
-        container="popovercontainer"
-        placement="top"
-        triggers="hover focus"
-      >
+      <gl-popover target="pop-approver" container="popovercontainer" placement="top">
         <template #title>{{ __('Who can approve?') }}</template>
         <ul class="pl-3">
           <li>

ee/app/assets/javascripts/approvals/components/rule_name.vue

@@ -67,7 +67,7 @@ export default {
         :size="14"
         class="author-link suggestion-help-hover"
       />
-      <gl-popover :target="popoverTarget" placement="top" triggers="hover focus">
+      <gl-popover :target="popoverTarget" placement="top">
         <template #title>{{ __('Who can approve?') }}</template>
         <p>{{ description }}</p>
         <gl-link v-if="linkPath" :href="linkPath" class="gl-font-sm" target="_blank">{{

ee/app/assets/javascripts/boards/components/epic_lane.vue

@@ -142,7 +142,7 @@ export default {
         >
           {{ epic.title }}
         </h4>
-        <gl-popover :target="() => $refs.epicTitle" triggers="hover" placement="top">
+        <gl-popover :target="() => $refs.epicTitle" placement="top">
           <template #title>{{ epic.title }} &middot; {{ epic.reference }}</template>
           <div>{{ epicTimeAgoString }}</div>
           <div class="gl-mb-2">{{ epicDateString }}</div>

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -103,7 +103,6 @@ export default {
     :container="containerId"
     :target="targetId"
     :disabled="disabled"
-    triggers="hover focus"
     placement="rightbottom"
     boundary="viewport"
     :delay="{ hide: 400 }"

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -116,7 +116,6 @@ export default {
       <gl-icon id="location-info" name="information" class="gl-text-blue-600" />
       <gl-popover
         target="location-info"
-        triggers="hover focus"
         placement="top"
         :title="s__('Dependencies|Location and dependency path')"
       >

ee/app/assets/javascripts/dependencies/components/dependency_location.vue

@@ -66,7 +66,6 @@ export default {
       <gl-popover
         :target="() => $refs.moreLink.$el"
         placement="top"
-        triggers="hover focus"
         :title="s__('Dependencies|Dependency path')"
       >
         <dependency-path-viewer :dependencies="ancestors" />

ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue

@@ -117,12 +117,7 @@ export default {
           __('Synchronization disabled')
         }}</span>
       </div>
-      <gl-popover
-        :target="`syncDisabled-${itemTitle}`"
-        placement="right"
-        triggers="hover focus"
-        :css-classes="['w-100']"
-      >
+      <gl-popover :target="`syncDisabled-${itemTitle}`" placement="right" :css-classes="['w-100']">
         <section>
           <gl-sprintf :message="$options.disabledText">
             <template #itemTitle>{{ itemTitle.toLowerCase() }}</template>

ee/app/assets/javascripts/geo_nodes/components/geo_node_last_updated.vue

@@ -65,7 +65,7 @@ export default {
       name="question"
       class="text-primary-600 ml-1 cursor-pointer"
     />
-    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top" triggers="hover focus">
+    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
       <p>{{ syncTimeAgo.popoverText }}</p>
       <gl-link class="mt-3 gl-font-sm" :href="syncHelp.link" target="_blank">{{
         syncHelp.text

ee/app/assets/javascripts/geo_nodes/components/geo_node_replication_status.vue

@@ -53,11 +53,7 @@ export default {
         name="question"
         class="gl-text-blue-600 gl-ml-2 gl-cursor-pointer"
       />
-      <gl-popover
-        :target="() => $refs.replicationStatusHelp.$el"
-        placement="top"
-        triggers="hover focus"
-      >
+      <gl-popover :target="() => $refs.replicationStatusHelp.$el" placement="top">
         <p>{{ __('Geo nodes are paused using a command run on the node') }}</p>
         <gl-link
           class="gl-mt-5 gl-font-sm"

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_progress.vue

@@ -54,12 +54,7 @@ export default {
       :failure-count="failureCount"
       :total-count="totalCount"
     />
-    <gl-popover
-      :target="`syncProgress-${itemTitle}`"
-      placement="right"
-      triggers="hover focus"
-      :css-classes="['w-100']"
-    >
+    <gl-popover :target="`syncProgress-${itemTitle}`" placement="right" :css-classes="['w-100']">
       <template #title>
         <gl-sprintf :message="__('Number of %{itemTitle}')">
           <template #itemTitle>

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue

@@ -86,7 +86,7 @@ export default {
         name="question"
         class="text-primary-600 ml-1 cursor-pointer"
       />
-      <gl-popover :target="() => $refs.verificationInfo.$el" placement="top" triggers="hover focus">
+      <gl-popover :target="() => $refs.verificationInfo.$el" placement="top">
         <p>
           <gl-sprintf
             :message="

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_last_updated.vue

@@ -63,7 +63,7 @@ export default {
       name="question"
       class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
     />
-    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top" triggers="hover focus">
+    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
       <p>{{ syncTimeAgo.popoverText }}</p>
       <gl-link :href="syncHelp.link" target="_blank">{{ syncHelp.text }}</gl-link>
     </gl-popover>

ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue

@@ -171,7 +171,6 @@ export default {
             <gl-popover
               :target="`${item.id}-labels`"
               placement="top"
-              triggers="hover"
               :css-classes="['issue-labels-popover']"
             >
               <div class="gl-display-flex gl-justify-content-start gl-flex-wrap gl-mr-1">

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue

@@ -97,7 +97,6 @@ export default {
     <gl-popover
       :target="rotationAssigneeUniqueID"
       :title="assignee.user.username"
-      triggers="hover"
       placement="top"
     >
       <p class="gl-m-0" data-testid="rotation-assignee-starts-at">

ee/app/assets/javascripts/requirements/components/requirement_item.vue

@@ -152,7 +152,7 @@ export default {
         </ul>
       </div>
     </div>
-    <gl-popover :target="getAuthorPopoverTarget()" triggers="hover focus" placement="top">
+    <gl-popover :target="getAuthorPopoverTarget()" placement="top">
       <div class="gl-line-height-normal gl-display-flex">
         <div class="gl-p-2 gl-flex-shrink-1">
           <gl-avatar :entity-name="author.name" :alt="author.name" :src="author.avatarUrl" />

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -135,7 +135,7 @@ export default {
         </div>
       </div>
     </a>
-    <gl-popover :target="generateKey(epic)" :title="epic.title" triggers="hover" placement="left">
+    <gl-popover :target="generateKey(epic)" :title="epic.title" placement="left">
       <p class="gl-text-gray-500 gl-m-0">{{ timeframeString(epic) }}</p>
       <p class="gl-m-0">{{ popoverWeightText }}</p>
     </gl-popover>

ee/app/assets/javascripts/roadmap/components/milestone_item.vue

@@ -131,7 +131,6 @@ export default {
         :target="`milestone-item-${milestone.id}`"
         boundary="viewport"
         placement="left"
-        triggers="hover"
         :title="milestone.title"
       >
         <div class="milestone-item-type gl-line-height-normal">

ee/app/assets/javascripts/security_dashboard/components/auto_fix_help_text.vue

@@ -48,7 +48,6 @@ export default {
       data-testid="vulnerability-solutions-popover"
       :target="() => $refs.popover"
       placement="top"
-      triggers="hover focus"
     >
       <template #title>
         <span>{{ s__('AutoRemediation| 1 Merge Request') }}</span>

ee/app/assets/javascripts/security_dashboard/components/issues_badge.vue

@@ -41,7 +41,7 @@ export default {
       <gl-icon name="issues" class="gl-mr-2" />
       {{ numberOfIssues }}
     </gl-badge>
-    <gl-popover ref="popover" :target="issueBadgeEl" triggers="hover" placement="top">
+    <gl-popover ref="popover" :target="issueBadgeEl" placement="top">
       <template #title>
         {{ popoverTitle }}
       </template>

ee/app/assets/javascripts/threat_monitoring/components/app.vue

@@ -99,7 +99,7 @@ export default {
         >
           <gl-icon name="question" />
         </gl-link>
-        <gl-popover :target="() => $refs.helpLink" triggers="hover focus">
+        <gl-popover :target="() => $refs.helpLink">
           {{ $options.helpPopoverText }}
         </gl-popover>
       </h2>

ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue

@@ -38,7 +38,6 @@ export default {
       :target="target"
       :title="__('Vulnerability remediated. Review before resolving.')"
       placement="top"
-      triggers="hover focus"
     />
   </div>
 </template>

package.json

@@ -59,7 +59,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.185.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "28.9.1",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/1098767989/artifacts/raw/gitlab-ui.1226-make-popover-focus-by-default.tgz",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",

yarn.lock

@@ -907,10 +907,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@28.9.1":
-  version "28.9.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.9.1.tgz#7d4d4502ff09fca19ab815504f80afbf03dd2fc1"
-  integrity sha512-+JqkpwzkKBnxo4KkC8XSPEJ5Au9y+TIOE7w9I5o+04krgWCbZKNqaiKZkg2IqSlo/sZSfvihXZMhEVc/JXf7HQ==
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/1098767989/artifacts/raw/gitlab-ui.1226-make-popover-focus-by-default.tgz":
+  version "28.9.0"
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/1098767989/artifacts/raw/gitlab-ui.1226-make-popover-focus-by-default.tgz#6fe91ad01754866cfec20fe16417a770434d732f"
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"
@@ -5893,10 +5892,22 @@ he@^1.1.0, he@^1.1.1, he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+<<<<<<< HEAD
 highlight.js@^10.6.0, highlight.js@~10.6.0:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.6.0.tgz#0073aa71d566906965ba6e1b7be7b2682f5e18b6"
   integrity sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==
+=======
+highlight.js@^10.6.0:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.6.0.tgz#0073aa71d566906965ba6e1b7be7b2682f5e18b6"
+  integrity sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==
+
+highlight.js@~9.13.0:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+>>>>>>> 21a4cfe5a5c (GitLab UI integration branch for 1226-make-popover-focus-by-default)
 
 hmac-drbg@^1.0.1:
   version "1.0.1"