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

@@ -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:** -

docs/pages/playground.vue

@@ -24,9 +24,6 @@
 
     <!-- Play around with your component here: -->
 
-
-
-
   </div>
 
 </template>

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('');
+    });
+  });
 });

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.

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>