diff --git a/.changeset/quick-chefs-remain.md b/.changeset/quick-chefs-remain.md new file mode 100644 index 0000000000..df8cfcaed5 --- /dev/null +++ b/.changeset/quick-chefs-remain.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +`TagInput` and `TextArea`: fix size diff --git a/packages/ui/src/components/TagInput/styles.css.ts b/packages/ui/src/components/TagInput/styles.css.ts index a9a7a95f89..a5606ede14 100644 --- a/packages/ui/src/components/TagInput/styles.css.ts +++ b/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], }, }, }, diff --git a/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx b/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx index ce4b8efb31..5ef9eb95e4 100644 --- a/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx +++ b/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 = () => { return ( + + Should be the same height as a TextInput when{' '} + + rows={1} + + + +