@kubex/zinc 1.1.185 → 2.0.1

package/src/components/priority-list/priority-list.scss

@@ -33,11 +33,8 @@
   pointer-events: none;
 }
 
-// During an active drag, animate items shifting into new positions
-.priority-list--drag-active {
-  .priority-list__item {
-    transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
-  }
+.priority-list--drag-active .priority-list__item {
+  cursor: grabbing;
 }
 
 .priority-list__item {
@@ -52,20 +49,21 @@
   user-select: none;
   -webkit-user-drag: element;
   position: relative;
+  // Its own layer, or Chrome draws the drag image over a white box that shows at the rounded corners
+  transform: translate(0, 0);
 
   &:hover {
-    background: rgb(var(--zn-panel-hover, var(--zn-panel)));
-    border-color: rgb(var(--zn-color-primary-500));
+    border-color: rgb(var(--zn-primary));
 
     .priority-list__handle {
-      color: rgb(var(--zn-color-primary-500));
+      color: rgb(var(--zn-primary));
     }
   }
 
   &:focus-visible {
-    outline: 2px solid rgb(var(--zn-color-primary-500));
+    outline: 2px solid rgb(var(--zn-primary));
     outline-offset: -1px;
-    border-color: rgb(var(--zn-color-primary-500));
+    border-color: rgb(var(--zn-primary));
   }
 
   &:active {
@@ -73,13 +71,22 @@
   }
 }
 
-// The item currently being dragged — shown as a faded placeholder
+// The dragged row's slot. An inset outline, as hover and last-child rules reset the border and flush panels clip it.
+// The border is hidden so it doesn't show between the dashes or past the outline's rounded corners.
+.priority-list__item--dragging,
+.priority-list__item--dragging:hover {
+  border-color: transparent;
+}
+
 .priority-list__item--dragging {
-  opacity: 0.3;
-  border-style: dashed;
-  border-color: rgb(var(--zn-color-primary-400));
-  background: rgb(var(--zn-color-primary-50, var(--zn-panel)));
+  outline: 1px dashed var(--zn-color-primary-400);
+  outline-offset: -1px;
+  background: rgba(var(--zn-primary), 0.06);
   box-shadow: none;
+
+  > * {
+    opacity: 0;
+  }
 }
 
 .priority-list__item--disabled {
@@ -121,8 +128,7 @@
   flex: 1;
   min-width: 0;
   overflow: hidden;
-  // Prevent slotted content from capturing its own drag events,
-  // which would override the item-level draggable behaviour
+  // A press anywhere on the content grabs the row, not the content
   pointer-events: none;
 
   ::slotted(*) {
@@ -131,6 +137,37 @@
   }
 }
 
+// Tiles fill the row; the row supplies the padding
+.priority-list__content ::slotted(zn-tile) {
+  --zn-tile-padding-inline: 0;
+  --zn-tile-padding-block: 0;
+  --zn-tile-min-height: 0;
+  --zn-tile-hover-background: transparent;
+  --zn-tile-hover-caption-color: rgb(var(--zn-primary));
+  --zn-tile-hover-caption-decoration: underline;
+}
+
+.priority-list__content ::slotted(zn-tile[href]),
+.priority-list__content ::slotted(zn-tile[data-uri]) {
+  pointer-events: auto;
+}
+
+.priority-list__item--locked {
+  cursor: default;
+
+  &:active {
+    cursor: default;
+  }
+
+  .priority-list__handle {
+    cursor: default;
+  }
+
+  &:hover .priority-list__handle {
+    color: var(--zn-priority-list-handle-color);
+  }
+}
+
 .priority-list__actions {
   display: flex;
   align-items: center;
@@ -145,6 +182,65 @@
   }
 }
 
