[ML] Switch to EuiTitle for influencers list and data viz cards

elastic · Feb 5, 2020 · 6f1de6b · 6f1de6b
1 parent 365e183
commit 6f1de6b
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 41 deletions.
diff --git a/...k/legacy/plugins/ml/public/application/components/influencers_list/_influencers_list.scss b/...k/legacy/plugins/ml/public/application/components/influencers_list/_influencers_list.scss
@@ -1,12 +1,6 @@
 .ml-influencers-list {
   line-height: 1.45; // SASSTODO: Calc proper value
 
-  .influencer-title {
-    font-size: $euiFontSizeM - 2px;
-    font-weight: 600;
-    line-height: 24px;
-  }
-
   .field-label {
     font-size: $euiFontSizeXS;
     text-align: left;

diff --git a/x-pack/legacy/plugins/ml/public/application/components/influencers_list/influencers_list.js b/x-pack/legacy/plugins/ml/public/application/components/influencers_list/influencers_list.js
@@ -114,11 +114,7 @@ function InfluencersByName({ influencerFieldName, influencerFilter, fieldValues
 
   return (
     <React.Fragment key={influencerFieldName}>
-      <EuiTitle
-        size="xs"
-        className="influencer-title"
-        data-test-subj={`mlInfluencerFieldName ${influencerFieldName}`}
-      >
+      <EuiTitle size="xs" data-test-subj={`mlInfluencerFieldName ${influencerFieldName}`}>
         <h3>{influencerFieldName}</h3>
       </EuiTitle>
       <EuiSpacer size="xs" />

diff --git a/...c/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss b/...c/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
@@ -102,8 +102,6 @@
   }
 
   .mlFieldDataCard__valuesTitle {
-    @include fontSize($euiFontSizeXS - 1px);
-    font-weight: 700;
     text-transform: uppercase;
   }
 }
diff --git a/...n/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx b/...n/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FC } from 'react';
-import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { Axis, BarSeries, Chart, Settings } from '@elastic/charts';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -50,12 +50,14 @@ export const BooleanContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiSpacer size="m" />
 
       <div>
-        <EuiText className="mlFieldDataCard__valuesTitle">
-          <FormattedMessage
-            id="xpack.ml.fieldDataCard.cardBoolean.valuesLabel"
-            defaultMessage="Values"
-          />
-        </EuiText>
+        <EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
+          <span>
+            <FormattedMessage
+              id="xpack.ml.fieldDataCard.cardBoolean.valuesLabel"
+              defaultMessage="Values"
+            />
+          </span>
+        </EuiTitle>
         <EuiSpacer size="xs" />
         <Chart renderer="canvas" className="story-chart" size={{ height: 200 }}>
           <Axis id="bottom" position="bottom" showOverlappingTicks />

diff --git a/...n/datavisualizer/index_based/components/field_data_card/content_types/keyword_content.tsx b/...n/datavisualizer/index_based/components/field_data_card/content_types/keyword_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FC } from 'react';
-import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 // @ts-ignore
 import { formatDate } from '@elastic/eui/lib/services/format';
 
@@ -57,12 +57,14 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiSpacer size="m" />
 
       <div>
-        <EuiText className="mlFieldDataCard__valuesTitle">
-          <FormattedMessage
-            id="xpack.ml.fieldDataCard.cardKeyword.topValuesLabel"
-            defaultMessage="Top values"
-          />
-        </EuiText>
+        <EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
+          <span>
+            <FormattedMessage
+              id="xpack.ml.fieldDataCard.cardKeyword.topValuesLabel"
+              defaultMessage="Top values"
+            />
+          </span>
+        </EuiTitle>
         <EuiSpacer size="xs" />
         <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
       </div>

diff --git a/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx b/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { EuiListGroup, EuiListGroupItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiListGroup, EuiListGroupItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -32,15 +32,17 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
 
   return (
     <div>
-      <EuiText className="mlFieldDataCard__valuesTitle">
-        <FormattedMessage
-          id="xpack.ml.fieldDataCard.cardText.examplesTitle"
-          defaultMessage="{numExamples, plural, one {value} other {examples}}"
-          values={{
-            numExamples: examples.length,
-          }}
-        />
-      </EuiText>
+      <EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
+        <span>
+          <FormattedMessage
+            id="xpack.ml.fieldDataCard.cardText.examplesTitle"
+            defaultMessage="{numExamples, plural, one {value} other {examples}}"
+            values={{
+              numExamples: examples.length,
+            }}
+          />
+        </span>
+      </EuiTitle>
       <EuiSpacer size="s" />
       <EuiListGroup flush={true} showToolTips={true}>
         {examplesContent}

diff --git a/x-pack/legacy/plugins/ml/public/application/explorer/explorer.js b/x-pack/legacy/plugins/ml/public/application/explorer/explorer.js
@@ -385,10 +385,7 @@ export class Explorer extends React.Component {
           )}
 
           {noInfluencersConfigured === false && (
-            <div
-              className="column col-xs-2 euiText"
-              data-test-subj="mlAnomalyExplorerInfluencerList"
-            >
+            <div className="column col-xs-2" data-test-subj="mlAnomalyExplorerInfluencerList">
               <EuiTitle className="panel-title">
                 <h2>
                   <FormattedMessage