@wordpress/format-library 4.14.0 → 4.16.0

package/src/text-color/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,11 @@ import {
 	ToolbarButton,
 	useMobileGlobalStylesColors,
 } from '@wordpress/components';
-import { Icon, textColor as textColorIcon } from '@wordpress/icons';
+import {
+	Icon,
+	color as colorIcon,
+	textColor as textColorIcon,
+} from '@wordpress/icons';
 import { removeFormat } from '@wordpress/rich-text';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -98,10 +102,13 @@ function TextColorEdit( {
 		}
 	}, [ hasColorsToChoose, value ] );
 
-	const outlineStyle = usePreferredColorSchemeStyle(
-		styles[ 'components-inline-color__outline' ],
-		styles[ 'components-inline-color__outline--dark' ]
-	);
+	const outlineStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'components-inline-color__outline' ],
+			styles[ 'components-inline-color__outline--dark' ]
+		),
+		{ borderWidth: StyleSheet.hairlineWidth },
+	];
 
 	if ( ! hasColorsToChoose && ! isActive ) {
 		return null;
@@ -131,7 +138,11 @@ function TextColorEdit( {
 						isActive={ isActive }
 						icon={
 							<Icon
-								icon={ textColorIcon }
+								icon={
+									Object.keys( activeAttributes ).length
+										? textColorIcon
+										: colorIcon
+								}
 								style={
 									colorIndicatorStyle?.color && {
 										color: colorIndicatorStyle.color,

package/src/text-color/style.native.scss

@@ -3,19 +3,18 @@
 }
 
 .components-inline-color__outline {
-	border-color: $light-dim;
+	border-color: $light-quaternary;
 	top: 6px;
 	bottom: 6px;
 	left: 11px;
 	right: 11px;
 	border-radius: 24px;
-	border-width: $border-width;
 	position: absolute;
 	z-index: 2;
 }
 
 .components-inline-color__outline--dark {
-	border-color: $dark-ultra-dim;
+	border-color: $dark-quaternary;
 }
 
 .components-inline-color__button-container {

package/src/text-color/test/index.native.js

@@ -83,6 +83,10 @@ describe( 'Text color', () => {
 		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
 		expect( pinkColorButton ).toBeDefined();
 		fireEvent.press( pinkColorButton );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );