From 71892f89158d2c472dbbf5580ededf354d8e7f77 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Nov 2024 10:37:05 +0300
Subject: [PATCH] Fixed #6878 - Textarea filled variant fails in Material Theme

---
 .../src/presets/material/textarea/index.js    | 47 ++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/themes/src/presets/material/textarea/index.js b/packages/themes/src/presets/material/textarea/index.js
index b45d7acf3..a68242483 100644
--- a/packages/themes/src/presets/material/textarea/index.js
+++ b/packages/themes/src/presets/material/textarea/index.js
@@ -3,6 +3,7 @@ export default {
         background: '{form.field.background}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
+        filledHoverBackground: '{form.field.filled.hover.background}',
         filledFocusBackground: '{form.field.filled.focus.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
@@ -34,5 +35,49 @@ export default {
             paddingX: '{form.field.lg.padding.x}',
             paddingY: '{form.field.lg.padding.y}'
         }
-    }
+    },
+    css: ({ dt }) => `
+.p-textarea.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('textarea.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.border.color')}, ${dt('textarea.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+
+.p-textarea.p-variant-filled:enabled:hover {
+    background: ${dt('textarea.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.hover.border.color')}, ${dt('textarea.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-textarea.p-variant-filled:enabled:focus {
+    outline: 0 none;
+    background: ${dt('textarea.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.border.color')}, ${dt('textarea.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-textarea.p-variant-filled:enabled:hover:focus {
+    background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.hover.border.color')}, ${dt('textarea.hover.border.color')});
+}
+
+.p-textarea.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')}), linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')});
+}
+
+.p-textarea.p-variant-filled.p-invalid:enabled:focus {
+    background-image: linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')}), linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')});
+}
+`
 };