Allow href and onClick in ListGroupItem

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `13.3.0`.
+-  Allow `onClick` and `href` props on `ListGroupItem` ([#1933](https://github.com/elastic/eui/pull/1933))
 
 ## [`13.3.0`](https://github.com/elastic/eui/tree/v13.3.0)
 

src/components/list_group/__snapshots__/list_group_item.test.js.snap

@@ -49,6 +49,22 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props href and onClick is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+>
+  <a
+    class="euiListGroupItem__button"
+    href="#"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title=""
+    />
+  </a>
+</li>
+`;
+
 exports[`EuiListGroupItem props href is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
@@ -308,19 +324,3 @@ exports[`EuiListGroupItem throws an warning if both iconType and icon are provid
   </span>
 </li>
 `;
-
-exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
-<li
-  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
->
-  <a
-    class="euiListGroupItem__button"
-    href="#"
-  >
-    <span
-      class="euiListGroupItem__label"
-      title=""
-    />
-  </a>
-</li>
-`;

src/components/list_group/list_group_item.js

@@ -99,17 +99,15 @@ export const EuiListGroupItem = ({
 
   if (href && !isDisabled) {
     itemContent = (
-      <a href={href} className="euiListGroupItem__button" {...rest}>
+      <a
+        href={href}
+        onClick={onClick}
+        className="euiListGroupItem__button"
+        {...rest}>
         {iconNode}
         {labelContent}
       </a>
     );
-
-    if (onClick) {
-      console.warn(
-        'Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.'
-      );
-    }
   } else if ((href && isDisabled) || onClick) {
     itemContent = (
       <button
@@ -180,7 +178,8 @@ EuiListGroupItem.propTypes = {
   isDisabled: PropTypes.bool,
 
   /**
-   * Make the list item label a link
+   * Make the list item label a link.
+   * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
    */
   href: PropTypes.string,
 
@@ -209,6 +208,10 @@ EuiListGroupItem.propTypes = {
     alwaysShow: PropTypes.bool,
   }),
 
+  /**
+   * Make the list item label a button.
+   * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
+   */
   onClick: PropTypes.func,
 
   /**

src/components/list_group/list_group_item.test.js

@@ -112,6 +112,16 @@ describe('EuiListGroupItem', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('href and onClick', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiListGroupItem label="" onClick={() => {}} href="#" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 
   test('renders a disabled button even if provided an href', () => {
@@ -145,18 +155,6 @@ describe('EuiListGroupItem', () => {
       console.warn = oldConsoleError;
     });
 
-    test('if both onClick and href are provided but still renders', () => {
-      const component = render(
-        <EuiListGroupItem label="" onClick={() => {}} href="#" />
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        '`href` and `onClick` were passed'
-      );
-      expect(component).toMatchSnapshot();
-    });
-
     test('if both iconType and icon are provided but still renders', () => {
       const component = render(
         <EuiListGroupItem label="" iconType="empty" icon={<span />} />