@wordpress/block-library 11.0.0 → 11.1.0

package/src/navigation/style.scss

@@ -123,6 +123,24 @@ $navigation-icon-size: 24px;
 		--navigation-layout-direction: column;
 		--navigation-layout-justify: initial;
 		--navigation-layout-align: flex-start;
+
+		// Align wrapped label text with the item justification. Only vertical
+		// menus need it: a horizontal item is only ever as wide as its own text.
+		text-align: var(--navigation-layout-text-align, inherit);
+
+		// Buttons declare their own text-align, and a directly declared value
+		// beats an inherited one, so opt submenu toggles back in.
+		.wp-block-navigation-item__content {
+			text-align: inherit;
+		}
+
+		// Flyout submenus are separate panels, so they keep their own
+		// alignment rather than following the parent menu's justification.
+		// open-always submenus render inline as part of the same vertical
+		// stack instead, so they should keep following it.
+		.wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
+			text-align: initial;
+		}
 	}
 
 	&.no-wrap {
@@ -132,6 +150,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-center {
 		--navigation-layout-justification-setting: center;
 		--navigation-layout-justify: center;
+		--navigation-layout-text-align: center;
 
 		&.is-vertical {
 			--navigation-layout-align: center;
@@ -141,6 +160,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-right {
 		--navigation-layout-justification-setting: flex-end;
 		--navigation-layout-justify: flex-end;
+		--navigation-layout-text-align: end;
 
 		&.is-vertical {
 			--navigation-layout-align: flex-end;
@@ -248,18 +268,18 @@ $navigation-icon-size: 24px;
 		height: auto;
 	}
 
-	// Show submenus on hover unless they open on click.
+	// Show submenus on hover unless they open on click or are always shown.
 	// Restricted to true-hover devices to prevent sticky touch-hover on mobile.
 	@media (hover: hover) {
-		&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+		&:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
 			@include show-submenu;
 			min-width: 200px;
 		}
 	}
 	// Keep submenus open when focus is within.
-	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+	&:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
+	&:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		@include show-submenu;
 		min-width: 200px;
 	}
@@ -313,6 +333,8 @@ $navigation-icon-size: 24px;
 			border: none;
 			background-color: transparent;
 			color: inherit;
+			// Has to be !important to override the inline instance style.
+			box-shadow: none !important;
 		}
 	}
 }
@@ -607,6 +629,7 @@ button.wp-block-navigation-item__content {
 
 				// Inherit alignment settings from container.
 				align-items: var(--navigation-layout-justification-setting, inherit);
+				text-align: var(--navigation-layout-text-align, inherit);
 
 				// Always align the contents of the menu to the top.
 				&,
@@ -645,11 +668,18 @@ button.wp-block-navigation-item__content {
 				// Apply top padding to nested submenus.
 				.wp-block-navigation__submenu-container {
 					padding-top: var(--wp--style--block-gap, 2em);
+
+					// Unfolded inline here, not shown as a panel, so submenus
+					// follow the menu's justification.
+					text-align: inherit;
 				}
 
 				// A default padding is added to submenu items. It's not appropriate inside the modal.
 				.wp-block-navigation-item__content {
 					padding: 0;
+
+					// See the note on submenu toggles above.
+					text-align: inherit;
 				}
 
 				// Default column display for overlay menu contents.
@@ -673,6 +703,12 @@ button.wp-block-navigation-item__content {
 				background: transparent !important;
 			}
 
+			// Submenus unfold inline here, so drop the dropdown shadow.
+			// Has to be !important to override the inline instance style.
+			.wp-block-navigation-item .wp-block-navigation__submenu-container {
+				box-shadow: none !important;
+			}
+
 			// Override justification dropdown menu positioning rules.
 			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 				right: auto;
@@ -759,7 +795,7 @@ button.wp-block-navigation-item__content {
 // Overlay menu toggle button label
 .wp-block-navigation__toggle_button_label {
 	font-size: 1rem;
-	font-weight: bold;
+	font-weight: 700;
 }
 
 // Menu and close buttons.

package/src/navigation/test/use-navigation-menu.jsdom.test.js

@@ -67,11 +67,9 @@ function resolveReadPermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
 	dispatch.receiveUserPermission( 'read/postType/wp_navigation', allowed );
 	dispatch.startResolution( 'canUser', [
-		'read',
 		{ kind: 'postType', name: 'wp_navigation' },
 	] );
 	dispatch.finishResolution( 'canUser', [
-		'read',
 		{ kind: 'postType', name: 'wp_navigation' },
 	] );
 }
@@ -82,25 +80,17 @@ function resolveReadRecordPermission( registry, ref, allowed ) {
 		`read/postType/wp_navigation/${ ref }`,
 		allowed
 	);
-	dispatch.startResolution( 'canUser', [
-		'read',
-		{ ...BASE_ENTITY, id: ref },
-	] );
-	dispatch.finishResolution( 'canUser', [
-		'read',
-		{ ...BASE_ENTITY, id: ref },
-	] );
+	dispatch.startResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
+	dispatch.finishResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
 }
 
 function resolveCreatePermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
 	dispatch.receiveUserPermission( 'create/postType/wp_navigation', allowed );
 	dispatch.startResolution( 'canUser', [
-		'create',
 		{ kind: 'postType', name: 'wp_navigation' },
 	] );
 	dispatch.finishResolution( 'canUser', [
-		'create',
 		{ kind: 'postType', name: 'wp_navigation' },
 	] );
 }
