more fixes

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

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx
@@ -217,6 +217,7 @@ const InternalLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function
       : {},
     isSearchGuide && !isInVRExperiment
       ? {
+          [searchGuideStyles[colorClass as keyof typeof searchGuideStyles]]: true,
           [searchGuideStyles.searchguide]: true,
           [focusStyles.hideOutline]: !isFocusVisible,
           [focusStyles.accessibilityOutline]: isFocusVisible,

diff --git a/packages/gestalt/src/SearchGuide.css b/packages/gestalt/src/SearchGuide.css
@@ -5,7 +5,7 @@
   composes: large from "./Layout.css";
   composes: paddingX100 from "./boxWhitespace.css";
   border-radius: var(--rounding-600);
-  display: inherit;
+  display: flex;
 }
 
 .searchguideVr {

diff --git a/packages/gestalt/src/SearchGuide.tsx b/packages/gestalt/src/SearchGuide.tsx
@@ -150,12 +150,12 @@ 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={32}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : 1} minWidth={32}>
             {cloneElement(thumbnail.avatar, { size: 'fit', outline: true })}
           </Box>
         )}
         {'avatarGroup' in thumbnail && (
-          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={32}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : 1} minWidth={32}>
             {cloneElement(thumbnail.avatarGroup, { size: 'sm' })}
           </Box>
         )}

diff --git a/packages/gestalt/src/SearchGuideLink.tsx b/packages/gestalt/src/SearchGuideLink.tsx
@@ -99,6 +99,20 @@ const SearchGuideLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(funct
   // @ts-expect-error - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLButtonElement'.
   useImperativeHandle(ref, () => innerRef.current);
 
+  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 childrenDivClasses = classnames(
     styles.childrenDiv,
     isInVRExperiment && {
@@ -114,12 +128,12 @@ const SearchGuideLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(funct
     <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}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : 1} minWidth={32}>
             {cloneElement(thumbnail.avatar, { size: 'fit', outline: true })}
           </Box>
         )}
         {'avatarGroup' in thumbnail && (
-          <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={32}>
+          <Box aria-hidden marginStart={isInVRExperiment ? 2 : 1} minWidth={32}>
             {cloneElement(thumbnail.avatarGroup, { size: 'sm' })}
           </Box>
         )}
@@ -165,6 +179,7 @@ const SearchGuideLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(funct
     <InternalLink
       ref={innerRef}
       aria-label={accessibilityLabel}
+      colorClass={isInVRExperiment ? undefined : (colorClass[color] as string)}
       dataTestId={dataTestId}
       href={href}
       onClick={handleClick}