feat(overlay): refactor to remove dialog support to avoid cross-root …

…semantic problems and fix cross-browser bugs
tyler-technologies-oss · Dec 22, 2023 · d510378 · d510378
1 parent f315950
commit d510378
Show file tree

Hide file tree

Showing 34 changed files with 1,476 additions and 522 deletions.
diff --git a/src/dev/pages/app-bar/app-bar.ejs b/src/dev/pages/app-bar/app-bar.ejs
@@ -15,7 +15,6 @@
 
   <forge-app-bar-profile-button
     slot="end"
-    avatar-text="First Last"
     full-name="First Last"
     email="first.last@tylerforge.io"
     profile-button

diff --git a/src/dev/pages/overlay/overlay.ejs b/src/dev/pages/overlay/overlay.ejs
@@ -1,13 +1,14 @@
-<div class="clipping-container">
+<div class="clipping-container" id="clipping-container">
   <div class="scroll-container">
-    <forge-button variant="raised" slot="trigger" id="my-btn">Show overlay</forge-button>
+    <forge-button variant="raised" aria-controls="my-overlay" id="my-btn">Show overlay</forge-button>
 
-    <forge-overlay target="my-btn" id="my-overlay">
-      <div class="overlay-content">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea labore tenetur illum aliquam corporis veritatis quos accusamus. Laborum ullam autem fugiat eligendi ratione beatae consequuntur provident earum, nemo neque itaque!
-        <forge-button variant="raised" id="child-btn">Show child overlay</forge-button>
-        <forge-overlay target="child-btn" id="my-child-overlay" placement="right">
-          <p class="overlay-content">Nested overlay test</p>
+    <forge-overlay anchor="my-btn" id="my-overlay">
+      <div class="overlay-content" role="dialog" aria-labelledby="dialog-title" id="my-dialog">
+        <div id="dialog-title">Overlay content</div>
+
+        <forge-button variant="filled" id="nested-btn" autofocus>Show nested overlay</forge-button>
+        <forge-overlay anchor="nested-btn" id="my-nested-overlay" placement="right" flip="main" hide="off" boundary="clipping-container">
+          <div class="overlay-content">Nested overlay test</div>
         </forge-overlay>
       </div>
     </forge-overlay>

diff --git a/src/dev/pages/overlay/overlay.html b/src/dev/pages/overlay/overlay.html
@@ -34,14 +34,34 @@
           { label: 'Absolute', value: 'absolute' }
         ]
       },
+      {
+        type: 'select',
+        label: 'Flip',
+        id: 'opt-flip',
+        defaultValue: 'auto',
+        options: [
+          { label: 'Auto', value: 'auto' },
+          { label: 'Main', value: 'main' },
+          { label: 'Cross', value: 'cross' },
+          { label: 'Off', value: 'off' },
+        ]
+      },
+      {
+        type: 'select',
+        label: 'Hide',
+        id: 'opt-hide',
+        defaultValue: 'auto',
+        options: [
+          { label: 'Auto', value: 'auto' },
+          { label: 'Off', value: 'off' },
+        ]
+      },
       { type: 'switch', label: 'Inline', id: 'opt-inline' },
       { type: 'switch', label: 'Static', id: 'opt-static' },
-      { type: 'switch', label: 'Dialog', id: 'opt-dialog'},
-      { type: 'switch', label: 'Modal', id: 'opt-modal'},
-      { type: 'switch', label: 'Hide', id: 'opt-hide', defaultValue: true },
       { type: 'switch', label: 'Shift', id: 'opt-shift' },
-      { type: 'switch', label: 'Flip', id: 'opt-flip', defaultValue: true },
       { type: 'switch', label: 'Auto', id: 'opt-auto' },
+      { type: 'switch', label: 'Show arrow', id: 'opt-show-arrow' },
+      { type: 'switch', label: 'Set boundary', id: 'opt-set-boundary' },
       { type: 'switch', label: 'Use small container', id: 'opt-use-small-container' },
       { type: 'switch', label: 'Force containment', id: 'opt-force-containment' },
       { type: 'switch', label: 'Use offset', id: 'opt-use-offset' },

