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 1/2] 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>
         )}

From eaa4047a25a45fa0a466752984e124daf57d22cc Mon Sep 17 00:00:00 2001
From: eniomoura <eniormoura@gmail.com>
Date: Wed, 9 Oct 2024 17:47:43 -0300
Subject: [PATCH 2/2] adding mapping and fixing type

---
 packages/gestalt/src/SearchGuide.tsx | 31 ++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/gestalt/src/SearchGuide.tsx b/packages/gestalt/src/SearchGuide.tsx
index 1eef17763d..7ed12ca564 100644
--- a/packages/gestalt/src/SearchGuide.tsx
+++ b/packages/gestalt/src/SearchGuide.tsx
@@ -103,13 +103,27 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
   useImperativeHandle(ref, () => innerRef.current);
   const { isFocusVisible } = useFocusVisible();
 
+  const colorClass: { [key: string]: keyof typeof styles } = {
+    '01': 'color01',
+    '02': 'color02',
+    '03': 'color03',
+    '04': 'color04',
+    '05': 'color05',
+    '06': 'color06',
+    '07': 'color07',
+    '08': 'color08',
+    '09': 'color09',
+    '10': 'color10',
+    '11': 'color11',
+  };
+
   const buttonClasses = isInVRExperiment
     ? classnames(styles.searchguideVr, touchableStyles.tapTransition, {
         [focusStyles.hideOutline]: !isFocusVisible,
         [styles.vrFocused]: isFocusVisible,
         [styles.selectedVr]: selected,
       })
-    : classnames(styles.searchguide, touchableStyles.tapTransition, [styles[`color${color}`]], {
+    : classnames(styles.searchguide, touchableStyles.tapTransition, [styles[colorClass[color]!]], {
         [styles.selected]: selected,
         [focusStyles.hideOutline]: !isFocusVisible && !selected,
         [focusStyles.accessibilityOutline]: isFocusVisible,
@@ -136,26 +150,17 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
     <Box marginEnd={3}>
       <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
         {'avatar' in thumbnail && (
-          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={40}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={32}>
             {cloneElement(thumbnail.avatar, { size: 'fit', outline: true })}
           </Box>
         )}
         {'avatarGroup' in thumbnail && (
-          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={40}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={32}>
             {cloneElement(thumbnail.avatarGroup, { size: 'sm' })}
           </Box>
         )}
         {'image' in thumbnail && (
-          <div
-            className={
-              isInVRExperiment
-                ? classnames({
-                    [styles.imageDivVr]: true,
-                    [styles.selectedImageDivVr]: selected,
-                  })
-                : styles.imageDiv
-            }
-          >
+          <div className={isInVRExperiment ? styles.imageDivVr : styles.imageDiv}>
             {cloneElement(thumbnail.image, { fit: 'cover' })}
           </div>
         )}