fix(icon): adjust text alignment variant

Kajabi · May 29, 2024 · 91f274b · 91f274b
1 parent efe9475
commit 91f274b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss
@@ -133,8 +133,9 @@ $-icon-beside-type: (
 // various responsive type specs
 //
 @each $type-spec in $-icon-beside-type {
-  .sage-icon--adjacent-type-#{$type-spec} {
-    height: sage-line-height($type-spec);
+  .sage-icon--adjacent-type-#{$type-spec},
+  pds-icon {
+    height: sage-line-height($type-spec) !important;
 
     &::before {
       height: sage-line-height($type-spec);

diff --git a/packages/sage-react/lib/Icon/Icon.story.mdx b/packages/sage-react/lib/Icon/Icon.story.mdx
@@ -127,7 +127,7 @@ The `adjacentType` property can be used to align an icon next to a heading or pa
 <Canvas>
   <Story name="Adjacent Type">
     <div style={{ display: "flex", gap: "16px" }}>
-      <Icon adjacentType="h2" icon="pen" />
+      <Icon adjacentType="h2" icon="pen" size="xl" />
       <h2>This is an H2 headline.</h2>
     </div>
     <div style={{ display: "flex", gap: "16px" }}>