@operato/popup 10.11.0 → 10.15.0

package/test/office-control-height.test.ts

@@ -0,0 +1,58 @@
+import { expect } from '@open-wc/testing'
+
+import { ACTION_HEIGHT_TOKENS, ButtonContainerStyles, CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'
+
+import { OxPopupActions } from '../src/ox-popup-actions.js'
+
+/**
+ * Office button heights come from one token per use (ADR-0060 decision 6): 32px for action buttons,
+ * 26px in a grid cell, the same for mouse and finger (WCAG 2.2 AA, user decision 2026-09-17).
+ *
+ * The finger branch cannot be emulated in the test browser, so these read the stylesheets: every
+ * height is the token with the shared default, and no finger branch brings back a height of its own.
+ * Shop-floor popups raise the token themselves (operato-plant checks that on its side).
+ */
+
+const text = (styles: unknown) =>
+  (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\n')
+
+const coarse = (css: string) => css.slice(css.indexOf('(pointer: coarse)'))
+
+describe('office control height', () => {
+  it('the defaults are 32 for action buttons and 26 in a grid cell', () => {
+    expect(ACTION_HEIGHT_TOKENS).to.deep.equal({
+      '--context-action-height': 32,
+      '--popup-action-height': 32,
+      '--form-action-height': 32,
+      '--cell-action-height': 26
+    })
+  })
+
+  it('ox-popup-actions: the popup token, with no finger height of its own', () => {
+    const css = text(OxPopupActions.styles)
+    expect(css).to.contain('--_height: var(--popup-action-height, 32px)')
+    expect(coarse(css)).to.not.contain('--_height')
+    expect(css).to.not.match(/max\(\d+px/)
+  })
+
+  it('CommonPopupStyles .buttons: the popup token for mouse and finger', () => {
+    const css = text(CommonPopupStyles)
+    expect(css).to.contain('--md-filled-button-container-height: var(--popup-action-height, 32px)')
+    expect(coarse(css)).to.contain('min-height: var(--popup-action-height, 32px)')
+    expect(css).to.not.match(/max\(\d+px/)
+  })
+
+  it('CommonHeaderStyles .footer: the old popup footer reads the same popup token', () => {
+    const css = text(CommonHeaderStyles)
+    expect(css).to.contain('min-height: var(--popup-action-height, 32px)')
+    expect(css).to.not.contain('min-height: 30px')
+  })
+
+  it('ButtonContainerStyles: the page action token, and no finger branch', () => {
+    const css = text(ButtonContainerStyles)
+    expect(css).to.contain('height: var(--context-action-height, 32px)')
+    expect(css).to.contain('--md-filled-button-container-height: var(--context-action-height, 32px)')
+    expect(css).to.not.contain('--context-action-height-touch')
+    expect(css).to.not.contain('(pointer: coarse)')
+  })
+})

package/test/ox-popup-actions.test.ts

@@ -0,0 +1,130 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-popup-actions.js'
+
+/**
+ * The action row owns order, height, shape and the destructive colour - so a popup cannot get them
+ * wrong by writing its markup differently. These run with a mouse pointer (the test browser); the
+ * finger bar is a media query of the same element.
+ *
+ * The expected numbers are written out (32, 68, 999em) rather than read from the stylesheet, so a
+ * change to the stylesheet shows up here as a decision, not as a silent follow.
+ */
+
+const left = (el: Element) => el.getBoundingClientRect().left
+const height = (el: Element) => Math.round(el.getBoundingClientRect().height)
+
+async function row(template: ReturnType<typeof html>) {
+  const host = await fixture<HTMLElement>(html`<div style="width: 600px">${template}</div>`)
+  const actions = host.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }
+  await actions.updateComplete
+  await Promise.all(
+    Array.from(actions.querySelectorAll('md-filled-button, md-text-button')).map(
+      b => (b as HTMLElement & { updateComplete: Promise<unknown> }).updateComplete
+    )
+  )
+  return actions
+}
+
+describe('ox-popup-actions', () => {
+  it('renders start, cancel, confirm in that order whatever the markup order', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="confirm">save</md-filled-button>
+        <md-text-button slot="cancel" id="cancel">cancel</md-text-button>
+        <md-text-button slot="start" id="start">delete</md-text-button>
+      </ox-popup-actions>
+    `)
+
+    const start = actions.querySelector('#start')!
+    const cancel = actions.querySelector('#cancel')!
+    const confirm = actions.querySelector('#confirm')!
+
+    expect(left(start)).to.be.lessThan(left(cancel))
+    expect(left(cancel)).to.be.lessThan(left(confirm))
+  })
+
+  it('keeps the confirm button at the right edge', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="confirm">save</md-filled-button>
+        <md-text-button slot="cancel">cancel</md-text-button>
+      </ox-popup-actions>
+    `)
+
+    const confirm = actions.querySelector('#confirm')!
+    expect(Math.round(confirm.getBoundingClientRect().right)).to.equal(Math.round(actions.getBoundingClientRect().right))
+  })
+
+  it('gives Material buttons and plain buttons the same 32px height', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(height(actions.querySelector('#md')!)).to.equal(32)
+    expect(height(actions.querySelector('#plain')!)).to.equal(32)
+  })
+
+  it('uses pill shapes inside the popup card', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    const md = actions.querySelector('#md')!
+    expect(getComputedStyle(md).getPropertyValue('--md-filled-button-container-shape').trim()).to.equal('999em')
+    expect(getComputedStyle(actions.querySelector('#plain')!).borderTopLeftRadius).to.not.equal('0px')
+  })
+
+  it('lets a screen raise the height through --popup-action-height', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--popup-action-height: 68px">
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(height(actions.querySelector('#md')!)).to.equal(68)
+    expect(height(actions.querySelector('#plain')!)).to.equal(68)
+  })
+
+  it('paints a destructive action with the error colour', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--md-sys-color-error: rgb(190, 12, 20)">
+        <md-text-button slot="start" destructive id="side">delete</md-text-button>
+        <md-filled-button slot="confirm" destructive id="main">delete all</md-filled-button>
+        <button slot="cancel" id="plain" destructive>cancel</button>
+      </ox-popup-actions>
+    `)
+
+    const side = getComputedStyle(actions.querySelector('#side')!)
+    const main = getComputedStyle(actions.querySelector('#main')!)
+
+    expect(side.getPropertyValue('--md-text-button-label-text-color').trim()).to.equal('rgb(190, 12, 20)')
+    expect(main.getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')
+  })
+
+  it('never paints cancel as destructive', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--md-sys-color-error: rgb(190, 12, 20)">
+        <md-text-button slot="cancel" destructive id="cancel">cancel</md-text-button>
+        <button slot="cancel" destructive id="plain">cancel</button>
+        <md-filled-button slot="confirm">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(getComputedStyle(actions.querySelector('#cancel')!).getPropertyValue('--md-text-button-label-text-color').trim()).to.not.equal(
+      'rgb(190, 12, 20)'
+    )
+    expect(getComputedStyle(actions.querySelector('#plain')!).color).to.not.equal('rgb(190, 12, 20)')
+  })
+})

package/test/ox-prompt-actions.test.ts

@@ -0,0 +1,99 @@
+import { expect } from '@open-wc/testing'
+
+import { OxPrompt } from '../src/ox-prompt.js'
+
+/**
+ * OxPrompt is the first real consumer of the shared action row. Before, its buttons were centred,
+ * confirm stood left of cancel, and both had the theme's 5px corner inside a floating card - a row of
+ * its own, unlike every popup that opened it.
+ *
+ * Checked here: the row is the shared one, confirm is on the right, heights match, a destructive
+ * confirmation is painted and focuses cancel, and the promise still answers true / false.
+ */
+
+const settle = () => new Promise(resolve => setTimeout(resolve, 50))
+
+const TIMEOUT = 'TIMEOUT'
+function within<T>(promise: Promise<T>, ms = 1500): Promise<T | typeof TIMEOUT> {
+  return Promise.race([promise, new Promise<typeof TIMEOUT>(resolve => setTimeout(() => resolve(TIMEOUT), ms))])
+}
+
+async function openPrompt(destructive = false) {
+  const answer = OxPrompt.open({
+    title: 'remove?',
+    text: 'this cannot be undone',
+    confirmButton: { text: 'remove', destructive },
+    cancelButton: { text: 'cancel' },
+    preventCloseOnBlur: true
+  })
+
+  await settle()
+
+  const prompts = document.body.querySelectorAll('ox-prompt')
+  const prompt = prompts[prompts.length - 1] as OxPrompt
+  await prompt.updateComplete
+
+  const root = prompt.renderRoot as ShadowRoot
+  const actions = root.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }
+  await actions?.updateComplete
+
+  const confirm = root.querySelector('#confirm') as HTMLElement & { updateComplete: Promise<unknown> }
+  const cancel = root.querySelector('#cancel') as HTMLElement & { updateComplete: Promise<unknown> }
+  await Promise.all([confirm?.updateComplete, cancel?.updateComplete])
+
+  return { answer, prompt, root, actions, confirm, cancel }
+}
+
+describe('OxPrompt uses the shared action row', () => {
+  before(() => {
+    /* No theme is loaded in the test page; an undefined var() would make every colour read empty. */
+    document.body.style.setProperty('--md-sys-color-error', 'rgb(190, 12, 20)')
+  })
+
+  afterEach(() => {
+    /* A failed assertion before the click leaves its prompt open; do not let it leak into the next test. */
+    document.body.querySelectorAll('ox-prompt').forEach(p => (p as OxPrompt).close())
+  })
+
+  it('renders its buttons in ox-popup-actions, confirm right of cancel, same height', async () => {
+    const { answer, actions, confirm, cancel } = await openPrompt()
+
+    expect(actions, 'ox-popup-actions').to.exist
+    expect(confirm.getAttribute('slot')).to.equal('confirm')
+    expect(cancel.getAttribute('slot')).to.equal('cancel')
+    expect(cancel.getBoundingClientRect().left).to.be.lessThan(confirm.getBoundingClientRect().left)
+    expect(Math.round(confirm.getBoundingClientRect().height)).to.equal(32)
+    expect(Math.round(cancel.getBoundingClientRect().height)).to.equal(32)
+
+    cancel.click()
+    expect(await within(answer)).to.equal(false)
+  })
+
+  it('answers true on confirm', async () => {
+    const { answer, confirm } = await openPrompt()
+
+    confirm.click()
+    expect(await within(answer)).to.equal(true)
+  })
+
+  it('focuses confirm for an ordinary question', async () => {
+    const { answer, root, confirm, cancel } = await openPrompt()
+
+    /* Compare ids, not elements: a failing element comparison makes chai render the DOM and hang. */
+    expect((root.activeElement as HTMLElement | null)?.id).to.equal('confirm')
+
+    cancel.click()
+    await within(answer)
+  })
+
+  it('paints a destructive confirmation and focuses cancel', async () => {
+    const { answer, root, confirm, cancel } = await openPrompt(true)
+
+    expect(confirm.hasAttribute('destructive')).to.equal(true)
+    expect(getComputedStyle(confirm).getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')
+    expect((root.activeElement as HTMLElement | null)?.id).to.equal('cancel')
+
+    cancel.click()
+    expect(await within(answer)).to.equal(false)
+  })
+})

package/test/popup-result.test.ts

@@ -0,0 +1,150 @@
+import { expect } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { closePopup, openPopup } from '../src/open-popup.js'
+import { OxFloatingOverlay } from '../src/ox-floating-overlay.js'
+
+/**
+ * The popup result settles exactly once, with the right value, whichever way the popup closes -
+ * for the default implementation (no @operato/layout loaded).
+ *
+ * The implementation's one promise is "call onclosed once when the popup is gone". Before this test
+ * the default implementation kept it only for handle.close(): ESC, the backdrop and X removed the
+ * overlay without telling the handle, so an awaited result would have hung forever.
+ *
+ * The same table runs for the layout implementation in @operato/layout/test. A new implementation
+ * adds its own row there.
+ */
+
+const TIMEOUT = 'TIMEOUT'
+
+/** Never await a result bare - a broken implementation must fail the test, not hang the runner. */
+function within<T>(promise: Promise<T>, ms = 2000): Promise<T | typeof TIMEOUT> {
+  return Promise.race([promise, new Promise<typeof TIMEOUT>(resolve => setTimeout(() => resolve(TIMEOUT), ms))])
+}
+
+function overlayOf(handle: { name: string }): OxFloatingOverlay {
+  return document.getElementById(handle.name) as OxFloatingOverlay
+}
+
+async function open(options = {}) {
+  const handle = openPopup<string>(html`<div class="content">content</div>`, { backdrop: true, ...options })
+  let onclosedCalls = 0
+  handle.onclosed = () => onclosedCalls++
+
+  const overlay = overlayOf(handle)
+  await overlay.updateComplete
+
+  return {
+    handle,
+    overlay,
+    content: overlay.querySelector('.content') as HTMLElement,
+    onclosedCalls: () => onclosedCalls
+  }
+}
+
+/** Lets any late second settle or second onclosed show up before counting. */
+const settleTurn = () => new Promise(resolve => setTimeout(resolve, 50))
+
+describe('openPopup result - default implementation', () => {
+  it('handle.close(value) settles with that value', async () => {
+    const { handle, onclosedCalls } = await open()
+
+    handle.close('saved')
+
+    expect(await within(handle.result)).to.equal('saved')
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('closePopup(element, value) from the content settles with that value', async () => {
+    const { handle, content, onclosedCalls } = await open()
+
+    closePopup(content, 'picked')
+
+    expect(await within(handle.result)).to.equal('picked')
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('closePopup(element) without a value settles undefined', async () => {
+    const { handle, content } = await open()
+
+    closePopup(content)
+
+    expect(await within(handle.result)).to.equal(undefined)
+  })
+
+  it('ESC settles undefined and reports closed', async () => {
+    const { handle, onclosedCalls } = await open({ escapable: true })
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('backdrop click settles undefined and reports closed', async () => {
+    const { handle, overlay, onclosedCalls } = await open()
+
+    const backdrop = overlay.renderRoot.querySelector('#backdrop') as HTMLElement
+    expect(backdrop, 'backdrop element').to.exist
+    backdrop.click()
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the X button settles undefined and reports closed', async () => {
+    const { handle, overlay, onclosedCalls } = await open({ closable: true, title: 'x' })
+
+    const closer = overlay.renderRoot.querySelector('[closable][close]') as HTMLElement
+    expect(closer, 'close button').to.exist
+    closer.click()
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the first close request wins: closePopup then handle.close', async () => {
+    const { handle, content, onclosedCalls } = await open()
+
+    closePopup(content, 'first')
+    handle.close('second')
+
+    expect(await within(handle.result)).to.equal('first')
+    await settleTurn()
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the first close request wins: handle.close twice', async () => {
+    const { handle, onclosedCalls } = await open()
+
+    handle.close('first')
+    handle.close('second')
+
+    expect(await within(handle.result)).to.equal('first')
+    await settleTurn()
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('an onclosed assigned before the change is still called once', async () => {
+    const handle = openPopup(html`<div>legacy</div>`)
+    let calls = 0
+    handle.onclosed = () => calls++
+
+    handle.close()
+
+    await within(handle.result)
+    await settleTurn()
+    expect(calls).to.equal(1)
+  })
+})