diff --git a/components/page/page-divider-internal.js b/components/page/page-divider-internal.js index 47b53daf17b..cda86fb02db 100644 --- a/components/page/page-divider-internal.js +++ b/components/page/page-divider-internal.js @@ -1,6 +1,7 @@ import '../colors/colors.js'; import '../icons/icon-custom.js'; import { css, html, LitElement, nothing } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; import { FocusMixin } from '../../mixins/focus/focus-mixin.js'; import { formatPercent } from '@brightspace-ui/intl'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -141,7 +142,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { .divider-arrow { align-items: center; background-color: rgba(255, 255, 255, 0.5); - cursor: pointer; + cursor: default; display: none; height: 24px; inset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */ @@ -150,16 +151,19 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { transform: translateY(-50%); width: 24px; } + .divider-arrow.active { + cursor: pointer; + } .divider-arrow d2l-icon-custom { color: var(--d2l-color-celestine); } .divider:focus-within .divider-arrow:not([hidden]) { display: flex; } - .divider-arrow:hover { + .divider-arrow.active:hover { background-color: var(--d2l-color-gypsum); } - .divider-arrow:hover d2l-icon-custom { + .divider-arrow.active:hover d2l-icon-custom { color: var(--d2l-color-celestine-minus-1); } .divider-arrow.start { @@ -205,6 +209,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { render() { const { showStartArrow, showEndArrow } = this.#getArrowVisibility(); + const startArrowClasses = { 'divider-arrow': true, 'start': true, 'active': !this.collapsed }; + const endArrowClasses = { 'divider-arrow': true, 'end': true, 'active': !this.collapsed }; let ariaValues = {}; if (this.maxSize > 0) { ariaValues = { max: this.maxSize, min: 0, now: this.currentSize, text: formatPercent(this.currentSize / this.maxSize, { maximumFractionDigits: 0 }) }; @@ -213,10 +219,10 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { return html`
${this.panelType === 'panel' ? html` -
+
${ICON_ARROW_COLLAPSE_LEFT}
-
+
${ICON_ARROW_COLLAPSE_RIGHT}
` : nothing} @@ -241,6 +247,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { `; } + #clickedArrow; #clickedHandle = false; #getArrowVisibility() { @@ -265,10 +272,20 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { } #handleClick(e) { - // Do not toggle until click event is received, to avoid clicking on elements under the handle in drawer mode + // Do not toggle/resize until click event is received, + // to avoid clicking on elements under the arrows in overlay mode or under the handle in drawer mode e.stopPropagation(); - if (this.collapsed || this.#clickedHandle) { + if (this.collapsed && this.#clickedArrow) { + return; + } else if (this.collapsed || this.#clickedHandle) { this.#sendToggleEvent(); + } else if (this.#clickedArrow) { + const endArrowClicked = this.#clickedArrow.dataset.position === 'end'; + const shouldGrow = endArrowClicked === (this.panelPosition === 'start'); + + const step = (shouldGrow ? 1 : -1) * KEYBOARD_STEP; + const requestedSize = this.currentSize + step; + this.#sendResizeEvent(requestedSize); } } @@ -313,17 +330,10 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) { const path = e.composedPath(); this.#clickedHandle = path.some(el => el.classList?.contains('divider-handle')); + this.#clickedArrow = path.find(el => el.classList?.contains('divider-arrow')); + if (this.#clickedArrow) return; // Arrows don't support dragging - const clickedArrow = path.find(el => el.classList?.contains('divider-arrow')); - if (clickedArrow) { - const endArrowClicked = clickedArrow.dataset.position === 'end'; - const shouldGrow = endArrowClicked === (this.panelPosition === 'start'); - - const step = (shouldGrow ? 1 : -1) * KEYBOARD_STEP; - const requestedSize = this.currentSize + step; - this.#sendResizeEvent(requestedSize); - return; - } + // TO DO: Dragging } #sendResizeEvent(requestedSize) { diff --git a/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-side-nav.png b/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-side-nav.png index 7783831a711..1d71109c1f6 100644 Binary files a/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-side-nav.png and b/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-side-nav.png differ diff --git a/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-supporting-immersive.png b/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-supporting-immersive.png index 470d3110ab2..73ddbffdfa9 100644 Binary files a/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-supporting-immersive.png and b/components/page/test/golden/page-divider-internal/chromium/hover-collapsed-arrow-supporting-immersive.png differ diff --git a/components/page/test/page-divider-internal.test.js b/components/page/test/page-divider-internal.test.js index a3c978b41ea..0ab64216a7c 100644 --- a/components/page/test/page-divider-internal.test.js +++ b/components/page/test/page-divider-internal.test.js @@ -66,6 +66,18 @@ describe('d2l-page-divider-internal', () => { clickElem(elem); await oneEvent(elem, 'd2l-page-divider-toggle'); }); + + it('does not dispatch event when divider arrow is clicked if collapsed', async() => { + const elem = await fixture(createDivider({ collapsed: true })); + const arrow = getDividerArrow(elem, 'end'); + expect(arrow.hidden).to.be.false; + + await focusElem(elem); + let dispatched = false; + elem.addEventListener('d2l-page-divider-toggle', () => dispatched = true); + await clickElem(arrow); + expect(dispatched).to.be.false; + }); }); }); @@ -211,15 +223,19 @@ describe('d2l-page-divider-internal', () => { expect(arrowElem.hidden).to.be.true; }); - it('grow arrow appears and requests a resize to min size when collapsed', async() => { + it('grow arrow appears when collapsed but does not dispatch event on click', async() => { const elem = await fixture( - createDivider({ collapsed: true, currentSize: 0, panelPosition: test.panelPosition }), + createDivider({ collapsed: true, currentSize, panelPosition: test.panelPosition }), { rtl: test.rtl } ); + const arrowElem = getDividerArrow(elem, test.growArrow); + expect(arrowElem.hidden).to.be.false; + await focusElem(elem); - clickElem(getDividerArrow(elem, test.growArrow)); - const e = await oneEvent(elem, 'd2l-page-divider-resize'); - expect(e.detail.requestedSize).to.equal(minSize); + let dispatched = false; + elem.addEventListener('d2l-page-divider-resize', () => dispatched = true); + await clickElem(elem); + expect(dispatched).to.be.false; }); }); });