From 731fd2082fa0ad1b0396748ad1e0e587446c4320 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

add aria label

add link in changelog pr591

add docs
---
 CHANGELOG.md                            |  11 ++
 docs/pages/playground.vue               |   3 -
 lib/KTextbox/__tests__/KTextbox.spec.js |  56 +++++++
 lib/KTextbox/index.vue                  |  13 ++
 lib/keen/UiTextbox.vue                  | 186 +++++++++++++++---------
 5 files changed, 196 insertions(+), 73 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb7e51473..5ca43a5ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,17 @@ 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:** -
+
+[#591]: https://github.com/learningequality/kolibri-design-system/pull/591
+
 - [#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..8b6a16dcb 100644
--- a/lib/KTextbox/index.vue
+++ b/lib/KTextbox/index.vue
@@ -7,6 +7,8 @@
       class="textbox"
       :label="label"
       :disabled="disabled"
+      :clearAriaLabel="clearAriaLabel"
+      :clearable="clearable"
       :invalid="showInvalidMessage"
       :error="invalidText"
       :autofocus="autofocus"
@@ -50,6 +52,10 @@
         type: String,
         required: true,
       },
+      /**
+       * Value of the clear aria label
+       */
+       clearAriaLabel: String,
       /**
        * Value of the text field
        */
@@ -142,6 +148,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..ea8579b74 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,69 @@
 
     <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"
+            :ariabel="clearAriaLabel"
+            data-test="clearIcon"
+            @click="clearText"
+          />
+        </div>
 
         <div
           v-if="label || $slots.default"
@@ -122,6 +124,7 @@
 
   import autosize from 'autosize';
   import UiIcon from './UiIcon.vue';
+  import KIconButton from '../buttons-and-links/KIconButton.vue';
 
   const autofocus = {
     inserted(el, { value }) {
@@ -150,6 +153,7 @@
         type: [String, Number],
         default: '',
       },
+      clearAriaLabel: String,
       icon: String,
       iconPosition: {
         type: String,
@@ -212,6 +216,10 @@
         type: Boolean,
         default: false,
       },
+      clearable: {
+          type: Boolean,
+          default: false,
+        },
     },
 
     data() {
@@ -224,6 +232,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 +340,15 @@
         this.$emit('input', value);
       },
 
+      clearText() {
+        this.updateValue("");
+        this.$nextTick(() => {
+        this.refreshSize();  
+        this.focus();  
+      }); 
+        
+      },
+
       onChange(e) {
         this.$emit('change', this.value, e);
       },
@@ -413,13 +442,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 +494,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 +525,7 @@
       }
     }
 
-    &.is-disabled {
+    &.is-disabled{
       .ui-textbox-input,
       .ui-textbox-label,
       .ui-textbox-textarea {
@@ -550,12 +598,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 +640,4 @@
       margin-left: rem(8px);
     }
   }
-
 </style>