From 5b031fe27318465aca167f779a6daefbbced20cd Mon Sep 17 00:00:00 2001
From: eniomoura <eniormoura@gmail.com>
Date: Tue, 8 Oct 2024 21:02:10 -0300
Subject: [PATCH] searchguide image fix

---
 packages/gestalt/src/SearchGuide.css | 38 +++-------------------------
 packages/gestalt/src/SearchGuide.tsx | 20 ++++++++++++---
 2 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/packages/gestalt/src/SearchGuide.css b/packages/gestalt/src/SearchGuide.css
index 527605ab07..352da4de23 100644
--- a/packages/gestalt/src/SearchGuide.css
+++ b/packages/gestalt/src/SearchGuide.css
@@ -15,6 +15,7 @@ a.searchguideVr {
 }
 
 .searchguideVr {
+  background: transparent;
   border-color: transparent;
   border-radius: var(--rounding-400);
   box-sizing: border-box;
@@ -33,6 +34,7 @@ a.searchguideVr {
   composes: flex from "./Layout.css";
   composes: xsItemsCenter from "./Layout.css";
   composes: justifyCenter from "./Layout.css";
+  border-radius: var(--rounding-400);
   min-height: 44px;
 }
 
@@ -46,41 +48,9 @@ a.searchguideVr {
 .imageDivVr {
   border-end-start-radius: calc(var(--rounding-400) - 2px);
   border-start-start-radius: calc(var(--rounding-400) - 2px);
-  height: 48px;
-  margin-block-end: -2px;
-  margin-block-start: -2px;
-  margin-inline-start: -2px;
-  overflow: hidden;
-  width: 48px;
-}
-
-.searchguideVr:focus-visible .imageDivVr {
-  border: solid;
-  border-block-start-width: 2px;
-  border-color: var(--sema-color-border-focus-inner-default);
-  border-inline-end-width: 0;
-  border-inline-start-width: 2px;
-  border-inline-start-width: 2px;
-  box-sizing: border-box;
-}
-
-.searchguideVr:not(:focus-visible) .selectedImageDivVr {
-  border: solid;
-  border-block-end-width: 2px;
-  border-block-start-width: 1px;
-  border-color: var(--color-background-button-selected-default);
-  border-end-start-radius: calc(var(--rounding-400) - 2px);
-  border-inline-end-width: 0;
-  border-inline-start-width: 2px;
-  border-inline-start-width: 1px;
-  border-start-start-radius: calc(var(--rounding-400) - 2px);
-  box-sizing: border-box;
-  height: 48px;
-  margin-block-end: -2px;
-  margin-block-start: -1px;
-  margin-inline-start: -1px;
+  height: 44px;
   overflow: hidden;
-  width: 48px;
+  width: 44px;
 }
 
 /* STATES */
diff --git a/packages/gestalt/src/SearchGuide.tsx b/packages/gestalt/src/SearchGuide.tsx
index c45e7081e5..1eef17763d 100644
--- a/packages/gestalt/src/SearchGuide.tsx
+++ b/packages/gestalt/src/SearchGuide.tsx
@@ -105,7 +105,6 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
 
   const buttonClasses = isInVRExperiment
     ? classnames(styles.searchguideVr, touchableStyles.tapTransition, {
-        [styles[`color${color}`]]: !selected,
         [focusStyles.hideOutline]: !isFocusVisible,
         [styles.vrFocused]: isFocusVisible,
         [styles.selectedVr]: selected,
@@ -115,7 +114,13 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
         [focusStyles.hideOutline]: !isFocusVisible && !selected,
         [focusStyles.accessibilityOutline]: isFocusVisible,
       });
-  const childrenDivClasses = classnames(styles.childrenDiv);
+  const childrenDivClasses = classnames(
+    styles.childrenDiv,
+    isInVRExperiment && {
+      [styles[`color${color}`]]: !selected,
+      [styles.selectedVr]: selected,
+    },
+  );
 
   const textComponent =
     text.length > 0 ? (
@@ -141,7 +146,16 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
           </Box>
         )}
         {'image' in thumbnail && (
-          <div className={isInVRExperiment ? styles.imageDivVr : styles.imageDiv}>
+          <div
+            className={
+              isInVRExperiment
+                ? classnames({
+                    [styles.imageDivVr]: true,
+                    [styles.selectedImageDivVr]: selected,
+                  })
+                : styles.imageDiv
+            }
+          >
             {cloneElement(thumbnail.image, { fit: 'cover' })}
           </div>
         )}