diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4b91e34a8a..5fa8d5395b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2852,6 +2852,7 @@ export namespace Components { * If `true`, the split pane will be hidden. */ "disabled": boolean; + "isVisible": () => Promise; /** * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. */ diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index 54cc316d6a..86b522b50c 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -179,10 +179,51 @@ ion-backdrop { // Menu Split Pane // -------------------------------------------------- +/** + * The split pane styles for menu are defined + * in the menu stylesheets instead in the split pane + * stylesheets with ::slotted to allow for menus + * to be wrapped in custom components. + * If we used ::slotted to target the menu + * then menus wrapped in components would never + * receive these styles because they are not + * children of the split pane. + */ + +/** + * Do not pass CSS Variables down on larger + * screens as we want them to affect the outer + * `ion-menu` rather than the inner content + */ :host(.menu-pane-visible) { - width: var(--width); - min-width: var(--min-width); - max-width: var(--max-width); + flex: 0 1 auto; + + width: var(--side-width, var(--width)); + min-width: var(--side-min-width, var(--min-width)); + max-width: var(--side-max-width, var(--max-width)); +} + +:host(.menu-pane-visible.split-pane-side) { + @include position(0, 0, 0, 0); + + position: relative; + + box-shadow: none; + z-index: 0; +} + +:host(.menu-pane-visible.split-pane-side.menu-enabled) { + display: flex; + + flex-shrink: 0; +} + +:host(.menu-pane-visible.split-pane-side) { + order: -1; +} + +:host(.menu-pane-visible.split-pane-side[side=end]) { + order: 1; } :host(.menu-pane-visible) .menu-inner { @@ -199,3 +240,18 @@ ion-backdrop { /* stylelint-disable-next-line declaration-no-important */ display: hidden !important; } + +:host(.menu-pane-visible.split-pane-side) { + @include border(0, var(--border), 0, 0); + + min-width: var(--side-min-width); + max-width: var(--side-max-width); +} + +:host(.menu-pane-visible.split-pane-side[side=end]) { + @include border(0, 0, 0, var(--border)); + + min-width: var(--side-min-width); + max-width: var(--side-max-width); +} + diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 45a03fad95..a559ce3963 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -6,6 +6,7 @@ import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers'; import { menuController } from '@utils/menu-controller'; import { getPresentedOverlay } from '@utils/overlays'; +import { hostContext } from '@utils/theme'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; @@ -77,6 +78,14 @@ export class Menu implements ComponentInterface, MenuI { @Element() el!: HTMLIonMenuElement; + /** + * If true, then the menu should be + * visible within a split pane. + * If false, then the menu is hidden. + * However, the menu-button/menu-toggle + * components can be used to open the + * menu. + */ @State() isPaneVisible = false; @State() isEndSide = false; @@ -225,8 +234,8 @@ export class Menu implements ComponentInterface, MenuI { // register this menu with the app's menu controller menuController._register(this); - this.menuChanged(); + this.menuChanged(); this.gesture = (await import('../../utils/gesture')).createGesture({ el: document, gestureName: 'menu-swipe', @@ -248,6 +257,21 @@ export class Menu implements ComponentInterface, MenuI { async componentDidLoad() { this.didLoad = true; + + /** + * A menu inside of a split pane is assumed + * to be a side pane. + * + * When the menu is loaded it needs to + * see if it should be considered visible inside + * of the split pane. If the split pane is + * hidden then the menu should be too. + */ + const splitPane = this.el.closest('ion-split-pane'); + if (splitPane !== null) { + this.isPaneVisible = await splitPane.isVisible(); + } + this.menuChanged(); this.updateState(); } @@ -288,23 +312,14 @@ export class Menu implements ComponentInterface, MenuI { } @Listen('ionSplitPaneVisible', { target: 'body' }) - onSplitPaneChanged(ev: CustomEvent) { - const { target } = ev; - const closestSplitPane = this.el.closest('ion-split-pane'); + onSplitPaneChanged(ev: CustomEvent<{ visible: boolean }>) { + const closestSplitPane = this.el.closest('ion-split-pane'); - /** - * Menu listens on the body for "ionSplitPaneVisible". - * However, this means the callback will run any time - * a SplitPane changes visibility. As a result, we only want - * Menu's visibility state to update if its parent SplitPane - * changes visibility. - */ - if (target !== closestSplitPane) { - return; + if (closestSplitPane !== null && closestSplitPane === ev.target) { + this.isPaneVisible = ev.detail.visible; + + this.updateState(); } - - this.isPaneVisible = ev.detail.isPane(this.el); - this.updateState(); } @Listen('click', { capture: true }) @@ -778,7 +793,7 @@ export class Menu implements ComponentInterface, MenuI { } render() { - const { type, disabled, isPaneVisible, inheritedAttributes, side } = this; + const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this; const mode = getIonMode(this); return ( @@ -791,6 +806,7 @@ export class Menu implements ComponentInterface, MenuI { 'menu-enabled': !disabled, [`menu-side-${side}`]: true, 'menu-pane-visible': isPaneVisible, + 'split-pane-side': hostContext('ion-split-pane', el), }} >
(this.menuInnerEl = el)}> diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss index ee297f0167..95c2f30dfc 100644 --- a/core/src/components/split-pane/split-pane.ios.scss +++ b/core/src/components/split-pane/split-pane.ios.scss @@ -9,17 +9,3 @@ --side-min-width: #{$split-pane-ios-side-min-width}; --side-max-width: #{$split-pane-ios-side-max-width}; } - -:host(.split-pane-visible) ::slotted(.split-pane-side) { - @include border(0, var(--border), 0, 0); - - min-width: var(--side-min-width); - max-width: var(--side-max-width); -} - -:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) { - @include border(0, 0, 0, var(--border)); - - min-width: var(--side-min-width); - max-width: var(--side-max-width); -} diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss index 1336f61d75..ca325f9f78 100644 --- a/core/src/components/split-pane/split-pane.md.scss +++ b/core/src/components/split-pane/split-pane.md.scss @@ -9,17 +9,3 @@ --side-min-width: #{$split-pane-md-side-min-width}; --side-max-width: #{$split-pane-md-side-max-width}; } - -:host(.split-pane-visible) ::slotted(.split-pane-side) { - @include border(0, var(--border), 0, 0); - - min-width: var(--side-min-width); - max-width: var(--side-max-width); -} - -:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) { - @include border(0, 0, 0, var(--border)); - - min-width: var(--side-min-width); - max-width: var(--side-max-width); -} diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss index 15eaee8373..73ba6223d6 100644 --- a/core/src/components/split-pane/split-pane.scss +++ b/core/src/components/split-pane/split-pane.scss @@ -24,48 +24,17 @@ contain: strict; } -/** - * Do not pass CSS Variables down on larger - * screens as we want them to affect the outer - * `ion-menu` rather than the inner content - */ -::slotted(ion-menu.menu-pane-visible) { - flex: 0 1 auto; - - width: var(--side-width); - min-width: var(--side-min-width); - max-width: var(--side-max-width); -} - -:host(.split-pane-visible) ::slotted(.split-pane-side), :host(.split-pane-visible) ::slotted(.split-pane-main) { @include position(0, 0, 0, 0); position: relative; + flex: 1; + box-shadow: none; z-index: 0; } -:host(.split-pane-visible) ::slotted(.split-pane-main) { - flex: 1; -} - -:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)), -:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled) { - display: flex; - - flex-shrink: 0; -} - ::slotted(.split-pane-side:not(ion-menu)) { display: none; } - -:host(.split-pane-visible) ::slotted(.split-pane-side) { - order: -1; -} - -:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) { - order: 1; -} diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index decd5d7a59..dabcb3cb8e 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; +import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; @@ -58,8 +58,15 @@ export class SplitPane implements ComponentInterface { @Watch('visible') visibleChanged(visible: boolean) { - const detail = { visible, isPane: this.isPane.bind(this) }; - this.ionSplitPaneVisible.emit(detail); + this.ionSplitPaneVisible.emit({ visible }); + } + + /** + * @internal + */ + @Method() + async isVisible(): Promise { + return Promise.resolve(this.visible); } async connectedCallback() { @@ -68,7 +75,7 @@ export class SplitPane implements ComponentInterface { if (typeof (customElements as any) !== 'undefined' && (customElements as any) != null) { await customElements.whenDefined('ion-split-pane'); } - this.styleChildren(); + this.styleMainElement(); this.updateState(); } @@ -125,17 +132,20 @@ export class SplitPane implements ComponentInterface { } } - private isPane(element: HTMLElement): boolean { - if (!this.visible) { - return false; - } - return element.parentElement === this.el && element.classList.contains(SPLIT_PANE_SIDE); - } - - private styleChildren() { + /** + * Attempt to find the main content + * element inside of the split pane. + * If found, set it as the main node. + * + * We assume that the main node + * is available in the DOM on split + * pane load. + */ + private styleMainElement() { if (!Build.isBrowser) { return; } + const contentId = this.contentId; const children = this.el.children; const nu = this.el.childElementCount; @@ -147,10 +157,11 @@ export class SplitPane implements ComponentInterface { if (foundMain) { console.warn('split pane cannot have more than one main node'); return; + } else { + setPaneClass(child, isMain); + foundMain = true; } - foundMain = true; } - setPaneClass(child, isMain); } if (!foundMain) { console.warn('split pane does not have a specified main node'); diff --git a/core/src/components/split-pane/test/wrapped-menu/index.html b/core/src/components/split-pane/test/wrapped-menu/index.html new file mode 100644 index 0000000000..250fbd573b --- /dev/null +++ b/core/src/components/split-pane/test/wrapped-menu/index.html @@ -0,0 +1,69 @@ + + + + + Split Pane - Wrapped Menu + + + + + + + + + + + + +
+ + + + + + + Content + + + + Main Content +
+ + + + + + diff --git a/core/src/components/split-pane/test/wrapped-menu/split-pane.e2e.ts b/core/src/components/split-pane/test/wrapped-menu/split-pane.e2e.ts new file mode 100644 index 0000000000..a22618eacf --- /dev/null +++ b/core/src/components/split-pane/test/wrapped-menu/split-pane.e2e.ts @@ -0,0 +1,47 @@ +import { expect } from '@playwright/test'; +import { configs, test, Viewports } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => { + test.describe(title('split-pane: functionality'), () => { + test('should be visible on larger viewports', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/16304', + }); + + await page.setViewportSize(Viewports.large); + await page.goto(`/src/components/split-pane/test/wrapped-menu`, config); + + const menu = page.locator('ion-menu'); + await expect(menu).toBeVisible(); + }); + + test('should be visible on larger viewports when added async', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/16304', + }); + + await page.setViewportSize(Viewports.large); + await page.goto(`/src/components/split-pane/test/wrapped-menu`, config); + + // Asynchronously add a second menu + await page.evaluate(() => { + const menu = document.createElement('app-menu'); + menu.setAttribute('side', 'end'); + const splitPane = document.querySelector('ion-split-pane')!; + splitPane.appendChild(menu); + }); + + const menus = page.locator('ion-menu'); + const menuButton = page.locator('ion-menu-button'); + + await expect(menus).toHaveCount(2); + await expect(menus.nth(0)).toBeVisible(); + await expect(menus.nth(1)).toBeVisible(); + + // Menu button should be hidden because menus are visible + await expect(menuButton).toBeHidden(); + }); + }); +});