From c76e3eac93009c3f04e0feed4ca625f9cf6f7b89 Mon Sep 17 00:00:00 2001
From: Dominique Clarke <doclarke71@gmail.com>
Date: Fri, 14 May 2021 12:19:31 -0400
Subject: [PATCH] [Observability] [Exploratory view] update v7 button styles
 (#100113)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../series_builder/columns/data_types_col.tsx             | 8 ++++++--
 .../series_builder/columns/report_types_col.tsx           | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx
index 9d15206db1e62..b64fad51e9778 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx
@@ -40,7 +40,7 @@ export function DataTypesCol({ seriesId }: { seriesId: string }) {
     <FlexGroup direction="column" gutterSize="xs">
       {dataTypes.map(({ id: dataTypeId, label }) => (
         <EuiFlexItem key={dataTypeId}>
-          <EuiButton
+          <Button
             size="s"
             iconSide="right"
             iconType="arrowRight"
@@ -53,7 +53,7 @@ export function DataTypesCol({ seriesId }: { seriesId: string }) {
             }}
           >
             {label}
-          </EuiButton>
+          </Button>
         </EuiFlexItem>
       ))}
     </FlexGroup>
@@ -63,3 +63,7 @@ export function DataTypesCol({ seriesId }: { seriesId: string }) {
 const FlexGroup = styled(EuiFlexGroup)`
   width: 100%;
 `;
+
+const Button = styled(EuiButton)`
+  will-change: transform;
+`;
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx
index 9c95b3874c242..bd82d1d1bd500 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx
@@ -41,7 +41,7 @@ export function ReportTypesCol({ seriesId, reportTypes }: Props) {
     <FlexGroup direction="column" gutterSize="xs">
       {reportTypes.map(({ id: reportType, label }) => (
         <EuiFlexItem key={reportType}>
-          <EuiButton
+          <Button
             fullWidth
             size="s"
             iconSide="right"
@@ -67,7 +67,7 @@ export function ReportTypesCol({ seriesId, reportTypes }: Props) {
             }}
           >
             {label}
-          </EuiButton>
+          </Button>
         </EuiFlexItem>
       ))}
     </FlexGroup>
@@ -84,3 +84,7 @@ export const SELECTED_DATA_TYPE_FOR_REPORT = i18n.translate(
 const FlexGroup = styled(EuiFlexGroup)`
   width: 100%;
 `;
+
+const Button = styled(EuiButton)`
+  will-change: transform;
+`;