fixing searchguidelink styling

pinterest · Oct 25, 2024 · 1640747 · 1640747
1 parent f4003c9
commit 1640747
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 36 deletions.
diff --git a/docs/examples/searchguidelink/avatar.tsx b/docs/examples/searchguidelink/avatar.tsx
@@ -41,7 +41,7 @@ export default function Example() {
         href="https://pinterest.com"
         text="Avatar"
         thumbnail={{
-          avatar: <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />,
+          avatar: <Avatar name="Keerthi" outline src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />,
         }}
       />
       <SearchGuideLink

diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx
@@ -208,22 +208,17 @@ const InternalLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function
     styles.noUnderline,
     touchableStyles.tapTransition,
     isSearchGuide && isInVRExperiment
-      ? {
+      ? // TODO: Coalesce these two blocks
+        {
           [searchGuideStyles.searchguideVr]: true,
-          [touchableStyles.tapTransition]: true,
-          [searchGuideStyles[colorClass as keyof typeof searchGuideStyles]]: !selected,
           [focusStyles.hideOutline]: !isFocusVisible,
           [searchGuideStyles.vrFocused]: isFocusVisible,
-          [searchGuideStyles.selectedVr]: selected,
         }
       : {},
     isSearchGuide && !isInVRExperiment
       ? {
           [searchGuideStyles.searchguide]: true,
-          [touchableStyles.tapTransition]: true,
-          [searchGuideStyles[colorClass as keyof typeof searchGuideStyles]]: true,
-          [searchGuideStyles.selected]: selected,
-          [focusStyles.hideOutline]: !isFocusVisible && !selected,
+          [focusStyles.hideOutline]: !isFocusVisible,
           [focusStyles.accessibilityOutline]: isFocusVisible,
         }
       : {},

diff --git a/packages/gestalt/src/SearchGuide.css b/packages/gestalt/src/SearchGuide.css
@@ -8,16 +8,12 @@
   display: inherit;
 }
 
-a.searchguide,
-a.searchguideVr {
-  padding-bottom: var(--g-border-width-lg);
-  padding-top: var(--g-border-width-lg);
-}
-
 .searchguideVr {
   background: transparent;
   border-color: transparent;
   border-radius: calc(var(--rounding-400) + var(--g-border-width-lg));
+  border-style: solid;
+  border-width: 2px;
   box-sizing: border-box;
   display: inherit;
   padding: var(--space-0) var(--space-0);

diff --git a/packages/gestalt/src/SearchGuideLink.tsx b/packages/gestalt/src/SearchGuideLink.tsx
@@ -98,33 +98,46 @@ const SearchGuideLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(funct
   // that renders <SearchGuideLink ref={inputRef} /> to call inputRef.current.focus()
   // @ts-expect-error - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLButtonElement'.
   useImperativeHandle(ref, () => innerRef.current);
-  const childrenDivClasses = classnames(styles.childrenDiv);
 
+  const childrenDivClasses = classnames(
+    styles.childrenDiv,
+    isInVRExperiment && {
+      [styles[`color${color}`]]: true,
+    },
+  );
   const textComponent = (
     <TextUI align="center" color="dark" overflow="noWrap">
       {text}
     </TextUI>
   );
   const thumbnailVariant = thumbnail && (
-    <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
-      {'avatar' in thumbnail && (
-        <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={40}>
-          {cloneElement(thumbnail.avatar, { size: 'fit' })}
-        </Box>
-      )}
-      {'avatarGroup' in thumbnail && (
-        <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={40}>
-          {cloneElement(thumbnail.avatarGroup, { size: 'sm' })}
-        </Box>
-      )}
-      {'image' in thumbnail && (
-        <div className={isInVRExperiment ? styles.imageDivVr : styles.imageDiv}>
-          {cloneElement(thumbnail.image, { fit: 'cover' })}
-        </div>
-      )}
-      {'icon' in thumbnail && <Box marginStart={3}>{cloneElement(thumbnail.icon)}</Box>}
-      <Box marginEnd={3}>{textComponent}</Box>
-    </Flex>
+    <Box marginEnd={3}>
+      <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
+        {'avatar' in thumbnail && (
+          <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={32}>
+            {cloneElement(thumbnail.avatarGroup, { size: 'sm' })}
+          </Box>
+        )}
+        {'image' in thumbnail && (
+          <div className={isInVRExperiment ? styles.imageDivVr : styles.imageDiv}>
+            {cloneElement(thumbnail.image, { fit: 'cover' })}
+          </div>
+        )}
+        {'icon' in thumbnail && (
+          <Box marginStart={3}>
+            {cloneElement(thumbnail.icon, {
+              color: 'dark',
+            })}
+          </Box>
+        )}
+        {text.length > 0 && textComponent}
+      </Flex>
+    </Box>
   );
   const defaultVariant = (
     <Box paddingX={5}>
@@ -152,7 +165,6 @@ const SearchGuideLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(funct
     <InternalLink
       ref={innerRef}
       aria-label={accessibilityLabel}
-      colorClass={`color${color}`}
       dataTestId={dataTestId}
       href={href}
       onClick={handleClick}