Merge branch 'gitlab-ui-integration-1232-remove-deprecated-icon-sizes-and-validator' into 'master'

Add `use-deprecated-sizes` to icons that use deprecated sizes

See merge request gitlab-org/gitlab!55638

app/assets/javascripts/design_management/components/list/item.vue

@@ -138,6 +138,7 @@ export default {
           <gl-icon
             :name="icon.name"
             :size="18"
+            use-deprecated-sizes
             :class="icon.classes"
             data-qa-selector="design_status_icon"
             :data-qa-status="icon.name"

app/assets/javascripts/groups/components/item_caret.vue

@@ -21,5 +21,7 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret gl-mr-2"> <gl-icon :size="10" :name="iconClass" /> </span>
+  <span class="folder-caret gl-mr-2">
+    <gl-icon :size="10" :name="iconClass" use-deprecated-sizes />
+  </span>
 </template>

app/assets/javascripts/ide/components/branches/item.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" use-deprecated-sizes />
     </span>
     <span>
       <strong> {{ item.name }} </strong>

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -69,7 +69,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" use-deprecated-sizes />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon

app/assets/javascripts/ide/components/merge_requests/item.vue

@@ -41,7 +41,7 @@ export default {
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" use-deprecated-sizes />
     </span>
     <span>
       <strong> {{ item.title }} </strong>

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -87,7 +87,7 @@ export default {
         @input="searchMergeRequests"
         @removeToken="setSearchType(null)"
       />
-      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" use-deprecated-sizes />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
@@ -105,7 +105,7 @@ export default {
                 @click.stop="setSearchType(searchType)"
               >
                 <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-                  <gl-icon :size="18" name="search" />
+                  <gl-icon :size="18" name="search" use-deprecated-sizes />
                 </span>
                 <span>{{ searchType.label }}</span>
               </button>

app/assets/javascripts/ide/components/preview/navigator.vue

@@ -117,7 +117,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="refresh"
     >
-      <gl-icon :size="18" name="retry" class="m-auto" />
+      <gl-icon :size="18" name="retry" use-deprecated-sizes class="m-auto" />
     </button>
     <div class="position-relative w-100 gl-ml-2">
       <input

app/assets/javascripts/ide/components/shared/tokened_input.vue

@@ -81,7 +81,9 @@ export default {
           >
             <div class="value-container rounded">
               <div class="value">{{ token.label }}</div>
-              <div class="remove-token inverted"><gl-icon :size="10" name="close" /></div>
+              <div class="remove-token inverted">
+                <gl-icon :size="10" name="close" use-deprecated-sizes />
+              </div>
             </div>
           </button>
         </div>

app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue

@@ -82,7 +82,7 @@ export default {
     </gl-alert>
     <div v-else>
       <div class="gl-display-flex gl-align-items-center">
-        <gl-icon :size="18" name="lock" class="gl-text-gray-500 gl-mr-3" />
+        <gl-icon :size="18" name="lock" use-deprecated-sizes class="gl-text-gray-500 gl-mr-3" />
         {{ $options.i18n.viewOnlyMessage }}
       </div>
       <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">

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

@@ -82,7 +82,13 @@ export default {
     data-qa-selector="changed_file_icon_content"
     :data-qa-title="tooltipTitle"
   >
-    <gl-icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
+    <gl-icon
+      v-if="showIcon"
+      :name="changedIcon"
+      :size="size"
+      :class="changedIconClass"
+      use-deprecated-sizes
+    />
   </span>
 </template>
 

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

@@ -64,6 +64,12 @@ export default {
 </script>
 <template>
   <span :class="cssClass">
-    <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" />
+    <gl-icon
+      :name="icon"
+      :size="size"
+      :class="cssClasses"
+      :aria-label="status.icon"
+      use-deprecated-sizes
+    />
   </span>
 </template>

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

@@ -86,7 +86,7 @@ export default {
 <template>
   <span>
     <gl-loading-icon v-if="loading" :inline="true" />
-    <gl-icon v-else-if="isSymlink" name="symlink" :size="size" />
+    <gl-icon v-else-if="isSymlink" name="symlink" :size="size" use-deprecated-sizes />
     <svg v-else-if="!folder" :key="spriteHref" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
@@ -95,6 +95,7 @@ export default {
       :name="folderIconName"
       :size="size"
       class="folder-icon"
+      use-deprecated-sizes
       data-qa-selector="folder_icon_content"
     />
   </span>

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_segment_modal.vue

@@ -144,7 +144,12 @@ export default {
       {{ displayError }}
     </gl-alert>
     <gl-form-group class="gl-mb-3" data-testid="filter">
-      <gl-icon name="search" :size="18" class="gl-text-gray-300 gl-absolute gl-mt-3 gl-ml-3" />
+      <gl-icon
+        name="search"
+        :size="18"
+        use-deprecated-sizes
+        class="gl-text-gray-300 gl-absolute gl-mt-3 gl-ml-3"
+      />
       <gl-form-input
         v-model="filter"
         class="gl-pl-7!"

ee/app/assets/javascripts/clusters/components/environments.vue

@@ -150,6 +150,7 @@ export default {
           <gl-icon
             name="warning"
             :size="18"
+            use-deprecated-sizes
             class="cluster-deployments-warning mr-2 align-self-center flex-shrink-0"
           />
           <span>

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

@@ -46,6 +46,7 @@ export default {
             class="ml-2 text-warning-500"
             name="warning"
             :size="18"
+            use-deprecated-sizes
             :title="
               s__(
                 'GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS.',

ee/app/assets/javascripts/storage_counter/components/project.vue

@@ -105,7 +105,7 @@ export default {
         </div>
         <div class="table-mobile-content gl-display-flex gl-align-items-center">
           <div class="gl-display-flex gl-mr-3 gl-align-items-center">
-            <gl-icon :size="10" :name="iconName" class="gl-mr-2" />
+            <gl-icon :size="10" :name="iconName" use-deprecated-sizes class="gl-mr-2" />
             <gl-icon name="bookmark" />
           </div>
           <div>

ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue

@@ -25,6 +25,7 @@ export default {
       :size="18"
       :aria-label="title"
       name="check-circle"
+      use-deprecated-sizes
     />
     <h5 class="gl-mt-0 gl-mb-3">{{ title }}</h5>
   </div>

ee/app/assets/javascripts/subscriptions/new/components/order_summary.vue

@@ -47,8 +47,8 @@ export default {
       <div @click="toggleCollapse">
         <h4 class="d-flex justify-content-between gl-font-lg" :class="{ 'gl-mb-7': !collapsed }">
           <div class="d-flex">
-            <gl-icon v-if="collapsed" name="chevron-right" :size="18" />
-            <gl-icon v-else name="chevron-down" :size="18" />
+            <gl-icon v-if="collapsed" name="chevron-right" :size="18" use-deprecated-sizes />
+            <gl-icon v-else name="chevron-down" :size="18" use-deprecated-sizes />
             <div>{{ titleWithName }}</div>
           </div>
           <div class="gl-ml-3">{{ formatAmount(totalAmount, usersPresent) }}</div>

package.json

@@ -58,7 +58,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.184.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "28.1.0",
+    "@gitlab/ui": "28.6.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",

yarn.lock

@@ -907,10 +907,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@28.1.0":
-  version "28.1.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.1.0.tgz#aaec227c03c345632bcb2bc6222ed49a004b2dbd"
-  integrity sha512-V4AH41sRVPp4gOSNt/safVbmsF8RS7H49JuaMWtOkNqfc90ePW+OGyv5ioCYDMYLvk8BaGlmH8f01BuCgOrplA==
+"@gitlab/ui@28.6.0":
+  version "28.6.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.6.0.tgz#dae21f072cbf898bfa87dcefbef951c2811ecba0"
+  integrity sha512-6LvPoQbSzbY9kmP3y84eQj48w6XzgLktSBX0NM2IB3/sZzEtFlpLpnqmv6cWhS2V1HAM7xW6nLZ4SGyM3JRhvA==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"