From c217fe86799ad2bca22193f34ec9a35098a3358c Mon Sep 17 00:00:00 2001 From: Bhuvansh855 Date: Wed, 17 Jun 2026 19:38:31 +0530 Subject: [PATCH] fix(docs-infra): add fallback submenu positions in menubar example Add fallback overlay positions for nested menubar submenus so they can open on the left side when there is insufficient space on the right. --- .../content/examples/aria/menubar/src/basic/app/app.html | 7 +++++++ .../examples/aria/menubar/src/basic/material/app/app.html | 7 +++++++ .../examples/aria/menubar/src/basic/retro/app/app.html | 7 +++++++ 3 files changed, 21 insertions(+) diff --git a/adev/src/content/examples/aria/menubar/src/basic/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/app/app.html index 86fb4aaf6a0b..8949496fd04f 100644 --- a/adev/src/content/examples/aria/menubar/src/basic/app/app.html +++ b/adev/src/content/examples/aria/menubar/src/basic/app/app.html @@ -60,6 +60,7 @@ [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -277,6 +278,7 @@ [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -328,6 +330,7 @@ [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -410,6 +413,7 @@ [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -461,6 +465,7 @@ [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -497,6 +502,7 @@ [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -524,6 +530,7 @@ [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > diff --git a/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html index 9e9bcdf4fddc..0d7af7a87781 100644 --- a/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html +++ b/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html @@ -60,6 +60,7 @@ [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -277,6 +278,7 @@ [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -328,6 +330,7 @@ [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -410,6 +413,7 @@ [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -461,6 +465,7 @@ [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -497,6 +502,7 @@ [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -524,6 +530,7 @@ [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > diff --git a/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html index fbf5ba97bdc9..137d1fddf046 100644 --- a/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html +++ b/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html @@ -60,6 +60,7 @@ [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -277,6 +278,7 @@ [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -328,6 +330,7 @@ [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -410,6 +413,7 @@ [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -461,6 +465,7 @@ [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -497,6 +502,7 @@ [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild > @@ -524,6 +530,7 @@ [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}" [cdkConnectedOverlayPositions]="[ {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}, + {originX: 'start', originY: 'top', overlayY: 'top', overlayX: 'end', offsetX: -6}, ]" cdkAttachPopoverAsChild >