diff --git a/src/dev/pages/overlay/overlay.scss b/src/dev/pages/overlay/overlay.scss
@@ -17,6 +17,7 @@
   width: 300px;
   padding: 8px;
   border: 1px dashed var(--forge-theme-primary);
+  background-color: var(--forge-theme-surface);
 }
 
 .scroll-container {
@@ -26,3 +27,12 @@
   align-items: center;
   justify-content: center;
 }
+
+.arrow {
+  position: absolute;
+  background-color: var(--forge-theme-error);
+  height: 24px;
+  width: 24px;
+  rotate: 45deg;
+  z-index: -1;
+}
diff --git a/src/dev/pages/overlay/overlay.ts b/src/dev/pages/overlay/overlay.ts
@@ -1,27 +1,34 @@
 import '$src/shared';
-import { ISelectComponent, ISwitchComponent } from '@tylertech/forge';
+import { ISelectComponent, ISwitchComponent, OverlayFlipState, OverlayHideState } from '@tylertech/forge';
 import type { IOverlayComponent } from '@tylertech/forge';
 import { toggleClass } from '@tylertech/forge-core';
 import '@tylertech/forge/button';
 import '@tylertech/forge/overlay';
 import './overlay.scss';
 
 const overlay = document.querySelector('#my-overlay') as IOverlayComponent;
-const childOverlay = overlay.querySelector('#my-child-overlay') as IOverlayComponent;
+const nestedOverlay = overlay.querySelector('#my-nested-overlay') as IOverlayComponent;
 const showOverlayButton = document.querySelector('#my-btn') as HTMLButtonElement;
-const showChildOverlayButton = document.querySelector('#child-btn') as HTMLButtonElement;
+const showNestedOverlayButton = document.querySelector('#nested-btn') as HTMLButtonElement;
 const clippingContainer = document.querySelector('.clipping-container') as HTMLElement;
 
-overlay.addEventListener('forge-overlay-light-dismiss', ({ detail }: CustomEvent) => {
-  console.log('forge-overlay-beforetoggle', detail);
+overlay.addEventListener('forge-overlay-light-dismiss', (evt: CustomEvent) => {
+  console.log(evt.type);
+  showOverlayButton.setAttribute('aria-expanded', 'false');
 });
 
-overlay.addEventListener('forge-overlay-toggle', ({ detail }: CustomEvent) => {
-  console.log('forge-overlay-toggle', detail);
-});
+showOverlayButton.addEventListener('click', () => {
+  overlay.open = !overlay.open;
+
+  showOverlayButton.setAttribute('aria-expanded', String(overlay.open));
 
-showOverlayButton.addEventListener('click', () => overlay.open = !overlay.open);
-showChildOverlayButton.addEventListener('click', () => childOverlay.open = !childOverlay.open);
+  const arrowEl = overlay.querySelector('.arrow') as HTMLElement;
+  if (arrowEl) {
+    const offset = Math.sqrt(2 * arrowEl.offsetWidth ** 2) / 2;
+    overlay.arrowElementOffset = offset;
+  }
+});
+showNestedOverlayButton.addEventListener('click', () => nestedOverlay.open = !nestedOverlay.open);
 centerDemoButton();
 
 const placementSelect = document.getElementById('opt-placement') as ISelectComponent;
@@ -30,31 +37,43 @@ placementSelect.addEventListener('change', ({ detail: selected }) => overlay.pla
 const positionStrategySelect = document.getElementById('opt-position-strategy') as ISelectComponent;
 positionStrategySelect.addEventListener('change', ({ detail: selected }) => overlay.positionStrategy = selected);
 
+const flipSelect = document.getElementById('opt-flip') as ISelectComponent;
+flipSelect.addEventListener('change', ({ detail: selected }) => overlay.flip = selected as OverlayFlipState);
+
+const hideSelect = document.getElementById('opt-hide') as ISelectComponent;
+hideSelect.addEventListener('change', ({ detail: selected }) => overlay.hide = selected as OverlayHideState);
+
 const inlineToggle = document.getElementById('opt-inline') as ISwitchComponent;
 inlineToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.inline = selected);
 
 const staticToggle = document.getElementById('opt-static') as ISwitchComponent;
 staticToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.static = selected);
 
-const dialogToggle = document.getElementById('opt-dialog') as ISwitchComponent;
-dialogToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.dialog = selected);
-
-const modalToggle = document.getElementById('opt-modal') as ISwitchComponent;
-modalToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.modal = selected);
-
-const hideToggle = document.getElementById('opt-hide') as ISwitchComponent;
-hideToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.hide = selected);
-
 const shiftToggle = document.getElementById('opt-shift') as ISwitchComponent;
 shiftToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.shift = selected);
 
