chore(*): remove k-* classes (#95)

* chore(*): remove k-* classes * chore(*): add eslint rule
Kong · Sep 15, 2023 · 4912830 · 4912830
1 parent 98c1536
commit 4912830
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 11 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -97,7 +97,7 @@ module.exports = {
     'vue/no-deprecated-dollar-listeners-api': 'error',
     'vue/no-deprecated-events-api': 'error',
     'vue/no-deprecated-v-on-native-modifier': 'error',
-    'vue/no-restricted-class': ['error', ...kongponentUtilityClasses],
+    'vue/no-restricted-class': ['error', '/^k-/', ...kongponentUtilityClasses],
 
     // a11y
     'vuejs-accessibility/label-has-for': 'off',

diff --git a/src/components/EntityForm/fields.js b/src/components/EntityForm/fields.js
@@ -5,7 +5,7 @@ const ArrayStringFieldSchema = {
   itemContainerComponent: 'FieldArrayItem',
   fieldClasses: 'kong-form-array-string-field',
   fieldItemsClasses: 'kong-form-array-string-field-item',
-  inputAttributes: { class: 'k-input', style: { minWidth: '200px' } },
+  inputAttributes: { class: 'form-control', style: { minWidth: '200px' } },
   validator: 'array',
   styleClasses: 'kong-form-field-wrapper',
   newElementButtonLabel: '+ Add',

diff --git a/src/pages/plugins/PluginCardSkeleton.vue b/src/pages/plugins/PluginCardSkeleton.vue
@@ -1,7 +1,7 @@
 <template>
   <KSkeleton
     :card-count="cardCount"
-    class="k-skeleton-25"
+    class="plugin-card-skeleton"
     type="card"
   >
     <template #card-header>
@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style lang="scss">
-.k-skeleton-25 {
+.plugin-card-skeleton {
   .skeleton-card {
     height: 240px;
   }

diff --git a/src/pages/plugins/Select.vue b/src/pages/plugins/Select.vue
@@ -2,13 +2,12 @@
   <div class="plugins-shell">
     <PageHeader title="New Plugin">
       <div class="plugins-filter-wrapper">
-        <input
+        <KInput
           v-model="filter"
-          class="k-input"
           type="search"
           placeholder="Filter Plugins"
           data-testid="plugins-filter"
-        >
+        />
       </div>
     </PageHeader>
     <section

diff --git a/src/schemas/ArrayCardContainerFields.ts b/src/schemas/ArrayCardContainerFields.ts
@@ -1,7 +1,7 @@
 export default {
   type: 'array',
   showRemoveButton: false,
-  newElementButtonLabelClasses: 'k-button btn-link kong-form-new-element-button-label',
+  newElementButtonLabelClasses: 'kong-form-new-element-button-label',
   itemContainerComponent: 'FieldArrayCardContainer',
   fieldClasses: 'array-card-container-wrapper',
 }
diff --git a/src/schemas/MetricFields.ts b/src/schemas/MetricFields.ts
@@ -1,7 +1,7 @@
 export default {
   type: 'array',
   showRemoveButton: false,
-  newElementButtonLabelClasses: 'k-button btn-primary kong-form-new-element-button-label',
+  newElementButtonLabelClasses: 'kong-form-new-element-button-label',
   itemContainerComponent: 'FieldMetric',
   fieldClasses: 'metrics-wrapper',
 }
diff --git a/src/schemas/typedefs.ts b/src/schemas/typedefs.ts
@@ -54,7 +54,7 @@ export const fields = {
       fieldClasses: 'kong-form-array-field',
       fieldItemsClasses: 'kong-form-array-field-item',
       newElementButtonLabelClasses: 'kong-form-new-element-button-label',
-      inputAttributes: { class: 'k-input', style: { minWidth: '200px' }, ...inputAttributes },
+      inputAttributes: { class: 'form-control', style: { minWidth: '200px' }, ...inputAttributes },
       removeElementButtonLabel: 'remove',
       styleClasses: 'kong-form-field-wrapper',
       inputType: 'text',

diff --git a/src/styles/form.scss b/src/styles/form.scss
@@ -42,7 +42,6 @@ fieldset {
 .kong-form-array-field-item {
   display: flex;
   margin-top: $kui-space-40;
-  width: 50%;
 }
 
 .kong-form-array-string-field-item {