Remove ghost color from EUI buttons

elastic · Oct 18, 2023 · e7c29fd · e7c29fd
1 parent 0e7f309
commit e7c29fd
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 103 deletions.
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -41,17 +41,6 @@ exports[`EuiButton props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButton props color ghost is rendered 1`] = `
-<button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    class="emotion-euiButtonDisplayContent"
-  />
-</button>
-`;
-
 exports[`EuiButton props color primary is rendered 1`] = `
 <button
   class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -27,10 +27,9 @@ import {
   EuiButtonDisplayCommonProps,
   isButtonDisabled,
 } from './button_display/_button_display';
-import { EuiThemeProvider } from '../../services';
 
-export const COLORS = [...BUTTON_COLORS, 'ghost'] as const;
-export type EuiButtonColor = _EuiButtonColor | 'ghost';
+export const COLORS = BUTTON_COLORS;
+export type EuiButtonColor = _EuiButtonColor;
 
 export const SIZES = ['s', 'm'] as const;
 export type EuiButtonSize = (typeof SIZES)[number];
@@ -43,7 +42,6 @@ interface BaseProps {
   fill?: boolean;
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
   color?: EuiButtonColor;
   /**
@@ -103,22 +101,13 @@ export const EuiButton: FunctionComponent<Props> = (props) => {
 
   const buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base',
-  })[color === 'ghost' ? 'text' : color];
+  })[color];
 
   const buttonFocusStyle = useEuiButtonFocusCSS();
 
   const classes = classNames('euiButton', className);
   const cssStyles = [buttonColorStyles, buttonFocusStyle];
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButton {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   return (
     <EuiButtonDisplay
       className={classes}

diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -49,21 +49,6 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
-<button
-  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-  >
-    <span
-      class="eui-textTruncate euiButtonEmpty__text"
-    />
-  </span>
-</button>
-`;
-
 exports[`EuiButtonEmpty props color primary is rendered 1`] = `
 <button
   class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"

diff --git a/src/components/button/button_empty/button_empty.test.tsx b/src/components/button/button_empty/button_empty.test.tsx
@@ -88,12 +88,6 @@ describe('EuiButtonEmpty', () => {
           expect(container.firstChild).toMatchSnapshot();
         });
       });
-
-      test('ghost is rendered', () => {
-        const { container } = render(<EuiButtonEmpty color={'ghost'} />);
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
     });
 
     describe('size', () => {

diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
@@ -15,11 +15,7 @@ import {
   PropsForAnchor,
   PropsForButton,
 } from '../../common';
-import {
-  useEuiTheme,
-  EuiThemeProvider,
-  getSecureRelForTarget,
-} from '../../../services';
+import { useEuiTheme, getSecureRelForTarget } from '../../../services';
 
 import {
   EuiButtonDisplayContent,
@@ -50,9 +46,8 @@ export interface CommonEuiButtonEmptyProps
     CommonProps {
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
-  color?: _EuiButtonColor | 'ghost';
+  color?: _EuiButtonColor;
   size?: EuiButtonEmptySizes;
   /**
    * Ensure the text of the button sits flush to the left, right, or both sides of its container
@@ -124,7 +119,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = (
     isLoading,
   });
 
-  const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
+  const color = isDisabled ? 'disabled' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty',
   });
@@ -140,15 +135,6 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = (
     isDisabled && styles.isDisabled,
   ];
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButtonEmpty {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   const classes = classNames('euiButtonEmpty', className);
 
   const contentClassNames = classNames(

diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -46,21 +46,6 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButtonIcon props color ghost is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="euiButtonIcon__icon"
-    color="inherit"
-    data-euiicon-type="user"
-  />
-</button>
-`;
-
 exports[`EuiButtonIcon props color primary is rendered 1`] = `
 <button
   aria-label="button"

diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
@@ -80,14 +80,6 @@ describe('EuiButtonIcon', () => {
           expect(container.firstChild).toMatchSnapshot();
         });
       });
-
-      test('ghost is rendered', () => {
-        const { container } = render(
-          <EuiButtonIcon iconType="user" aria-label="button" color={'ghost'} />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
     });
 
     describe('display', () => {

diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -14,11 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import {
-  EuiThemeProvider,
-  getSecureRelForTarget,
-  useEuiTheme,
-} from '../../../services';
+import { getSecureRelForTarget, useEuiTheme } from '../../../services';
 import {
   CommonProps,
   ExclusiveUnion,
@@ -48,9 +44,8 @@ export interface EuiButtonIconProps extends CommonProps {
   iconType: IconType;
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
-  color?: _EuiButtonColor | 'ghost';
+  color?: _EuiButtonColor;
   'aria-label'?: string;
   'aria-labelledby'?: string;
   isDisabled?: boolean;
@@ -142,7 +137,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
     );
   }
 
-  const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
+  const color = isDisabled ? 'disabled' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({ display });
   const buttonFocusStyle = useEuiButtonFocusCSS();
 
@@ -160,15 +155,6 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
 
   const classes = classNames('euiButtonIcon', className);
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButtonIcon {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   // Add an icon to the button if one exists.
   let buttonIcon;