fix(kinput): update classes (#2182)

* fix(kinput): update classes * fix(*): update kinput selectors * test(kinput): fix component tests * fix(ktable): minor fix
Kong · Jun 3, 2024 · 45f3375 · 45f3375
1 parent b47cd44
commit 45f3375
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -463,6 +463,8 @@ This component has been removed.
 * `form-control` class has been removed
 * `over-char-limit` class has been removed
 * `help` class has been changed to `help-text`
+* `k-input-wrapper` class has been changed to `k-input`
+* `input.k-input` element class has been changed to `.input`
 
 #### Constants, Types & Interfaces
 

diff --git a/src/components/KFileUpload/KFileUpload.vue b/src/components/KFileUpload/KFileUpload.vue
@@ -244,17 +244,17 @@ $kFileUploadInputPaddingY: var(--kui-space-40, $kui-space-40); // corresponds to
 /* Component styles */
 
 .k-file-upload {
-  :deep(.k-input-wrapper) input[type="file"]::-webkit-file-upload-button,
-  :deep(.k-input-wrapper) input[type="file"]::file-selector-button {
+  :deep(.k-input) input[type="file"]::-webkit-file-upload-button,
+  :deep(.k-input) input[type="file"]::file-selector-button {
     margin: 0;
     opacity: 0;
     padding: 0;
     pointer-events: none;
     width: 0;
   }
 
-  :deep(.k-input-wrapper) input[type="file"],
-  :deep(.k-input-wrapper) input[type="file"][disabled] {
+  :deep(.k-input) input[type="file"],
+  :deep(.k-input) input[type="file"][disabled] {
     color: transparent !important;
   }
 

diff --git a/src/components/KInput/KInput.cy.ts b/src/components/KInput/KInput.cy.ts
@@ -102,7 +102,7 @@ describe('KInput', () => {
       },
     })
 
-    cy.get('.k-input-wrapper .help-text').should('contain.text', helpText)
+    cy.get('.k-input .help-text').should('contain.text', helpText)
   })
 
   it('shows character count when characterLimit prop is set and exceeded', () => {
@@ -115,8 +115,8 @@ describe('KInput', () => {
       },
     })
 
-    cy.get('.k-input-wrapper input.k-input').type(`This input has ${textCharCount} characters`)
-    cy.get('.k-input-wrapper.input-error .help-text').should('contain.text', `${textCharCount} / ${charLimit}`)
+    cy.get('.k-input input.input').type(`This input has ${textCharCount} characters`)
+    cy.get('.k-input.input-error .help-text').should('contain.text', `${textCharCount} / ${charLimit}`)
   })
 
   it('reacts to text changes', () => {
@@ -129,12 +129,12 @@ describe('KInput', () => {
       },
     })
 
-    cy.get('.k-input').should('have.value', inputValue)
-    cy.get('.k-input').clear()
-    cy.get('.k-input').type(newValue).then(() => {
+    cy.get('.input').should('have.value', inputValue)
+    cy.get('.input').clear()
+    cy.get('.input').type(newValue).then(() => {
       // Check for emitted event
       cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'input')
-      cy.get('.k-input').should('have.value', newValue)
+      cy.get('.input').should('have.value', newValue)
     })
   })
 
@@ -147,7 +147,7 @@ describe('KInput', () => {
       },
     })
 
-    cy.get('.k-input-wrapper').find(`[data-testid="${beforeSlot}"]`).should('be.visible')
+    cy.get('.k-input').find(`[data-testid="${beforeSlot}"]`).should('be.visible')
   })
 
   it('renders after slot when passed', () => {
@@ -159,6 +159,6 @@ describe('KInput', () => {
       },
     })
 
-    cy.get('.k-input-wrapper').find(`[data-testid="${afterSlot}"]`).should('be.visible')
+    cy.get('.k-input').find(`[data-testid="${afterSlot}"]`).should('be.visible')
   })
 })
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
@@ -1,7 +1,6 @@
 <template>
-  <!-- TODO: [beta] change wrapper class to k-input -->
   <div
-    class="k-input-wrapper"
+    class="k-input"
     :class="[$attrs.class, { 'input-error' : charLimitExceeded || error || hasError }]"
   >
     <KLabel
@@ -37,7 +36,7 @@
         v-bind="modifiedAttrs"
         :aria-describedby="helpText ? helpTextId : undefined"
         :aria-invalid="error || hasError || charLimitExceeded ? 'true' : undefined"
-        class="k-input"
+        class="input"
         :value="getValue()"
         @input="handleInput"
       >
@@ -301,14 +300,14 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
 
 /* Component styles */
 
-.k-input-wrapper {
+.k-input {
   display: flex;
   flex-direction: column;
   width: 100%;
 
   // error styles
   &.input-error {
-    .k-input, .k-input[type="file"] {
+    .input, .input[type="file"] {
       @include inputError;
 
       &:hover {
@@ -389,15 +388,15 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
     }
 
     &.has-before-content {
-      .k-input {
+      .input {
         // if there is a before slot, add padding to the left of the input
         // standard padding + slot with + space between icon and input
         padding-left: calc($kInputPaddingX + v-bind('beforeSlotElementWidth') + $kInputSlotSpacing);
       }
     }
 
     &.has-after-content {
-      .k-input {
+      .input {
         // if there is a after slot, add padding to the right of the input
         // standard padding + slot with + space between icon and input
         padding-right: calc($kInputPaddingX + v-bind('afterSlotElementWidth') + $kInputSlotSpacing);
@@ -406,7 +405,7 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
   }
 }
 
-.k-input {
+.input {
   @include inputDefaults;
 
   &:hover {

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
@@ -1287,7 +1287,7 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
         tr {
           height: 48px;
 
-          &:not(:last-of-type) {
+          &:not(:last-child) {
             border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
           }