+.priority-list__move {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-3x-small);
+}
+
+.priority-list__item--selectable {
+  cursor: pointer;
+}
+
+.priority-list__item--selected,
+.priority-list__item--selected:hover {
+  background: var(--zn-priority-list-selected-background, rgba(var(--zn-primary), 0.08));
+  box-shadow: inset 3px 0 0 rgb(var(--zn-primary));
+}
+
+:host([hide-priority]) .priority-list__priority {
+  display: none;
+}
+
+:host([flush]) {
+  // The shared focus-ring margin would inset the rows from the panel edges.
+  --zn-form-control-input-margin: 0;
+
+  .form-control__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .priority-list {
+    gap: 0;
+  }
+
+  .priority-list__item {
+    padding-inline: var(--zn-panel-padding, var(--zn-spacing-medium));
+    border: 0;
+    border-bottom: 1px solid var(--zn-table-row-divider-color, rgb(var(--zn-border-color)));
+    border-radius: 0;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover {
+      border-color: var(--zn-table-row-divider-color, rgb(var(--zn-border-color)));
+    }
+  }
+
+  // Set while dragging to the radius of any panel corner the row sits in
+  .priority-list__item--dragging {
+    border-radius: var(--zn-priority-list-drag-radius, 0);
+  }
+}
+
 // Size variants
 :host([size="small"]) {
   .priority-list__item {

package/src/components/priority-list/priority-list.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
 
 describe('<zn-priority-list>', () => {
   it('should render a component', async () => {
@@ -176,7 +177,10 @@ describe('<zn-priority-list>', () => {
 
     await el.updateComplete;
     const item = el.shadowRoot.querySelector('.priority-list__item');
-    expect(item.getAttribute('draggable')).to.equal('false');
+    startDrag(item);
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.priority-list__item--dragging')).to.not.exist;
+    drop(0, 0);
     expect(item.getAttribute('tabindex')).to.equal('-1');
   });
 
@@ -204,7 +208,7 @@ describe('<zn-priority-list>', () => {
     });
 
     const item = el.shadowRoot.querySelector('.priority-list__item');
-    item.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true, cancelable: true}));
+    item.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', altKey: true, bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
     document.removeEventListener('zn-register-element', onRegister);
@@ -213,4 +217,298 @@ describe('<zn-priority-list>', () => {
     expect(submitter).to.exist;
     expect(submitter!.getAttribute('formaction')).to.equal('/save');
   });
+
+  it('draws flush rows divided edge to edge without priority numbers', async () => {
+    const el = await fixture(html`
+      <zn-priority-list label="Order" flush hide-priority style="--zn-border-color: 1, 2, 3">
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const [first, last] = el.shadowRoot.querySelectorAll('.priority-list__item');
+    expect(getComputedStyle(first).borderTopWidth).to.equal('0px');
+    expect(getComputedStyle(first).borderRadius).to.equal('0px');
+    expect(getComputedStyle(first).borderBottomWidth).to.equal('1px');
+    expect(getComputedStyle(last).borderBottomWidth).to.equal('0px');
+    expect(getComputedStyle(el.shadowRoot.querySelector('.priority-list__priority')).display).to.equal('none');
+    expect(getComputedStyle(el.shadowRoot.querySelector('.form-control__label')).position).to.equal('absolute');
+    expect(getComputedStyle(el.shadowRoot.querySelector('.form-control-input')).margin).to.equal('0px');
+  });
+
+  it('keeps actions inside tile items clickable', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <zn-tile value="a" caption="Second chance">
+          <zn-button slot="actions" label="Edit"></zn-button>
+        </zn-tile>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+    const tile = el.querySelector('zn-tile');
+    await tile.updateComplete;
+
+    expect(getComputedStyle(tile).pointerEvents).to.equal('none');
+    expect(getComputedStyle(tile.shadowRoot.querySelector('.tile__right')).pointerEvents).to.equal('auto');
+    expect(el.shadowRoot.querySelector('.priority-list__item').getAttribute('aria-label')).to.equal('Second chance - priority 1');
+  });
+
+  it('re-renders when an item locks after first render', async () => {
+    const el = await fixture(html`
+      <zn-priority-list move-buttons>
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    el.querySelector('[value=b]').setAttribute('locked', '');
+    await new Promise(r => setTimeout(r));
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelectorAll('.priority-list__item--locked')).to.have.length(1);
+  });
+
+  it('keeps a locked item in place', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="a">A</div>
+        <div value="b">B</div>
+        <div value="c" locked>C</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const items = el.shadowRoot.querySelectorAll('.priority-list__item');
+    items[2].dispatchEvent(new KeyboardEvent('keydown', {key: 'Home', altKey: true, bubbles: true}));
+    items[1].dispatchEvent(new KeyboardEvent('keydown', {key: 'End', altKey: true, bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.deep.equal(['a', 'b', 'c']);
+    startDrag(items[2]);
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.priority-list__item--dragging')).to.not.exist;
+    drop(0, 0);
+  });
+
+  it('keeps one tab stop and moves focus with plain arrows', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const [first, second] = el.shadowRoot.querySelectorAll('.priority-list__item');
+    expect([first.getAttribute('tabindex'), second.getAttribute('tabindex')]).to.deep.equal(['0', '-1']);
+
+    first.focus();
+    first.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.deep.equal(['a', 'b']);
+    expect(el.shadowRoot.activeElement).to.equal(second);
+    expect([first.getAttribute('tabindex'), second.getAttribute('tabindex')]).to.deep.equal(['-1', '0']);
+  });
+
+  it('moves items with the move buttons', async () => {
+    const el = await fixture(html`
+      <zn-priority-list move-buttons>
+        <div value="a">A</div>
+        <div value="b">B</div>
+        <div value="c" locked>C</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const rows = () => [...el.shadowRoot.querySelectorAll('.priority-list__item')] as HTMLElement[];
+    const [first, second, locked] = rows();
+    expect(first.querySelector('zn-button[label="Move up"]')!.hasAttribute('disabled')).to.be.true;
+    expect(second.querySelector('zn-button[label="Move down"]')!.hasAttribute('disabled')).to.be.true;
+    expect(locked.querySelector('zn-button')).to.not.exist;
+
+    const down = first.querySelector('zn-button[label="Move down"]') as any;
+    await down.updateComplete;
+    down.shadowRoot.querySelector('button').click();
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['b', 'a', 'c']);
+  });
+
+  describe('dragging', () => {
+    const over = (target: HTMLElement, edge: 'top' | 'bottom') => {
+      const rect = target.getBoundingClientRect();
+      dragTo(centre(target).x, edge === 'top' ? rect.top + 1 : rect.bottom - 1);
+    };
+
+    const setup = async () => {
+      const el = await fixture(html`
+        <zn-priority-list>
+          <div value="a">A</div>
+          <div value="b">B</div>
+          <div value="c">C</div>
+        </zn-priority-list>
+      `) as any;
+      await el.updateComplete;
+      const reorders: string[][] = [];
+      el.addEventListener('zn-reorder', () => reorders.push([...el.value]));
+      const rows = () => [...el.shadowRoot.querySelectorAll('.priority-list__item')] as HTMLElement[];
+      return {el, reorders, rows};
+    };
+
+    it('swaps only once the pointer crosses the target midpoint', async () => {
+      const {el, reorders, rows} = await setup();
+
+      startDrag(rows()[0]);
+      over(rows()[1], 'top');
+      expect(el.value).to.deep.equal(['a', 'b', 'c']);
+
+      over(rows()[1], 'bottom');
+      expect(el.value).to.deep.equal(['b', 'a', 'c']);
+      await el.updateComplete;
+
+      const {x, y} = centre(rows()[1]);
+      drop(x, y);
+      expect(reorders).to.deep.equal([['b', 'a', 'c']]);
+    });
+
+    it('restores the order and stays silent when let go outside the list', async () => {
+      const {el, reorders, rows} = await setup();
+
+      startDrag(rows()[0]);
+      over(rows()[2], 'bottom');
+      expect(el.value).to.deep.equal(['b', 'c', 'a']);
+      await el.updateComplete;
+
+      const list = el.shadowRoot.querySelector('.priority-list').getBoundingClientRect();
+      drop(list.right + 50, list.bottom + 50);
+      expect(el.value).to.deep.equal(['a', 'b', 'c']);
+      expect(reorders).to.be.empty;
+    });
+
+    it('restores the order when Escape is pressed mid-drag', async () => {
+      const {el, reorders, rows} = await setup();
+
+      startDrag(rows()[0]);
+      over(rows()[1], 'bottom');
+      expect(el.value).to.deep.equal(['b', 'a', 'c']);
+      await el.updateComplete;
+
+      window.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+      await el.updateComplete;
+      expect(el.value).to.deep.equal(['a', 'b', 'c']);
+      expect(el.shadowRoot.querySelector('.priority-list__item--dragging')).to.not.exist;
+      expect(reorders).to.be.empty;
+    });
+
+    it('treats a press without movement as a click', async () => {
+      const {el, rows} = await setup();
+      const {x, y} = centre(rows()[0]);
+      rows()[0].dispatchEvent(new PointerEvent('pointerdown', {pointerId: 1, button: 0, clientX: x, clientY: y, bubbles: true, composed: true}));
+      dragTo(x + 2, y);
+      await el.updateComplete;
+      expect(el.shadowRoot.querySelector('.priority-list__item--dragging')).to.not.exist;
+      drop(x + 2, y);
+    });
+  });
+
+  it('puts the move buttons ahead of the item actions, with tooltips', async () => {
+    const el = await fixture(html`
+      <zn-priority-list move-buttons>
+        <div value="a">A</div>
+        <zn-button slot="action-a" tooltip="Edit"></zn-button>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const actions = el.shadowRoot.querySelector('.priority-list__actions');
+    expect(actions.firstElementChild.classList.contains('priority-list__move')).to.be.true;
+    expect(actions.lastElementChild.getAttribute('name')).to.equal('action-a');
+    expect(actions.querySelector('zn-button[label="Move up"]').getAttribute('tooltip')).to.equal('Move up');
+  });
+
+  it('keeps a linked tile clickable without letting its link take the drag', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <zn-tile value="a" caption="Second chance" href="/steps/a"></zn-tile>
+        <zn-tile value="b" caption="Confirmation"></zn-tile>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+    const [linked, plain] = el.querySelectorAll('zn-tile');
+    await linked.updateComplete;
+
+    expect(getComputedStyle(linked).pointerEvents).to.equal('auto');
+    expect(getComputedStyle(plain).pointerEvents).to.equal('none');
+    expect(linked.shadowRoot.querySelector('a.tile__link').getAttribute('draggable')).to.equal('false');
+  });
+
+  it('selects an item on click and passes the click on to it', async () => {
+    const el = await fixture(html`
+      <zn-priority-list label="Sections" selectable selected="a">
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    const clicked: string[] = [];
+    el.querySelector('[value="b"]').addEventListener('click', () => clicked.push('b'));
+    const selected: string[] = [];
+    el.addEventListener('zn-select', (e: CustomEvent) => selected.push(e.detail.item.getAttribute('value')));
+
+    const items = el.shadowRoot.querySelectorAll('.priority-list__item');
+    expect(items[0].getAttribute('aria-selected')).to.equal('true');
+    items[1].click();
+    await el.updateComplete;
+
+    expect(el.selected).to.equal('b');
+    expect(clicked).to.deep.equal(['b']);
+    expect(selected).to.deep.equal(['b']);
+    expect(el.shadowRoot.querySelectorAll('.priority-list__item')[1].getAttribute('aria-selected')).to.equal('true');
+  });
+
+  it('follows the item zn-tabs marks active', async () => {
+    const el = await fixture(html`
+      <zn-priority-list label="Sections" selectable selected="a">
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+    await el.updateComplete;
+
+    el.querySelector('[value="b"]').classList.add('zn-tb-active');
+    await new Promise(resolve => setTimeout(resolve));
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelectorAll('.priority-list__item')[1].getAttribute('aria-selected')).to.equal('true');
+  });
+
+  it('should round the placeholder to the panel corner it moves into while dragging', async () => {
+    const panel = await fixture(html`
+      <zn-panel flush style="--zn-panel-border-radius: 12px">
+        <zn-priority-list flush>
+          <div value="a">A</div>
+          <div value="b">B</div>
+          <div value="c">C</div>
+        </zn-priority-list>
+      </zn-panel>
+    `);
+    const el = panel.querySelector('zn-priority-list')!;
+    await el.updateComplete;
+    const rows = () => [...el.shadowRoot!.querySelectorAll<HTMLElement>('.priority-list__item')];
+    const placeholderRadius = () => getComputedStyle(el.shadowRoot!.querySelector('.priority-list__item--dragging')!).borderRadius;
+
+    startDrag(rows()[1]);
+    await aTimeout(50);
+    expect(placeholderRadius()).to.equal('0px');
+
+    const top = rows()[0].getBoundingClientRect();
+    dragTo(centre(rows()[0]).x, top.top + 1);
+    await el.updateComplete;
+    expect(placeholderRadius()).to.equal('12px 12px 0px 0px');
+    window.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+    drop(0, 0);
+  });
 });

package/src/components/progress-bar/progress-bar.component.ts

@@ -66,7 +66,7 @@ export default class ZnProgressBar extends ZincElement {
         <rect
           part="fill"
           fill="var(--zn-progress-bar-color)"
-          width="${this.value}%"
+          style="width: ${this.value}%"
           height="100%"
           clip-path="url(#clip-path)"
           rx="4px"

package/src/components/progress-bar/progress-bar.scss

@@ -10,19 +10,19 @@
 }
 
 :host([color="info"]) {
-  --zn-progress-bar-color: rgb(var(--zn-color-info));
+  --zn-progress-bar-color: var(--zn-color-info-solid);
 }
 
 :host([color="error"]) {
-  --zn-progress-bar-color: rgb(var(--zn-color-error));
+  --zn-progress-bar-color: var(--zn-color-danger-solid);
 }
 
 :host([color="success"]) {
-  --zn-progress-bar-color: rgb(var(--zn-color-success));
+  --zn-progress-bar-color: var(--zn-color-success-solid);
 }
 
 :host([color="warning"]) {
-  --zn-progress-bar-color: rgb(var(--zn-color-warning));
+  --zn-progress-bar-color: var(--zn-color-warning-solid);
 }
 
 .header {
@@ -60,3 +60,15 @@
 .footer {
   margin-top: var(--zn-spacing-x-small);
 }
+
+[part="track"] {
+  fill: var(--zn-progress-track-color, rgba(var(--zn-border-color)));
+}
+
+[part="fill"] {
+  transition: width 300ms var(--zn-ease-out);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

package/src/components/progress-tile/progress-tile.scss

@@ -50,7 +50,7 @@
       gap: 3px;
       font-size: 12px;
       font-weight: 400;
-      color: rgb(var(--zn-primary));
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
 
       p {
         margin: 0;