feat: Update MarkdownEditor and TextArea components for improved styling and functionality

This commit is contained in:
Nawaz Dhandala
2026-02-28 09:12:33 +00:00
parent a33622f851
commit 0ac0fd8f92
2 changed files with 4 additions and 3 deletions

View File

@@ -278,7 +278,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
let className: string = "";
if (!props.className) {
className =
"block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none";
"block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-y";
} else {
className = props.className;
}
@@ -630,7 +630,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
}
}}
tabIndex={props.tabIndex}
rows={6}
rows={10}
/>
{props.error && (
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">

View File

@@ -31,7 +31,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
if (!props.className) {
className =
"block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm";
"block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm resize-y min-h-32";
} else {
className = props.className;
}
@@ -65,6 +65,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
data-testid={props.dataTestId}
className={`${className || ""}`}
value={text}
rows={6}
spellCheck={!props.disableSpellCheck}
aria-invalid={props.error ? "true" : undefined}
aria-describedby={props.error ? "textarea-error-message" : undefined}