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
+
+- ``
+ - improve visual alignment to `TextField` regarding whitespace and colors
+
## [23.7.0] - 2024-06-26
### Added
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/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": (
<>
- alert("1 clicked")} text="Button 1" />
+ alert("1 clicked")}
+ text="Button 1"
+ affirmative
+ />
alert("2 clicked")} text="Button 2" />
>
),
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index e25e3d25f..bd73d22f8 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,28 @@ $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;
+
+ &:last-of-type {
+ margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+ }
+ }
+
+ .#{$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;
+ }
+ }
}
.#{$eccgui}-textfield--justifyclearance {