Make the active item noticeable

WordPress · Sep 13, 2018 · 6d92309 · 6d92309
1 parent af04493
commit 6d92309
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -80,6 +80,10 @@
 			right: 0;
 			height: 1px;
 		}
+
+		&:not(:disabled).is-active > svg {
+			@include formatting-button-style__active;
+		}
 	}
 }