fix (tailwind): expanded InputTextArea component (#4218)

* added additional props to text area component and e2e tests

apps/tailwind-components/components/input/TextArea.vue

@@ -2,12 +2,18 @@
 withDefaults(
   defineProps<{
     id: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
     required?: boolean;
+    valid?: boolean;
     hasError?: boolean;
   }>(),
   {
+    disabled: false,
     required: false,
     hasError: false,
+    valid: false,
   }
 );
 
@@ -16,10 +22,17 @@ const modelValue = ref("");
 
 <template>
   <textarea
-    v-model="modelValue"
     :id="id"
     :required="required"
-    class="w-full pr-16 font-sans text-black text-gray-300 bg-white outline-none rounded-textarea-input h-60 ring-red-500 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border py-2"
-    :class="{ 'border-red-500 text-red-500': hasError }"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="w-full pr-16 font-sans text-black text-gray-300 outline-none rounded-textarea-input h-60 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border py-2"
+    :class="{
+      'border-invalid text-invalid': hasError,
+      'border-valid text-valid': valid,
+      'border-disabled text-disabled bg-disabled': disabled,
+      'bg-white': !disabled,
+    }"
+    v-model="modelValue"
   />
 </template>

apps/tailwind-components/pages/input/TextArea.story.vue

@@ -1,66 +1,76 @@
 <script setup lang="ts">
 const id = "story-input-text-area-1";
-const hasError = ref(false);
-const required = ref(false);
-const fieldValue = ref("");
+const hasError = ref<boolean>(false);
+const required = ref<boolean>(false);
+const disabled = ref<boolean>(false);
+const valid = ref<boolean>(false);
+const placeholder = ref<string>("This is placeholder text");
+const fieldValue = ref<string>("");
 </script>
 
 <template>
   <div class="flex">
     <div class="m-4 flex-1">
-      <div>
-        <InputTextArea
-          :id="id"
-          v-model="fieldValue"
-          :has-error="hasError"
-          :required="required"
-        />
-      </div>
+      <InputLabel
+        :for="id"
+        :required="required"
+        :has-error="hasError"
+        :valid="valid"
+        :disabled="disabled"
+      >
+        Enter text
+      </InputLabel>
+      <InputTextArea
+        :id="id"
+        v-model="fieldValue"
+        :required="required"
+        :disabled="disabled"
+        :valid="valid"
+        :has-error="hasError"
+        :placeholder="placeholder"
+      />
     </div>
-
-    <div class="m-4 flex-1">
-      <p>fieldValue value: {{ fieldValue }}</p>
-
-      <div class="mt-4">
-        <button
-          @click="fieldValue = ''"
-          class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
-        >
-          clear value
-        </button>
-      </div>
-
-      <fieldset class="mt-4 border border-gray-900 mb-2">
-        <legend class="m-2 px-2">Props</legend>
+    <form class="m-4 flex-1">
+      <legend>Textarea options</legend>
+      <fieldset class="mt-4 mb-2">
+        <legend class="m-2 px-2">Modify props</legend>
+        <div class="mb-2">
+          <InputCheckbox id="input-text-area-required" v-model="required" />
+          <InputLabel for="input-text-area-required"> Required </InputLabel>
+        </div>
+        <div class="mb-2">
+          <InputCheckbox id="input-text-area-has-error" v-model="hasError" />
+          <InputLabel for="input-text-area-has-error"> Show error </InputLabel>
+        </div>
         <div class="mb-2">
-          <label
-            class="ml-1 hover:cursor-pointer"
-            for="input-text-area-required"
-          >
-            required
-          </label>
-          <input
-            id="input-text-area-required"
-            class="ml-2 hover:cursor-pointer"
-            type="checkbox"
-            v-model="required"
-          />
+          <InputCheckbox id="input-text-area-disabled" v-model="disabled" />
+          <InputLabel for="input-text-area-disabled" v-model="disabled">
+            Disable input
+          </InputLabel>
         </div>
         <div class="mb-2">
-          <label
-            class="ml-1 hover:cursor-pointer"
-            for="input-text-area-has-error"
-          >
-            hasError
-          </label>
-          <input
-            id="input-text-area-has-error"
-            class="ml-2 hover:cursor-pointer"
-            type="checkbox"
-            v-model="hasError"
-          />
+          <InputCheckbox id="input-text-area-valid" v-model="valid" />
+          <InputLabel for="input-text-area-valid"> Validate input </InputLabel>
         </div>
       </fieldset>
-    </div>
+      <div class="mt-4">
+        <InputLabel for="text-area-placeholder"> Set placeholder </InputLabel>
+        <InputString id="text-area-placeholder" v-model="placeholder" />
+      </div>
+      <div class="mt-4">
+        <p>Current value</p>
+        <output class="block p-2 mt-2 bg-white h-28 overflow-scroll">
+          {{ fieldValue }}
+        </output>
+        <Button
+          @click="fieldValue = ''"
+          type="primary"
+          size="small"
+          class="mt-2"
+        >
+          clear input value
+        </Button>
+      </div>
+    </form>
   </div>
 </template>

e2e/package.json

@@ -8,6 +8,7 @@
     "@playwright/test": "1.45.0"
   },
   "scripts": {
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "test:tw": "playwright test --grep '@tw-components' --reporter=line"
   }
 }

e2e/tests/tailwind-components/input/textarea.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from "@playwright/test";
+
+test("InputTextArea: error is properly indicated @tw-components @tw-forms @input-textarea", async ({ page }) => {
+    await page.goto("/apps/tailwind-components/#/input/TextArea.story");
+    await page.getByLabel('Show error').check(); 
+    const InputTextAreaClass = await page.getByPlaceholder("This is placeholder text").getAttribute("class");
+    await expect(InputTextAreaClass).toContain("border-invalid text-invalid");
+});
+
+test("InputTextArea: required state is properly indicated @tw-components @tw-forms @input-textarea", async ({ page}) => {
+  await page.goto("/apps/tailwind-components/#/input/TextArea.story");
+  await page.getByLabel('Required').check(); 
+  await expect(page.getByPlaceholder("This is placeholder text")).toHaveAttribute("required");
+})
+
+test("InputTextArea: valid state properly styles component @tw-components @tw-forms @input-textarea", async ({page}) => {
+  await page.goto("/apps/tailwind-components/#/input/TextArea.story");
+  await page.getByLabel('Validate input').check();
+  const InputTextAreaClass = await page.getByPlaceholder("This is placeholder text").getAttribute("class");
+  await expect(InputTextAreaClass).toContain("border-valid text-valid");
+})
+
+test("InputTextArea: component is properly disabled @tw-components @tw-forms @input-textarea", async ({ page }) => {
+  await page.goto("/apps/tailwind-components/#/input/TextArea.story");
+  await page.getByLabel('Disable input').check();
+  await expect(page.getByPlaceholder("This is placeholder text")).toHaveAttribute("disabled");
+  const InputTextAreaClass = await page.getByPlaceholder("This is placeholder text").getAttribute("class");
+  await expect(InputTextAreaClass).toContain("border-disabled text-disabled bg-disabled");
+});
+
+test("InputTextArea: component properly displays placeholder @tw-components @tw-forms @input-textarea", async ({ page }) => {
+  await page.goto("/apps/tailwind-components/#/input/TextArea.story");
+
+  const newPlaceholder: string = "This is a new placeholder for the textarea component";
+  await page.getByLabel("Set placeholder").fill(newPlaceholder);
+  await expect(page.getByPlaceholder(newPlaceholder)).toHaveCount(1);
+});