From 30ae8998d7cfe421ed778590163cc950da46a790 Mon Sep 17 00:00:00 2001
From: Henry Harding <henry.harding@elastic.co>
Date: Fri, 17 Apr 2020 12:53:34 -0400
Subject: [PATCH] attrs instead of defaultProps on styled components

---
 .../sections/overview/index.tsx               | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
index b760d036803df..05d150fd9ae23 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
@@ -24,7 +24,9 @@ import { useLink, useGetAgentConfigs } from '../../hooks';
 import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components';
 import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../../constants';
 
-const OverviewPanel = styled(EuiPanel)`
+const OverviewPanel = styled(EuiPanel).attrs(props => ({
+  paddingSize: 'm',
+}))`
   header {
     display: flex;
     align-items: center;
@@ -40,11 +42,11 @@ const OverviewPanel = styled(EuiPanel)`
   }
 `;
 
-OverviewPanel.defaultProps = {
-  paddingSize: 'm',
-};
-
-const OverviewStats = styled(EuiDescriptionList)`
+const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
+  compressed: true,
+  textStyle: 'reverse',
+  type: 'column',
+}))`
   & > * {
     margin-top: ${props => props.theme.eui.paddingSizes.s} !important;
 
@@ -55,12 +57,6 @@ const OverviewStats = styled(EuiDescriptionList)`
   }
 `;
 
-OverviewStats.defaultProps = {
-  compressed: true,
-  textStyle: 'reverse',
-  type: 'column',
-};
-
 export const IngestManagerOverview: React.FunctionComponent = () => {
   // Agent enrollment flyout state
   const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);