observability - exploratory view - update v7 button styles

elastic · May 14, 2021 · 3148e7e · 3148e7e
1 parent bc2b846
commit 3148e7e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/...ility/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx b/...ility/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/...ity/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx b/...ity/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;
+`;