Restore color indicator

WordPress · May 28, 2020 · d2a9576 · d2a9576
1 parent fa93929
commit d2a9576
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -166,7 +166,8 @@ function DropdownMenu( {
 												indexOfSet > 0 &&
 												indexOfControl === 0,
 											'is-active': control.isActive,
-										}
+										},
+										control.className
 									) }
 									icon={ control.icon }
 									aria-checked={

diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js
@@ -8,15 +8,15 @@ import { get, isEmpty } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
-import { textColor as textColorIcon } from '@wordpress/icons';
+import { Icon, textColor as textColorIcon } from '@wordpress/icons';
 import { removeFormat } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
-import { default as InlineColorUI } from './inline';
+import { default as InlineColorUI, getActiveColor } from './inline';
 
 const name = 'core/text-color';
 const title = __( 'Text Color' );
@@ -44,6 +44,15 @@ function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
 	const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [
 		setIsAddingColor,
 	] );
+	const colorIndicatorStyle = useMemo( () => {
+		const activeColor = getActiveColor( name, value, colors );
+		if ( ! activeColor ) {
+			return undefined;
+		}
+		return {
+			backgroundColor: activeColor,
+		};
+	}, [ value, colors ] );
 
 	const hasColorsToChoose =
 		! isEmpty( colors ) || disableCustomColors !== true;
@@ -55,7 +64,17 @@ function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
 		<>
 			<RichTextToolbarButton
 				className="format-library-text-color-button"
-				icon={ textColorIcon }
+				icon={
+					<>
+						<Icon icon={ textColorIcon } />
+						{ isActive && (
+							<span
+								className="format-library-text-color-button__indicator"
+								style={ colorIndicatorStyle }
+							/>
+						) }
+					</>
+				}
 				title={ title }
 				// If has no colors to choose but a color is active remove the color onClick
 				onClick={

diff --git a/packages/format-library/src/text-color/style.scss b/packages/format-library/src/text-color/style.scss
@@ -27,6 +27,6 @@
 	height: 4px;
 	width: 20px;
 	position: absolute;
-	bottom: 10px;
+	bottom: 8px;
 	left: 8px;
 }