fix: edits for textfield sizes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-system-vue",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "files": [
     "dist"

src/components/Textfield/Textfield.vue

@@ -62,6 +62,11 @@ const iconName = computed(() => {
   if (hasErrorMsg.value) return props.icon || 'error';
   return props.icon;
 });
+const iconSize = computed(() => {
+  if (props.size === 'small') return 16;
+  if (props.size === 'large') return 24;
+  return 20;
+});
 const onChange = () => {
   emit('change', {
     value: state.value,
@@ -124,8 +129,8 @@ const onClick = () => {
         />
         <Icon
           class="textfield__icon"
-          size="24"
           kind="filled"
+          :size="iconSize"
           :name="`${iconName}`"
           :color="props.iconColor"
           :class="{ 'textfield__icon--error': hasErrorMsg }"

src/components/Textfield/textfield.css

@@ -7,67 +7,88 @@ fieldset {
 .textfield__wrapper {
   @apply flex flex-col items-start justify-start;
 }
+
 input[type='text'] {
-  @apply w-full border-none h-full bg-transparent focus:outline-none text-base;
+  @apply w-full border-none h-full bg-transparent focus:outline-none text-base mx-[14px] my-[6px];
 }
+
 .textfield {
-  @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;
+  @apply w-full flex items-center h-8 text-base border border-solid border-gray-100 text-gray-900 bg-gray-100  rounded-lg px-[2px] py-[2px];
 }
+
 .textfield--reverse {
   @apply flex flex-row-reverse gap-1;
 }
+
 .textfield:hover {
   @apply border border-solid border-gray-300;
 }
+
 .textfield:focus {
   @apply outline-none border border-solid border-teal-400;
 }
+
 .textfield::placeholder {
   @apply text-gray-400;
 }
+
 .textfield__label {
   @apply text-gray-500 text-sm p-0 mb-3;
 }
+
 .textfield--error,
 .textfield--error > input[type='text'] {
   @apply border-red-500 text-red-500 bg-red-100 hover:border-red-500;
 }
+
 .textfield__error {
   @apply text-red-500 font-light text-xs tracking-wide mt-1;
 }
+
 .textfield__icon--error {
   @apply animate-bounce text-red-500;
 }
+
 .textfield--loading {
   @apply animate-pulse;
 }
+
 .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;
 }