Merge pull request #182 from eccenca/bugfix/alignTextInputsPadding-MT…

…-168 Align text inputs whitespace (MT-168)
eccenca · Jul 31, 2024 · 376b0a9 · 376b0a9
2 parents eccf1b1 + a45eb1c
commit 376b0a9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git 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

diff --git 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
@@ -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
@@ -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 {