@1024pix/pix-ui 61.4.1 → 62.0.1

package/addon/components/pix-modal.gjs

@@ -36,15 +36,9 @@ export default class PixModal extends Component {
       @onClose={{@onCloseButtonClick}}
       @focusOnClose={{@focusOnClose}}
       @hasCenteredContent={{true}}
+      @labelledBy="modal-title--{{this.id}}"
     >
-      <div
-        class="pix-modal pix-modal--{{this.variant}}"
-        role="dialog"
-        aria-labelledby="modal-title--{{this.id}}"
-        aria-describedby="modal-content--{{this.id}}"
-        aria-modal="true"
-        ...attributes
-      >
+      <div class="pix-modal pix-modal--{{this.variant}}" ...attributes>
         <PixModalHeader
           @id="modal-title--{{this.id}}"
           @title={{@title}}
@@ -55,7 +49,7 @@ export default class PixModal extends Component {
           @onCloseButtonClick={{@onCloseButtonClick}}
         />
 
-        <div id="modal-content--{{this.id}}" class="pix-modal__content">
+        <div class="pix-modal__content">
           {{yield to="content"}}
         </div>
         <div class="pix-modal__footer">

package/addon/components/pix-overlay.gjs

@@ -2,8 +2,7 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
-import onEscapeAction from '../modifiers/on-escape-action';
-import trapFocus from '../modifiers/trap-focus';
+import modalDialog from '../modifiers/modal-dialog';
 
 export default class PixOverlay extends Component {
   @action
@@ -15,17 +14,41 @@ export default class PixOverlay extends Component {
     }
   }
 
+  /**
+   * A `<dialog>` cancel does not bubble, unlike an `<input type="file">` one when its picker is
+   * dismissed. Without `onClose`, the default action is kept so the user is not trapped inside.
+   */
+  @action
+  onCancel(event) {
+    const isCloseRequestOnOverlay = event.target === event.currentTarget;
+
+    if (!isCloseRequestOnOverlay || !this.args.onClose) {
+      return;
+    }
+
+    event.preventDefault();
+    this.args.onClose(event);
+  }
+
+  @action
+  onDialogClose(event) {
+    if (this.args.isVisible && this.args.onClose) {
+      this.args.onClose(event);
+    }
+  }
+
   <template>
-    <div
-      class="pix-overlay
-        {{unless @isVisible ' pix-overlay--hidden'}}
-        {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
+    <dialog
+      class="pix-overlay {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
+      aria-labelledby={{@labelledBy}}
+      aria-describedby={{@describedBy}}
       {{on "click" this.onClick}}
-      {{trapFocus @isVisible @focusOnClose}}
-      {{onEscapeAction @onClose}}
+      {{on "cancel" this.onCancel}}
+      {{on "close" this.onDialogClose}}
+      {{modalDialog @isVisible @focusOnClose}}
       ...attributes
     >
       {{yield}}
-    </div>
+    </dialog>
   </template>
 }

package/addon/components/pix-side-panel.gjs

@@ -36,16 +36,9 @@ export default class PixSidePanel extends Component {
       @isVisible={{@showSidePanel}}
       @onClose={{@onClose}}
       @focusOnClose={{@focusOnClose}}
+      @labelledBy="side-panel-title--{{this.id}}"
     >
-      <div
-        class="pix-side-panel pix-side-panel--{{this.variant}}
-          {{unless @showSidePanel ' pix-side-panel--hidden'}}"
-        role="dialog"
-        aria-labelledby="side-panel-title--{{this.id}}"
-        aria-describedby="side-panel-content--{{this.id}}"
-        aria-modal="true"
-        ...attributes
-      >
+      <div class="pix-side-panel pix-side-panel--{{this.variant}}" ...attributes>
         <PixModalHeader
           class="pix-side-panel__header"
           @id="side-panel-title--{{this.id}}"
@@ -56,7 +49,7 @@ export default class PixSidePanel extends Component {
           @onCloseButtonClick={{@onClose}}
         />
 
-        <div id="side-panel-content--{{this.id}}" class="pix-side-panel__content">
+        <div class="pix-side-panel__content">
           {{yield to="content"}}
         </div>
         <div class="pix-side-panel__footer pix-side-panel__footer--{{this.variant}}">

package/addon/components/pix-table.gjs

@@ -10,6 +10,7 @@ import PixBlock from './pix-block';
 export default class PixTable extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
+
     warn(
       `PixTable: @variant "${value}" should be ${VARIANTS.join(', ')}`,
       VARIANTS.includes(value),
@@ -25,11 +26,11 @@ export default class PixTable extends Component {
     warn(`PixTable: @caption is required`, Boolean(this.args.caption), {
       id: 'pix-ui.pix-table.caption.required',
     });
+
     return this.args.caption;
   }
 
   get tableClass() {
-    const tableClass = ['pix-table'];
     warn(
       'PixTable: @condensed must be a boolean, default undefined',
       [true, false, undefined].includes(this.args.condensed),
@@ -37,15 +38,14 @@ export default class PixTable extends Component {
         id: 'pix-ui.pix-table.condensed.not-boolean',
       },
     );
-    if (this.args.condensed) {
-      tableClass.push('pix-table--condensed');
-    }
 
+    const tableClass = ['pix-table'];
+    if (this.args.condensed) tableClass.push('pix-table--condensed');
     return tableClass.join(' ');
   }
 
   get headerClass() {
-    return `pix-table-header--${this.variant}`;
+    return `pix-table-header pix-table-header--${this.variant}`;
   }
 
   get captionClass() {
@@ -59,6 +59,7 @@ export default class PixTable extends Component {
   @action
   onClick(row, event) {
     event.stopPropagation();
+
     if (this.hasOnRowClick) {
       this.args.onRowClick(row);
     }

package/addon/modifiers/modal-dialog.js

@@ -0,0 +1,44 @@
+import { modifier } from 'ember-modifier';
+
+const SCROLL_LOCK_CLASS = 'pix-overlay-scroll-lock';
+
+const scrollLockingDialogs = new Set();
+
+function lockPageScrolling(element) {
+  scrollLockingDialogs.add(element);
+  document.body.classList.add(SCROLL_LOCK_CLASS);
+}
+
+function unlockPageScrolling(element) {
+  scrollLockingDialogs.delete(element);
+
+  if (scrollLockingDialogs.size === 0) {
+    document.body.classList.remove(SCROLL_LOCK_CLASS);
+  }
+}
+
+/**
+ * @param {boolean} isOpen
+ * @param {boolean} [focusOnClose=true]
+ */
+export default modifier(function modalDialog(element, [isOpen, focusOnClose = true]) {
+  if (isOpen) {
+    if (!element.open) {
+      element.showModal();
+    }
+
+    lockPageScrolling(element);
+  } else if (element.open) {
+    const hadFocusInside = element.contains(document.activeElement);
+
+    element.close();
+
+    if (focusOnClose === false && hadFocusInside) {
+      document.activeElement?.blur();
+    }
+  }
+
+  return () => {
+    unlockPageScrolling(element);
+  };
+});

package/addon/modifiers/trap-focus.js

@@ -1,8 +1,15 @@
+import { warn } from '@ember/debug';
 import { modifier } from 'ember-modifier';
 
 let sourceActiveElement = null;
 
 export default modifier(function trapFocus(element, [isOpen, focusOnClose = true]) {
+  warn(
+    'trap-focus is deprecated: it only intercepts Tab, so it cannot keep the virtual cursor of a screen reader inside the element. Use PixModal, PixSidePanel or PixOverlay, which rely on a native <dialog> placed in the top layer.',
+    false,
+    { id: 'pix-ui.trap-focus.deprecated' },
+  );
+
   const [firstFocusableElement] = findFocusableElements(element);
 
   if (isOpen) {

package/addon/styles/_pix-modal.scss

@@ -10,6 +10,11 @@
   background-color: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-4x);
   transform: translateX(-50%);
+  animation: fade-out-modal 0.3s ease-out forwards;
+
+  .pix-overlay[open] & {
+    animation: fade-in-modal 0.3s ease-out forwards;
+  }
 
   &--default {
     @extend %pix-shadow-default;
@@ -51,3 +56,23 @@
     }
   }
 }
+
+@keyframes fade-in-modal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out-modal {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/addon/styles/_pix-overlay.scss

@@ -1,19 +1,45 @@
 .pix-overlay {
   position: fixed;
   z-index: 1000;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
   overflow-y: auto;
-  background-color: rgba(var(--pix-neutral-800-inline), 0.4);
-  transition: all 0.3s ease-in-out;
+  background-color: rgba(var(--pix-neutral-800-inline), 0);
+  border: none;
+  transition:
+    background-color 0.3s ease-out,
+    display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete;
   inset: 0;
 
+  &::backdrop {
+    background-color: transparent;
+  }
+
+  &[open] {
+    background-color: rgba(var(--pix-neutral-800-inline), 0.4);
+  }
+
   &--with-centered-content {
-    display: grid;
     align-items: center;
     padding-block: var(--pix-spacing-4x);
+
+    &[open] {
+      display: grid;
+    }
   }
 
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
+  @starting-style {
+    &[open] {
+      background-color: rgba(var(--pix-neutral-800-inline), 0);
+    }
   }
 }
+
+.pix-overlay-scroll-lock {
+  overflow: hidden;
+}

package/addon/styles/_pix-side-panel.scss

@@ -3,7 +3,8 @@
 @use 'pix-design-tokens/shadows';
 
 .pix-side-panel__overlay {
-  overflow-x: hidden;
+  overflow: hidden; // fallback for Safari < 16, which ignores the clip value below
+  overflow: clip; // not a scroll container, so focus cannot scroll the sliding panel into place
 }
 
 .pix-side-panel {
@@ -16,15 +17,14 @@
   margin-left: auto;
   background: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-4x) 0 0 var(--pix-spacing-4x);
-  transform: translate(0);
-  transition: transform 0.3s ease-in-out;
+  animation: slide-out-side-panel 0.3s ease-in-out forwards;
 
   @include breakpoints.device-is('tablet') {
     width: 412px;
   }
 
-  &--hidden {
-    transform: translate(100%);
+  .pix-overlay[open] & {
+    animation: slide-in-side-panel 0.3s ease-in-out forwards;
   }
 
   &--default {
@@ -84,3 +84,23 @@
     }
   }
 }
+
+@keyframes slide-in-side-panel {
+  from {
+    transform: translate(100%);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes slide-out-side-panel {
+  from {
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(100%);
+  }
+}

package/addon/styles/_pix-table.scss

@@ -2,6 +2,8 @@
 @use "pix-design-tokens/typography";
 
 .pix-table {
+  @extend %pix-body-s;
+
   min-width: 100%;
   overflow: auto;
 
@@ -9,106 +11,100 @@
     overflow: unset;
   }
 
-  @extend %pix-body-s;
-
-  &__caption {
-    margin-bottom: var(--pix-spacing-3x);
-    text-align: left;
-    caption-side: top;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
 
-    @extend %pix-title-xxs;
+  tbody > tr:nth-of-type(even) > :is(td, th) {
+    background-color: rgba(var(--pix-neutral-20-inline), 0.80);
   }
 
-  &__clickable-row {
+  tbody > tr.pix-table__clickable-row {
     cursor: pointer;
 
-    &:hover, &:focus, &:active {
-      transition: 0.25s ease;
+    & > :is(td, th) {
+      transition: background-color 0.25s ease;
     }
 
-    &:hover {
+    &:hover > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.50);
     }
 
-    &:focus {
+    &:focus > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.40);
     }
 
-    &:active {
+    &:active > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.75);
     }
   }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-   tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) {
-      background-color: rgba(var(--pix-neutral-20-inline), 0.80);
-    }
-
-    thead.pix-table-header {
-      &--primary {
-        background: var(--pix-primary-10);
-      }
-
-      &--orga {
-        background: var(--pix-orga-50);
-      }
-
-      &--certif {
-        background: var(--pix-certif-50);
-      }
-
-      &--admin {
-        background: var(--pix-primary-100);
-      }
-    }
+  td, th {
+    padding: var(--pix-spacing-4x);
 
-    .pix-table-header-container {
-      display: flex;
-      gap: var(--pix-spacing-1x);
-      align-items: center;
+    &:first-child {
+      border-top-left-radius: var(--pix-spacing-2x);
+      border-bottom-left-radius: var(--pix-spacing-2x);
     }
 
-    th[scope='col'] {
-      font-weight: var(--pix-font-bold);
-      text-align: start;
-      vertical-align: middle;
+    &:last-child {
+      border-top-right-radius: var(--pix-spacing-2x);
+      border-bottom-right-radius: var(--pix-spacing-2x);
     }
+  }
+}
 
-    th[scope='row'] {
-      font-weight: var(--pix-font-normal);
-    }
+.pix-table--condensed {
+  th, td {
+    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+  }
 
+  td.pix-table-column--tag,
+  td.pix-table-column--link {
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+  }
+}
 
-    td, th {
-      padding: var(--pix-spacing-4x) var(--pix-spacing-4x);
+.pix-table-header {
+  &--primary th {
+    background: var(--pix-primary-10);
+  }
 
-      &:first-child {
-        border-radius: var(--pix-spacing-2x) 0 0 var(--pix-spacing-2x);
-      }
+  &--orga th {
+    background: var(--pix-orga-50);
+  }
 
-      &:last-child {
-        border-radius: 0 var(--pix-spacing-2x) var(--pix-spacing-2x) 0;
-      }
-    }
+  &--certif th {
+    background: var(--pix-certif-50);
+  }
 
-  &--condensed {
-    th, td {
-      padding: .5rem var(--pix-spacing-4x);
-    }
+  &--admin th {
+    background: var(--pix-primary-100);
+  }
 
-    td.pix-table-column--tag {
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
-    }
+  th[scope='col'] {
+    font-weight: var(--pix-font-bold);
+    text-align: start;
+    vertical-align: middle;
+  }
 
-    td.pix-table-column--link {
-      padding-top: 0.375rem;
-      padding-bottom: 0.375rem;
-    }
+  th[scope='row'] {
+    font-weight: var(--pix-font-normal);
   }
 }
 
+.pix-table-header-container {
+  display: flex;
+  gap: var(--pix-spacing-1x);
+  align-items: center;
+}
+
+.pix-table__caption {
+  margin-bottom: var(--pix-spacing-3x);
+  text-align: left;
+  caption-side: top;
+
+  @extend %pix-title-xxs;
+}

package/addon/styles/addon.scss

@@ -1,6 +1,8 @@
 @use 'pix-design-tokens';
 @use 'normalize-reset';
 @use 'a11y';
+@use 'trap-focus';
+@use 'pix-overlay';
 @use 'pix-icon';
 @use 'pix-background-header';
 @use 'pix-banner-alert';
@@ -37,7 +39,6 @@
 @use 'pix-checkbox';
 @use 'pix-segmented-control';
 @use 'pix-indicator-card';
-@use 'trap-focus';
 @use 'pix-search-input';
 @use 'pix-toast';
 @use 'toast-example';
@@ -48,7 +49,6 @@
 @use 'pix-app-layout';
 @use 'pix-structure-switcher';
 @use 'pix-code';
-@use 'pix-overlay';
 @use 'pix-tabs';
 @use 'pix-gauge';
 @use 'pix-stepper';

package/app/modifiers/modal-dialog.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/modifiers/modal-dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "61.4.1",
+  "version": "62.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"