[Fleet] Only override settings for badges; not all package icons (#98143)

John Schulz · web-flow · commit b4cd9a63dda8 · 2021-04-24T13:15:38.000-04:00
## Summary fixes #97865 [[Fleet] Bug: Netscout icon breaks the alignment of the integrations page](#97865) <table> <thead><td>7.12</td><td>7.13-SNAPSHOT</td><td>PR</td> <tr><td> <img width="245" alt="Screen Shot 2021-04-23 at 9 48 04 AM" src="https://user-images.githubusercontent.com/57655/115881135-6fb1e800-a419-11eb-9791-58ccc5d2b58b.png"> </td> <td><img width="300" alt="Screen Shot 2021-04-23 at 9 49 19 AM" src="https://user-images.githubusercontent.com/57655/115881137-6fb1e800-a419-11eb-8cc1-c90caf2e1f94.png"> </td> <td> <img width="251" alt="Screen Shot 2021-04-23 at 9 57 04 AM" src="https://user-images.githubusercontent.com/57655/115882009-53627b00-a41a-11eb-81d8-0f61cb0ae607.png"> </td> </tr> </table> Reverts the overly broad changes icon changes from 77b3906 and applies them to the only place they were intended -- badges: <img width="1123" alt="Screen Shot 2021-04-23 at 10 03 18 AM" src="https://user-images.githubusercontent.com/57655/115882898-38443b00-a41b-11eb-886c-f29e2eae2423.png"> <img width="391" alt="Screen Shot 2021-04-23 at 10 03 28 AM" src="https://user-images.githubusercontent.com/57655/115882899-38443b00-a41b-11eb-95d2-dcc18cafb3cc.png">
diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx
@@ -14,18 +14,7 @@ import { usePackageIconType } from '../hooks';
 
 export const PackageIcon: React.FunctionComponent<
   UsePackageIconType & Omit<EuiIconProps, 'type'>
-> = ({ size = 's', packageName, version, icons, tryApi, ...euiIconProps }) => {
+> = ({ packageName, version, icons, tryApi, ...euiIconProps }) => {
   const iconType = usePackageIconType({ packageName, version, icons, tryApi });
-  return (
-    <EuiIcon
-      // when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
-      // this collides with some EuiText (+img) CSS from the EuiIcon component
-      // which  makes the button large, wide, and poorly layed out
-      // override those styles until the bug is fixed or we find a better approach
-      style={{ margin: 'unset', width: 'unset' }}
-      size={size}
-      type={iconType}
-      {...euiIconProps}
-    />
-  );
+  return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx
@@ -71,7 +71,18 @@ export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({
           <EuiBadge key={idx} color="hollow">
             <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
               <EuiFlexItem grow={false}>
-                <PackageIcon packageName={pkg.name} version={pkg.version} size="s" tryApi={true} />
+                <PackageIcon
+                  packageName={pkg.name}
+                  version={pkg.version}
+                  tryApi={true}
+                  style={
+                    // when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
+                    // this collides with some EuiText (+img) CSS from the EuiIcon component
+                    // which  makes the button large, wide, and poorly layed out
+                    // override those styles until the bug is fixed or we find a better approach
+                    { margin: 'unset', width: '16px' }
+                  }
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>{pkg.title}</EuiFlexItem>
             </EuiFlexGroup>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx
