From ff2dc0a9caf94e8899b4f4b9304a4a7cac58a0b0 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 8 Nov 2021 12:05:49 +0100
Subject: [PATCH] Navigation: Extract small fixes, and refine border rules.

---
 .../src/navigation-link/editor.scss           |  1 +
 .../src/navigation-submenu/style.scss         |  5 +++
 .../block-library/src/navigation/editor.scss  |  1 +
 .../block-library/src/navigation/style.scss   | 37 +++++++++++--------
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 8b5a8a7941bedb..60bfe5f304480d 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -26,6 +26,7 @@
 			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
+			overflow: visible !important;
 		}
 	}
 }
diff --git a/packages/block-library/src/navigation-submenu/style.scss b/packages/block-library/src/navigation-submenu/style.scss
index 00105a188c207c..8578c6990a192e 100644
--- a/packages/block-library/src/navigation-submenu/style.scss
+++ b/packages/block-library/src/navigation-submenu/style.scss
@@ -13,6 +13,11 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	line-height: inherit;
+
+	// Buttons default to center alignment. This becomes visible
+	// when a menu item label is long enough to wrap.
+	text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index ed5c91fca3db52..0d1e8b61c477cf 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -37,6 +37,7 @@
 .wp-block-navigation__container.is-parent-of-selected-block {
 	visibility: visible;
 	opacity: 1;
+	overflow: visible;
 }
 
 // Low specificity default to ensure background color applies to submenus.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 8547d420c91b72..ad232e3a90f6e8 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -119,6 +119,7 @@
 		// Don't take up space when the menu is collapsed.
 		width: 0;
 		height: 0;
+		overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space.
 
 		// Submenu items.
 		> .wp-block-navigation-item {
@@ -126,10 +127,6 @@
 				display: flex;
 				flex-grow: 1;
 
-				// Without this, the changing to zero on hover-out can cause wrapping and
-				// result in an invinite hover/hover-out loop.
-				white-space: nowrap;
-
 				// Right-align the chevron in submenus.
 				.wp-block-navigation__submenu-icon {
 					margin-right: 0;
@@ -178,6 +175,7 @@
 	// Show submenus on hover unless they open on click.
 	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -187,6 +185,7 @@
 	// Keep submenus open when focus is within.
 	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -196,6 +195,7 @@
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -290,18 +290,25 @@
 }
 
 // Default background and font color.
-.wp-block-navigation:not(.has-background) {
-	.wp-block-navigation__submenu-container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: #fff;
-		color: #000;
-		border: 1px solid rgba(0, 0, 0, 0.15);
-	}
+.wp-block-navigation .wp-block-navigation__submenu-container {
+	// Set a background color for submenus so that they're not transparent.
+	// NOTE TO DEVS - if refactoring this code, please double-check that
+	// submenus have a default background color, this feature has regressed
+	// several times, so care needs to be taken.
+	background-color: #fff;
+	color: #000;
+
+	// Apply a border using an inset box-shadow instead of a border.
+	// That way, if an explicit background color is applied, it will be hidden
+	// behind the background color, so you don't end up with border and background.
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+
+	// Box-shadows are removed in Windows High Contrast mode, but a transparent
+	// outline will show up as an opaque border.
+	outline: 1px solid transparent;
 }
 
+
 // Navigation block inner container.
 .wp-block-navigation__container {
 
@@ -385,7 +392,7 @@
 				border: none;
 				padding-left: 32px;
 				padding-right: 32px;
-
+				box-shadow: none;
 			}
 
 			// Space unfolded items using gap and padding for submenus.