From a10eb32a05a5ab301c663426ed51718e0293d11b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 28 Sep 2022 16:42:03 +1000
Subject: [PATCH] Try using Mix as placeholder for mixed values

---
 .../components/border-radius-control/all-input-control.js    | 5 ++++-
 .../src/border-box-control/border-box-control/component.tsx  | 5 ++++-
 packages/components/src/border-box-control/test/index.js     | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
index 3dd08018eff2d..8c35a4c5abc3e 100644
--- a/packages/block-editor/src/components/border-radius-control/all-input-control.js
+++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -32,7 +32,10 @@ export default function AllInputControl( {
 
 	const hasValues = hasDefinedValues( values );
 	const isMixed = hasValues && hasMixedValues( values );
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+	const allPlaceholder = isMixed
+		? /* translators: Placeholder text representing a mix of values. */
+		  __( 'Mix' )
+		: null;
 
 	// Filter out CSS-unit-only values to prevent invalid styles.
 	const handleOnChange = ( next ) => {
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index f86876a0d0e74..89c28eff73bf6 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -105,7 +105,10 @@ const BorderBoxControl = (
 						enableStyle={ enableStyle }
 						onChange={ onLinkedChange }
 						placeholder={
-							hasMixedBorders ? __( 'Mixed' ) : undefined
+							hasMixedBorders
+								? /* translators: Placeholder text representing a mix of values. */
+								  __( 'Mix' )
+								: undefined
 						}
 						__unstablePopoverProps={ popoverProps }
 						shouldSanitizeBorder={ false } // This component will handle that.
diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
index f2c152f71ea87..e5d8909de3afc 100644
--- a/packages/components/src/border-box-control/test/index.js
+++ b/packages/components/src/border-box-control/test/index.js
@@ -127,7 +127,7 @@ describe( 'BorderBoxControl', () => {
 			clickButton( 'Link sides' );
 
 			const widthInput = screen.getByRole( 'spinbutton' );
-			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mix' );
 		} );
 
 		it( 'should render shared border width when switching to linked view', async () => {