From 13a6677d3f7d0699d4ed1060e4adc63ad4a0afb7 Mon Sep 17 00:00:00 2001
From: practicatto <practicatto@gmail.com>
Date: Fri, 22 Mar 2024 18:15:47 -0500
Subject: [PATCH] add clear to Ktextbox

add tests and fix clear button

remove unnecessary styles and add kiconbutton instead of button

fix tests with component

fix linter

fix borders

add requested changes
---
 CHANGELOG.md                            |   9 ++
 docs/pages/playground.vue               |   3 -
 lib/KTextbox/__tests__/KTextbox.spec.js |  56 ++++++++
 lib/KTextbox/index.vue                  |   8 ++
 lib/keen/UiTextbox.vue                  | 184 +++++++++++++++---------
 5 files changed, 187 insertions(+), 73 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb7e51473..f4860f6ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#591]
+  - **Description:** Added a clearable prop to KTextbox
+  - **Products impact:** -
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/584
+  - **Components:** `KTextbox`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
 - [#582]
   - **Description:** Upgrade popper.js from 1.14.6 to 1.16.1
   - **Products impact:** -
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index bf32354b2..686423285 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -24,9 +24,6 @@
 
     <!-- Play around with your component here: -->
 
-
-
-
   </div>
 
 </template>
diff --git a/lib/KTextbox/__tests__/KTextbox.spec.js b/lib/KTextbox/__tests__/KTextbox.spec.js
index 010bbd49e..20d0d8eb6 100644
--- a/lib/KTextbox/__tests__/KTextbox.spec.js
+++ b/lib/KTextbox/__tests__/KTextbox.spec.js
@@ -155,4 +155,60 @@ describe('KTextbox component', () => {
       expect(wrapper.emitted().input).toBeTruthy();
     });
   });
+  describe('KTextbox with clearable', () => {
+    it('should have the clear button when clearable is true and there is text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      const clearButton = wrapper.find('[data-test="clearIcon"]');
+      expect(clearButton.exists()).toBeTruthy();
+    });
+    it('should not show the clear button when clearable is true and there is no text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+
+      const input = wrapper.find('input');
+      input.element.value = '';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test="clearIcon"]').exists()).toBeFalsy();
+    });
+
+    it('should not show the clear button when clearable is false and there is text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: false,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test="clearIcon"]').exists()).toBeFalsy();
+    });
+    it('should clear the input when clear button is clicked', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      const clearButton = wrapper.find('[data-test="clearIcon"]');
+      clearButton.trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('input').element.value).toBe('');
+    });
+  });
 });
diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue
index 1dea289cd..ae94adb39 100644
--- a/lib/KTextbox/index.vue
+++ b/lib/KTextbox/index.vue
@@ -7,6 +7,7 @@
       class="textbox"
       :label="label"
       :disabled="disabled"
+      :clearable="clearable"
       :invalid="showInvalidMessage"
       :error="invalidText"
       :autofocus="autofocus"
