From 6d92309be4b5278e07bf1163945ee122e29aa942 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 13 Sep 2018 08:51:43 +0100
Subject: [PATCH] Make the active item noticeable

---
 packages/components/src/dropdown-menu/index.js   | 6 ++++--
 packages/components/src/dropdown-menu/style.scss | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 012de475f959a..106accd770228 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -76,7 +76,6 @@ function DropdownMenu( {
 							controlSet.map( ( control, indexOfControl ) => (
 								<IconButton
 									key={ [ indexOfSet, indexOfControl ].join() }
-
 									onClick={ ( event ) => {
 										if ( control.isDisabled ) {
 											return;
@@ -89,7 +88,10 @@ function DropdownMenu( {
 									} }
 									className={ classnames(
 										'components-dropdown-menu__menu-item',
-										{ 'has-separator': indexOfSet > 0 && indexOfControl === 0 }
+										{
+											'has-separator': indexOfSet > 0 && indexOfControl === 0,
+											'is-active': control.isActive,
+										},
 									) }
 									icon={ control.icon }
 									role="menuitem"
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 1c78f1dc8a5b4..1c480cb5c6541 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -80,6 +80,10 @@
 			right: 0;
 			height: 1px;
 		}
+
+		&:not(:disabled).is-active > svg {
+			@include formatting-button-style__active;
+		}
 	}
 }