@@ -111,14 +101,8 @@ function resolveUpdatePermission( registry, ref, allowed ) {
 		`update/postType/wp_navigation/${ ref }`,
 		allowed
 	);
-	dispatch.startResolution( 'canUser', [
-		'update',
-		{ ...BASE_ENTITY, id: ref },
-	] );
-	dispatch.finishResolution( 'canUser', [
-		'update',
-		{ ...BASE_ENTITY, id: ref },
-	] );
+	dispatch.startResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
+	dispatch.finishResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
 }
 
 function resolveDeletePermission( registry, ref, allowed ) {
@@ -127,14 +111,8 @@ function resolveDeletePermission( registry, ref, allowed ) {
 		`delete/postType/wp_navigation/${ ref }`,
 		allowed
 	);
-	dispatch.startResolution( 'canUser', [
-		'delete',
-		{ ...BASE_ENTITY, id: ref },
-	] );
-	dispatch.finishResolution( 'canUser', [
-		'delete',
-		{ ...BASE_ENTITY, id: ref },
-	] );
+	dispatch.startResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
+	dispatch.finishResolution( 'canUser', [ { ...BASE_ENTITY, id: ref } ] );
 }
 
 describe( 'useNavigationMenus', () => {

package/src/navigation/test/view.jsdom.test.js

@@ -50,4 +50,27 @@ describe( 'Navigation view script', () => {
 		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( false );
 		expect( state.isSubmenuOpen ).toBe( true ); // remains true because overlay is still open
 	} );
+
+	it( 'keeps a submenu inside an open custom overlay closed until it is opened', () => {
+		// A custom overlay is excluded from the styles that display every
+		// submenu, so opening the overlay must not report the submenu as open.
+		mockCurrentContext = {
+			type: 'submenu',
+			submenuOpenedBy: { click: false, hover: false, focus: false },
+			overlayOpenedBy: { click: true, hover: false, focus: false },
+			hasCustomOverlay: true,
+		};
+
+		const { state, actions } = mockRegisteredStore;
+
+		expect( state.isSubmenuOpen ).toBe( false );
+
+		// Opening the submenu itself is what expands it.
+		actions.openMenu( 'click' );
+		expect( state.isSubmenuOpen ).toBe( true );
+
+		// And it can be closed again while the overlay stays open.
+		actions.closeMenu( 'click' );
+		expect( state.isSubmenuOpen ).toBe( false );
+	} );
 } );

package/src/navigation/view.js

