icon positioning fixed maybe

cultureamp · Feb 4, 2025 · 295257d · 295257d
1 parent e38498d
commit 295257d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/packages/components/src/Link/Link.module.css b/packages/components/src/Link/Link.module.css
@@ -38,9 +38,10 @@
 
 /* Body parent text size has perfect icon size. Icon is too small on larger text, and too large on smaller text */
 .icon > * {
-  vertical-align: middle;
+  vertical-align: text-bottom;
   font-size: var(--link-font-size, 1em);
   line-height: var(--icon-line-height, 1em);
+  margin-bottom: var(--icon-margin-bottom, -0.1em);
 }
 
 .primary[data-hovered] {
@@ -67,6 +68,7 @@
   --link-font-size: var(--spacing-12);
   --link-line-height: 18px;
   --icon-line-height: 14px;
+  --icon-margin-bottom: 0px;
 }
 
 .small {
@@ -87,7 +89,7 @@
   --link-font-size: var(--spacing-20);
   --link-line-height: 30px;
   --icon-line-height: 24px;
-  --icon-margin-bottom: -2px;
+  --icon-margin-bottom: -1px;
 }
 
 .reversed {

diff --git a/packages/components/src/Link/_docs/Link.stickersheet.stories.tsx b/packages/components/src/Link/_docs/Link.stickersheet.stories.tsx
@@ -23,7 +23,7 @@ const StickerSheetTemplate: StickerSheetStory = {
     <>
       <StickerSheet
         title="Link"
-        headers={['Icon start', 'Icon end', 'Underlined', 'isDisabled']}
+        headers={['Icon start', 'Icon end', 'isUnderlined', 'isDisabled']}
         isReversed={isReversed}
       >
         {variants.map((variant) =>
@@ -33,7 +33,7 @@ const StickerSheetTemplate: StickerSheetStory = {
                 variant={variant}
                 size={size}
                 href={href}
-                underlined={false}
+                isUnderlined={false}
                 isReversed={isReversed ? isReversed : false}
                 isInline={false}
                 icon={<Icon name="add" isPresentational />}
@@ -45,7 +45,7 @@ const StickerSheetTemplate: StickerSheetStory = {
                 variant={variant}
                 size={size}
                 href={href}
-                underlined={false}
+                isUnderlined={false}
                 isReversed={isReversed ? isReversed : false}
                 isInline={false}
                 icon={<Icon name="add" isPresentational />}
@@ -57,7 +57,7 @@ const StickerSheetTemplate: StickerSheetStory = {
                 variant={variant}
                 size={size}
                 href={href}
-                underlined={true}
+                isUnderlined={true}
                 isReversed={isReversed ? isReversed : false}
                 isInline={false}
               >
@@ -67,7 +67,7 @@ const StickerSheetTemplate: StickerSheetStory = {
                 variant={variant}
                 size={size}
                 href={href}
-                underlined={true}
+                isUnderlined={true}
                 isReversed={isReversed ? isReversed : false}
                 isInline={false}
                 isDisabled={true}
@@ -89,7 +89,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               variant={variant}
               size={'small'}
               href={href}
-              underlined={true}
+              isUnderlined={true}
               isReversed={isReversed ? isReversed : false}
               isInline={false}
               data-testid="testid__link-hover"
@@ -100,7 +100,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               variant={variant}
               size={'small'}
               href={href}
-              underlined={true}
+              isUnderlined={true}
               isReversed={isReversed ? isReversed : false}
               isInline={false}
               data-testid="testid__link-focus"
@@ -111,7 +111,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               variant={variant}
               size={'small'}
               href={href}
-              underlined={true}
+              isUnderlined={true}
               isReversed={isReversed ? isReversed : false}
               isInline={false}
               data-testid="testid__link-pressed"