Removed EuiKeyPadMenuItemButton in favor of just EuiKeyPadMenuItem

CHANGELOG.md

@@ -9,6 +9,10 @@
 
 - Fixed race condition in `EuiIcon` when switching from dynamically fetched components ([#3118](https://github.com/elastic/eui/pull/3118))
 
+**Breaking changes**
+
+- Removed `EuiKeyPadMenuItemButton` in favor of just `EuiKeyPadMenuItem` that can also accept an `onClick` ([#3062](https://github.com/elastic/eui/pull/3062))
+
 ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0)
 
 - Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063))

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';
@@ -85,9 +85,9 @@ export const KeyPadMenuExample = {
       ],
       text: (
         <p>
-          The KeyPadMenuItem component is a link by default, but you can swap it
-          out for a KeyPadMenuItemButton if you want <EuiCode>onClick</EuiCode>{' '}
-          behavior.
+          The KeyPadMenuItem component can act both as an anchor as well as a
+          button by specifying <EuiCode>href</EuiCode> or
+          <EuiCode>onClick</EuiCode> respectively.
         </p>
       ),
       snippet: keyPadMenuItemButtonSnippet,

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

@@ -5,6 +5,7 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
   aria-label="aria-label"
   class="euiKeyPadMenuItem testClass1 testClass2"
   data-test-subj="test subject string"
+  href="#"
   role="menuitem"
 >
   <div
@@ -24,11 +25,10 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
 </a>
 `;
 
-exports[`EuiKeyPadMenuItem renders href 1`] = `
-<a
+exports[`EuiKeyPadMenuItem renders button 1`] = `
+<button
   class="euiKeyPadMenuItem"
-  href="#"
-  role="menuitem"
+  type="button"
 >
   <div
     class="euiKeyPadMenuItem__inner"
@@ -44,15 +44,14 @@ exports[`EuiKeyPadMenuItem renders href 1`] = `
       Label
     </p>
   </div>
-</a>
+</button>
 `;
 
-exports[`EuiKeyPadMenuItemButton is rendered 1`] = `
-<button
-  aria-label="aria-label"
-  class="euiKeyPadMenuItem testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
+exports[`EuiKeyPadMenuItem renders href 1`] = `
+<a
+  class="euiKeyPadMenuItem"
+  href="#"
+  role="menuitem"
 >
   <div
     class="euiKeyPadMenuItem__inner"
@@ -68,5 +67,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,15 +2,12 @@ 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', () => {
     const component = render(
-      <EuiKeyPadMenuItem label="Label" {...requiredProps}>
+      <EuiKeyPadMenuItem label="Label" {...requiredProps} href="#">
         Icon
       </EuiKeyPadMenuItem>
     );
@@ -27,44 +24,42 @@ describe('EuiKeyPadMenuItem', () => {
 
     expect(component).toMatchSnapshot();
   });
-});
 
-describe('EuiKeyPadMenuItemButton', () => {
-  test('is rendered', () => {
+  test('renders button', () => {
+    const onClickHandler = jest.fn();
+
     const component = render(
-      <EuiKeyPadMenuItemButton label="Label" {...requiredProps}>
+      <EuiKeyPadMenuItem label="Label" onClick={onClickHandler}>
         Icon
-      </EuiKeyPadMenuItemButton>
+      </EuiKeyPadMenuItem>
     );
 
     expect(component).toMatchSnapshot();
   });
 
-  describe('onClick', () => {
-    test("isn't called upon instantiation", () => {
-      const onClickHandler = jest.fn();
+  test("onClick isn't called upon instantiation", () => {
+    const onClickHandler = jest.fn();
 
-      shallow(
-        <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
-          Icon
-        </EuiKeyPadMenuItemButton>
-      );
+    shallow(
+      <EuiKeyPadMenuItem label="Label" onClick={onClickHandler}>
+        Icon
+      </EuiKeyPadMenuItem>
+    );
 
-      expect(onClickHandler).not.toBeCalled();
-    });
+    expect(onClickHandler).not.toBeCalled();
+  });
 
-    test('is called when the button is clicked', () => {
-      const onClickHandler = jest.fn();
+  test('onClick is called when the button is clicked', () => {
+    const onClickHandler = jest.fn();
 
-      const $button = shallow(
-        <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
-          Icon
-        </EuiKeyPadMenuItemButton>
-      );
+    const $button = shallow(
+      <EuiKeyPadMenuItem label="Label" onClick={onClickHandler}>
+        Icon
+      </EuiKeyPadMenuItem>
+    );
 
-      $button.simulate('click');
+    $button.simulate('click');
 
-      expect(onClickHandler).toBeCalledTimes(1);
-    });
+    expect(onClickHandler).toBeCalledTimes(1);
   });
 });

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';
 
@@ -56,21 +57,26 @@ interface EuiKeyPadMenuItemCommonProps {
    * Add a description to the beta badge (will appear in a tooltip)
    */
   betaBadgeTooltipContent?: ReactNode;
+  onClick?: () => void;
+  href?: string;
 }
 
 export type EuiKeyPadMenuItemProps = CommonProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> &
+  ExclusiveUnion<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    ButtonHTMLAttributes<HTMLButtonElement>
+  > &
   EuiKeyPadMenuItemCommonProps;
 
 export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
-  href,
   isDisabled,
   label,
   children,
   className,
   betaBadgeLabel,
   betaBadgeTooltipContent,
   betaBadgeIconType,
+  href,
   ...rest
 }) => {
   const classes = classNames(
@@ -81,77 +87,34 @@ 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 = href && !isDisabled ? 'a' : 'button';
+  const relObj: {
+    role?: string;
+    disabled?: boolean;
+    type?: string;
+    href?: string;
+  } = {};
+
+  if (href && !isDisabled) {
+    relObj.role = 'menuitem';
+    relObj.href = href;
+  } else {
+    relObj.type = 'button';
+    relObj.disabled = isDisabled;
   }
 
   return (
-    <button
-      type="button"
-      disabled={isDisabled}
-      className={classes}
-      // Type case needed due to how the props are defined
-      {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
-      {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}
+    <Element
       className={classes}
-      {...rest}>
+      {...relObj as HTMLAttributes<HTMLElement>}
+      {...rest as HTMLAttributes<HTMLElement>}>
       {renderContent(
         children,
         label,
         betaBadgeLabel,
         betaBadgeTooltipContent,
         betaBadgeIconType
       )}
-    </button>
+    </Element>
   );
 };