fix(Textarea): fixed resize-orientation=both and readonly-variant=plain

apps/docs/src/stories/Components/Textarea.story.vue

@@ -15,8 +15,33 @@
       ## Examples
     </pre>
 
-    <story-canvas title="Example">
+    <story-canvas title="With regex pattern validation">
       <pf-textarea pattern="[0-9\s]+" placeholder="Numbers and spaces only" />
     </story-canvas>
+
+    <story-canvas title="Vertically resizable">
+      <pf-textarea resize-orientation="vertical" aria-label="text area vertical resize example" />
+    </story-canvas>
+
+    <story-canvas title="Horizontally resizable">
+      <pf-textarea resize-orientation="horizontal" aria-label="text area horizontal resize example" />
+    </story-canvas>
+
+    <story-canvas title="Disabled">
+      <pf-textarea aria-label="Disabled text area example" disabled />
+    </story-canvas>
+
+    <story-canvas title="Read only">
+      <div style="margin-bottom: 12px">
+        <pf-checkbox v-model="plain" label="Plain read only variant" />
+      </div>
+      <pf-textarea aria-label="read only text area example" model-value="read only text area example" :readonly-variant="plain ? 'plain' : 'default'" />
+    </story-canvas>
   </doc-page>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const plain = ref(false);
+</script>

packages/core/src/components/Textarea.vue

@@ -2,10 +2,12 @@
   <span
     :class="[
       styles.formControl, {
-        [styles.modifiers.readonly]: !!readOnlyVariant,
+        [styles.modifiers.readonly]: !!readonlyVariant,
+        [styles.modifiers.plain]: readonlyVariant === 'plain',
         [styles.modifiers.disabled]: disabled,
         [styles.modifiers.resizeVertical]: resizeOrientation === 'vertical',
         [styles.modifiers.resizeHorizontal]: resizeOrientation === 'horizontal',
+        [styles.modifiers.resizeBoth]: resizeOrientation === 'both',
         [styles.modifiers.success]: effectiveValidated === 'success',
         [styles.modifiers.warning]: effectiveValidated === 'warning',
         [styles.modifiers.error]: effectiveValidated === 'error',
@@ -17,7 +19,7 @@
       :value="value"
       v-bind="{...ouiaProps, ...$attrs}"
       :disabled="disabled || undefined"
-      :readonly="!!readOnlyVariant || readonly"
+      :readonly="!!readonlyVariant || readonly"
       :aria-invalid="effectiveValidated === 'error'"
       @change="handleChange"
       @input="onInput($event as InputEvent)"
@@ -54,7 +56,7 @@ export interface Props extends /* @vue-ignore */ TextareaHTMLAttributes {
 
   readonly?: boolean;
   /** Read only variant. */
-  readOnlyVariant?: 'default' | 'plain';
+  readonlyVariant?: 'default' | 'plain';
 
   /** Flag to modify height based on contents. */
   autoResize?: boolean;