From 3d3453d2a8dc448c632c1d1cbc50798665ac9683 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 14 Feb 2024 15:03:48 -0800
Subject: [PATCH] [EuiButton] Remove `element` prop

- the component will now automatically detect this
---
 changelogs/upcoming/7533.md                   |  1 +
 src/components/button/button.stories.tsx      |  1 -
 .../button_display/_button_display.test.tsx   | 39 -------------------
 .../button/button_display/_button_display.tsx |  9 +++--
 src/components/facet/facet_button.stories.tsx |  1 -
 5 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/changelogs/upcoming/7533.md b/changelogs/upcoming/7533.md
index 34bb80bb54d..1b9f79318c6 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 409027df8ad..54f597e88ff 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -21,7 +21,6 @@ const meta: Meta<EuiButtonProps> = {
   },
   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 6b91390a1e0..71d95dc06bc 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(
-          <EuiButtonDisplay element={element} className="testing">
-            Content
-          </EuiButtonDisplay>
-        );
-
-        expect(getButtonElement(container)).toEqual(element);
-      });
-    });
-
-    it('always renders a `button` element if disabled', () => {
-      const { container } = render(
-        <EuiButtonDisplay element="a" isDisabled>
-          Content
-        </EuiButtonDisplay>
-      );
-
-      expect(getButtonElement(container)).toEqual('button');
-    });
-
-    it('always renders an `a` element if a href is passed', () => {
-      const { container } = render(
-        <EuiButtonDisplay element="span" href="#">
-          Content
-        </EuiButtonDisplay>
-      );
-
-      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 c7e0221aac0..765af967224 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<HTMLElement, EuiButtonDisplayProps>(
+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<HTMLElement, EuiButtonDisplayProps>(
         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 a82efa021cc..244d205dd68 100644
--- a/src/components/facet/facet_button.stories.tsx
+++ b/src/components/facet/facet_button.stories.tsx
@@ -19,7 +19,6 @@ const meta: Meta<EuiFacetButtonProps> = {
   },
   args: {
     // Component defaults
-    element: 'button',
     type: 'button',
     size: 's',
     iconSide: 'left',