diff --git a/changelogs/upcoming/7533.md b/changelogs/upcoming/7533.md index 34bb80bb54d0..1b9f79318c69 100644 --- a/changelogs/upcoming/7533.md +++ b/changelogs/upcoming/7533.md @@ -1,3 +1,4 @@ **Breaking changes** - Removed `EuiLinkType`, `EuiLinkAnchorProps`, and `EuiLinkButtonProps` types. Use `EuiLinkProps` instead +- Removed the `element` prop from `EuiButton`. All button components will automatically detect whether it should render a link or button based on the `href` prop. diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx index 409027df8ad5..54f597e88ff8 100644 --- a/src/components/button/button.stories.tsx +++ b/src/components/button/button.stories.tsx @@ -21,7 +21,6 @@ const meta: Meta = { }, args: { // Component defaults - element: 'button', type: 'button', color: 'primary', size: 'm', diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx index 229b3ac1d96a..b15c88578ec1 100644 --- a/src/components/button/button_display/_button_display.test.tsx +++ b/src/components/button/button_display/_button_display.test.tsx @@ -54,45 +54,6 @@ describe('EuiButtonDisplay', () => { }); }); - describe('element', () => { - const elements = ['a', 'button', 'span'] as const; - - const getButtonElement = (container: HTMLElement) => - container.firstChild!.nodeName.toLowerCase(); - - elements.forEach((element) => { - test(element, () => { - const { container } = render( - - Content - - ); - - expect(getButtonElement(container)).toEqual(element); - }); - }); - - it('always renders a `button` element if disabled', () => { - const { container } = render( - - Content - - ); - - expect(getButtonElement(container)).toEqual('button'); - }); - - it('always renders an `a` element if a href is passed', () => { - const { container } = render( - - Content - - ); - - expect(getButtonElement(container)).toEqual('a'); - }); - }); - describe('disabled behavior', () => { it('disables hrefs with javascript in them and renders a button instead of a link', () => { const { container } = render( diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index c7e0221aac08..765af967224b 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -44,7 +44,6 @@ export type EuiButtonDisplaySizes = (typeof SIZES)[number]; export interface EuiButtonDisplayCommonProps extends EuiButtonDisplayContentProps, CommonProps { - element?: 'a' | 'button' | 'span'; children?: ReactNode; size?: EuiButtonDisplaySizes; /** @@ -108,10 +107,12 @@ export function isButtonDisabled({ * EuiButtonDisplay is an internal-only component used for displaying * any element as a button. */ -export const EuiButtonDisplay = forwardRef( +export const EuiButtonDisplay = forwardRef< + HTMLButtonElement | HTMLAnchorElement, + EuiButtonDisplayProps +>( ( { - element: _element = 'button', // TODO: Not doing anything with this now type = 'button', children, iconType, @@ -159,7 +160,7 @@ export const EuiButtonDisplay = forwardRef( href={href} target={target} rel={rel} - isDisabled={buttonIsDisabled} + isDisabled={disabled || isDisabled || isLoading} buttonProps={{ type, 'aria-pressed': isSelected, diff --git a/src/components/facet/facet_button.stories.tsx b/src/components/facet/facet_button.stories.tsx index a82efa021cc8..244d205dd686 100644 --- a/src/components/facet/facet_button.stories.tsx +++ b/src/components/facet/facet_button.stories.tsx @@ -19,7 +19,6 @@ const meta: Meta = { }, args: { // Component defaults - element: 'button', type: 'button', size: 's', iconSide: 'left',