From 35daa9588d7665abb8a983ea69f227cc0b0c4ab2 Mon Sep 17 00:00:00 2001
From: Michael Salzmann <michael.salzmann@commercetools.com>
Date: Mon, 27 May 2024 08:49:09 +0200
Subject: [PATCH] refactor(search-text-input): swap icon and input order
 (visually) (#2827)

---
 .changeset/warm-seahorses-bow.md                       |  5 +++++
 .../search-text-input/src/search-text-input.styles.ts  | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/warm-seahorses-bow.md

diff --git a/.changeset/warm-seahorses-bow.md b/.changeset/warm-seahorses-bow.md
new file mode 100644
index 0000000000..abaa8b11f0
--- /dev/null
+++ b/.changeset/warm-seahorses-bow.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/search-text-input': patch
+---
+
+puts the magnifier-icon/button in front of the input
diff --git a/packages/components/inputs/search-text-input/src/search-text-input.styles.ts b/packages/components/inputs/search-text-input/src/search-text-input.styles.ts
index 497e68bb60..ba7a6f2818 100644
--- a/packages/components/inputs/search-text-input/src/search-text-input.styles.ts
+++ b/packages/components/inputs/search-text-input/src/search-text-input.styles.ts
@@ -57,6 +57,9 @@ const getSearchTextInputStyles = (props: TInputProps) => [
     font-size: ${props.isCondensed
       ? `${designTokens.fontSize20}`
       : `${designTokens.fontSize30}`};
+    order: 2;
+    padding-left: 0;
+    padding-right: 0;
   `,
 ];
 
@@ -87,8 +90,8 @@ const getIconColor = (props: TInputProps, defaultColor: string) => {
 const getClearIconButtonStyles = (props: TInputProps) => [
   getButtonStyles(),
   css`
-    margin-right: ${designTokens.spacing20};
     fill: ${getIconColor(props, designTokens.colorNeutral60)};
+    order: 3;
     &:hover {
       fill: ${getIconColor(props, designTokens.colorPrimary)};
     }
@@ -98,9 +101,10 @@ const getClearIconButtonStyles = (props: TInputProps) => [
 const getSearchIconButtonStyles = (props: TInputProps) => [
   getButtonStyles(),
   css`
-    margin-right: ${designTokens.spacing25};
+    margin-left: ${designTokens.spacing30};
     fill: ${getIconColor(props, designTokens.colorNeutral60)};
     cursor: ${props.isReadOnly ? 'default' : 'pointer'};
+    order: 1;
     &:hover {
       fill: ${getIconColor(props, designTokens.colorPrimary)};
     }
@@ -132,6 +136,8 @@ const getSearchTextInputContainerStyles = (props: TInputProps) => [
       ? `${designTokens.heightForInputAsSmall}`
       : `${designTokens.heightForInput}`};
     box-sizing: border-box;
+    gap: ${designTokens.spacing10};
+    padding-right: ${designTokens.spacing30};
     &:hover {
       border-color: ${getInputContainerBorderColor(
         props,