Add height prop to TextArea component (#1076)

This change introduces a new `height` prop to the `TextArea` component,
allowing users to specify a starting (minimum) height for the input
field.

Key changes:
1.  **TextArea.vue**: Added the `height` prop.
2. **BaseInput.vue**: Added the `height` prop and updated the
`inputMinHeight` computed property to apply the style to the textarea
element.
3. **Tests**: Added tests in `src/tests/Textarea.spec.js` and
`src/tests/BaseInput.spec.js` to ensure the prop is correctly passed and
applied.
4. **Documentation**: Updated `docs/components/forms/text-area.md` to
include the new prop in the playground.
5.  **Version**: Updated `package.json` version to `3.155.3`.
6. **Metadata**: Updated `docs/.docgen/components-metadata.json` via
`npm run generate:docs`.

---
*PR created automatically by Jules for task
[13734789671786383417](https://jules.google.com/task/13734789671786383417)
started by @lucasn4s*

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>

Author: lucasn4s

docs/.docgen/components-metadata.json

@@ -1155,6 +1155,17 @@
           "func": false,
           "value": "false"
         }
+      },
+      {
+        "name": "height",
+        "description": "Especifica a altura mínima (min-height) do textarea.",
+        "type": {
+          "name": "number|string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "null"
+        }
       }
     ],
     "events": [
@@ -13279,6 +13290,17 @@
           "func": false,
           "value": "false"
         }
+      },
+      {
+        "name": "height",
+        "description": "Especifica a altura mínima (min-height) do textarea.",
+        "type": {
+          "name": "number|string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "null"
+        }
       }
     ],
     "sourceFiles": [

docs/components/forms/text-area.md

@@ -68,5 +68,6 @@ const args = ref({
 	supportingText: 'supportingTex',
 	supportLink: '',
 	supportLinkUrl: '',
+	height: null,
 });
 </script>

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.155.2",
+	"version": "3.155.3",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

package.json

@@ -384,6 +384,13 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Especifica a altura mínima (min-height) do textarea.
+	 */
+	height: {
+		type: [Number, String],
+		default: null,
+	},
 });
 
 const emits = defineEmits({
@@ -429,7 +436,14 @@ const inputHeight = computed(() => {
 });
 
 const inputMinHeight = computed(() => {
-	return props.type === 'textarea' ? '120px' : 'auto';
+	if (props.type !== 'textarea') return 'auto';
+	if (!props.height) return '120px';
+
+	if (typeof props.height === 'number') {
+		return `${props.height}px`;
+	}
+
+	return props.height;
 });
 
 const inputTopPadding = computed(() => {
@@ -648,7 +662,7 @@ defineExpose({
 		padding: tokens.pTRBL(0, 2, 3, 2);
 		padding-top: v-bind(inputTopPadding);
 		height: v-bind(inputHeight);
-		min-height: v-bind(inputMinHeight);
+		min-height: v-bind(inputMinHeight) !important;
 		border-radius: tokens.$border-radius-extra-small;
 		border: none;
 		text-align: start;

src/components/BaseInput.vue

@@ -134,6 +134,13 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Especifica a altura mínima (min-height) do textarea.
+	 */
+	height: {
+		type: [Number, String],
+		default: null,
+	},
 });
 
 const emits = defineEmits({

src/components/TextArea.vue

@@ -290,4 +290,28 @@ describe('BaseInput', () => {
 		expect(wrapper.findComponent(CdsLink).props('text')).toBe('Support Link');
 		expect(wrapper.findComponent(CdsLink).props('href')).toBe('https://example.com');
 	});
+
+	test('computes inputMinHeight correctly when height prop is provided', () => {
+		const wrapper = mount(BaseInput, {
+			props: {
+				id: 'base-input',
+				type: 'textarea',
+				height: 300,
+			},
+		});
+
+		expect(wrapper.vm.inputMinHeight).toBe('300px');
+	});
+
+	test('computes inputMinHeight correctly when height prop is provided as string', () => {
+		const wrapper = mount(BaseInput, {
+			props: {
+				id: 'base-input',
+				type: 'textarea',
+				height: '400px',
+			},
+		});
+
+		expect(wrapper.vm.inputMinHeight).toBe('400px');
+	});
 });

src/tests/BaseInput.spec.js

@@ -120,4 +120,15 @@ describe('TextArea', () => {
 		await baseInput.setValue('new value');
 		expect(wrapper.vm.internalValue).toBe('new value');
 	});
+
+	test('passes the height prop to CdsBaseInput', () => {
+		const wrapper = mount(TextArea, {
+			props: {
+				id: 'text-area',
+				height: 200,
+			},
+		});
+
+		expect(wrapper.findComponent(CdsBaseInput).props('height')).toBe(200);
+	});
 });