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

ae567a6b · Olena Horal-Koretska · Phil Hughes · f76d3eb7 · ae567a6b · ae567a6b
Commit ae567a6b authored Mar 10, 2021 by Olena Horal-Koretska Committed by Phil Hughes Mar 10, 2021
20 changed files
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/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"

--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/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>
--- a/app/assets/javascripts/ide/components/branches/item.vue
+++ b/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>

--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/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

--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/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>

--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/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>

--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/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

--- a/app/assets/javascripts/ide/components/shared/tokened_input.vue
+++ b/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>

--- a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
+++ b/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">

--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/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>

--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/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>
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/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>

--- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_segment_modal.vue
+++ b/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!"

--- a/ee/app/assets/javascripts/clusters/components/environments.vue
+++ b/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>

--- a/ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue
+++ b/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.',

--- a/ee/app/assets/javascripts/storage_counter/components/project.vue
+++ b/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>

--- a/ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue
+++ b/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>

--- a/ee/app/assets/javascripts/subscriptions/new/components/order_summary.vue
+++ b/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-if="collapsed" name="chevron-right" :size="18" use-deprecated-sizes />
-            <gl-icon v-else name="chevron-down" :size="18" />
+            <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>

--- a/package.json
+++ b/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",

--- a/yarn.lock
+++ b/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":
+"@gitlab/ui@28.6.0":
-  version "28.1.0"
+  version "28.6.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.1.0.tgz#aaec227c03c345632bcb2bc6222ed49a004b2dbd"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.6.0.tgz#dae21f072cbf898bfa87dcefbef951c2811ecba0"
-  integrity sha512-V4AH41sRVPp4gOSNt/safVbmsF8RS7H49JuaMWtOkNqfc90ePW+OGyv5ioCYDMYLvk8BaGlmH8f01BuCgOrplA==
+  integrity sha512-6LvPoQbSzbY9kmP3y84eQj48w6XzgLktSBX0NM2IB3/sZzEtFlpLpnqmv6cWhS2V1HAM7xW6nLZ4SGyM3JRhvA==
  dependencies:
    "@babel/standalone" "^7.0.0"
    "@gitlab/vue-toasted" "^1.3.0"