@@ -79,14 +79,17 @@ const { state, actions } = store(
 			},
 			get isSubmenuOpen() {
 				const ctx = getContext();
-				// Once the overlay itself is open, its styles always expand
-				// every submenu regardless of hover/click/focus state, so the
-				// toggle's `aria-expanded` should reflect that immediately
-				// instead of waiting for a hover/click/focus interaction.
-				const isOverlayOpen =
+				const isDefaultOverlayOpen =
+					! ctx.hasCustomOverlay &&
 					Object.values( ctx.overlayOpenedBy || {} ).filter( Boolean )
 						.length > 0;
-				return isOverlayOpen || state.isMenuOpen;
+
+				// A submenu can be opened by user interaction or by being in a default overlay.
+				// If it is a regular navigation or within a custom overlay, it is opened by user interaction.
+				// If it's in a default overlay, it is forced opened via CSS.
+				// Because default overlays always force submenus open, we return true
+				// if the default overlay is open.
+				return isDefaultOverlayOpen || state.isMenuOpen;
 			},
 		},
 		actions: {

package/src/navigation-link/edit.jsx

@@ -124,7 +124,7 @@ export default function NavigationLinkEdit( {
 				: getBlockParentsByBlockName(
 						clientId,
 						'core/navigation'
-				  )[ 0 ];
+					)[ 0 ];
 
 			// Get the immediate parent - if it's a submenu, use it; otherwise use the navigation block
 			const parentBlockId =

package/src/navigation-link/editor.scss

@@ -35,11 +35,16 @@
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
-			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
 			overflow: visible !important;
 		}
+
+		// Always-open submenus are laid out inline rather than as a flyout,
+		// so the flyout minimum width would only make them jump when selected.
+		&:not(.open-always) > .wp-block-navigation__submenu-container {
+			min-width: 200px !important;
+		}
 	}
 }
 

package/src/navigation-link/link-ui/page-creator.jsx

@@ -2,7 +2,7 @@ import {
 	Button,
 	TextControl,
 	Notice,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
@@ -127,7 +127,7 @@ export function LinkUIPageCreator( {
 							value={ title }
 						/>
 
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Publish' ) }
 							help={ __(
 								"Turn off to save as a draft. Drafts won't appear on your site until published."

package/src/navigation-link/shared/controls.jsx

@@ -2,7 +2,7 @@ import {
 	Button,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	TextControl,
 	TextareaControl as WCTextareaControl,
 } from '@wordpress/components';
@@ -214,7 +214,7 @@ export function Controls( {
 						}
 						isShownByDefault
 					>
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Open in new tab' ) }
 							checked={ opensInNewTab }
 							onChange={ ( value ) =>

package/src/navigation-link/shared/invalid-draft-display.jsx

@@ -26,9 +26,9 @@ export function InvalidDraftDisplay( {
 
 	const statusText = isInvalid
 		? /* translators: Indicating that the navigation link is Invalid. */
-		  __( 'Invalid' )
+			__( 'Invalid' )
 		: /* translators: Indicating that the navigation link is a Draft. */
-		  __( 'Draft' );
+			__( 'Draft' );
 
 	return (
 		<div

package/src/navigation-link/shared/test/use-link-preview.jsdom.test.js

@@ -208,7 +208,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'External link',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 
@@ -221,7 +221,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Page',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 
@@ -233,7 +233,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Internal link',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 
@@ -245,7 +245,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Homepage',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 
@@ -262,7 +262,7 @@ describe( 'computeBadges', () => {
 			} );
 			expect( badges ).toContainEqual( {
 				label: 'Homepage',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 
@@ -276,7 +276,7 @@ describe( 'computeBadges', () => {
 				} );
 				expect( badges ).not.toContainEqual( {
 					label: 'Homepage',
-					intent: 'default',
+					intent: 'none',
 				} );
 			}
 		);
@@ -293,7 +293,7 @@ describe( 'computeBadges', () => {
 				} );
 				expect( badges ).toContainEqual( {
 					label: 'Homepage',
-					intent: 'default',
+					intent: 'none',
 				} );
 			}
 		);
@@ -306,7 +306,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Page',
-				intent: 'default',
+				intent: 'none',
 			} );
 		} );
 	} );
@@ -319,7 +319,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'No link selected',
-				intent: 'error',
+				intent: 'high',
 			} );
 		} );
 
@@ -333,7 +333,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Missing page',
-				intent: 'error',
+				intent: 'high',
 			} );
 		} );
 
@@ -346,7 +346,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Published',
-				intent: 'success',
+				intent: 'stable',
 			} );
 		} );
 
@@ -359,7 +359,7 @@ describe( 'computeBadges', () => {
 
 			expect( badges ).toContainEqual( {
 				label: 'Draft',
-				intent: 'warning',
+				intent: 'low',
 			} );
 		} );
 	} );
