From c866299d97da2c47d2bd6b1fb02f4e9cd92ddd31 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:44:32 -0700
Subject: [PATCH] [EuiButton][EuiButtonEmpty][EuiButtonIcon] Remove
`color="ghost"` (#7296)
---
.../guide_theme_selector.tsx | 27 +++---
.../views/bottom_bar/bottom_bar_position.js | 18 ++--
src-docs/src/views/button/button_example.js | 35 --------
src-docs/src/views/button/button_ghost.js | 84 -------------------
.../src/views/page_template/_page_demo.tsx | 2 +-
.../button/__snapshots__/button.test.tsx.snap | 11 ---
src/components/button/button.tsx | 47 +++--------
.../__snapshots__/button_empty.test.tsx.snap | 15 ----
.../button/button_empty/button_empty.test.tsx | 6 --
.../button/button_empty/button_empty.tsx | 69 ++++++---------
.../__snapshots__/button_icon.test.tsx.snap | 15 ----
.../button/button_icon/button_icon.styles.ts | 2 +-
.../button/button_icon/button_icon.test.tsx | 8 --
.../button/button_icon/button_icon.tsx | 67 ++++++---------
.../__snapshots__/control_bar.test.tsx.snap | 18 ++--
src/components/control_bar/control_bar.tsx | 65 +++++++-------
.../super_update_button.test.tsx.snap | 16 ----
.../__snapshots__/quick_select.test.tsx.snap | 2 -
upcoming_changelogs/7296.md | 3 +
19 files changed, 137 insertions(+), 373 deletions(-)
delete mode 100644 src-docs/src/views/button/button_ghost.js
create mode 100644 upcoming_changelogs/7296.md
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
index 1a9b86a1de2..c3fee11f1ab 100644
--- 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 = (
-
- {isMobileSize ? 'Theme' : currentTheme.text}
-
+
+
+ {isMobileSize ? 'Theme' : currentTheme.text}
+
+
);
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
index 6a96c946440..66855b9c044 100644
--- 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 (
- <>
+
- When scrolling past this example block, the{' '}
- EuiBottomBar 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 EuiBottomBar {' '}
+ will stick to the bottom of scrollable container (with a 10px offset),
+ but will not scroll with the page itself.
-
-
+
-
+
Scroll to see!
- >
+
);
};
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 56ddcfa7840..196852c5ecc 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -101,12 +101,6 @@ const splitButtonSnippet = [
`,
];
-import ButtonGhost from './button_ghost';
-const buttonGhostSource = require('!!raw-loader!./button_ghost');
-const buttonGhostSnippet = `
-
- `;
-
import ButtonAsLink from './button_as_link';
const buttonAsLinkSource = require('!!raw-loader!./button_as_link');
const buttonAsLinkSnippet = `
@@ -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: (
-
- For buttons on dark color backgrounds, it is recommended to wrap the
- entire area in{' '}
-
- {''}
- {' '}
- to invert all colors to dark mode. The legacy{' '}
- {'color="ghost"'} now uses this
- method and is set for deprecation. An example usage of inverted
- buttons is in combination with{' '}
-
- EuiBottomBar
- {' '}
- which already wraps its children in dark mode.
-
- ),
- snippet: buttonGhostSnippet,
- demo: ,
- demoPanelProps: { paddingSize: 'none' },
- },
],
guidelines: ,
};
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
deleted file mode 100644
index eede6912d39..00000000000
--- a/src-docs/src/views/button/button_ghost.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useState } from 'react';
-
-import {
- EuiButton,
- EuiButtonEmpty,
- EuiButtonIcon,
- EuiFlexGroup,
- EuiFlexItem,
- EuiPanel,
-} from '../../../../src/components';
-import { EuiThemeProvider } from '../../../../src/services';
-
-export default () => {
- const [toggle0On, setToggle0On] = useState(false);
-
- const onToggle0Change = () => {
- setToggle0On((isOn) => !isOn);
- };
-
- return (
-
-
-
-
- {}}>
- Ghost
-
-
-
-
- {}}
- >
- Filled
-
-
-
-
- {}}>
- small
-
-
-
-
- {}}
- aria-label="Your account"
- />
-
-
-
-
- Loading…
-
-
-
-
-
- Loading…
-
-
-
-
-
- Toggle me
-
-
-
-
-
- );
-};
diff --git a/src-docs/src/views/page_template/_page_demo.tsx b/src-docs/src/views/page_template/_page_demo.tsx
index f2f94bc6f9f..e2267136592 100644
--- 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<
- Share
+ Share
) : undefined;
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index e5a199790ef..5a20f9ae36d 100644
--- 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`] = `
`;
-exports[`EuiButton props color ghost is rendered 1`] = `
-
-
-
-`;
-
exports[`EuiButton props color primary is rendered 1`] = `
= (props) => {
- const {
- className,
- buttonRef,
- color: _color = 'primary',
- fill,
- ...rest
- } = props;
-
- const buttonIsDisabled = isButtonDisabled({
+export const EuiButton: FunctionComponent = ({
+ 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 (
-
-
-
- );
- }
-
return (
);
};
-
-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
index 56dd6eadcf7..b5f0190c987 100644
--- 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`] = `
`;
-exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
-
-
-
-
-
-`;
-
exports[`EuiButtonEmpty props color primary is rendered 1`] = `
{
expect(container.firstChild).toMatchSnapshot();
});
});
-
- test('ghost is rendered', () => {
- const { container } = render( );
-
- 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
index d9427ff9ead..960544f848f 100644
--- 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
@@ -92,39 +87,34 @@ export type EuiButtonEmptyProps = ExclusiveUnion<
EuiButtonEmptyPropsForButton
>;
-export const EuiButtonEmpty: FunctionComponent = (
- props
-) => {
- const {
- children,
- className,
- iconType,
- iconSide = 'left',
- iconSize = 'm',
- color: _color = 'primary',
- size = 'm',
- flush,
- isDisabled: _isDisabled,
- disabled,
- isLoading,
- href,
- target,
- rel,
- type = 'button',
- buttonRef,
- contentProps,
- textProps,
- isSelected,
- ...rest
- } = props;
-
+export const EuiButtonEmpty: FunctionComponent = ({
+ children,
+ className,
+ iconType,
+ iconSide = 'left',
+ iconSize = 'm',
+ color = 'primary',
+ size = 'm',
+ flush,
+ isDisabled: _isDisabled,
+ disabled,
+ isLoading,
+ href,
+ target,
+ rel,
+ type = 'button',
+ buttonRef,
+ contentProps,
+ textProps,
+ isSelected,
+ ...rest
+}) => {
const isDisabled = isButtonDisabled({
isDisabled: _isDisabled || disabled,
href,
isLoading,
});
- const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
const buttonColorStyles = useEuiButtonColorCSS({
display: 'empty',
});
@@ -134,21 +124,12 @@ export const EuiButtonEmpty: FunctionComponent = (
const cssStyles = [
styles.euiButtonEmpty,
styles[size],
- buttonColorStyles[color],
+ buttonColorStyles[isDisabled ? 'disabled' : color],
flush && styles.flush,
flush && styles[flush],
isDisabled && styles.isDisabled,
];
- if (_color === 'ghost') {
- // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
- return (
-
-
-
- );
- }
-
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
index c2dea385a0a..10f1726a5f2 100644
--- 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`] = `
`;
-exports[`EuiButtonIcon props color ghost is rendered 1`] = `
-
-
-
-`;
-
exports[`EuiButtonIcon props color primary is rendered 1`] = `
{
export const _emptyHoverStyles = (
euiThemeContext: UseEuiTheme,
- color: _EuiButtonColor | 'disabled'
+ color: _EuiButtonColor
) => {
return css`
&:hover {
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index f5e50258e50..e9c06140b6c 100644
--- 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(
-
- );
-
- 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
index 239fac6a985..5995f45dd87 100644
--- 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;
@@ -105,26 +100,24 @@ type Props = ExclusiveUnion<
EuiButtonIconPropsForButton
>;
-export const EuiButtonIcon: FunctionComponent = (props) => {
- const {
- className,
- iconType,
- iconSize = 'm',
- color: _color = 'primary',
- isDisabled: _isDisabled,
- disabled,
- href,
- type = 'button',
- display = 'empty',
- target,
- rel,
- size = 'xs',
- buttonRef,
- isSelected,
- isLoading,
- ...rest
- } = props;
-
+export const EuiButtonIcon: FunctionComponent = ({
+ className,
+ iconType,
+ iconSize = 'm',
+ color = 'primary',
+ isDisabled: _isDisabled,
+ disabled,
+ href,
+ type = 'button',
+ display = 'empty',
+ target,
+ rel,
+ size = 'xs',
+ buttonRef,
+ isSelected,
+ isLoading,
+ ...rest
+}) => {
const euiThemeContext = useEuiTheme();
const isDisabled = isButtonDisabled({
isDisabled: _isDisabled || disabled,
@@ -142,33 +135,25 @@ export const EuiButtonIcon: FunctionComponent = (props) => {
);
}
- const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
const buttonColorStyles = useEuiButtonColorCSS({ display });
const buttonFocusStyle = useEuiButtonFocusCSS();
+ const emptyHoverStyles =
+ display === 'empty' &&
+ !isDisabled &&
+ _emptyHoverStyles(euiThemeContext, color);
const styles = euiButtonIconStyles(euiThemeContext);
- const emptyHoverStyles = _emptyHoverStyles(euiThemeContext, color);
-
const cssStyles = [
styles.euiButtonIcon,
styles[size],
- buttonColorStyles[color],
+ buttonColorStyles[isDisabled ? 'disabled' : color],
buttonFocusStyle,
- display === 'empty' && emptyHoverStyles,
+ emptyHoverStyles,
isDisabled && styles.isDisabled,
];
const classes = classNames('euiButtonIcon', className);
- if (_color === 'ghost') {
- // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
- return (
-
-
-
- );
- }
-
// Add an icon to the button if one exists.
let buttonIcon;
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index 2a29d3c7006..2aac6cf47b0 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiControlBar is rendered 1`] = `
@@ -49,7 +49,7 @@ exports[`EuiControlBar is rendered 1`] = `
@@ -145,7 +145,7 @@ Array [
@@ -241,7 +241,7 @@ Array [
@@ -337,7 +337,7 @@ Array [
@@ -432,7 +432,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
@@ -521,7 +521,7 @@ Array [
@@ -617,7 +617,7 @@ Array [
@@ -718,7 +718,7 @@ Array [
diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx
index ab5072969dc..055214de336 100644
--- a/src/components/control_bar/control_bar.tsx
+++ b/src/components/control_bar/control_bar.tsx
@@ -15,6 +15,8 @@ import React, {
Ref,
ReactNode,
} from 'react';
+
+import { EuiThemeProvider } from '../../services';
import { EuiScreenReaderOnly } from '../accessibility';
import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../breadcrumbs';
import {
@@ -312,14 +314,7 @@ export class EuiControlBar extends Component<
const controlItem = (control: Control, index: number) => {
switch (control.controlType) {
case 'button': {
- const {
- controlType,
- id,
- color = 'ghost',
- label,
- className,
- ...rest
- } = control;
+ const { controlType, id, color, label, className, ...rest } = control;
return (
{(screenReaderHeading: string) => (
- // Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice
- // A bug in voiceover won't list some landmarks in the rotor without an aria-label
-
-
- {landmarkHeading ? landmarkHeading : screenReaderHeading}
-
- {
- this.bar = node;
- }}
+
- {controls.map((control, index) => controlItem(control, index))}
-
- {this.props.showContent ? (
- {children}
- ) : null}
-
+
+
+ {landmarkHeading ? landmarkHeading : screenReaderHeading}
+
+
+ {
+ this.bar = node;
+ }}
+ >
+ {controls.map((control, index) => controlItem(control, index))}
+
+ {this.props.showContent ? (
+ {children}
+ ) : null}
+
+
)}
);
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
index 71a48992a5d..fa792a8d48e 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`EuiSuperUpdateButton iconOnly 1`] = `
isLoading={false}
minWidth={false}
onClick={[Function]}
- size="m"
textProps={
Object {
"className": "euiScreenReaderOnly",
@@ -43,7 +42,6 @@ exports[`EuiSuperUpdateButton iconOnly 1`] = `
isLoading={false}
minWidth={118}
onClick={[Function]}
- size="m"
>
` wrapper and `color="text"` instead.