Implement disabled text input styles

NoelDeMartin · Aug 15, 2024 · cc33442 · cc33442
1 parent 0bac9a2
commit cc33442
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/forms/TextInput.story.vue b/src/components/forms/TextInput.story.vue
@@ -34,6 +34,17 @@
                 />
             </AGForm>
         </Variant>
+
+        <Variant title="Disabled">
+            <AGForm :form="disabledForm">
+                <TextInput
+                    name="food"
+                    label="What's the best food?"
+                    placeholder="Ramen"
+                    disabled
+                />
+            </AGForm>
+        </Variant>
     </Story>
 </template>
 
@@ -43,11 +54,13 @@ import { ref, watchEffect } from 'vue';
 
 const form = useForm({ food: requiredStringInput() });
 const errorForm = useForm({ food: requiredStringInput() });
+const disabledForm = useForm({ food: requiredStringInput() });
 const label = ref('What\'s the best food?');
 const placeholder = ref('Ramen');
 const hasErrors = ref(false);
 
 errorForm.submit();
+disabledForm.food = 'Ramen';
 
 watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
 </script>

diff --git a/src/components/forms/TextInput.vue b/src/components/forms/TextInput.vue
@@ -53,6 +53,7 @@ const renderedInputClass = computed(() =>
                 ? 'ring-red-300 placeholder:text-red-300 focus:ring-red-500'
                 : 'ring-gray-300 placeholder:text-gray-400 focus:ring-[--primary-600]',
             'w-full rounded-lg border-0 text-base text-gray-900 shadow-sm ring-1 ring-inset',
+            'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
             'focus:ring-2 focus:ring-inset',
         ].join(' '),
         props.inputClass,