searchguide image fix

pinterest · Oct 9, 2024 · 5b031fe · 5b031fe
1 parent 398ef20
commit 5b031fe
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 37 deletions.
diff --git 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
@@ -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>
         )}