more

pinterest · Oct 1, 2024 · c5dc154 · c5dc154
1 parent 05183a6
commit c5dc154
Show file tree

Hide file tree

Showing 16 changed files with 174 additions and 59 deletions.
diff --git a/docs/examples/buttonlink/colors.tsx b/docs/examples/buttonlink/colors.tsx
@@ -4,25 +4,40 @@ export default function Example() {
   return (
     <Box padding={4}>
       <Flex gap={6} height="100%" width="100%" wrap>
-        {['gray', 'red', 'blue', 'transparent'].map((color) => (
-          <Flex key={color} direction="column" gap={2}>
-            <Box
-              alignItems="center"
-              borderStyle="sm"
-              display="flex"
-              height={200}
-              justifyContent="center"
-              rounding={4}
-              width={200}
-            >
-              {/* @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"gray" | "red" | "white" | "transparent" | "blue" | "semiTransparentWhite" | "transparentWhiteText" | undefined'. */}
-              <ButtonLink color={color} href="" iconEnd="visit" size="lg" text="Visit" />
-            </Box>
-            <Text size="200" weight="bold">
-              color=&quot;{color}&quot;
-            </Text>
-          </Flex>
-        ))}
+        {['gray', 'red', 'blue', 'transparent'].map((color) => {
+
+          const colorCopy: 'gray' | 'red' | 'blue' | 'transparent' = color as
+            | 'gray'
+            | 'red'
+            | 'blue'
+            | 'transparent';
+
+          return (
+            <Flex key={color} direction="column" gap={2}>
+              <Box
+                alignItems="center"
+                borderStyle="sm"
+                display="flex"
+                height={200}
+                justifyContent="center"
+                rounding={4}
+                width={200}
+              >
+                <ButtonLink
+                  color={colorCopy}
+                  href="https://pinterest.com"
+                  iconEnd="visit"
+                  onClick={({ event }) => event.preventDefault()}
+                  size="lg"
+                  text="Visit"
+                />
+              </Box>
+              <Text size="200" weight="bold">
+                {/* color=&quot;{color}&quot; */}
+              </Text>
+            </Flex>
+          );
+        })}
       </Flex>
     </Box>
   );

diff --git a/docs/examples/buttonlink/defaultStateExample.tsx b/docs/examples/buttonlink/defaultStateExample.tsx
@@ -7,6 +7,7 @@ export default function Example() {
         accessibilityLabel="Visit Pinterest"
         color="red"
         href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Visit Pinterest"
       />

diff --git a/docs/examples/buttonlink/disabledStateExample.tsx b/docs/examples/buttonlink/disabledStateExample.tsx
@@ -7,6 +7,7 @@ export default function Example() {
         accessibilityLabel="Go back"
         disabled
         href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Go back"
       />

diff --git a/docs/examples/buttonlink/iconEndExample.tsx b/docs/examples/buttonlink/iconEndExample.tsx
@@ -8,6 +8,7 @@ export default function Example() {
         href="https://www.pinterest.com/"
         iconEnd="visit"
         iconStart="sparkle"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Visit AI solution"
       />

diff --git a/docs/examples/buttonlink/iconTooltipToExplainDo.tsx b/docs/examples/buttonlink/iconTooltipToExplainDo.tsx
@@ -7,6 +7,7 @@ export default function Example() {
         color="red"
         disabled
         href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Visit Pinterest"
       />

diff --git a/docs/examples/buttonlink/iconTooltipToExplainDont.tsx b/docs/examples/buttonlink/iconTooltipToExplainDont.tsx
@@ -8,6 +8,7 @@ export default function Example() {
           color="red"
           disabled
           href="https://www.pinterest.com/"
+          onClick={({ event }) => event.preventDefault()}
           size="lg"
           text="Go back"
         />

diff --git a/docs/examples/buttonlink/localizationLabels.tsx b/docs/examples/buttonlink/localizationLabels.tsx
@@ -14,8 +14,9 @@ export default function Example() {
       <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
         <ButtonLink
           color="red"
-          href="https://pinterest.com"
+          href="https://www.pinterest.com/"
           iconEnd="visit"
+          onClick={({ event }) => event.preventDefault()}
           size="lg"
           text="Besuchen Sie Pinterest"
         />

diff --git a/docs/examples/buttonlink/main.tsx b/docs/examples/buttonlink/main.tsx
@@ -8,6 +8,7 @@ export default function Example() {
         color="red"
         href="https://pinterest.com"
         iconEnd="visit"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Visit Pinterest"
       />

diff --git a/docs/examples/buttonlink/placePrimaryButtonDo.tsx b/docs/examples/buttonlink/placePrimaryButtonDo.tsx
@@ -22,14 +22,16 @@ export default function Example() {
           <ButtonLink
             color="red"
             fullWidth
-            href="https://gestalt.pinterest.systems/"
+            href="https://www.pinterest.com/"
+            onClick={({ event }) => event.preventDefault()}
             size="lg"
             text="Learn more"
           />
           <ButtonLink
             color="gray"
             fullWidth
             href="https://gestalt.pinterest.systems/get_started/developers/installation"
+            onClick={({ event }) => event.preventDefault()}
             size="lg"
             text="Install now"
           />

diff --git a/docs/examples/buttonlink/placePrimaryButtonDont.tsx b/docs/examples/buttonlink/placePrimaryButtonDont.tsx
@@ -4,8 +4,20 @@ export default function Example() {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <ButtonGroup>
-        <ButtonLink color="red" href="pinterest.com" size="lg" text="Visit" />
-        <ButtonLink color="red" href="pinterest.com" size="lg" text="Save" />
+        <ButtonLink
+          color="red"
+          href="https://www.pinterest.com/"
+          onClick={({ event }) => event.preventDefault()}
+          size="lg"
+          text="Visit"
+        />
+        <ButtonLink
+          color="red"
+          href="https://www.pinterest.com/"
+          onClick={({ event }) => event.preventDefault()}
+          size="lg"
+          text="Save"
+        />
       </ButtonGroup>
     </Flex>
   );

diff --git a/docs/examples/buttonlink/relAndTargetExample.tsx b/docs/examples/buttonlink/relAndTargetExample.tsx
@@ -5,8 +5,9 @@ export default function Example() {
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <ButtonLink
         accessibilityLabel="Visit Pinterest"
-        href="#"
+        href="https://www.pinterest.com/"
         iconEnd="visit"
+        onClick={({ event }) => event.preventDefault()}
         rel="nofollow"
         size="lg"
         target="blank"

diff --git a/docs/examples/buttonlink/showFullTextDo.tsx b/docs/examples/buttonlink/showFullTextDo.tsx
@@ -15,13 +15,15 @@ export default function Example() {
         color="red"
         fullWidth
         href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="Create account"
       />
       <ButtonLink
         color="gray"
         fullWidth
         href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
         size="lg"
         text="View settings"
       />

diff --git a/docs/examples/buttonlink/showFullTextDont.tsx b/docs/examples/buttonlink/showFullTextDont.tsx
@@ -9,8 +9,20 @@ export default function Example() {
       justifyContent="center"
       width="100%"
     >
-      <ButtonLink color="gray" href="https://www.pinterest.com/" size="lg" text="Kontoeinst..." />
-      <ButtonLink color="red" href="https://www.pinterest.com/" size="lg" text="Neues We..." />
+      <ButtonLink
+        color="gray"
+        href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
+        size="lg"
+        text="Kontoeinst..."
+      />
+      <ButtonLink
+        color="red"
+        href="https://www.pinterest.com/"
+        onClick={({ event }) => event.preventDefault()}
+        size="lg"
+        text="Neues We..."
+      />
     </Flex>
   );
 }
diff --git a/docs/examples/buttonlink/washColors.tsx b/docs/examples/buttonlink/washColors.tsx
@@ -4,28 +4,41 @@ export default function Example() {
   return (
     <Box padding={4}>
       <Flex gap={6} height="100%" width="100%" wrap>
-        {['semiTransparentWhite', 'transparentWhiteText', 'white'].map((color) => (
-          <Flex key={color} direction="column" gap={2}>
-            <Box
-              alignItems="center"
-              borderStyle="sm"
-              dangerouslySetInlineStyle={{
-                __style: { backgroundImage: 'url("https://i.ibb.co/d0pQsJz/stock3.jpg")' },
-              }}
-              display="flex"
-              height={200}
-              justifyContent="center"
-              rounding={4}
-              width={200}
-            >
-              {/* @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"gray" | "red" | "white" | "transparent" | "blue" | "semiTransparentWhite" | "transparentWhiteText" | undefined'. */}
-              <ButtonLink color={color} href="" iconEnd="visit" size="lg" text="Visit" />
-            </Box>
-            <Text size="200" weight="bold">
-              color=&quot;{color}&quot;
-            </Text>
-          </Flex>
-        ))}
+        {['semiTransparentWhite', 'transparentWhiteText', 'white'].map((color) => {
+          const colorCopy: 'semiTransparentWhite' | 'transparentWhiteText' | 'white' = color as
+            | 'semiTransparentWhite'
+            | 'transparentWhiteText'
+            | 'white';
+
+          return (
+            <Flex key={color} direction="column" gap={2}>
+              <Box
+                alignItems="center"
+                borderStyle="sm"
+                dangerouslySetInlineStyle={{
+                  __style: { backgroundImage: 'url("https://i.ibb.co/d0pQsJz/stock3.jpg")' },
+                }}
+                display="flex"
+                height={200}
+                justifyContent="center"
+                rounding={4}
+                width={200}
+              >
+                <ButtonLink
+                  color={colorCopy}
+                  href="https://www.pinterest.com/"
+                  iconEnd="visit"
+                  onClick={({ event }) => event.preventDefault()}
+                  size="lg"
+                  text="Visit"
+                />
+              </Box>
+              <Text size="200" weight="bold">
+                color=&quot;{color}&quot;
+              </Text>
+            </Flex>
+          );
+        })}
       </Flex>
     </Box>
   );

diff --git a/packages/gestalt/src/ButtonLink.tsx b/packages/gestalt/src/ButtonLink.tsx
@@ -8,6 +8,8 @@ import Icon from './Icon';
 import icons from './icons/index';
 import InternalLink from './Link/InternalLink';
 import Text from './Text';
+import TextUI from './TextUI';
+import useInExperiment from './useInExperiment';
 
 const DEFAULT_TEXT_COLORS = {
   blue: 'inverse',
@@ -49,6 +51,11 @@ type ButtonProps = {
    * Indicates if ButtonLink is disabled. Disabled Buttons are inactive and cannot be interacted with.
    */
   disabled?: boolean;
+  /**
+   * Indicates whether this component is hosted in a light or dark container.
+   * Used for improving focus ring color contrast.
+   */
+  focusColor?: 'lightBackground' | 'darkBackground';
   /**
    * An icon displayed after the text to help clarify the usage of ButtonLink. See the [icon variant](#Icons) to learn more.
    */
@@ -111,6 +118,7 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
     color = 'gray',
     dataTestId,
     disabled = false,
+    focusColor,
     fullWidth = false,
     iconEnd,
     iconStart,
@@ -124,13 +132,26 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
   }: ButtonProps,
   ref,
 ) {
+  const textSizesVR: {
+    [key: string]: 'xs' | 'sm' | 'md';
+  } = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+  };
+
   const innerRef = useRef<null | HTMLAnchorElement>(null);
 
   // When using both forwardRef and innerRef, React.useimperativehandle() allows a parent component
   // that renders <ButtonLink ref={inputRef} /> to call inputRef.current.focus()
   // @ts-expect-error - TS2322 - Type 'HTMLAnchorElement | null' is not assignable to type 'HTMLAnchorElement'.
   useImperativeHandle(ref, () => innerRef.current);
 
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   const { accessibilityNewTabLabel } = useDefaultLabelContext('Link');
 
   const { colorSchemeName } = useColorScheme();
@@ -170,6 +191,7 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
       colorClass={colorClass}
       dataTestId={dataTestId}
       disabled={disabled}
+      focusColor={focusColor}
       fullWidth={fullWidth}
       href={href}
       onClick={handleClick}
@@ -189,15 +211,21 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
             size={SIZE_NAME_TO_PIXEL[size]}
           />
         ) : null}
-        <Text
-          align="center"
-          color={textColor}
-          overflow="normal"
-          size={size === 'sm' ? '200' : '300'}
-          weight="bold"
-        >
-          {text}
-        </Text>
+        {isInVRExperiment ? (
+          <TextUI align="center" color={textColor} overflow="normal" size={textSizesVR[size]}>
+            {text}
+          </TextUI>
+        ) : (
+          <Text
+            align="center"
+            color={textColor}
+            overflow="normal"
+            size={size === 'sm' ? '200' : '300'}
+            weight="bold"
+          >
+            {text}
+          </Text>
+        )}
         {iconEnd ? (
           <Icon
             accessibilityLabel=""