@@ -375,12 +375,12 @@ it( 'should show "Internal link" badge for hash links even when type is present'
 	// Should prioritize hash link detection over type
 	expect( badges ).toContainEqual( {
 		label: 'Internal link',
-		intent: 'default',
+		intent: 'none',
 	} );
 	// Should NOT show Page badge
 	expect( badges ).not.toContainEqual( {
 		label: 'Page',
-		intent: 'default',
+		intent: 'none',
 	} );
 } );
 
@@ -394,12 +394,12 @@ it( 'should show "Homepage" badge for root path even when type is present', () =
 	// Should prioritize homepage detection over type
 	expect( badges ).toContainEqual( {
 		label: 'Homepage',
-		intent: 'default',
+		intent: 'none',
 	} );
 	// Should NOT show Page badge
 	expect( badges ).not.toContainEqual( {
 		label: 'Page',
-		intent: 'default',
+		intent: 'none',
 	} );
 } );
 
@@ -420,12 +420,12 @@ test.each( [
 		// Should prioritize external link detection over type
 		expect( badges ).toContainEqual( {
 			label: 'External link',
-			intent: 'default',
+			intent: 'none',
 		} );
 		// Should NOT show Page badge
 		expect( badges ).not.toContainEqual( {
 			label: 'Page',
-			intent: 'default',
+			intent: 'none',
 		} );
 	}
 );
@@ -440,12 +440,12 @@ it( 'should show "Page" badge for internal custom links', () => {
 	// Should show Page badge for internal custom links
 	expect( badges ).toContainEqual( {
 		label: 'Page',
-		intent: 'default',
+		intent: 'none',
 	} );
 	// Should NOT show Custom badge
 	expect( badges ).not.toContainEqual( {
 		label: 'Custom',
-		intent: 'default',
+		intent: 'none',
 	} );
 } );
 
@@ -644,7 +644,7 @@ describe( 'useLinkPreview', () => {
 
 			expect( result.current.badges ).toContainEqual( {
 				label: 'No link selected',
-				intent: 'error',
+				intent: 'high',
 			} );
 		} );
 
@@ -676,7 +676,7 @@ describe( 'useLinkPreview', () => {
 
 			expect( result.current.badges ).toContainEqual( {
 				label: 'Missing page',
-				intent: 'error',
+				intent: 'high',
 			} );
 		} );
 

package/src/navigation-link/shared/use-link-preview.js

@@ -113,7 +113,8 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
  * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)
  * @param {boolean} options.hasBinding        - Whether link has entity binding
  * @param {boolean} options.isEntityAvailable - Whether bound entity exists
