diff --git a/.changeset/plenty-olives-arrive.md b/.changeset/plenty-olives-arrive.md new file mode 100644 index 000000000..c1d86bbdf --- /dev/null +++ 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 index 02e435a92..0e2ecbc4d 100644 --- a/packages/icons/src/FlairIcon.tsx +++ b/packages/icons/src/FlairIcon.tsx @@ -10,7 +10,7 @@ type FlairIconProps = Omit, 'className'> & { 'data-test-id'?: string; gradient?: 'purpleToBlue' | 'yellowToCyan' | 'pinkToPurple' | 'cyanToBlue' | 'cyanToPurple'; isRounded?: boolean; - children: ReactElement>; + children: ReactElement; }; 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, { - 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 index 09652503b..b3bd803cc 100644 --- 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; }