[EuiButton] Remove element prop

- the component will now automatically detect this

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.

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',

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(

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,

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',