@api-client/ui 0.5.3 → 0.5.4

package/src/md/dialog/internals/Dialog.ts

@@ -123,6 +123,13 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    */
   @property({ type: String }) accessor confirmLabel: string | undefined
 
+  /**
+   * When true, styles the confirm button with error colors to indicate
+   * a destructive action (e.g., delete, remove, etc.).
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor destructive = false
+
   /**
    * Part of the imperative access to the element.
    * When set, it wraps the content in a `<form>` element.
@@ -300,6 +307,9 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
 
   override handleKeyDown(e: KeyboardEvent): void {
     super.handleKeyDown(e)
+    if (e.defaultPrevented) {
+      return
+    }
     if (e.key === 'Escape') {
       this.handleInteraction('dismiss')
     }
@@ -389,9 +399,10 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   override render(): TemplateResult {
-    const { useForm } = this
+    const { useForm, modal } = this
+    const dialogClass = modal ? 'modal' : 'non-modal'
     return html`
-      <dialog @close="${this.handleDialogClose}" part="dialog">
+      <dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
         <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
       </dialog>
     `
@@ -413,6 +424,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     const classes: ClassInfo = {
       'icon': true,
       'with-icon': this.hasIcon,
+      'destructive': this.destructive,
     }
     return html`
       <div class="${classMap(classes)}" part="icon">
@@ -473,17 +485,18 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   #renderConfirmButton(): TemplateResult | typeof nothing {
-    const { confirmLabel, confirmValue = 'confirm', useForm } = this
+    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this
     if (!confirmLabel) {
       return nothing
     }
     const type = useForm ? 'submit' : 'button'
+    const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'
     return html`
       <ui-button
         color="text"
         type="${type}"
         value="${confirmValue}"
-        class="internal-button"
+        class="${buttonClass}"
         @click="${this.handleConfirm}"
         part="positive-action"
         >${confirmLabel}</ui-button

package/src/md/dialog/ui-confirm-dialog.ts

@@ -0,0 +1,52 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/ConfirmDialog.js'
+import dialogStyles from './internals/Dialog.styles.js'
+
+/**
+ * A simple Material Design 3 styled confirm dialog component.
+ *
+ * This dialog is designed specifically for confirmation workflows where users
+ * need to confirm or dismiss an action. It provides a clean, accessible interface
+ * with customizable button labels and content.
+ *
+ * **Features:**
+ * - Material Design 3 styling
+ * - Customizable confirm and dismiss button labels
+ * - Modal by default
+ * - Accessible keyboard navigation
+ * - Slot-based content structure
+ *
+ * **Usage:**
+ * ```html
+ * <ui-confirm-dialog .open="${showDialog}" @close="${handleClose}">
+ *   <span slot="title">Confirm Action</span>
+ *   <p>Are you sure you want to proceed with this action?</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * **Customizing Button Labels:**
+ * ```html
+ * <ui-confirm-dialog
+ *   confirmLabel="Delete"
+ *   dismissLabel="Keep"
+ *   .open="${showDialog}"
+ * >
+ *   <span slot="title">Delete Item</span>
+ *   <p>This action cannot be undone.</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * @slot title - The dialog title
+ * @slot - The main content body
+ */
+@customElement('ui-confirm-dialog')
+export class UiConfirmDialogElement extends Element {
+  static override styles: CSSResultOrNative[] = [dialogStyles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-confirm-dialog': UiConfirmDialogElement
+  }
+}

package/test/README.md