- * @return {Array} Array of badge objects with label and intent
+ * @return {Array} Array of badge objects with label and `@wordpress/ui`
+ *                 `Badge` intent
  */
 export function computeBadges( {
 	url,
@@ -130,29 +131,29 @@ export function computeBadges( {
 		if ( isExternal ) {
 			badges.push( {
 				label: __( 'External link' ),
-				intent: 'default',
+				intent: 'none',
 			} );
 		} else if ( isHashLink( url ) ) {
 			// Hash links should be detected before type check
 			// because they're not entity links even if type is set
 			badges.push( {
 				label: __( 'Internal link' ),
-				intent: 'default',
+				intent: 'none',
 			} );
 		} else if ( isHomepage( url, homeUrl ) ) {
 			badges.push( {
 				label: __( 'Homepage' ),
-				intent: 'default',
+				intent: 'none',
 			} );
 		} else if ( type && type !== 'custom' ) {
 			// Show entity type badge (page, post, category, etc.)
 			// but not 'custom' since that's just a manual link
-			badges.push( { label: capitalize( type ), intent: 'default' } );
+			badges.push( { label: capitalize( type ), intent: 'none' } );
 		} else {
 			// Internal link (not external, not hash, not entity)
 			badges.push( {
 				label: __( 'Page' ),
-				intent: 'default',
+				intent: 'none',
 			} );
 		}
 	}
@@ -165,18 +166,18 @@ export function computeBadges( {
 				__( 'Missing %s' ),
 				type
 			),
-			intent: 'error',
+			intent: 'high',
 		} );
 	} else if ( ! url ) {
-		badges.push( { label: __( 'No link selected' ), intent: 'error' } );
+		badges.push( { label: __( 'No link selected' ), intent: 'high' } );
 	} else if ( entityStatus ) {
 		const statusMap = {
-			publish: { label: __( 'Published' ), intent: 'success' },
-			future: { label: __( 'Scheduled' ), intent: 'warning' },
-			draft: { label: __( 'Draft' ), intent: 'warning' },
-			pending: { label: __( 'Pending' ), intent: 'warning' },
-			private: { label: __( 'Private' ), intent: 'default' },
-			trash: { label: __( 'Trash' ), intent: 'error' },
+			publish: { label: __( 'Published' ), intent: 'stable' },
+			future: { label: __( 'Scheduled' ), intent: 'informational' },
+			draft: { label: __( 'Draft' ), intent: 'low' },
+			pending: { label: __( 'Pending' ), intent: 'low' },
+			private: { label: __( 'Private' ), intent: 'informational' },
+			trash: { label: __( 'Trashed' ), intent: 'high' },
 		};
 		const badge = statusMap[ entityStatus ];
 		if ( badge ) {

package/src/navigation-link/test/__snapshots__/hooks.jsdom.test.js.snap

@@ -9,12 +9,19 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
       "attributes": {},
       "description": "A link to a custom URL.",
       "icon": <SVG
-        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        style={
+          {
+            "fill": "none",
+          }
+        }
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zm.8-4l.7.7 2-2V12h1V9.2l2 2 .7-.7-2-2H12v-1H9.2l2-2-.7-.7-2 2V4h-1v2.8l-2-2-.7.7 2 2H4v1h2.8l-2 2z"
+          d="M8 12V8M8 4V8M8 8H12M8 8H4M8 8L10.8284 10.8284M8 8L5.17157 5.17157M8 8L10.8284 5.17157M8 8L5.17157 10.8284M4 15H20M4 19H13"
+          vectorEffect="non-scaling-stroke"
         />
       </SVG>,
       "isActive": [Function],
@@ -27,12 +34,19 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
       },
       "description": "A link to a post.",
       "icon": <SVG
-        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        style={
+          {
+            "fill": "none",
+          }
+        }
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z"
+          d="M7 10H8.5M10 10H17M7 14H8.5M10 14H17M6 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V6C19.25 5.30964 18.6904 4.75 18 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V18C4.75 18.6904 5.30964 19.25 6 19.25Z"
+          vectorEffect="non-scaling-stroke"
         />
       </SVG>,
       "isActive": [Function],
@@ -45,15 +59,19 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
       },
       "description": "A link to a page.",
       "icon": <SVG
-        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        style={
+          {
+            "fill": "none",
+          }
+        }
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
-        />
-        <Path
-          d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
+          d="M8.5 8.25H15.5M8.5 11.75H15.5M8.5 15.25H15.5M18.25 18V6C18.25 5.30964 17.6904 4.75 17 4.75H7C6.30964 4.75 5.75 5.30964 5.75 6L5.75 18C5.75 18.6904 6.30964 19.25 7 19.25H17C17.6904 19.25 18.25 18.6904 18.25 18Z"
+          vectorEffect="non-scaling-stroke"
         />
       </SVG>,
       "isActive": [Function],
@@ -103,12 +121,24 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
       },
       "description": "A link to a tag.",
       "icon": <SVG
-        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        style={
+          {
+            "fill": "none",
+          }
+        }
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+          d="M4.75 12.5429V4.85C4.75 4.79477 4.79477 4.75 4.85 4.75H12.5429C12.6755 4.75 12.8027 4.80268 12.8964 4.89645L20.1464 12.1464C20.3417 12.3417 20.3417 12.6583 20.1464 12.8536L12.8536 20.1464C12.6583 20.3417 12.3417 20.3417 12.1464 20.1464L4.89645 12.8964C4.80268 12.8027 4.75 12.6755 4.75 12.5429Z"
+          vectorEffect="non-scaling-stroke"
+        />
+        <Path
+          d="M9.75 8.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          fill="currentColor"
+          stroke="none"
         />
       </SVG>,
       "isActive": [Function],