From 7f6576d57e0af0f043a23ab74bdc0d7e2d4d4aa0 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 31 Aug 2021 17:33:33 +1000
Subject: [PATCH 1/2] MenuItem: Add right padding for unchecked radio and
 checkbox items

---
 packages/components/src/menu-item/style.scss  |  7 +++++
 .../src/tools-panel/stories/index.js          | 26 ++++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 0f5badd4ae3551..d9f7fb34a2908e 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -2,6 +2,13 @@
 .components-menu-item__button.components-button {
 	width: 100%;
 
+	&[role="menuitemradio"],
+	&[role="menuitemcheckbox"] {
+		.components-menu-item__item:only-child {
+			padding-right: $grid-unit-60;
+		}
+	}
+
 	.components-menu-items__item-icon {
 		margin-right: -2px; // This optically balances the icon.
 		margin-left: $grid-unit-30;
diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
index 3f40051135857a..407b356089ed50 100644
--- a/packages/components/src/tools-panel/stories/index.js
+++ b/packages/components/src/tools-panel/stories/index.js
@@ -22,6 +22,7 @@ export default {
 
 export const _default = () => {
 	const [ height, setHeight ] = useState();
+	const [ minHeight, setMinHeight ] = useState();
 	const [ width, setWidth ] = useState();
 
 	const resetAll = () => {
@@ -37,6 +38,18 @@ export const _default = () => {
 					label="Display options"
 					resetAll={ resetAll }
 				>
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => !! width }
+						label="Width"
+						onDeselect={ () => setWidth( undefined ) }
+					>
+						<UnitControl
+							label="Width"
+							value={ width }
+							onChange={ ( next ) => setWidth( next ) }
+						/>
+					</ToolsPanelItem>
 					<ToolsPanelItem
 						className="single-column"
 						hasValue={ () => !! height }
@@ -50,15 +63,14 @@ export const _default = () => {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => !! width }
-						label="Width"
-						onDeselect={ () => setWidth( undefined ) }
+						hasValue={ () => !! minHeight }
+						label="Minimum height"
+						onDeselect={ () => setMinHeight( undefined ) }
 					>
 						<UnitControl
-							label="Width"
-							value={ width }
-							onChange={ ( next ) => setWidth( next ) }
+							label="Minimum height"
+							value={ minHeight }
+							onChange={ ( next ) => setMinHeight( next ) }
 						/>
 					</ToolsPanelItem>
 				</ToolsPanel>

From f5a19d5c26b3a2f0fccef06ab33ff060b1577b98 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Sep 2021 14:55:28 +1000
Subject: [PATCH 2/2] Add comment explaining the reason for the padding value

---
 packages/components/src/menu-item/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index d9f7fb34a2908e..80f97da381947e 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -5,6 +5,8 @@
 	&[role="menuitemradio"],
 	&[role="menuitemcheckbox"] {
 		.components-menu-item__item:only-child {
+			// Ensure unchecked items have clearance for consistency
+			// with checked items containing an icon or shortcut.
 			padding-right: $grid-unit-60;
 		}
 	}