Fix DomNesting error on ML Card Description

EuiText generates a div, but this is inside of an EuiCard which is a paragraph. Defines a span with equivalent styles, instead.
elastic · Jul 14, 2020 · 74d6bcf · 74d6bcf
1 parent 6ef36a7
commit 74d6bcf
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/...rity_solution/public/detections/components/rules/select_rule_type/ml_card_description.tsx b/...rity_solution/public/detections/components/rules/select_rule_type/ml_card_description.tsx
@@ -5,7 +5,8 @@
  */
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText, EuiLink } from '@elastic/eui';
+import { EuiLink } from '@elastic/eui';
+import styled from 'styled-components';
 import React from 'react';
 
 import { ML_TYPE_DESCRIPTION } from './translations';
@@ -15,11 +16,15 @@ interface MlCardDescriptionProps {
   hasValidLicense?: boolean;
 }
 
+const SmallText = styled.span`
+  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
+`;
+
 const MlCardDescriptionComponent: React.FC<MlCardDescriptionProps> = ({
   subscriptionUrl,
   hasValidLicense = false,
 }) => (
-  <EuiText size="s">
+  <SmallText>
     {hasValidLicense ? (
       ML_TYPE_DESCRIPTION
     ) : (
@@ -38,7 +43,7 @@ const MlCardDescriptionComponent: React.FC<MlCardDescriptionProps> = ({
         }}
       />
     )}
-  </EuiText>
+  </SmallText>
 );
 
 MlCardDescriptionComponent.displayName = 'MlCardDescriptionComponent';