From 987e9f735f2205a99a6f1164afb835b6803b2247 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Wed, 29 Apr 2026 15:54:17 -0400
Subject: [PATCH 1/2] feat(ui): restyle textarea field to match Figma v4 design

---
 packages/ui/src/fields/Textarea/index.css | 21 ++++++++++++++++++---
 test/v4/collections/Textarea/index.ts     | 23 ++++++++++++++++++-----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/fields/Textarea/index.css b/packages/ui/src/fields/Textarea/index.css
index fb9ca5a20f5..6b00953c3d5 100644
--- a/packages/ui/src/fields/Textarea/index.css
+++ b/packages/ui/src/fields/Textarea/index.css
@@ -5,6 +5,12 @@
     flex-direction: column;
     gap: var(--spacer-2);
 
+    .field-type__wrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacer-2);
+    }
+
     textarea {
       overflow-y: auto;
       resize: vertical;
@@ -12,6 +18,14 @@
       height: auto;
       display: flex;
       field-sizing: content;
+
+      &:hover:not(:focus):not(:disabled) {
+        border-color: var(--border-default-default);
+      }
+
+      &:focus {
+        border-color: var(--border-selected-strong);
+      }
     }
 
     textarea:not(:empty) {
@@ -19,9 +33,10 @@
     }
 
     &.read-only {
-      .textarea-outer {
-        background: var(--bg-disabled-default);
-        color: var(--text-disabled-default);
+      textarea {
+        background: var(--bg-default-default);
+        border-color: var(--border-default-default);
+        color: var(--text-default);
       }
     }
 
diff --git a/test/v4/collections/Textarea/index.ts b/test/v4/collections/Textarea/index.ts
index f3fe34baa4b..f9f2c0dd0df 100644
--- a/test/v4/collections/Textarea/index.ts
+++ b/test/v4/collections/Textarea/index.ts
@@ -16,19 +16,32 @@ const TextareaFields: CollectionConfig = {
     {
       name: 'contentRequired',
       type: 'textarea',
-      label: 'Content',
+      label: 'Content Required',
       required: true,
       admin: {
-        description: 'The main body content for this entry',
+        description: 'This field is required',
       },
     },
     {
-      name: 'contentDisabled',
+      name: 'contentReadOnly',
       type: 'textarea',
-      label: 'Content',
+      label: 'Content Read Only',
+      defaultValue:
+        'Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers.',
       admin: {
         readOnly: true,
-        description: 'The main body content for this entry',
+        description: 'This field is read-only',
+      },
+    },
+    {
+      name: 'contentDisabled',
+      type: 'textarea',
+      label: 'Content Disabled',
+      defaultValue:
+        'Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers.',
+      admin: {
+        disabled: true,
+        description: 'This field is disabled',
       },
     },
   ],

From 1afa9d9532dbbd4ac6ad075513036f2fc025c5f0 Mon Sep 17 00:00:00 2001
From: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>
Date: Thu, 30 Apr 2026 15:04:43 -0400
Subject: [PATCH 2/2] fix(ui): adjusted border color for focus state

---
 packages/ui/src/fields/Textarea/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/fields/Textarea/index.css b/packages/ui/src/fields/Textarea/index.css
index 6b00953c3d5..c781b8e6bca 100644
--- a/packages/ui/src/fields/Textarea/index.css
+++ b/packages/ui/src/fields/Textarea/index.css
@@ -24,7 +24,7 @@
       }
 
       &:focus {
-        border-color: var(--border-selected-strong);
+        border-color: var(--border-selected);
       }
     }