searchguidelink anchor styling fix

pinterest · Oct 2, 2024 · 423eaf4 · 423eaf4
1 parent f0b9272
commit 423eaf4
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 184 deletions.
diff --git a/docs/docs-components/Header.tsx b/docs/docs-components/Header.tsx
@@ -195,7 +195,7 @@ function Header() {
 
         <Box display={isMobileSearchExpandedOpen ? 'none' : 'flex'} paddingX={2}>
           <Flex alignItems="center" gap={3}>
-            {showVRToggle && (
+            {true && (
               <ButtonToggle
                 iconStart="sparkle"
                 onClick={() => setExperiments(isInVRExperiment ? '' : 'Tokens')}

diff --git a/docs/examples/searchguide/avatarExample.tsx b/docs/examples/searchguide/avatarExample.tsx
@@ -12,7 +12,7 @@ export default function Example() {
     >
       <SearchGuide
         accessibilityLabel="Image"
-        color="02"
+        color="01"
         text="Image"
         thumbnail={{
           image: (
@@ -27,6 +27,7 @@ export default function Example() {
       />
       <SearchGuide
         accessibilityLabel="Icon"
+        color="02"
         text="Icon"
         thumbnail={{
           icon: <Icon accessibilityLabel="" icon="sparkle" />,

diff --git a/docs/examples/searchguidelink/avatarExample.tsx b/docs/examples/searchguidelink/avatarExample.tsx
@@ -12,7 +12,7 @@ export default function Example() {
     >
       <SearchGuideLink
         accessibilityLabel="Image"
-        color="02"
+        color="01"
         href="https://pinterest.com"
         text="Image"
         thumbnail={{
@@ -28,7 +28,7 @@ export default function Example() {
       />
       <SearchGuideLink
         accessibilityLabel="Icon"
-        color="03"
+        color="02"
         href="https://pinterest.com"
         text="Icon"
         thumbnail={{
@@ -37,7 +37,7 @@ export default function Example() {
       />
       <SearchGuideLink
         accessibilityLabel="Avatar"
-        color="04"
+        color="03"
         href="https://pinterest.com"
         text="Avatar"
         thumbnail={{
@@ -46,6 +46,7 @@ export default function Example() {
       />
       <SearchGuideLink
         accessibilityLabel="AvatarGroup"
+        color="04"
         href="https://pinterest.com"
         text="AvatarGroup"
         thumbnail={{

diff --git a/docs/examples/searchguidelink/expandableExample.tsx b/docs/examples/searchguidelink/expandableExample.tsx
diff --git a/docs/pages/web/searchguidelink.tsx b/docs/pages/web/searchguidelink.tsx
@@ -10,7 +10,6 @@ import QualityChecklist from '../../docs-components/QualityChecklist';
 import SandpackExample from '../../docs-components/SandpackExample';
 import avatarExample from '../../examples/searchguidelink/avatarExample';
 import colors from '../../examples/searchguidelink/colors';
-import expandableExample from '../../examples/searchguidelink/expandableExample';
 import hideLowQualityDo from '../../examples/searchguidelink/hideLowQualityDo';
 import main from '../../examples/searchguidelink/main';
 import noScrollDo from '../../examples/searchguidelink/noScrollDo';
@@ -37,7 +36,7 @@ export default function DocsPage({ generatedDocGen }: DocType) {
         <SandpackExample
           code={main}
           hideEditor
-          name="Main Searchguide example"
+          name="Main Searchguidelink example"
           previewHeight={150}
         />
       </PageHeader>
@@ -291,24 +290,6 @@ Use the \`selected\` prop to indicate that the Searchguide is in a selected stat
             }
           />
         </MainSection.Subsection>
-        <MainSection.Subsection
-          columns={2}
-          description={`
-When a Searchguide query is broad and can be further refined (example: Season), an **arrow-down** icon can be added at the end, to trigger a Sheet with a cluster of wrapped Searchguides.
-`}
-          title="Expandable"
-        >
-          <MainSection.Card
-            cardSize="md"
-            sandpackExample={
-              <SandpackExample
-                code={expandableExample}
-                name="Expandable searchguide example."
-                previewHeight={150}
-              />
-            }
-          />
-        </MainSection.Subsection>
       </MainSection>
       <MainSection name="Writing">
         <MainSection.Subsection columns={2}>

diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx
@@ -7,6 +7,7 @@ import focusStyles from '../Focus.css';
 import getRoundingClassName, { Rounding } from '../getRoundingClassName';
 import iconButtonStyles from '../IconButton.css';
 import layoutStyles from '../Layout.css';
+import searchGuideStyles from '../SearchGuide.css';
 import touchableStyles from '../TapArea.css';
 import styles from '../Text.css';
 import useFocusVisible from '../useFocusVisible';
@@ -52,7 +53,7 @@ type Props = {
   size?: 'sm' | 'md' | 'lg';
   tapStyle?: 'none' | 'compress';
   target?: null | 'self' | 'blank';
-  wrappedComponent: 'button' | 'iconButton' | 'tapArea';
+  wrappedComponent: 'button' | 'iconButton' | 'tapArea' | 'searchGuide';
 };
 
 const InternalLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
@@ -67,7 +68,6 @@ const InternalLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function
     fullWidth,
     href,
     id,
-    importedClass,
     mouseCursor,
     onClick,
     onBlur,
@@ -116,61 +116,84 @@ const InternalLinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function
   const isTapArea = wrappedComponent === 'tapArea';
   const isButton = wrappedComponent === 'button';
   const isIconButton = wrappedComponent === 'iconButton';
+  const isSearchGuide = wrappedComponent === 'searchGuide';
 
-  const className =
-    importedClass ??
-    classnames(
-      styles.noOutline,
-      styles.inheritColor,
-      styles.noUnderline,
-      touchableStyles.tapTransition,
-      getRoundingClassName(isTapArea ? rounding || 0 : 'pill'),
-      {
-        [touchableStyles.tapCompress]: !disabled && tapStyle === 'compress' && isTapping,
-        [focusStyles.hideOutline]: !disabled && !isFocusVisible,
-        [focusStyles.accessibilityOutline]: !disabled && isFocusVisible && !isInVRExperiment,
-      },
-      isButton
-        ? {
-            [layoutStyles.inlineFlex]: !fullWidth,
-            [layoutStyles.flex]: fullWidth,
-            [layoutStyles.justifyCenter]: true,
-            [layoutStyles.xsItemsCenter]: true,
-            [buttonStyles.button]: true,
-            [buttonStyles.disabled]: disabled,
-            [buttonStyles.selected]: !disabled && selected,
-            [buttonStyles.sm]: size === 'sm',
-            [buttonStyles.md]: size === 'md',
-            [buttonStyles.lg]: size === 'lg',
-          }
-        : {},
-      isButton && colorClass
-        ? {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore cannot infer type with dynamic property name
-            [buttonStyles[colorClass]]: !disabled && !selected,
-          }
-        : {},
-      isTapArea
-        ? {
-            [layoutStyles.block]: true,
-            [touchableStyles.fullHeight]: fullHeight,
-            [touchableStyles.fullWidth]: fullWidth,
-          }
-        : {},
-      isTapArea && mouseCursor
-        ? {
-            [touchableStyles[mouseCursor]]: !disabled,
-          }
-        : {},
-      isIconButton
-        ? {
-            [iconButtonStyles.button]: true,
-            [iconButtonStyles.disabled]: disabled,
-            [iconButtonStyles.enabled]: !disabled,
-          }
-        : {},
-    );
+  const className = classnames(
+    styles.noUnderline,
+    {
+      [classnames(
+        styles.noOutline,
+        styles.inheritColor,
+        touchableStyles.tapTransition,
+        getRoundingClassName(isTapArea ? rounding || 0 : 'pill'),
+        {
+          [touchableStyles.tapCompress]: !disabled && tapStyle === 'compress' && isTapping,
+          [focusStyles.hideOutline]: !disabled && !isFocusVisible,
+          [focusStyles.accessibilityOutline]: !disabled && isFocusVisible && !isInVRExperiment,
+        },
+      )]: !isSearchGuide,
+    },
+    isButton
+      ? {
+          [layoutStyles.inlineFlex]: !fullWidth,
+          [layoutStyles.flex]: fullWidth,
+          [layoutStyles.justifyCenter]: true,
+          [layoutStyles.xsItemsCenter]: true,
+          [buttonStyles.button]: true,
+          [buttonStyles.disabled]: disabled,
+          [buttonStyles.selected]: !disabled && selected,
+          [buttonStyles.sm]: size === 'sm',
+          [buttonStyles.md]: size === 'md',
+          [buttonStyles.lg]: size === 'lg',
+        }
+      : {},
+    isButton && colorClass
+      ? {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore cannot infer type with dynamic property name
+          [buttonStyles[colorClass]]: !disabled && !selected,
+        }
+      : {},
+    isTapArea
+      ? {
+          [layoutStyles.block]: true,
+          [touchableStyles.fullHeight]: fullHeight,
+          [touchableStyles.fullWidth]: fullWidth,
+        }
+      : {},
+    isTapArea && mouseCursor
+      ? {
+          [touchableStyles[mouseCursor]]: !disabled,
+        }
+      : {},
+    isIconButton
+      ? {
+          [iconButtonStyles.button]: true,
+          [iconButtonStyles.disabled]: disabled,
+          [iconButtonStyles.enabled]: !disabled,
+        }
+      : {},
+    isSearchGuide && isInVRExperiment
+      ? {
+          [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.accessibilityOutline]: isFocusVisible,
+        }
+      : {},
+  );
 
   // Consumes GlobalEventsHandlerProvider
   const { linkHandlers } = useGlobalEventsHandlerContext() ?? {

diff --git a/packages/gestalt/src/SearchGuide.css b/packages/gestalt/src/SearchGuide.css
@@ -5,20 +5,20 @@
   composes: large from "./Layout.css";
   composes: paddingX1 from "./boxWhitespace.css";
   border-radius: var(--rounding-600);
+  display: inherit;
 }
 
-.searchguide a,
-:link,
-:visited,
-:hover,
-:active {
-  text-decoration: none;
+a.searchguide,
+a.searchguideVr {
+  padding-bottom: 2px;
+  padding-top: 2px;
 }
 
 .searchguideVr {
   border-color: transparent;
   border-radius: var(--rounding-400);
   box-sizing: border-box;
+  display: inherit;
   padding: var(--space-0) var(--space-0);
   text-wrap: balance;
 }