From b66d875776b5781afcb0bc8b770c58a529d21044 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Tue, 4 Oct 2022 10:28:47 -0400
Subject: [PATCH] Updated a few EuiButton, EuiButtonEmpty, and EuiText
 components that set the color as ghost. The ghost color mode has been
 deprecated as of PR #6150. These components now are wrapped in
 EuiThemeProvider with a dark colorMode to create the previous ghost color.

---
 .../components/footer/page_controls.tsx       | 77 +++++++++++--------
 .../shareable_runtime/test/selectors.ts       |  2 +-
 .../components/policy_form_layout.tsx         | 23 +++---
 3 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx
index a1fd4fb70ef809..d0b3e4b9a111b0 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx
@@ -6,7 +6,14 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+  EuiText,
+  EuiThemeProvider,
+} from '@elastic/eui';
 
 import {
   useCanvasShareableState,
@@ -53,39 +60,41 @@ export const PageControlsComponent: FC<Props> = ({
 
   return (
     <EuiFlexGroup alignItems="center" gutterSize="none" style={{ margin: '0 12px' }}>
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          color="ghost"
-          data-test-subj="pageControlsPrevPage"
-          onClick={() => onSetPageNumber(page - 1)}
-          iconType="arrowLeft"
-          disabled={currentPage <= 1}
-          aria-label="Previous Page"
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          color="ghost"
-          size="s"
-          onClick={onToggleScrubber}
-          data-test-subj="pageControlsCurrentPage"
-        >
-          <EuiText color="ghost" size="s">
-            Page {currentPage}
-            {totalPages > 1 ? ` of ${totalPages}` : null}
-          </EuiText>
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          color="ghost"
-          data-test-subj="pageControlsNextPage"
-          onClick={() => onSetPageNumber(page + 1)}
-          iconType="arrowRight"
-          disabled={currentPage >= totalPages}
-          aria-label="Next Page"
-        />
-      </EuiFlexItem>
+      <EuiThemeProvider colorMode="dark">
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color="text"
+            data-test-subj="pageControlsPrevPage"
+            onClick={() => onSetPageNumber(page - 1)}
+            iconType="arrowLeft"
+            disabled={currentPage <= 1}
+            aria-label="Previous Page"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            color="text"
+            size="s"
+            onClick={onToggleScrubber}
+            data-test-subj="pageControlsCurrentPage"
+          >
+            <EuiText color="text" size="s">
+              Page {currentPage}
+              {totalPages > 1 ? ` of ${totalPages}` : null}
+            </EuiText>
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color="text"
+            data-test-subj="pageControlsNextPage"
+            onClick={() => onSetPageNumber(page + 1)}
+            iconType="arrowRight"
+            disabled={currentPage >= totalPages}
+            aria-label="Next Page"
+          />
+        </EuiFlexItem>
+      </EuiThemeProvider>
     </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/canvas/shareable_runtime/test/selectors.ts b/x-pack/plugins/canvas/shareable_runtime/test/selectors.ts
index 8f28b79a88b669..cb625015f634fc 100644
--- a/x-pack/plugins/canvas/shareable_runtime/test/selectors.ts
+++ b/x-pack/plugins/canvas/shareable_runtime/test/selectors.ts
@@ -32,7 +32,7 @@ export const getAutoplayTextField = (wrapper: ReactWrapper) =>
   getAutoplayPanel(wrapper).find('EuiFieldText').find('input[type="text"]');
 
 export const getAutoplaySubmit = (wrapper: ReactWrapper) =>
-  getAutoplayPanel(wrapper).find('EuiButton');
+  getAutoplayPanel(wrapper).find('EuiButton button');
 
 export const getSettingsPanel = (wrapper: ReactWrapper) =>
   wrapper.find('Settings > SettingsComponent');
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
index 0b9ab7bf8691e6..e2a77dd5caa2eb 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
@@ -14,6 +14,7 @@ import {
   EuiLoadingSpinner,
   EuiBottomBar,
   EuiSpacer,
+  EuiThemeProvider,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -153,16 +154,18 @@ export const PolicyFormLayout = React.memo(() => {
       <EuiBottomBar paddingSize="s">
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              color="ghost"
-              onClick={handleCancelOnClick}
-              data-test-subj="policyDetailsCancelButton"
-            >
-              <FormattedMessage
-                id="xpack.securitySolution.endpoint.policy.details.cancel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
+            <EuiThemeProvider colorMode="dark">
+              <EuiButtonEmpty
+                color="text"
+                onClick={handleCancelOnClick}
+                data-test-subj="policyDetailsCancelButton"
+              >
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.policy.details.cancel"
+                  defaultMessage="Cancel"
+                />
+              </EuiButtonEmpty>
+            </EuiThemeProvider>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton