Allow href and onClick in ListGroupItem

elastic · May 8, 2019 · 5cf9ddd · 5cf9ddd
1 parent ebc3c01
commit 5cf9ddd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `11.0.0`.
+- Allow `onClick` and `href` props on `ListGroupItem` ([#1933](https://github.com/elastic/eui/pull/1933))
 
 ## [`11.0.0`](https://github.com/elastic/eui/tree/v11.0.0)
 

diff --git a/src/components/list_group/__snapshots__/list_group_item.test.js.snap b/src/components/list_group/__snapshots__/list_group_item.test.js.snap
@@ -146,6 +146,24 @@ exports[`EuiListGroupItem props isDisabled is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props onClick and href is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+>
+  <a
+    class="euiListGroupItem__button"
+    href="#"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </a>
+</li>
+`;
+
 exports[`EuiListGroupItem props onClick is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
@@ -308,19 +326,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>
-`;
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
@@ -92,15 +92,11 @@ 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

diff --git a/src/components/list_group/list_group_item.test.js b/src/components/list_group/list_group_item.test.js
@@ -121,6 +121,15 @@ describe('EuiListGroupItem', () => {
       });
     });
 
+    describe('onClick and href', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiListGroupItem label="Label" onClick={() => {}} href="#" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 
   test('renders a disabled button even if provided an href', () => {
@@ -156,18 +165,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/>} />