From 694f05e2a08ab22c12e8d1619a6e862968c929b2 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:18:28 +0200
Subject: [PATCH 1/3] reduce whitespace around icon button contained directly
 in textarea options

---
 src/components/TextField/TextArea.tsx   |  2 +-
 src/components/TextField/textfield.scss | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index f8514a3df..01ae7103b 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -116,7 +116,7 @@ export const TextArea = ({
                     );
                     leftIconElement.addEventListener("click", (_event: MouseEvent) => {
                         textAreaElement.focus();
-                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                    });
                 }
 
                 if (rightElement && wrapperElement) {
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index e25e3d25f..9b2c23f03 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,21 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+
+    & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+        }
+    }
+}
+.#{$ns}-input.#{$ns}-small ~ .#{$eccgui}-textarea__options > .#{$eccgui}-button--icon {
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+    &:last-of-type {
+        margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    }
 }
 
 .#{$eccgui}-textfield--justifyclearance {

From 04c534357368025bd729ca2344982a57436ea37b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:40:37 +0200
Subject: [PATCH 2/3] use colors on textarea options only for hover and focus

---
 .../TextField/stories/TextArea.stories.tsx      |  7 ++++++-
 src/components/TextField/textfield.scss         | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/TextField/stories/TextArea.stories.tsx b/src/components/TextField/stories/TextArea.stories.tsx
index 708d0799e..24bfd90ad 100644
--- a/src/components/TextField/stories/TextArea.stories.tsx
+++ b/src/components/TextField/stories/TextArea.stories.tsx
@@ -25,7 +25,12 @@ export default {
                 ),
                 "2 Icon buttons": (
                     <>
-                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton
+                            name={"item-comment"}
+                            onClick={() => alert("1 clicked")}
+                            text="Button 1"
+                            affirmative
+                        />
                         <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
                     </>
                 ),
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index 9b2c23f03..bd73d22f8 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,12 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+    filter: grayscale(1);
+
+    &:hover,
+    .#{$eccgui}-textarea:focus ~ & {
+        filter: none;
+    }
 
     & > .#{$eccgui}-button--icon {
         margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
@@ -192,12 +198,13 @@ $eccgui-map-intent-bgcolors: (
             margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
         }
     }
-}
-.#{$ns}-input.#{$ns}-small ~ .#{$eccgui}-textarea__options > .#{$eccgui}-button--icon {
-    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
 
-    &:last-of-type {
-        margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+        }
     }
 }
 

From a45eb1caeb806fe7d5b54f2ad2530a4aa2a7f1e6 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:43:29 +0200
Subject: [PATCH 3/3] update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 518f02481..52fa62515 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Fixed
+
+-   `<TextArea />`
+    -   improve visual alignment to `TextField` regarding whitespace and colors
+
 ## [23.7.0] - 2024-06-26
 
 ### Added