From 762469a69b0624b70e1ac0b26006782ff95d8b70 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 8 Oct 2019 10:49:36 -0500
Subject: [PATCH 1/4] updated docs and added focus state to button

---
 src-docs/src/views/list_group/list_group.js   | 19 +++++++++++++++----
 .../src/views/list_group/list_group_extra.js  | 10 ++++++++--
 .../list_group/_list_group_item.scss          |  8 ++++++--
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/list_group/list_group.js b/src-docs/src/views/list_group/list_group.js
index e0fb8363877..b53b5e1cef4 100644
--- a/src-docs/src/views/list_group/list_group.js
+++ b/src-docs/src/views/list_group/list_group.js
@@ -30,6 +30,9 @@ export default class extends Component {
 
   render() {
     const { flushWidth, showBorder } = this.state;
+    const handleOnClick = () => {
+      alert('Item was clicked');
+    };
 
     return (
       <Fragment>
@@ -61,13 +64,21 @@ export default class extends Component {
         <EuiSpacer size="l" />
 
         <EuiListGroup flush={flushWidth} bordered={showBorder}>
-          <EuiListGroupItem label="First item" />
+          <EuiListGroupItem onClick={handleOnClick} label="First item" />
 
-          <EuiListGroupItem label="Second item" />
+          <EuiListGroupItem onClick={handleOnClick} label="Second item" />
 
-          <EuiListGroupItem label="Third item" isActive />
+          <EuiListGroupItem
+            onClick={handleOnClick}
+            label="Third item"
+            isActive
+          />
 
-          <EuiListGroupItem label="Fourth item" isDisabled />
+          <EuiListGroupItem
+            onClick={handleOnClick}
+            label="Fourth item"
+            isDisabled
+          />
         </EuiListGroup>
       </Fragment>
     );
diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.js
index e8a134aeb4f..a9b29e472b4 100644
--- a/src-docs/src/views/list_group/list_group_extra.js
+++ b/src-docs/src/views/list_group/list_group_extra.js
@@ -2,13 +2,18 @@ import React from 'react';
 
 import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 
+const handleOnClick = () => {
+  alert('Item was clicked');
+};
+
 export default () => (
   <EuiListGroup showToolTips>
-    <EuiListGroupItem label="First item" />
+    <EuiListGroupItem onClick={handleOnClick} label="First item" />
 
-    <EuiListGroupItem label="Second item" />
+    <EuiListGroupItem onClick={handleOnClick} label="Second item" />
 
     <EuiListGroupItem
+      onClick={handleOnClick}
       label={
         <span>
           Third very, very long item that <strong>will surely</strong> force
@@ -18,6 +23,7 @@ export default () => (
     />
 
     <EuiListGroupItem
+      onClick={handleOnClick}
       wrapText
       label="Fourth very, very long item with wrapping enabled that will not force truncation"
     />
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index 115d4b2a67c..acd23bbd76f 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -13,11 +13,15 @@
   }
 
   &.euiListGroupItem-isActive,
-  &.euiListGroupItem-isClickable:hover,
-  &.euiListGroupItem-isClickable:focus {
+  &.euiListGroupItem-isClickable:hover {
     background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
   }
 
+  &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
+    background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
+  }
+
+
   &.euiListGroupItem-isClickable:hover .euiListGroupItem__label,
   &.euiListGroupItem-isClickable:focus .euiListGroupItem__label {
     text-decoration: underline;

From f7395298fb7900890e814a502a8d6d721f88d239 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 8 Oct 2019 12:33:35 -0500
Subject: [PATCH 2/4] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0346eaf0d89..43d33b7df8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
+- Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406))
 
 **Bug fixes**
 

From 8d4588b9672f1c063166569fe633dc1447f34195 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 9 Oct 2019 15:13:22 -0500
Subject: [PATCH 3/4] added missing underline property

---
 src/components/list_group/_list_group_item.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index acd23bbd76f..a20818d26b8 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -19,6 +19,7 @@
 
   &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
     background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
+    text-decoration: underline;
   }
 
 

From 230e5a20b94617a00e423e74d801b7fd7f133f5c Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 9 Oct 2019 16:23:17 -0500
Subject: [PATCH 4/4] making hover and focus behave differently

---
 src/components/list_group/_list_group_item.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index a20818d26b8..e0434fc62a2 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -22,12 +22,6 @@
     text-decoration: underline;
   }
 
-
-  &.euiListGroupItem-isClickable:hover .euiListGroupItem__label,
-  &.euiListGroupItem-isClickable:focus .euiListGroupItem__label {
-    text-decoration: underline;
-  }
-
   // Style all disabled list items whether or not they are links or buttons
   &.euiListGroupItem-isDisabled,
   &.euiListGroupItem-isDisabled:hover,