From ec000bf02632661c44a1ec1e28f9058b6d722578 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Go=CC=88khan=20O=CC=88ztu=CC=88rk?=
 <gokhaanozturk@gmail.com>
Date: Thu, 8 Sep 2022 15:37:36 +0300
Subject: [PATCH 1/2] feat: add clearable & sizes & row view & docs
 improvements

---
 .../Textfield/Textfield.stories.mdx           | 23 ++++++-
 src/components/Textfield/Textfield.vue        | 68 ++++++++++++++++---
 src/components/Textfield/textfield.css        | 31 ++++++++-
 3 files changed, 109 insertions(+), 13 deletions(-)

diff --git a/src/components/Textfield/Textfield.stories.mdx b/src/components/Textfield/Textfield.stories.mdx
index 92a7e6e..b6cabef 100644
--- a/src/components/Textfield/Textfield.stories.mdx
+++ b/src/components/Textfield/Textfield.stories.mdx
@@ -40,7 +40,7 @@ export const defaultArgs = {
       type: 'select',
       options: [null, ...icons],
     },
-    defaultValue: icons[0],
+    // defaultValue: icons[0],
   },
   iconLeft: {
     control: {
@@ -66,6 +66,25 @@ export const defaultArgs = {
     },
     defaultValue: false,
   },
+  clearable: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    defaultValue: 'medium',
+  },
+  rows: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
   onChange: {
     control: {
       type: 'action',
@@ -137,7 +156,7 @@ export const Default = (args) => {
 
 # Reference
 
-<ArgsTable />
+<ArgsTable story="Default" />
 
 # Usage
 
diff --git a/src/components/Textfield/Textfield.vue b/src/components/Textfield/Textfield.vue
index 45105c2..edd1148 100644
--- a/src/components/Textfield/Textfield.vue
+++ b/src/components/Textfield/Textfield.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import './textfield.css';
 import Icon from '../Icon/Icon.vue';
 export interface Props {
@@ -13,8 +13,26 @@ export interface Props {
   iconLeft?: boolean;
   disabled?: boolean;
   loading?: boolean;
+  clearable?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  row?: boolean;
 }
-const props = defineProps<Props>();
+const inputRef = ref<HTMLInputElement>();
+const props = withDefaults(defineProps<Props>(), {
+  id: '',
+  value: '',
+  label: '',
+  placeholder: '',
+  errorMsg: '',
+  icon: '',
+  iconColor: '',
+  iconLeft: false,
+  disabled: false,
+  loading: false,
+  clearable: false,
+  size: 'medium',
+  row: false,
+});
 const emit = defineEmits(['change', 'input', 'focus', 'blur', 'click']);
 const state = reactive({
   value: props.value || '',
@@ -26,8 +44,24 @@ const classes = computed(() => {
     'textfield--reverse': props.iconLeft,
     'textfield--loading': props.loading,
     'textfield--disabled': props.disabled,
+    'textfield--clearable': props.clearable,
+    [`textfield--${props.size}`]: props.size,
   };
 });
+const hasValue = computed(() => {
+  return state.value.length > 0;
+});
+const hasErrorMsg = computed(() => {
+  return props.errorMsg?.length;
+});
+const hasClear = computed(() => {
+  return props.clearable && hasValue.value;
+});
+const iconName = computed(() => {
+  if (hasClear.value) return props.icon || 'XMarkIcon';
+  if (hasErrorMsg.value) return props.icon || 'ExclamationCircleIcon';
+  return props.icon;
+});
 const onChange = () => {
   emit('change', {
     value: state.value,
@@ -49,6 +83,10 @@ const onBlur = () => {
   });
 };
 const onClick = () => {
+  if (hasClear.value) {
+    state.value = '';
+    inputRef.value.focus();
+  }
   emit('click', {
     value: state.value,
   });
@@ -56,15 +94,27 @@ const onClick = () => {
 </script>
 <template>
   <fieldset>
-    <div class="textfield__wrapper">
-      <label :for="props.id || 'textfield'" class="textfield__label">
+    <div
+      :class="{
+        textfield__wrapper: true,
+        'textfield__wrapper--row': props.row,
+      }"
+    >
+      <label
+        :for="props.id || 'textfield'"
+        :class="{
+          textfield__label: true,
+          [`textfield__label--${props.size}`]: props.size,
+        }"
+      >
         {{ props.label }}
       </label>
       <div :class="classes">
         <input
-          :id="props.id || 'textfield'"
+          ref="inputRef"
           v-model="state.value"
           type="text"
+          :id="props.id || 'textfield'"
           :disabled="props.disabled"
           :placeholder="props.placeholder"
           @change="onChange"
@@ -73,12 +123,12 @@ const onClick = () => {
           @blur="onBlur"
         />
         <Icon
-          v-if="props.errorMsg?.length || props.icon?.length"
-          :name="props.icon || 'ExclamationCircleIcon'"
-          :color="props.iconColor"
+          class="textfield__icon"
           size="24"
           kind="solid"
-          :class="{ 'textfield__icon--error': props.errorMsg?.length }"
+          :name="`${iconName}`"
+          :color="props.iconColor"
+          :class="{ 'textfield__icon--error': hasErrorMsg }"
           @click="onClick"
         />
       </div>
diff --git a/src/components/Textfield/textfield.css b/src/components/Textfield/textfield.css
index 3ec9bd5..45d6f09 100644
--- a/src/components/Textfield/textfield.css
+++ b/src/components/Textfield/textfield.css
@@ -8,10 +8,10 @@ fieldset {
   @apply flex flex-col items-start justify-start;
 }
 input[type='text'] {
-  @apply border-none h-full w-full bg-transparent focus:outline-none text-base;
+  @apply w-full border-none h-full bg-transparent focus:outline-none text-base;
 }
 .textfield {
-  @apply flex items-center block h-8 text-base border border-solid border-gray-100 text-gray-900 bg-gray-100  rounded-lg px-4 py-2;
+  @apply w-full flex items-center block h-8 text-base border border-solid border-gray-100 text-gray-900 bg-gray-100  rounded-lg px-4 py-2;
 }
 .textfield--reverse {
   @apply flex flex-row-reverse gap-1;
@@ -44,3 +44,30 @@ input[type='text'] {
 .textfield--disabled {
   @apply opacity-50 cursor-not-allowed;
 }
+.textfield--disabled > input[type='text'] {
+  @apply cursor-not-allowed;
+}
+.textfield--disabled:hover {
+  @apply border border-solid border-gray-100;
+}
+.textfield--clearable > .textfield__icon {
+  @apply cursor-pointer;
+}
+.textfield--small {
+  @apply h-6 text-sm;
+}
+.textfield--small > input[type='text'] {
+  @apply text-sm;
+}
+.textfield__label--small {
+  @apply text-xs;
+}
+.textfield--large {
+  @apply h-10 text-lg;
+}
+.textfield--large > input[type='text'] {
+  @apply text-lg;
+}
+.textfield__label--large {
+  @apply text-base;
+}

From 69c0414c54c97ceff8806b7100e5b305104f94d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Go=CC=88khan=20O=CC=88ztu=CC=88rk?=
 <gokhaanozturk@gmail.com>
Date: Thu, 8 Sep 2022 15:38:49 +0300
Subject: [PATCH 2/2] docs: remove comment

---
 src/components/Textfield/Textfield.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Textfield/Textfield.stories.mdx b/src/components/Textfield/Textfield.stories.mdx
index b6cabef..d121f33 100644
--- a/src/components/Textfield/Textfield.stories.mdx
+++ b/src/components/Textfield/Textfield.stories.mdx
@@ -40,7 +40,7 @@ export const defaultArgs = {
       type: 'select',
       options: [null, ...icons],
     },
-    // defaultValue: icons[0],
+    defaultValue: icons[0],
   },
   iconLeft: {
     control: {