@@ -49,6 +49,8 @@ npm run test:watch
 npm run test:coverage
 ```
 
+> ⚠️ **Note**: This project uses Web Test Runner, not Jest. Test filtering options like `--testPathPattern` from Jest are not available. To run specific tests, you can temporarily modify the `files` pattern in `web-test-runner.config.js` or use pattern matching if supported by your Web Test Runner version. For most cases, running all tests is recommended as the test suite is optimized for speed.
+
 ## Global Test Utilities
 
 The setup provides global utilities accessible via `window.testUtils`:

package/test/md/dialog/UiConfirmDialog.test.ts

@@ -0,0 +1,131 @@
+import { fixture, html, assert } from '@open-wc/testing'
+import '../../../src/md/dialog/ui-confirm-dialog.js'
+import type UiConfirmDialog from '../../../src/md/dialog/internals/ConfirmDialog.js'
+
+describe('UiConfirmDialog', () => {
+  async function basicFixture(): Promise<UiConfirmDialog> {
+    return fixture(html`<ui-confirm-dialog></ui-confirm-dialog>`)
+  }
+
+  async function customLabelsFixture(): Promise<UiConfirmDialog> {
+    return fixture(html`<ui-confirm-dialog confirmLabel="Delete" dismissLabel="Keep"></ui-confirm-dialog>`)
+  }
+
+  async function withContentFixture(): Promise<UiConfirmDialog> {
+    return fixture(html`
+      <ui-confirm-dialog>
+        <span slot="title">Confirm Action</span>
+        <p>Are you sure you want to proceed?</p>
+      </ui-confirm-dialog>
+    `)
+  }
+
+  async function destructiveFixture(): Promise<UiConfirmDialog> {
+    return fixture(html`<ui-confirm-dialog destructive></ui-confirm-dialog>`)
+  }
+
+  it('renders with default labels', async () => {
+    const element = await basicFixture()
+    assert.equal(element.confirmLabel, 'Confirm')
+    assert.equal(element.dismissLabel, 'Cancel')
+  })
+
+  it('renders with custom labels', async () => {
+    const element = await customLabelsFixture()
+    assert.equal(element.confirmLabel, 'Delete')
+    assert.equal(element.dismissLabel, 'Keep')
+  })
+
+  it('is modal by default', async () => {
+    const element = await basicFixture()
+    assert.isTrue(element.modal)
+  })
+
+  it('renders buttons with correct values', async () => {
+    const element = await basicFixture()
+    await element.updateComplete
+
+    const dismissButton = element.shadowRoot!.querySelector('ui-button[value="dismiss"]')
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+
+    assert.ok(dismissButton, 'has dismiss button')
+    assert.ok(confirmButton, 'has confirm button')
+    assert.equal(dismissButton!.textContent!.trim(), 'Cancel')
+    assert.equal(confirmButton!.textContent!.trim(), 'Confirm')
+  })
+
+  it('renders title slot', async () => {
+    const element = await withContentFixture()
+    await element.updateComplete
+
+    const titleSlot = element.shadowRoot!.querySelector('slot[name="title"]')
+    assert.ok(titleSlot, 'has title slot')
+  })
+
+  it('renders body slot', async () => {
+    const element = await withContentFixture()
+    await element.updateComplete
+
+    const bodySlot = element.shadowRoot!.querySelector('slot:not([name])')
+    assert.ok(bodySlot, 'has body slot')
+  })
+
+  it('uses filled button for confirm action', async () => {
+    const element = await basicFixture()
+    await element.updateComplete
+
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+    assert.equal(confirmButton!.getAttribute('color'), 'filled')
+  })
+
+  it('uses text button for dismiss action', async () => {
+    const element = await basicFixture()
+    await element.updateComplete
+
+    const dismissButton = element.shadowRoot!.querySelector('ui-button[value="dismiss"]')
+    assert.equal(dismissButton!.getAttribute('color'), 'text')
+  })
+
+  it('renders as destructive dialog', async () => {
+    const element = await destructiveFixture()
+    await element.updateComplete
+
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+    assert.ok(confirmButton?.classList.contains('destructive'), 'confirm button has destructive class')
+  })
+
+  it('renders confirm button with destructive styling', async () => {
+    const element = await destructiveFixture()
+    await element.updateComplete
+
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+    assert.equal(confirmButton!.getAttribute('color'), 'filled')
+    assert.ok(confirmButton!.classList.contains('destructive'), 'has destructive class for styling')
+  })
+
+  it('is not destructive by default', async () => {
+    const element = await basicFixture()
+    assert.isFalse(element.destructive)
+  })
+
+  it('can be set to destructive', async () => {
+    const element = await destructiveFixture()
+    assert.isTrue(element.destructive)
+  })
+
+  it('applies destructive class to confirm button when destructive is true', async () => {
+    const element = await destructiveFixture()
+    await element.updateComplete
+
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+    assert.isTrue(confirmButton!.classList.contains('destructive'))
+  })
+
+  it('does not apply destructive class when destructive is false', async () => {
+    const element = await basicFixture()
+    await element.updateComplete
+
+    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
+    assert.isFalse(confirmButton!.classList.contains('destructive'))
+  })
+})

package/test/md/dialog/UiDialog.test.ts

@@ -145,6 +145,26 @@ describe('md', () => {
         await element.updateComplete
         assert.isTrue(spy.calledOnce)
       })
+
+      it('applies modal class to dialog when modal is true', async () => {
+        const element = await basicFixture()
+        element.modal = true
+        await element.updateComplete
+
+        const dialog = element.shadowRoot!.querySelector('dialog') as HTMLDialogElement
+        assert.ok(dialog, 'has the dialog element')
+        assert.isTrue(dialog.classList.contains('modal'), 'has modal class')
+      })
+
+      it('applies non-modal class to dialog when modal is false', async () => {
+        const element = await basicFixture()
+        element.modal = false
+        await element.updateComplete
+
+        const dialog = element.shadowRoot!.querySelector('dialog') as HTMLDialogElement
+        assert.ok(dialog, 'has the dialog element')
+        assert.isTrue(dialog.classList.contains('non-modal'), 'has non-modal class')
+      })
     })
 
     describe('icon', () => {
@@ -229,6 +249,28 @@ describe('md', () => {
         const container = element.shadowRoot!.querySelector('.buttons') as HTMLElement
         assert.isTrue(container.classList.contains('with-buttons'), 'has the with-buttons class')
       })
+
+      it('applies destructive class to confirm button when destructive is true', async () => {
+        const element = await basicFixture()
+        element.confirmLabel = 'Delete'
+        element.destructive = true
+        await element.updateComplete
+
+        const button = element.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton
+        assert.ok(button, 'has the confirm button')
+        assert.isTrue(button.classList.contains('destructive'), 'has destructive class')
+      })
+
+      it('does not apply destructive class when destructive is false', async () => {
+        const element = await basicFixture()
+        element.confirmLabel = 'Confirm'
+        element.destructive = false
+        await element.updateComplete
+
+        const button = element.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton
+        assert.ok(button, 'has the confirm button')
+        assert.isFalse(button.classList.contains('destructive'), 'does not have destructive class')
+      })
     })
 
     describe('form handling', () => {