SearchGuide: VR Changes to selected states, trailing icon change, lea…

…ding icon and size change (#3903)
pinterest · Dec 4, 2024 · 9b5df4c · 9b5df4c
1 parent 3f1d273
commit 9b5df4c
Showing 1 changed file with 62 additions and 18 deletions.
diff --git a/packages/gestalt/src/SearchGuide.tsx b/packages/gestalt/src/SearchGuide.tsx
@@ -4,6 +4,7 @@ import Box from './Box';
 import Flex from './Flex';
 import focusStyles from './Focus.css';
 import Icon from './Icon';
+import IconCompact from './IconCompact';
 import styles from './SearchGuide.css';
 import touchableStyles from './TapArea.css';
 import TextUI from './TextUI';
@@ -146,6 +147,49 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
         {text}
       </TextUI>
     ) : null;
+
+  const checkIcon = isInVRExperiment ? (
+    <IconCompact
+      accessibilityLabel=""
+      color={isInVRExperiment && selected ? 'inverse' : 'dark'}
+      icon="compact-check"
+      size={12}
+    />
+  ) : (
+    <Icon
+      accessibilityLabel=""
+      color={isInVRExperiment && selected ? 'inverse' : 'dark'}
+      icon="check"
+      size={12}
+    />
+  );
+
+  const expandableIcon = isInVRExperiment ? (
+    <IconCompact
+      accessibilityLabel=""
+      color={isInVRExperiment && selected ? 'inverse' : 'dark'}
+      icon="compact-chevron-down"
+      size={12}
+    />
+  ) : (
+    <Icon
+      accessibilityLabel=""
+      color={isInVRExperiment && selected ? 'inverse' : 'dark'}
+      icon="arrow-down"
+      size={12}
+    />
+  );
+
+  const selectedVariant = selected && isInVRExperiment && (
+    <Box paddingX={5}>
+      <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
+        {checkIcon}
+        {textComponent}
+        {expandable ? expandableIcon : null}
+      </Flex>
+    </Box>
+  );
+
   const thumbnailVariant = thumbnail && (
     <Box marginEnd={3}>
       <Flex
@@ -182,32 +226,26 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
           </Box>
         )}
         {text.length > 0 && textComponent}
-        {expandable ? (
-          <Icon
-            accessibilityLabel=""
-            color={isInVRExperiment && selected ? 'inverse' : 'dark'}
-            icon="arrow-down"
-            size={12}
-          />
-        ) : null}
+        {expandable ? expandableIcon : null}
       </Flex>
     </Box>
   );
-  const defaultVariant = (
+
+  const textVariant = (
     <Box paddingX={isInVRExperiment ? 4 : 5}>
       <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
         {textComponent}
-        {expandable ? (
-          <Icon
-            accessibilityLabel=""
-            color={isInVRExperiment && selected ? 'inverse' : 'dark'}
-            icon="arrow-down"
-            size={12}
-          />
-        ) : null}
+        {expandable ? expandableIcon : null}
       </Flex>
     </Box>
   );
+
+  const defaultVariant =
+    thumbnail &&
+    (selected || !('avatar' in thumbnail || 'avatarGroup' in thumbnail) || !isInVRExperiment)
+      ? thumbnailVariant
+      : textVariant;
+
   return (
     <button
       ref={innerRef}
@@ -221,7 +259,13 @@ const SearchGuideWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
       onClick={(event) => onClick?.({ event })}
       type="button"
     >
-      <div className={childrenDivClasses}>{thumbnail ? thumbnailVariant : defaultVariant}</div>
+      <div className={childrenDivClasses}>
+        {selected &&
+        !(thumbnail && ('avatar' in thumbnail || 'avatarGroup' in thumbnail)) &&
+        isInVRExperiment
+          ? selectedVariant
+          : defaultVariant}
+      </div>
     </button>
   );
 });