chore(icon): remove fixed size for inner icon in FlairIcon and absolu… (

#1001) * chore(icon): remove fixed size for inner icon in FlairIcon and absolute positioning * chore(icon): makes FlairIcon responsive to inner icon, removes icon size constraints
launchdarkly · Sep 18, 2023 · a570a53 · a570a53
1 parent b77df3f
commit a570a53
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/.changeset/plenty-olives-arrive.md b/.changeset/plenty-olives-arrive.md
@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/icons': patch
+'@launchpad-ui/core': patch
+---
+
+[Icons] Removes absolute positioning and fixed sizing for inner icon of FlairIcon
diff --git a/packages/icons/src/FlairIcon.tsx b/packages/icons/src/FlairIcon.tsx
@@ -10,7 +10,7 @@ type FlairIconProps = Omit<ComponentProps<'div'>, 'className'> & {
   'data-test-id'?: string;
   gradient?: 'purpleToBlue' | 'yellowToCyan' | 'pinkToPurple' | 'cyanToBlue' | 'cyanToPurple';
   isRounded?: boolean;
-  children: ReactElement<Omit<IconProps, 'size'>>;
+  children: ReactElement<IconProps>;
 };
 
 const FlairIcon = ({
@@ -20,9 +20,19 @@ const FlairIcon = ({
   gradient = 'purpleToBlue',
   ...props
 }: FlairIconProps) => {
+  const getIconSize = () => {
+    let iconSize: IconProps['size'] = children.props.size;
+
+    if (!iconSize) {
+      iconSize = 'medium';
+    }
+
+    return iconSize;
+  };
+
   const icon = cloneElement(children as ReactElement<IconProps>, {
-    size: 'medium',
     className: styles.flairIcon,
+    size: getIconSize(),
   });
 
   const classes = cx(styles.flairIconContainer, styles[gradient], isRounded && styles.isRounded);

diff --git a/packages/icons/src/styles/Icon.module.css b/packages/icons/src/styles/Icon.module.css
@@ -56,11 +56,6 @@
   display: block;
 }
 
-.flairIcon {
-  width: 2.4rem;
-  height: 2.4rem;
-}
-
 .flairIcon svg {
   fill: white;
 }
@@ -94,10 +89,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 0;
-  position: absolute;
-  width: 4.5rem;
-  height: 4.5rem;
-  left: 2.4rem;
-  top: 2.4rem;
+  padding: var(--lp-spacing-400);
+  width: fit-content;
+  height: fit-content;
 }