fix: tag input and text area size (#5798)

Author: lisalupi

.changeset/quick-chefs-remain.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`TagInput` and `TextArea`: fix size

packages/ui/src/components/TagInput/styles.css.ts

@@ -48,16 +48,19 @@ export const tagInputContainer = recipe({
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.large]} - 1px) ${
           theme.space['2']
         }`,
+        height: theme.sizing[600],
       },
       small: {
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.small]} - 1px) ${
           theme.space['1']
         }`,
+        height: theme.sizing[400],
       },
       medium: {
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.medium]} - 1px) ${
           theme.space['2']
         }`,
+        height: theme.sizing[500],
       },
     },
   },

packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx

@@ -3,6 +3,8 @@ import { AlertCircleOutlineIcon } from '@ultraviolet/icons'
 import { useState } from 'react'
 import { Badge } from '../../Badge'
 import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import { TextInput } from '../../TextInput'
 import { Tooltip } from '../../Tooltip'
 import { TextArea } from '..'
 
@@ -13,6 +15,16 @@ export const Examples: StoryFn<typeof TextArea> = () => {
 
   return (
     <Stack gap={2}>
+      <Text as="div" variant="body">
+        Should be the same height as a TextInput when{' '}
+        <Text as="span" variant="code">
+          rows={1}
+        </Text>
+      </Text>
+      <Stack direction="row">
+        <TextArea label="textArea" onChange={setValue} rows={1} />
+        <TextInput label="textInput" />
+      </Stack>
       <TextArea
         label="Label"
         maxLength={200}

packages/ui/src/components/TextArea/index.tsx

@@ -197,7 +197,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
               aria-invalid={!!error}
               aria-label={ariaLabel}
               autoFocus={autoFocus}
-              className={textAreaStyle({ error: !!error, success: !!success })}
+              className={textAreaStyle({
+                error: !!error,
+                success: !!success,
+              })}
               data-testid={dataTestId}
               disabled={disabled}
               id={id ?? localId}

packages/ui/src/components/TextArea/styles.css.ts

@@ -18,6 +18,7 @@ export const textAreaClearableContainer = style({
 export const textArea = recipe({
   base: {
     width: '100%',
+    minHeight: theme.sizing[600],
     resize: 'vertical',
     background: theme.colors.neutral.background,
     border: `1px solid ${theme.colors.neutral.border}`,