Removed EuiKeyPadMenuItemButton in favor of just EuiKeyPadMenuItem

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Removed `EuiKeyPadMenuItemButton` in favor of just `EuiKeyPadMenuItem` that can also accept an `onClick` ([#3062](https://github.com/elastic/eui/pull/3062))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))

src-docs/src/views/key_pad_menu/key_pad_menu_example.js

@@ -27,11 +27,11 @@ const keyPadMenuSnippet = `<EuiKeyPadMenu>
 import KeyPadMenuItemButton from './key_pad_menu_item_button';
 const keyPadMenuItemButtonSource = require('!!raw-loader!./key_pad_menu_item_button');
 const keyPadMenuItemButtonHtml = renderToHtml(KeyPadMenuItemButton);
-const keyPadMenuItemButtonSnippet = `<EuiKeyPadMenuItemButton
+const keyPadMenuItemButtonSnippet = `<EuiKeyPadMenuItem
   label={label}
   onClick={this.handleClick}>
   <EuiIcon type={icon} size="l" />
-</EuiKeyPadMenuItemButton>
+</EuiKeyPadMenuItem>
 `;
 
 import KeyPadBeta from './key_pad_beta';

src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js

@@ -3,21 +3,21 @@ import React from 'react';
 import {
   EuiIcon,
   EuiKeyPadMenu,
-  EuiKeyPadMenuItemButton,
+  EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
 export default () => (
   <EuiKeyPadMenu>
-    <EuiKeyPadMenuItemButton
+    <EuiKeyPadMenuItem
       label="Dashboard"
       onClick={() => window.alert('Clicked')}>
       <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItemButton>
-    <EuiKeyPadMenuItemButton
+    </EuiKeyPadMenuItem>
+    <EuiKeyPadMenuItem
       label="Dashboard"
       isDisabled
       onClick={() => window.alert('Clicked')}>
       <EuiIcon type="dashboardApp" size="l" />
-    </EuiKeyPadMenuItemButton>
+    </EuiKeyPadMenuItem>
   </EuiKeyPadMenu>
 );

src/components/index.js

@@ -176,11 +176,7 @@ export {
   EuiLoadingSpinner,
 } from './loading';
 
-export {
-  EuiKeyPadMenu,
-  EuiKeyPadMenuItem,
-  EuiKeyPadMenuItemButton,
-} from './key_pad_menu';
+export { EuiKeyPadMenu, EuiKeyPadMenuItem } from './key_pad_menu';
 
 export { EuiLink } from './link';
 

src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap

@@ -48,11 +48,11 @@ exports[`EuiKeyPadMenuItem renders href 1`] = `
 `;
 
 exports[`EuiKeyPadMenuItemButton is rendered 1`] = `
-<button
+<a
   aria-label="aria-label"
   class="euiKeyPadMenuItem testClass1 testClass2"
   data-test-subj="test subject string"
-  type="button"
+  role="menuitem"
 >
   <div
     class="euiKeyPadMenuItem__inner"
@@ -68,5 +68,5 @@ exports[`EuiKeyPadMenuItemButton is rendered 1`] = `
       Label
     </p>
   </div>
-</button>
+</a>
 `;

src/components/key_pad_menu/index.ts

@@ -1,6 +1,3 @@
 export { EuiKeyPadMenu } from './key_pad_menu';
 
-export {
-  EuiKeyPadMenuItem,
-  EuiKeyPadMenuItemButton,
-} from './key_pad_menu_item';
+export { EuiKeyPadMenuItem } from './key_pad_menu_item';

src/components/key_pad_menu/key_pad_menu_item.test.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { render, shallow } from 'enzyme';
 import { requiredProps } from '../../test';
 
-import {
-  EuiKeyPadMenuItem,
-  EuiKeyPadMenuItemButton,
-} from './key_pad_menu_item';
+import { EuiKeyPadMenuItem } from './key_pad_menu_item';
 
 describe('EuiKeyPadMenuItem', () => {
   test('is rendered', () => {
@@ -32,9 +29,9 @@ describe('EuiKeyPadMenuItem', () => {
 describe('EuiKeyPadMenuItemButton', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiKeyPadMenuItemButton label="Label" {...requiredProps}>
+      <EuiKeyPadMenuItem label="Label" {...requiredProps}>
         Icon
-      </EuiKeyPadMenuItemButton>
+      </EuiKeyPadMenuItem>
     );
 
     expect(component).toMatchSnapshot();
@@ -45,9 +42,9 @@ describe('EuiKeyPadMenuItemButton', () => {
       const onClickHandler = jest.fn();
 
       shallow(
-        <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
+        <EuiKeyPadMenuItem label="Label" onClick={onClickHandler}>
           Icon
-        </EuiKeyPadMenuItemButton>
+        </EuiKeyPadMenuItem>
       );
 
       expect(onClickHandler).not.toBeCalled();
@@ -57,9 +54,9 @@ describe('EuiKeyPadMenuItemButton', () => {
       const onClickHandler = jest.fn();
 
       const $button = shallow(
-        <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
+        <EuiKeyPadMenuItem label="Label" onClick={onClickHandler}>
           Icon
-        </EuiKeyPadMenuItemButton>
+        </EuiKeyPadMenuItem>
       );
 
       $button.simulate('click');

src/components/key_pad_menu/key_pad_menu_item.tsx

@@ -3,10 +3,11 @@ import React, {
   ButtonHTMLAttributes,
   FunctionComponent,
   ReactNode,
+  HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps } from '../common';
+import { CommonProps, ExclusiveUnion } from '../common';
 
 import { EuiBetaBadge } from '../badge/beta_badge';
 
@@ -59,11 +60,13 @@ interface EuiKeyPadMenuItemCommonProps {
 }
 
 export type EuiKeyPadMenuItemProps = CommonProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> &
+  ExclusiveUnion<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    ButtonHTMLAttributes<HTMLButtonElement>
+  > &
   EuiKeyPadMenuItemCommonProps;
 
 export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
-  href,
   isDisabled,
   label,
   children,
@@ -81,77 +84,31 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
     className
   );
 
-  if (!isDisabled) {
-    return (
-      <a href={href} className={classes} role="menuitem" {...rest}>
-        {renderContent(
-          children,
-          label,
-          betaBadgeLabel,
-          betaBadgeTooltipContent,
-          betaBadgeIconType
-        )}
-      </a>
-    );
+  const Element = !isDisabled ? 'a' : 'button';
+  const relObj: {
+    role?: string;
+    disabled?: boolean;
+    type?: string;
+  } = {};
+
+  if (!isDisabled) relObj.role = 'menuitem';
+  else {
+    relObj.type = 'button';
+    relObj.disabled = isDisabled;
   }
 
   return (
-    <button
-      type="button"
-      disabled={isDisabled}
+    <Element
       className={classes}
-      // Type case needed due to how the props are defined
-      {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
+      {...relObj as HTMLAttributes<HTMLElement>}
+      {...rest as HTMLAttributes<HTMLElement>}>
       {renderContent(
         children,
         label,
         betaBadgeLabel,
         betaBadgeTooltipContent,
         betaBadgeIconType
       )}
-    </button>
-  );
-};
-
-export type EuiKeyPadMenuItemButtonProps = CommonProps &
-  ButtonHTMLAttributes<HTMLButtonElement> &
-  EuiKeyPadMenuItemCommonProps;
-
-export const EuiKeyPadMenuItemButton: FunctionComponent<
-  EuiKeyPadMenuItemButtonProps
-> = ({
-  onClick,
-  label,
-  children,
-  className,
-  betaBadgeLabel,
-  betaBadgeTooltipContent,
-  betaBadgeIconType,
-  isDisabled,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiKeyPadMenuItem',
-    {
-      'euiKeyPadMenuItem--hasBetaBadge': betaBadgeLabel,
-    },
-    className
-  );
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={isDisabled}
-      className={classes}
-      {...rest}>
-      {renderContent(
-        children,
-        label,
-        betaBadgeLabel,
-        betaBadgeTooltipContent,
-        betaBadgeIconType
-      )}
-    </button>
+    </Element>
   );
 };