Textarea updates

wri · Dec 11, 2024 · 715c480 · 715c480
1 parent 17d13f8
commit 715c480
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
@@ -55,7 +55,11 @@ const Textarea = ({
     } else if (minLength) {
       setMinLengthError(length < minLength)
       setMaxLengthError(false)
-      setHelperText(length < minLength ? `Enter at least ${minLength - length} characters` : '')
+      setHelperText(
+        length < minLength
+          ? `Enter at least ${minLength - length} characters`
+          : '',
+      )
     } else if (maxLength) {
       setMaxLengthError(length > maxLength)
       setMinLengthError(false)
@@ -70,9 +74,17 @@ const Textarea = ({
   return (
     <TextareaContainer size={size}>
       {errorMessage || minLengthError || maxLengthError ? (
-        <ErrorBar size={size} hasHelperText={!!helperText} hasErrorMessage={!!errorMessage} />
+        <ErrorBar
+          size={size}
+          hasHelperText={!!helperText}
+          hasErrorMessage={!!errorMessage}
+        />
       ) : null}
-      <Field.Root required={required} invalid={!!errorMessage || minLengthError || maxLengthError} gap='0'>
+      <Field.Root
+        required={required}
+        invalid={!!errorMessage || minLengthError || maxLengthError}
+        gap='0'
+      >
         {label ? (
           <StyledFieldLabel size={size} disabled={disabled} aria-label={label}>
             <Field.RequiredIndicator aria-label='required' />
@@ -90,9 +102,7 @@ const Textarea = ({
           </StyledFieldCaption>
         ) : null}
         {errorMessage ? (
-          <StyledFieldErrorMessage size={size}>
-            {errorMessage}
-          </StyledFieldErrorMessage>
+          <StyledFieldErrorMessage>{errorMessage}</StyledFieldErrorMessage>
         ) : null}
         <StyledTextarea
           placeholder={placeholder}
@@ -105,14 +115,18 @@ const Textarea = ({
           }}
           {...rest}
         />
-        {minLengthError ? (
-          <StyledFieldErrorMessage size={size} style={{ marginTop: '8px' }}>
-            Enter at least {minLength} characters
+        {minLengthError && minLength ? (
+          <StyledFieldErrorMessage
+            style={{ marginTop: '8px', fontSize: '12px', lineHeight: '16px' }}
+          >
+            You need {minLength - value.length} more characters
           </StyledFieldErrorMessage>
         ) : null}
-        {maxLengthError ? (
-          <StyledFieldErrorMessage size={size} style={{ marginTop: '8px' }}>
-            You&apos;ve reached the character limit
+        {maxLengthError && maxLength ? (
+          <StyledFieldErrorMessage
+            style={{ marginTop: '8px', fontSize: '12px', lineHeight: '16px' }}
+          >
+            You have {value.length - maxLength} characters too many
           </StyledFieldErrorMessage>
         ) : null}
         {helperText && !maxLengthError && !minLengthError ? (

diff --git a/src/components/Textarea/styled.ts b/src/components/Textarea/styled.ts
@@ -10,7 +10,11 @@ export const TextareaContainer = styled.div<{ size: 'small' | 'default' }>`
   gap: ${({ size }) => (size === 'small' ? '12px' : '16px')};
   margin-bottom: 20px;
 `
-const getHeight = (size: 'small' | 'default', hasHelperText: boolean, hasErrorMessage: boolean) => {
+const getHeight = (
+  size: 'small' | 'default',
+  hasHelperText: boolean,
+  hasErrorMessage: boolean,
+) => {
   const isSmall = size === 'small'
   if (hasHelperText && hasErrorMessage) {
     return isSmall ? '192px' : '208px'
@@ -34,11 +38,12 @@ export const ErrorBar = styled.div<{
 }>`
   width: 3px;
   height: 100%;
-  min-height: ${({ size, hasHelperText, hasErrorMessage }) => getHeight(size, hasHelperText, hasErrorMessage)};
+  min-height: ${({ size, hasHelperText, hasErrorMessage }) =>
+    getHeight(size, hasHelperText, hasErrorMessage)};
   background-color: ${getThemedColor('error', 500)};
 `
 
-export const StyledFieldLabel = styled(Field.Label) <{
+export const StyledFieldLabel = styled(Field.Label)<{
   size: 'small' | 'default'
   disabled?: boolean
 }>`
@@ -50,11 +55,11 @@ export const StyledFieldLabel = styled(Field.Label) <{
 
   .chakra-field__requiredIndicator {
     color: ${({ disabled }) =>
-    disabled ? getThemedColor('neutral', 600) : getThemedColor('error', 500)};
+      disabled ? getThemedColor('neutral', 600) : getThemedColor('error', 500)};
   }
 `
 
-export const StyledFieldCaption = styled(Field.HelperText) <{
+export const StyledFieldCaption = styled(Field.HelperText)<{
   size: 'small' | 'default'
   disabled?: boolean
 }>`
@@ -72,17 +77,15 @@ export const StyledFieldHelperText = styled(Field.HelperText)`
   margin-top: 8px;
 `
 
-export const StyledFieldErrorMessage = styled(Field.ErrorText) <{
-  size: 'small' | 'default'
-}>`
+export const StyledFieldErrorMessage = styled(Field.ErrorText)`
   color: ${getThemedColor('error', 500)};
-  font-size: ${({ size }) => (size === 'small' ? '12px' : '14px')};
+  font-size: 14px;
   font-weight: 700;
-  line-height: ${({ size }) => (size === 'small' ? '16px' : '20px')};
+  line-height: 20px;
   margin-top: 2px;
 `
 
-export const StyledTextarea = styled(Textarea) <{ size: 'small' | 'default' }>`
+export const StyledTextarea = styled(Textarea)<{ size: 'small' | 'default' }>`
   height: 104px;
   width: 100%;
   border-radius: 4px;