Skip to content

Commit

Permalink
fix(TextareaField): address QA updates (#1936)
Browse files Browse the repository at this point in the history
- add bottom line for readonly field
- move character counter to the top line of the component
  • Loading branch information
booc0mtaco authored May 13, 2024
1 parent e579367 commit 3aa5c94
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 43 deletions.
5 changes: 5 additions & 0 deletions src/components/TextareaField/TextareaField-v2.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
.textarea {
@mixin inputStylesV2;
padding: 0.5rem 0.75rem;

&:read-only:not(:disabled) {
border: 0;
border-bottom: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
}
}

/**
Expand Down
17 changes: 11 additions & 6 deletions src/components/TextareaField/TextareaField-v2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,10 @@ export const TextareaField: TextareaFieldType = forwardRef(
styles['textarea-field--invalid-length'],
);

const textareaClassName = clsx(
readOnly && styles['textarea-field__textarea--read-only'],
);

// Pick the smallest of the lengths to set as the maximum value allowed
const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);

Expand Down Expand Up @@ -247,11 +251,18 @@ export const TextareaField: TextareaFieldType = forwardRef(
(Optional)
</Text>
)}
{maxLengthShown && (
<div className={styles['textarea-field__character-counter']}>
<span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
/ {maxLengthShown}
</div>
)}
</div>
)}
<TextArea
aria-describedby={ariaDescribedByVar}
aria-disabled={disabled}
className={textareaClassName}
defaultValue={defaultValue}
disabled={disabled}
id={idVar}
Expand Down Expand Up @@ -282,12 +293,6 @@ export const TextareaField: TextareaFieldType = forwardRef(
{fieldNote}
</FieldNote>
)}
{maxLengthShown && (
<div className={styles['textarea-field__character-counter']}>
<span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
/ {maxLengthShown}
</div>
)}
</div>
)}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ exports[`<TextareaField /> WhenReadOnly story renders snapshot 1`] = `
</div>
<textarea
aria-describedby=":r9:"
class="textarea"
class="textarea textarea-field__textarea--read-only"
id=":r8:"
placeholder="Enter long-form text here"
readonly=""
Expand Down Expand Up @@ -480,6 +480,18 @@ exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
>
Textarea Field
</label>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
<textarea
aria-describedby=":rl:"
Expand Down Expand Up @@ -521,18 +533,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
</svg>
Longer Field description
</div>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
</div>
</div>
Expand All @@ -554,6 +554,18 @@ exports[`<TextareaField /> WithARecommendedLength story renders snapshot 1`] = `
>
Textarea Field
</label>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
<textarea
aria-describedby=":rn:"
Expand Down Expand Up @@ -594,18 +606,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
</svg>
Longer Field description
</div>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
</div>
</div>
Expand All @@ -627,6 +627,18 @@ exports[`<TextareaField /> WithBothRecommendedAndMaxLengths story renders snapsh
>
Textarea Field
</label>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
<textarea
aria-describedby=":rp:"
Expand Down Expand Up @@ -668,18 +680,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
</svg>
Longer Field description
</div>
<div
class="textarea-field__character-counter"
>
<span
class="textarea-field--invalid-length"
>
202
</span>
/
144
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 3aa5c94

Please sign in to comment.