-const flipToggle = document.getElementById('opt-flip') as ISwitchComponent;
-flipToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.flip = selected);
-
 const autoToggle = document.getElementById('opt-auto') as ISwitchComponent;
 autoToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   overlay.auto = selected;
-  flipToggle.disabled = selected;
+  flipSelect.disabled = selected;
+});
+
+const showArrowToggle = document.getElementById('opt-show-arrow') as ISwitchComponent;
+showArrowToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  if (selected) {
+    const arrowEl = document.createElement('div');
+    arrowEl.classList.add('arrow');
+    overlay.appendChild(arrowEl);
+    overlay.arrowElement = arrowEl;
+  } else {
+    overlay.querySelector('.arrow')?.remove();
+    overlay.arrowElement = null;
+  }
+});
+
+const setBoundaryToggle = document.getElementById('opt-set-boundary') as ISwitchComponent;
+setBoundaryToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  overlay.boundaryElement = selected ? clippingContainer : null;
 });
 
 const useSmallContainerToggle = document.getElementById('opt-use-small-container') as ISwitchComponent;

diff --git a/src/dev/pages/popover/popover.ejs b/src/dev/pages/popover/popover.ejs
@@ -7,7 +7,7 @@
         <div slot="body" id="my-popover" role="dialog" class="popover-content" style="padding: 16px;">
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus sit in placeat aliquam expedita quis, totam impedit atque, delectus quaerat dolorum labore, eaque cumque nobis a porro quia iste ex?</p>
 
-          <forge-button variant="raised" id="my-child-btn">Show child popover</forge-button>
+          <forge-button autofocus variant="raised" id="my-child-btn">Show child popover</forge-button>
           <forge-popover placement="right" arrow>
             <p style="padding: 50px;">Nested popover test</p>
           </forge-popover>

diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
@@ -43,65 +43,44 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     header: 'Key colors',
     swatches: [
       { text: 'Primary', background: 'primary', foreground: 'on-primary' },
-      { text: 'Primary container (minimum)', background: 'primary-container-minimum', foreground: 'on-primary-container-minimum' },
-      { text: 'Primary container (low)', background: 'primary-container-low', foreground: 'on-primary-container-low' },
-      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' },
-      { text: 'Primary container (high)', background: 'primary-container-high', foreground: 'on-primary-container-high' }
+      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }
     ]
   },
   {
     swatches: [
       { text: 'Secondary', background: 'secondary', foreground: 'on-secondary' },
-      { text: 'Secondary container (minimum)', background: 'secondary-container-minimum', foreground: 'on-secondary-container-minimum' },
-      { text: 'Secondary container (low)', background: 'secondary-container-low', foreground: 'on-secondary-container-low'},
-      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' },
-      { text: 'Secondary container (high)', background: 'secondary-container-high', foreground: 'on-secondary-container-high' }
+      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }
     ]
   },
   {
     swatches: [
       { text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' },
-      { text: 'Tertiary container (minimum)', background: 'tertiary-container-minimum', foreground: 'on-tertiary-container-minimum' },
-      { text: 'Tertiary container (low)', background: 'tertiary-container-low', foreground: 'on-tertiary-container-low' },
-      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' },
-      { text: 'Tertiary container (high)', background: 'tertiary-container-high', foreground: 'on-tertiary-container-high' }
+      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }
     ]
   },
   {
     header: 'Status',
     swatches: [
       { text: 'Success', background: 'success', foreground: 'on-success' },
-      { text: 'Success container (minimum)', background: 'success-container-minimum', foreground: 'on-success-container-minimum' },
-      { text: 'Success container (low)', background: 'success-container-low', foreground: 'on-success-container-low' },
-      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' },
-      { text: 'Success container (high)', background: 'success-container-high', foreground: 'on-success-container-high' }
+      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' }
     ]
   },
   {
     swatches: [
       { text: 'Error ', background: 'error', foreground: 'on-error' },
-      { text: 'Error container (minimum)', background: 'error-container-minimum', foreground: 'on-error-container-minimum' },
-      { text: 'Error container (low)', background: 'error-container-low', foreground: 'on-error-container-low' },
-      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' },
-      { text: 'Error container (high)', background: 'error-container-high', foreground: 'on-error-container-high' }
+      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' }
     ]
   },
   {
     swatches: [
       { text: 'Warning', background: 'warning', foreground: 'on-warning' },
-      { text: 'Warning container (minimum)', background: 'warning-container-minimum', foreground: 'on-warning-container-minimum' },
-      { text: 'Warning container (low)', background: 'warning-container-low', foreground: 'on-warning-container-low' },
-      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' },
-      { text: 'Warning container (high)', background: 'warning-container-high', foreground: 'on-warning-container-high' }
+      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }
     ]
   },
   {
     swatches: [
       { text: 'Info', background: 'info', foreground: 'on-info' },
-      { text: 'Info container (minimum)', background: 'info-container-minimum', foreground: 'on-info-container-minimum' },
-      { text: 'Info container (low)', background: 'info-container-low', foreground: 'on-info-container-low' },
-      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' },
-      { text: 'Info container (high)', background: 'info-container-high', foreground: 'on-info-container-high' }
+      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' }
     ]
   },
   {
@@ -114,7 +93,7 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     ]
   },
   {
-    header: 'Utilities',
+    header: 'Outline',
     swatches: [
       { text: 'Outline (high)', border: 'outline-high' },
       { text: 'Outline (medium)', border: 'outline-medium' },

diff --git a/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts b/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts
@@ -150,6 +150,7 @@ export class AppBarProfileButtonFoundation implements IAppBarProfileButtonFounda
   public set fullName(value: string) {
     if (this._fullName !== value) {
       this._fullName = value;
+      this.avatarText = this._fullName;
       this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.FULL_NAME, this._fullName);
     }
   }

diff --git a/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss b/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss
@@ -115,8 +115,8 @@ $_host-tokens: [display];
   :host([theme=#{$theme}]) {
     ::slotted(forge-button-toggle) {
       @include button-toggle.provide-theme((
-        selected-background: #{theme.variable(#{$theme}-container-low)},
-        selected-color: #{theme.variable(on-#{$theme}-container-low)},
+        selected-background: #{theme.variable(#{$theme}-container)},
+        selected-color: #{theme.variable(on-#{$theme}-container)},
         focus-indicator-color: #{theme.variable($theme)}
       ));
     }

diff --git a/src/lib/button/base/base-button-foundation.ts b/src/lib/button/base/base-button-foundation.ts
@@ -75,7 +75,7 @@ export abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> impleme
   public focus(options?: ExperimentalFocusOptions): void {
     this._adapter.focusHost(options);
 
-    if (options?.focusVisible) {
+    if (options?.focusVisible !== false) {
       this._adapter.forceFocusVisible();
     }
   }

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
@@ -63,6 +63,12 @@ forge-focus-indicator {
       @include override(primary-color, theme.variable($theme), value);
     }
   }
+
+  :host([theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+    .forge-button {
+      @include override(filled-color, theme.variable(on-#{$theme}), value);
+    }
+  }
 
   :host([theme=#{$theme}][variant=tonal]) {
     .forge-button {

diff --git a/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss b/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss
@@ -36,8 +36,8 @@ $tokens: (
   shape-end-end: utils.module-ref(button-toggle, shape-end-end, shape),
 
   // Selected
-  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container-low)),
-  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container-low)),
+  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container)),
+  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container)),
   selected-disabled-background: utils.module-val(button-toggle, selected-disabled-background, theme.variable(surface-container)),
 
   // Dense

diff --git a/src/lib/core/styles/tokens/icon-button/_tokens.scss b/src/lib/core/styles/tokens/icon-button/_tokens.scss
@@ -67,7 +67,7 @@ $tokens: (
   toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle (on) outlined
-  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container-low)),
+  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container)),
   outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle tonal