fix(forms): misc style fix (#942)

Kong · Nov 23, 2023 · a783467 · a783467
1 parent 0286c73
commit a783467
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 35 deletions.
diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -49,6 +49,7 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
+    "@kong/icons": "^1.8.0",
     "fecha": "^4.2.3",
     "lodash": "^4.17.21"
   },

diff --git a/packages/core/forms/src/generator/FormGenerator.vue b/packages/core/forms/src/generator/FormGenerator.vue
@@ -329,7 +329,6 @@ export default {
 
       &:hover {
         background-color: #e6e6e6;
-        border-color: #adadad;
         color: #333;
       }
 

diff --git a/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue b/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue
@@ -7,22 +7,22 @@
     </KCard>
 
     <KButton
+      appearance="tertiary"
+      class="array-card-remove-button"
       @click="$emit('remove-item')"
     >
-      <template #icon>
-        <KIcon
-          icon="trash"
-          size="18"
-        />
-      </template>
+      <TrashIcon />
     </KButton>
   </div>
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
 export default {
   name: 'FieldArrayCardContainer',
 
+  components: { TrashIcon },
+
   props: {
     model: {
       type: Object,
@@ -50,10 +50,15 @@ export default {
 
 <style lang="scss" scoped>
 .array-card-container {
+  align-items: center;
   display: flex;
 
   .card {
     margin-bottom: 8px;
   }
+
+  .array-card-remove-button {
+    margin-left: 12px;
+  }
 }
 </style>
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue b/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue
@@ -7,19 +7,17 @@
       type="button"
       @click="$emit('remove-item')"
     >
-      <template #icon>
-        <KIcon
-          icon="trash"
-          size="18"
-        />
-      </template>
+      <TrashIcon />
     </KButton>
   </div>
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
+
 export default {
   name: 'FieldArrayItem',
+  components: { TrashIcon },
   props: {
     model: {
       type: String,

diff --git a/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue b/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue
@@ -8,30 +8,33 @@
       @click="contentVisible = !contentVisible"
     >
       {{ model.name ? model.name : 'New Item' }}
-      <i class="material-icons">add</i>
+      <AddIcon class="metric-add-icon" />
     </div>
     <transition name="slide-fade">
       <div
         v-if="contentVisible"
         class="content"
       >
         <slot />
-        <i
-          class="material-icons"
+        <KButton
+          appearance="tertiary"
+          class="metric-remove-button"
           @click="$emit('remove-item')"
         >
-          delete
-        </i>
+          <TrashIcon />
+        </KButton>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
+import { AddIcon, TrashIcon } from '@kong/icons'
 import abstractField from '../abstractField'
 
 export default {
   name: 'FieldMetric',
+  components: { AddIcon, TrashIcon },
   mixins: [abstractField],
   emits: ['remove-item'],
 
@@ -76,7 +79,7 @@ export default {
     width: 100%;
     &:hover { background-color: #f5f5f5; }
   }
-  i {
+  .metric-add-icon {
     margin-left: auto;
     transition: all .7s;
     user-select: none;
@@ -87,10 +90,8 @@ export default {
     height: auto;
     overflow: hidden;
     transition: all .5s;
-    i:hover {
-      color: #c9302c;
-    }
-    .material-icons {
+
+    .metric-remove-button {
       float: right;
       margin-bottom: 16px;
       margin-right: 16px;
@@ -99,6 +100,8 @@ export default {
       padding: 16px;
     }
   }
-  &.active .title i { transform: rotate(135deg); }
+  &.active .title .metric-add-icon {
+    transform: rotate(45deg);
+  }
 }
 </style>
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
@@ -211,17 +211,6 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-.vue-form-generator .field-wrap {
-  .k-button {
-    &,
-    &:hover {
-      background: none;
-      border: none;
-    }
-  }
-}
-</style>
 
 <style lang="scss" scoped>
 .object-advanced-wrapper {

diff --git a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
@@ -98,6 +98,7 @@
         <template #actionButton>
           <div class="filter-clear-button-container">
             <KButton
+              appearance="tertiary"
               size="small"
               @click="clearFields"
             >

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml