fix(TextLink): vertical alignment when used in list (#2574)

contentful · Sep 8, 2023 · 21994b4 · 21994b4 · vercel · Sep 8, 2023
1 parent c346611
commit 21994b4
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 3 deletions.
diff --git a/.changeset/spotty-insects-talk.md b/.changeset/spotty-insects-talk.md
@@ -0,0 +1,5 @@
+---
+'@contentful/f36-text-link': patch
+---
+
+fix(TextLink): vertical alignment when used in list
diff --git a/packages/components/text-link/src/TextLink.styles.ts b/packages/components/text-link/src/TextLink.styles.ts
@@ -66,7 +66,7 @@ const textLink = ({
   css({
     display: 'inline-flex',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'baseline',
     boxSizing: 'border-box',
     border: 0,
     padding: 0,
@@ -84,7 +84,6 @@ const textLink = ({
     opacity: isDisabled ? 0.5 : 1,
     ...variantToStyles(variant),
     outline: 'none',
-    verticalAlign: 'bottom',
     '&:focus, &:focus-visible, &:hover': {
       textDecoration: isDisabled ? 'none' : 'underline',
     },

diff --git a/packages/components/text-link/src/TextLink.tsx b/packages/components/text-link/src/TextLink.tsx
@@ -76,7 +76,7 @@ function _TextLink<E extends React.ElementType = typeof TEXT_LINK_DEFAULT_TAG>(
   };
 
   const iconContent = icon ? (
-    <Flex as="span">
+    <Flex as="span" alignSelf="center">
       {React.cloneElement(icon, {
         className: cx(icon.props.className, styles.textLinkIcon()),
         size: 'small',

diff --git a/packages/components/text-link/stories/TextLink.stories.tsx b/packages/components/text-link/stories/TextLink.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, Story } from '@storybook/react/types-6-0';
 import * as icons from '@contentful/f36-icons';
 import { Icon } from '@contentful/f36-icon';
 import { Paragraph, Text } from '@contentful/f36-typography';
+import { List } from '@contentful/f36-list';
 import { Flex } from '@contentful/f36-core';
 import tokens from '@contentful/f36-tokens';
 
@@ -81,6 +82,56 @@ export const UsedWithText = () => {
   );
 };
 
+export const UsedWithList = () => {
+  return (
+    <List>
+      <List.Item>
+        <Text>
+          List item with a link:{' '}
+          <TextLink
+            href="https://contentful.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Contentful
+          </TextLink>{' '}
+          Website
+        </Text>
+      </List.Item>
+      <List.Item>
+        <Text>
+          List item with a link and start icon:{' '}
+          <TextLink
+            href="https://contentful.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<Icon as={icons.ExternalLinkIcon} />}
+            alignIcon="start"
+          >
+            Contentful
+          </TextLink>{' '}
+          Website
+        </Text>
+      </List.Item>
+      <List.Item>
+        <Text>
+          List item with a link and end icon:{' '}
+          <TextLink
+            href="https://contentful.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<Icon as={icons.ExternalLinkIcon} />}
+            alignIcon="end"
+          >
+            Contentful
+          </TextLink>{' '}
+          Website
+        </Text>
+      </List.Item>
+    </List>
+  );
+};
+
 const textLinkVariants = [
   'primary',
   'positive',