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.
elastic · Oct 4, 2022 · b66d875 · b66d875
1 parent 4af2d8e
commit b66d875
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 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
@@ -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
@@ -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/...lution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx b/...lution/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