From 423eaf40561f22c5b18872427dd24662f7d52407 Mon Sep 17 00:00:00 2001 From: eniomoura Date: Wed, 2 Oct 2024 05:09:32 -0300 Subject: [PATCH] searchguidelink anchor styling fix --- docs/docs-components/Header.tsx | 2 +- docs/examples/searchguide/avatarExample.tsx | 3 +- .../searchguidelink/avatarExample.tsx | 7 +- .../searchguidelink/expandableExample.tsx | 41 ------ docs/pages/web/searchguidelink.tsx | 21 +-- packages/gestalt/src/Link/InternalLink.tsx | 135 ++++++++++-------- packages/gestalt/src/SearchGuide.css | 12 +- packages/gestalt/src/SearchGuideLink.tsx | 62 +------- 8 files changed, 99 insertions(+), 184 deletions(-) delete mode 100644 docs/examples/searchguidelink/expandableExample.tsx diff --git a/docs/docs-components/Header.tsx b/docs/docs-components/Header.tsx index 0c8186d5ed..b4534ff75b 100644 --- a/docs/docs-components/Header.tsx +++ b/docs/docs-components/Header.tsx @@ -195,7 +195,7 @@ function Header() { - {showVRToggle && ( + {true && ( setExperiments(isInVRExperiment ? '' : 'Tokens')} diff --git a/docs/examples/searchguide/avatarExample.tsx b/docs/examples/searchguide/avatarExample.tsx index 981f06a001..c0e0d3b1bb 100644 --- a/docs/examples/searchguide/avatarExample.tsx +++ b/docs/examples/searchguide/avatarExample.tsx @@ -12,7 +12,7 @@ export default function Example() { > , diff --git a/docs/examples/searchguidelink/avatarExample.tsx b/docs/examples/searchguidelink/avatarExample.tsx index 4780baec8b..f6357c495b 100644 --- a/docs/examples/searchguidelink/avatarExample.tsx +++ b/docs/examples/searchguidelink/avatarExample.tsx @@ -12,7 +12,7 @@ export default function Example() { > (null); - - return ( - - - - ' is not assignable to type 'LegacyRef | undefined'. - ref={anchorRef} - color="02" - expandable - href="http://pinterest.com" - onClick={() => setShowOutfits((showing) => !showing)} - text="Outfits" - /> - - - {showOutfits && ( - setShowOutfits(false)} - size="flexible" - > - - - - - - - - - )} - - ); -} diff --git a/docs/pages/web/searchguidelink.tsx b/docs/pages/web/searchguidelink.tsx index 9661902ab2..a77bb0af4e 100644 --- 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) { @@ -291,24 +290,6 @@ Use the \`selected\` prop to indicate that the Searchguide is in a selected stat } /> - - - } - /> - diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx index 8deacdc2dc..a1e2035790 100644 --- 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(function Link( @@ -67,7 +68,6 @@ const InternalLinkWithForwardRef = forwardRef(function fullWidth, href, id, - importedClass, mouseCursor, onClick, onBlur, @@ -116,61 +116,84 @@ const InternalLinkWithForwardRef = forwardRef(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 index aa5635c01b..9d2257b12f 100644 --- 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; } diff --git a/packages/gestalt/src/SearchGuideLink.tsx b/packages/gestalt/src/SearchGuideLink.tsx index 60115ef65b..1f453a175b 100644 --- a/packages/gestalt/src/SearchGuideLink.tsx +++ b/packages/gestalt/src/SearchGuideLink.tsx @@ -2,28 +2,12 @@ import React, { cloneElement, forwardRef, ReactElement, useImperativeHandle, use import classnames from 'classnames'; import Box from './Box'; import Flex from './Flex'; -import focusStyles from './Focus.css'; -import Icon from './Icon'; import InternalLink from './Link/InternalLink'; import styles from './SearchGuide.css'; -import touchableStyles from './TapArea.css'; import TextUI from './TextUI'; -import useFocusVisible from './useFocusVisible'; import useInExperiment from './useInExperiment'; type Props = { - /** - * Specifies the id of an associated element (or elements) whose contents or visibility are controlled by SearchGuideLink so that screen reader users can identify the relationship between elements. - */ - accessibilityControls?: string; - /** - * Indicates that SearchGuideLink hides or exposes collapsible components and exposes whether they are currently expanded or collapsed. - */ - accessibilityExpanded?: boolean; - /** - * Indicates that a component controls the appearance of interactive popup elements, such as menu or dialog. See the [Accessibility guidelines](https://gestalt.pinterest.systems/web/searchguide#ARIA-attributes) for details on proper usage. - */ - accessibilityHaspopup?: boolean; /** * Label for screen readers to announce SearchGuideLink. See the [Accessibility guidelines](https://gestalt.pinterest.systems/web/searchguide#ARIA-attributes) for details on proper usage. */ @@ -37,10 +21,6 @@ type Props = { * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop. */ dataTestId?: string; - /** - * Indicates that the SearchGuideLink is expandable. See the [expandable variant](https://gestalt.pinterest.systems/web/searchguide#Expandable) to learn more. - */ - expandable?: boolean; /** * Toggles between binary states: on/off, selected/unselected, open/closed. See the [selected](#Selected-state) variant to learn more. See the [state variant](https://gestalt.pinterest.systems/web/searchguide#State) for details on proper usage. */ @@ -89,22 +69,18 @@ type Props = { }; /** - * [SearchGuideLink](https://gestalt.pinterest.systems/web/searchguide) appends and refines a search query. They appear under [SearchField](/web/searchfield) after user submits a search input. + * [SearchGuideLink](https://gestalt.pinterest.systems/web/searchguidelink) appends and refines a search query. They appear under [SearchField](/web/searchfield) after user submits a search input. * * ![SearchGuideLink light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/SearchGuideLink.spec.ts-snapshots/SearchGuideLink-chromium-darwin.png) * ![SearchGuideLink dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/SearchGuideLink-dark.spec.ts-snapshots/SearchGuideLink-dark-chromium-darwin.png) * */ -const SearchGuideLinkWithForwardRef = forwardRef(function SearchGuideLink( +const SearchGuideLinkWithForwardRef = forwardRef(function SearchGuide( { - accessibilityControls, - accessibilityExpanded, - accessibilityHaspopup, accessibilityLabel, color = '01', dataTestId, - expandable, onClick, selected = false, text, @@ -127,20 +103,6 @@ const SearchGuideLinkWithForwardRef = forwardRef(funct // that renders to call inputRef.current.focus() // @ts-expect-error - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLButtonElement'. useImperativeHandle(ref, () => innerRef.current); - const { isFocusVisible } = useFocusVisible(); - - const buttonClasses = isInVRExperiment - ? classnames(styles.searchguideVr, touchableStyles.tapTransition, { - [styles[`color${color}`]]: !selected, - [focusStyles.hideOutline]: !isFocusVisible, - [styles.vrFocused]: isFocusVisible, - [styles.selectedVr]: selected, - }) - : classnames(styles.searchguide, touchableStyles.tapTransition, [styles[`color${color}`]], { - [styles.selected]: selected, - [focusStyles.hideOutline]: !isFocusVisible && !selected, - [focusStyles.accessibilityOutline]: isFocusVisible, - }); const childrenDivClasses = classnames(styles.childrenDiv); const textComponent = ( @@ -180,16 +142,12 @@ const SearchGuideLinkWithForwardRef = forwardRef(funct )} {'icon' in thumbnail && {cloneElement(thumbnail.icon)}} {textComponent} - {expandable ? : null} ); const defaultVariant = ( {textComponent} - {expandable ? ( - - ) : null} ); @@ -212,25 +170,17 @@ const SearchGuideLinkWithForwardRef = forwardRef(funct -
- {thumbnail ? thumbnailVariant : defaultVariant} -
+
{thumbnail ? thumbnailVariant : defaultVariant}
 ); });