fix(link): fix multi-line link text-decorations

chanzuckerberg · Oct 19, 2024 · 025991e · 025991e
1 parent 0347225
commit 025991e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 52 deletions.
diff --git a/packages/components/src/core/Link/__storybook__/index.stories.tsx b/packages/components/src/core/Link/__storybook__/index.stories.tsx
@@ -3,6 +3,7 @@ import { BADGE } from "@geometricpanda/storybook-addon-badges";
 import { Link } from "./stories/default";
 import { LINK_EXCLUDED_CONTROLS } from "./constants";
 import { ScreenshotTestDemo } from "./stories/screenshot";
+import { LongerTextDemo } from "./stories/longText";
 
 export default {
   argTypes: {
@@ -38,6 +39,12 @@ export const Default = {
   },
 };
 
+// Longer Text
+
+export const LongerText = {
+  render: () => LongerTextDemo(),
+};
+
 // Screenshot test
 
 export const ScreenshotTest = {

diff --git a/packages/components/src/core/Link/__storybook__/stories/longText.tsx b/packages/components/src/core/Link/__storybook__/stories/longText.tsx
@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import RawLink from "src/core/Link";
+
+export const LongerTextDemo = (): JSX.Element => {
+  return (
+    <>
+      <Typography variant="h4" sx={{ mb: 2 }}>
+        Default Link with Long Text
+      </Typography>
+      <RawLink href="#" sdsStyle="default">
+        {LONG_LOREM_IPSUM}
+      </RawLink>
+
+      <Typography variant="h4" sx={{ mb: 2, mt: 6 }}>
+        Dashed Link with Long Text
+      </Typography>
+      <RawLink href="#" sdsStyle="dashed">
+        {LONG_LOREM_IPSUM}
+      </RawLink>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Link/style.ts b/packages/components/src/core/Link/style.ts
@@ -24,82 +24,43 @@ export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<
 const doNotForwardProps = ["sdsStyle", "sdsSize", "fontWeight"];
 
 const defaultStyle = (props: LinkProps) => {
-  const { sdsSize = "s" } = props;
   const semanticColors = getSemanticColors(props);
 
   return css`
     color: ${semanticColors?.accent?.textAction};
     position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 1px;
-      margin-top: ${sdsSize === "s" ? -4 : -3}px;
-      width: 100%;
-    }
+    text-decoration: none;
+    text-underline-offset: 2.5px;
 
     &:hover {
       color: ${semanticColors?.accent?.textActionHover};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderHover};
-      }
+      text-decoration: underline;
     }
 
     &:focus {
       color: ${semanticColors?.accent?.textActionHover};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderHover};
-      }
+      text-decoration: underline;
     }
 
     &:active {
       color: ${semanticColors?.accent?.textActionPressed};
-
-      &::after {
-        background-color: ${semanticColors?.accent?.borderPressed};
-      }
+      text-decoration: underline;
     }
   `;
 };
 
-const dashedStyle = (props: LinkProps) => {
-  const { sdsSize = "s" } = props;
-  const semanticColors = getSemanticColors(props);
-
+const dashedStyle = () => {
   return css`
     color: inherit;
     position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 1px;
-      margin-top: ${sdsSize === "s" ? -4 : -3}px;
-      margin-left: 1px;
-      width: 100%;
-      background-image: linear-gradient(
-        to right,
-        ${semanticColors?.base?.borderHover} 60%,
-        transparent 60%
-      );
-      background-size: 5px 100%;
-    }
+    text-decoration: underline dashed;
+    text-underline-offset: 2.5px;
 
     &:hover,
-    &:focus {
-      text-decoration: none;
-      &::after {
-        background-image: linear-gradient(
-          to right,
-          ${semanticColors?.base?.borderHover} 60%,
-          ${semanticColors?.base?.borderHover} 60%
-        );
-      }
+    &:focus,
+    &:active,
+    &:focus-visible {
+      text-decoration-style: solid;
     }
   `;
 };
@@ -126,7 +87,7 @@ export const StyledLink = styled(Link, {
 
     return css`
       ${sdsStyle === "default" && defaultStyle(props)}
-      ${sdsStyle === "dashed" && dashedStyle(props)}
+      ${sdsStyle === "dashed" && dashedStyle()}
       ${sdsSize === "s" && smallStyle(props)}
       ${sdsSize === "xs" && extraSmallStyle(props)}