[EuiButton][EuiButtonEmpty][EuiButtonIcon] Remove color="ghost" (#7296

)
elastic · Oct 25, 2023 · c866299 · c866299
1 parent ab6290d
commit c866299
Show file tree

Hide file tree

Showing 19 changed files with 137 additions and 373 deletions.
diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable no-restricted-globals */
 import React, { useState } from 'react';
 
-import { useIsWithinBreakpoints } from '../../../../src/services';
+import {
+  EuiThemeProvider,
+  useIsWithinBreakpoints,
+} from '../../../../src/services';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
@@ -84,16 +87,18 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
   });
 
   const button = (
-    <EuiButton
-      size="s"
-      iconType="arrowDown"
-      iconSide="right"
-      color="ghost"
-      minWidth={0}
-      onClick={onButtonClick}
-    >
-      {isMobileSize ? 'Theme' : currentTheme.text}
-    </EuiButton>
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      <EuiButton
+        size="s"
+        iconType="arrowDown"
+        iconSide="right"
+        color="text"
+        minWidth={0}
+        onClick={onButtonClick}
+      >
+        {isMobileSize ? 'Theme' : currentTheme.text}
+      </EuiButton>
+    </EuiThemeProvider>
   );
 
   return (

diff --git a/src-docs/src/views/bottom_bar/bottom_bar_position.js b/src-docs/src/views/bottom_bar/bottom_bar_position.js
@@ -1,25 +1,23 @@
 import React from 'react';
 
-import { EuiBottomBar, EuiSpacer, EuiText } from '../../../../src/components';
+import { EuiBottomBar, EuiText } from '../../../../src/components';
 
 export default () => {
   return (
-    <>
+    <div css={{ overflow: 'auto', blockSize: 200 }}>
       <EuiText>
         <p>
-          When scrolling past this example block, the{' '}
-          <strong>EuiBottomBar</strong> will stick to the bottom of the browser
-          window (with a 10px offset), but keeps it within the bounds of its
-          parent.
+          When scrolling within this example, the <strong>EuiBottomBar</strong>{' '}
+          will stick to the bottom of scrollable container (with a 10px offset),
+          but will not scroll with the page itself.
         </p>
       </EuiText>
-      <EuiSpacer size="xl" />
-      <EuiSpacer size="xl" />
+      <div css={{ blockSize: 400 }} />
       <EuiBottomBar position="sticky" bottom={10}>
-        <EuiText color="ghost" textAlign="center">
+        <EuiText textAlign="center">
           <p>Scroll to see!</p>
         </EuiText>
       </EuiBottomBar>
-    </>
+    </div>
   );
 };
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
@@ -101,12 +101,6 @@ const splitButtonSnippet = [
 </EuiFlexGroup>`,
 ];
 
-import ButtonGhost from './button_ghost';
-const buttonGhostSource = require('!!raw-loader!./button_ghost');
-const buttonGhostSnippet = `<EuiButton color="ghost">
-  <!-- Button text -->
-</EuiButton>`;
-
 import ButtonAsLink from './button_as_link';
 const buttonAsLinkSource = require('!!raw-loader!./button_as_link');
 const buttonAsLinkSnippet = `<EuiButton href={someUrl}><!-- Button text --></EuiButton>
@@ -703,35 +697,6 @@ export const ButtonExample = {
       props: { EuiButtonGroup, EuiButtonGroupOptionProps },
       demoPanelProps: { color: 'subdued' },
     },
-    {
-      title: 'Ghost vs. dark mode',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: buttonGhostSource,
-        },
-      ],
-      text: (
-        <p>
-          For buttons on dark color backgrounds, it is recommended to wrap the
-          entire area in{' '}
-          <EuiCode language="js">
-            {'<EuiThemeProvider colorMode="dark">'}
-          </EuiCode>{' '}
-          to invert all colors to dark mode. The legacy{' '}
-          <EuiCode language="js">{'color="ghost"'}</EuiCode> now uses this
-          method and is set for deprecation. An example usage of inverted
-          buttons is in combination with{' '}
-          <Link to="/layout/bottom-bar">
-            <strong>EuiBottomBar</strong>
-          </Link>{' '}
-          which already wraps its children in dark mode.
-        </p>
-      ),
-      snippet: buttonGhostSnippet,
-      demo: <ButtonGhost />,
-      demoPanelProps: { paddingSize: 'none' },
-    },
   ],
   guidelines: <Guidelines />,
 };
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
diff --git a/src-docs/src/views/page_template/_page_demo.tsx b/src-docs/src/views/page_template/_page_demo.tsx
@@ -148,7 +148,7 @@ export const PageDemo: FunctionComponent<
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton color="ghost">Share</EuiButton>
+        <EuiButton color="text">Share</EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   ) : undefined;

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;
   /**
@@ -84,55 +82,36 @@ export type Props = ExclusiveUnion<
  * EuiButton is largely responsible for providing relevant props
  * and the logic for element-specific attributes
  */
-export const EuiButton: FunctionComponent<Props> = (props) => {
-  const {
-    className,
-    buttonRef,
-    color: _color = 'primary',
-    fill,
-    ...rest
-  } = props;
-
-  const buttonIsDisabled = isButtonDisabled({
+export const EuiButton: FunctionComponent<Props> = ({
+  className,
+  buttonRef,
+  size = 'm',
+  color = 'primary',
+  fill,
+  ...rest
+}) => {
+  const isDisabled = isButtonDisabled({
     href: rest.href,
     isDisabled: rest.isDisabled || rest.disabled,
     isLoading: rest.isLoading,
   });
 
-  const color = buttonIsDisabled ? 'disabled' : _color;
-
   const buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base',
-  })[color === 'ghost' ? 'text' : color];
+  })[isDisabled ? 'disabled' : 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}
       css={cssStyles}
       ref={buttonRef}
+      size={size}
       {...rest}
     />
   );
 };
-
-EuiButton.displayName = 'EuiButton';
-
-// Use defaultProps for simple pass-through props
-EuiButton.defaultProps = {
-  size: 'm',
-  color: 'primary',
-};
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', () => {