fix(*): replace kicon instances [KHCP-11982] (#1413)

* fix(*): replace kicon instances [KHCP-11982] * fix(*): misc fixes [KHCP-11982]
Kong · May 16, 2024 · 6152026 · 6152026
1 parent 6190169
commit 6152026
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 71 deletions.
diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -8,12 +8,7 @@
         <KongIcon :color="KUI_COLOR_TEXT_DECORATIVE_AQUA" />
       </template>
       <template #title-before>
-        <KIcon
-          class="title-icon"
-          color="#169fcc"
-          icon="graduationHat"
-          size="20"
-        />
+        <TeamIcon class="title-icon" />
       </template>
       <template #title-after>
         <KBadge appearance="neutral">
@@ -29,10 +24,8 @@
             :label="enabled ? 'Enabled' : 'Disabled'"
             label-before
           />
-          <KButton
-            appearance="primary"
-            icon="plus"
-          >
+          <KButton appearance="primary">
+            <AddIcon />
             Do Things
           </KButton>
         </div>
@@ -111,7 +104,7 @@
 import { computed, ref } from 'vue'
 import type { BadgeMethodAppearance } from '@kong/kongponents'
 import { AppAboutSection, AppPageHeader } from '../../src'
-import { EditIcon, KongIcon } from '@kong/icons'
+import { EditIcon, KongIcon, TeamIcon, AddIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_DECORATIVE_AQUA } from '@kong/design-tokens'
 
 const breadcrumbs = computed(() => {

diff --git a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
@@ -20,10 +20,9 @@
                 type="button"
                 @click="removeElement(index)"
               >
-                <KIcon
-                  icon="trash"
-                  size="18"
-                />
+                <template #icon>
+                  <TrashIcon />
+                </template>
               </KButton>
             </div>
           </div>
@@ -87,8 +86,12 @@
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
 import abstractField from '../abstractField'
 export default {
+  components: {
+    TrashIcon,
+  },
   mixins: [abstractField],
   emits: ['model-updated'],
   data() {

diff --git a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
@@ -29,7 +29,7 @@
         @click="$emit('remove')"
       >
         <template #icon>
-          <KIcon icon="trash" />
+          <TrashIcon :color="KUI_COLOR_TEXT_DANGER" />
         </template>
       </KButton>
     </div>
@@ -74,6 +74,8 @@ import composables from '../composables'
 import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
 import { BadgeMethodAppearances } from '@kong/kongponents'
 import type { BadgeMethodAppearance } from '@kong/kongponents'
+import { TrashIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 
 /** Local types, not exported
  * Same pattern used other fields components

diff --git a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
@@ -6,25 +6,26 @@
       :data-testid="`remove-${routingRulesEntity}`"
       @click="$emit('remove')"
     >
-      <KIcon icon="trash" />
+      <template #icon>
+        <TrashIcon :color="KUI_COLOR_TEXT_DANGER" />
+      </template>
     </KButton>
     <KButton
       appearance="tertiary"
       :data-testid="`add-${routingRulesEntity}`"
       :disabled="isAddDisabled"
       @click="$emit('add')"
     >
-      <KIcon
-        :color="KUI_COLOR_TEXT_PRIMARY_STRONG"
-        icon="plus"
-        size="22"
-      />
+      <template #icon>
+        <AddIcon />
+      </template>
     </KButton>
   </div>
 </template>
 
 <script setup lang="ts">
-import { KUI_COLOR_TEXT_PRIMARY_STRONG } from '@kong/design-tokens'
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
+import { TrashIcon, AddIcon } from '@kong/icons'
 
 defineProps({
   routingRulesEntity: {
@@ -43,27 +44,6 @@ defineEmits(['remove', 'add'])
 <style lang="scss" scoped>
 .routing-rules-entities-controls-container {
   display: flex;
-
-  :deep(.k-button) {
-    &.remove-button {
-      svg path {
-        fill: $kui_color_border_neutral_weak !important;
-      }
-
-      &:hover {
-        svg path {
-          fill: $kui_color_border_danger_weak !important;
-        }
-      }
-    }
-
-    &[disabled] {
-      pointer-events: none !important;
-
-      .kong-icon {
-        opacity: 0 !important;
-      }
-    }
-  }
+  gap: $kui-space-20;
 }
 </style>
diff --git a/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue b/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue
@@ -21,7 +21,7 @@
       <template #footer>
         <div class="footer">
           <span class="footer-title">Footer slot</span>
-          <KIcon icon="kong" />
+          <KongIcon />
         </div>
       </template>
     </EntityFormSection>
@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
 import { EntityFormSection } from '../../src'
+import { KongIcon } from '@kong/icons'
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
@@ -81,16 +81,13 @@
             :width="dropdownMenuWidth"
           >
             <KButton
+              appearance="tertiary"
               class="actions-trigger"
               data-testid="overflow-actions-button"
               size="small"
             >
               <template #icon>
-                <KIcon
-                  :color="KUI_COLOR_TEXT_NEUTRAL_STRONGER"
-                  icon="more"
-                  size="16"
-                />
+                <MoreIcon />
               </template>
             </KButton>
             <template #items>
@@ -120,7 +117,6 @@ import { computed, ref } from 'vue'
 import composables from '../../composables'
 import { useTablePreferences } from '@kong-ui-public/core'
 import type { SwrvStateData, HeaderTag, TablePreferences } from '@kong/kongponents'
-import { KUI_COLOR_TEXT_NEUTRAL_STRONGER } from '@kong/design-tokens'
 import EntityBaseTableCell from './EntityBaseTableCell.vue'
 
 import type {
@@ -132,7 +128,7 @@ import type {
   TableSortParams,
   TableErrorMessage,
 } from '../../types'
-import { AddIcon } from '@kong/icons'
+import { AddIcon, MoreIcon } from '@kong/icons'
 
 const props = defineProps({
   // table header configuration
@@ -405,13 +401,6 @@ const handleUpdateTablePreferences = (newTablePreferences: TablePreferences): vo
       margin-top: 0;
     }
   }
-
-  .actions-trigger {
-    background-color: $kui-color-background-transparent!important;
-    border: none!important;
-    cursor: pointer!important;
-    font-weight: $kui-font-weight-regular!important;
-  }
 }
 </style>
 

diff --git a/...ges/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue b/...ges/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
@@ -116,12 +116,13 @@
             appearance="tertiary"
             class="btn-remove"
             data-testid="btn-remove-header"
+            :disabled="localHeaders.length === 1"
             @click="removeHeader(i)"
           >
             <template #icon>
-              <KIcon
+              <TrashIcon
                 class="delete-item"
-                icon="trash"
+                :color="localHeaders.length > 1 ? KUI_COLOR_TEXT_DANGER : undefined"
               />
             </template>
           </KButton>
@@ -133,11 +134,7 @@
             @click="addHeader"
           >
             <template #icon>
-              <KIcon
-                color="$kui-color-text-primary-strong"
-                icon="plus"
-                size="22"
-              />
+              <AddIcon />
             </template>
           </KButton>
         </div>
@@ -306,6 +303,8 @@ import {
 import type { MultiselectItem, SelectItem } from '@kong/kongponents'
 import useHelpers from '../composables/useHelpers'
 import links from '../links'
+import { AddIcon, TrashIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 
 const { i18n: { t } } = composables.useI18n()
 const { objectsAreEqual } = useHelpers()

diff --git a/packages/entities/entities-vaults/src/components/VaultForm.vue b/packages/entities/entities-vaults/src/components/VaultForm.vue
@@ -64,9 +64,8 @@
             :label="t('form.config.kong.label')"
             :selected-value="VaultProviders.KONG"
           >
-            <KIcon
-              icon="kong"
-              size="46"
+            <KongIcon
+              :size="KUI_ICON_SIZE_80"
             />
           </KRadio>
           <KTooltip
@@ -562,6 +561,8 @@ import {
 import { useRouter } from 'vue-router'
 import type { AxiosError, AxiosResponse } from 'axios'
 import endpoints from '../vaults-endpoints'
+import { KongIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_80 } from '@kong/design-tokens'
 
 interface ConfigFields {
   [VaultProviders.KONG]: KongVaultConfig

diff --git a/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue b/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue
@@ -20,7 +20,6 @@
       <ChevronDownIcon
         v-else
         :color="`var(--kong-ui-spec-renderer-operations-list-section-icon-color-expanded, ${KUI_COLOR_TEXT_NEUTRAL_STRONGER})`"
-        icon="chevronDown"
         :size="KUI_ICON_SIZE_40"
       />
     </div>