@@ -142,6 +143,13 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * When set to `true`, the component displays a clear button inside the input field.
+       */
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
       /**
        * @ignore
        * Whether or not to display as a floating label.
diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue
index a22c06629..4b6074060 100644
--- a/lib/keen/UiTextbox.vue
+++ b/lib/keen/UiTextbox.vue
@@ -9,6 +9,7 @@
    functionality.
   -->
   <div class="ui-textbox" :class="classes">
+
     <div v-if="icon || $slots.icon" class="ui-textbox-icon-wrapper">
       <slot name="icon">
         <UiIcon :icon="icon" />
@@ -17,68 +18,68 @@
 
     <div class="ui-textbox-content">
       <label class="ui-textbox-label">
-        <input
-          v-if="!multiLine"
-          ref="input"
-
-          v-autofocus="autofocus"
-          class="ui-textbox-input"
-          :autocapitalize="autocapitalize ? autocapitalize : null"
-          :autocomplete="autocomplete ? autocomplete : null"
-          :disabled="disabled"
-          :max="maxValue"
-          :maxlength="enforceMaxlength ? maxlength : null"
-          :minlength="minlength"
-          :min="minValue"
-          :name="name"
-          :number="type === 'number' ? true : null"
-          :placeholder="hasFloatingLabel ? null : placeholder"
-          :readonly="readonly"
-          :required="required"
-          :step="stepValue"
-          :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
-          :tabindex="tabindex"
-          :type="type"
-          :value="value"
-          @blur="onBlur"
-          @change="onChange"
-          @focus="onFocus"
-          @input="updateValue($event.target.value)"
-
-          @keydown.enter="onKeydownEnter"
-          @keydown="onKeydown"
-        >
-
-        <textarea
-          v-else
-          ref="textarea"
-
-          v-autofocus="autofocus"
-          :value="value"
-          class="ui-textbox-textarea"
-          :autocapitalize="autocapitalize ? autocapitalize : null"
-          :autocomplete="autocomplete ? autocomplete : null"
-          :disabled="disabled"
-          :maxlength="enforceMaxlength ? maxlength : null"
-          :minlength="minlength"
-          :name="name"
-          :placeholder="hasFloatingLabel ? null : placeholder"
-          :readonly="readonly"
-          :required="required"
-
-          :rows="rows"
-          :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
-
-          :tabindex="tabindex"
-
-          @blur="onBlur"
-          @change="onChange"
-          @focus="onFocus"
-          @input="updateValue($event.target.value)"
-
-          @keydown.enter="onKeydownEnter"
-          @keydown="onKeydown"
-        ></textarea>
+        <div :class="['ui-input-content', inputContentClasses]">
+          <input
+            v-if="!multiLine"
+            ref="input"
+            v-autofocus="autofocus"
+            class="ui-textbox-input"
+            :autocapitalize="autocapitalize ? autocapitalize : null"
+            :autocomplete="autocomplete ? autocomplete : null"
+            :disabled="disabled"
+            :max="maxValue"
+            :maxlength="enforceMaxlength ? maxlength : null"
+            :minlength="minlength"
+            :min="minValue"
+            :name="name"
+            :number="type === 'number' ? true : null"
+            :placeholder="hasFloatingLabel ? null : placeholder"
+            :readonly="readonly" :required="required"
+            :step="stepValue"
+            :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
+            :tabindex="tabindex"
+            :type="type"
+            :value="value"
+            @blur="onBlur"
+            @change="onChange"
+            @focus="onFocus"
+            @input="updateValue($event.target.value)"
+            @keydown.enter="onKeydownEnter"
+            @keydown="onKeydown"
+          >
+
+          <textarea
+            v-else ref="textarea"
+            v-autofocus="autofocus"
+            :value="value"
+            class="ui-textbox-textarea"
+            :autocpitalize="autocapitalize ? autocapitalize : null"
+            :autocomplete="autocomplete ? autocomplete : null"
+            :disabled="disabled"
+            :maxlength="enforceMaxlength ? maxlength : null"
+            :minlength="minlength"
+            :name="name"
+            :placeholder="hasFloatingLabel ? null : placeholder"
+            :readonly="readonly"
+            :required="required"
+            :rows="rows"
+            :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
+            :tabindex="tabindex"
+            @blur="onBlur"
+            @change="onChange"
+            @focus="onFocus"
+            @input="updateValue($event.target.value)"
+            @keydown.enter="onKeydownEnter" @keydown="onKeydown"
+          ></textarea>
+          <KIconButton
+            v-if="showClearButton"
+            icon="clear"
+            :color="$themeTokens.annotation"
+            size="small"
+            data-test="clearIcon"
+            @click="clearText"
+          />
+        </div>
 
         <div
           v-if="label || $slots.default"
@@ -122,6 +123,7 @@
 
   import autosize from 'autosize';
   import UiIcon from './UiIcon.vue';
+  import KIconButton from '../buttons-and-links/KIconButton.vue';
 
   const autofocus = {
     inserted(el, { value }) {
@@ -212,6 +214,10 @@
         type: Boolean,
         default: false,
       },
+      clearable: {
+          type: Boolean,
+          default: false,
+        },
     },
 
     data() {
@@ -224,6 +230,18 @@
     },
 
     computed: {
+      
+      showClearButton() {
+        return this.clearable && this.value && !this.disabled;
+      },
+
+      inputContentClasses() {
+        return {
+          'clear-button-padding': this.clearable,
+          'multi-line': this.multiLine,
+        };
+      },
+
       classes() {
         return [
           `ui-textbox--icon-position-${this.iconPosition}`,
@@ -320,6 +338,15 @@
         this.$emit('input', value);
       },
 
+      clearText() {
+        this.updateValue("");
+        this.$nextTick(() => {
+        this.refreshSize();  
+        this.focus();  
+      }); 
+        
+      },
+
       onChange(e) {
         this.$emit('change', this.value, e);
       },
@@ -413,13 +440,28 @@
       .ui-textbox-label-text {
         color: $ui-input-border-color--active;
       }
+
       .ui-textbox-label,
       .ui-textbox-textarea {
         border-bottom-color: $ui-input-border-color--active;
       }
     }
 
-    &.has-label {
+    .ui-input-content {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      position: relative;
+    }
+
+    .ui-input-content:not(.clear-button-padding){
+          padding-right: 0;
+    }
+
+      .ui-input-content.clear-button-padding {
+          padding-right: 0.15rem;
+      }
+
+    .ui-cle &.has-label {
       .ui-textbox-icon-wrapper {
         padding-top: $ui-input-icon-margin-top--with-label;
       }
@@ -450,17 +492,21 @@
         }
       }
 
+      
+
+    
       // Fixes glitch in chrome where label and input value overlap each other
       // when webkit-autofill value has not been propagated yet (e.g. https://github.com/vuejs/vue/issues/1331)
       // The webkit-autofill value will only be propagated on first click into the viewport.
       // Before that .is-inline will be wrongly set and cause the auto filled input value and the label to overlap.
       // This fix will style the wrong .is-inline like an .is-floating in case :-webkit-autofill is set.
-      .ui-textbox-label > input:-webkit-autofill + .ui-textbox-label-text.is-inline {
+      .ui-textbox-label>input:-webkit-autofill+.ui-textbox-label-text.is-inline {
         transform: translateY(0) scale(1);
       }
     }
 
     &.is-invalid:not(.is-disabled) {
+
       .ui-textbox-label-text,
       .ui-textbox-icon-wrapper .ui-icon,
       .ui-textbox-counter {
@@ -477,7 +523,7 @@
       }
     }
 
-    &.is-disabled {
+    &.is-disabled{
       .ui-textbox-input,
       .ui-textbox-label,
       .ui-textbox-textarea {
@@ -550,12 +596,11 @@
     transition: border 0.1s ease;
   }
 
-    .ui-textbox-textarea {
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
+  .ui-textbox-textarea {
+  border:none
   }
 
+
   .ui-textbox-input {
     height: $ui-input-height;
   }
@@ -593,5 +638,4 @@
       margin-left: rem(8px);
     }
   }
-
 </style>