[@next] tooltip refactor

src/dev/pages/button-area/button-area.ejs

@@ -9,7 +9,7 @@
       <forge-icon-button data-forge-ignore>
         <forge-icon name="favorite"></forge-icon>
       </forge-icon-button>
-      <forge-tooltip>Like</forge-tooltip>
+      <forge-tooltip type="label">Like</forge-tooltip>
       <forge-icon name="chevron_right"></forge-icon>
     </div>
   </forge-button-area>
@@ -29,7 +29,7 @@
         <forge-icon-button data-forge-ignore>
           <forge-icon name="favorite"></forge-icon>
         </forge-icon-button>
-        <forge-tooltip>Like</forge-tooltip>
+        <forge-toolti type="label">Like</forge-tooltip>
         <forge-open-icon></forge-open-icon>
       </div>
     </forge-button-area>

src/dev/pages/drawer/drawer-dismissible-right.ejs

@@ -23,7 +23,7 @@
       <forge-toolbar slot="header">
         <div slot="start">Header</div>
       </forge-toolbar>
-      <forge-list>
+      <forge-list navlist>
         <forge-list-item selected="true">
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox

src/dev/pages/drawer/drawer-dismissible.ejs

@@ -23,7 +23,7 @@
       <forge-toolbar slot="header">
         <div slot="start">Header</div>
       </forge-toolbar>
-      <forge-list>
+      <forge-list navlist>
         <forge-list-item selected>
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox

src/dev/pages/drawer/drawer-mini-hover-right.ejs

@@ -8,7 +8,7 @@
       <h2 slot="start" class="forge-typography--heading2">Toolbar</h2>
     </forge-toolbar>
     <forge-mini-drawer hover slot="body-right" direction="right">
-      <forge-list>
+      <forge-list navlist>
         <forge-list-item selected id="tooltip-host">
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox

src/dev/pages/drawer/drawer-mini-hover.ejs

@@ -8,7 +8,7 @@
       <h2 slot="start" class="forge-typography--heading2">Toolbar</h2>
     </forge-toolbar>
     <forge-mini-drawer hover slot="body-left">
-      <forge-list>
+      <forge-list navlist>
         <forge-list-item selected id="tooltip-host">
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox

src/dev/pages/drawer/drawer-mini.ejs

@@ -8,22 +8,22 @@
       <div slot="start">Toolbar</div>
     </forge-toolbar>
     <forge-mini-drawer slot="body-left">
-      <forge-list>
-        <forge-list-item selected="true" id="tooltip-host-1">
+      <forge-list navlist>
+        <forge-list-item selected id="tooltip-host-1">
+          <forge-tooltip anchor="tooltip-host-1">Inbox</forge-tooltip>
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox
         </forge-list-item>
         <forge-list-item id="tooltip-host-2">
+          <forge-tooltip anchor="tooltip-host-2">Sent</forge-tooltip>
           <forge-icon slot="leading" name="send"></forge-icon>
           Outgoing
         </forge-list-item>
         <forge-list-item id="tooltip-host-3">
+          <forge-tooltip anchor="tooltip-host-3">Drafts</forge-tooltip>
           <forge-icon slot="leading" name="drafts"></forge-icon>
           Drafts
         </forge-list-item>
-        <forge-tooltip target="#tooltip-host-1">Inbox</forge-tooltip>
-        <forge-tooltip target="#tooltip-host-2">Sent</forge-tooltip>
-        <forge-tooltip target="#tooltip-host-3">Drafts</forge-tooltip>
       </forge-list>
     </forge-mini-drawer>
     <div slot="body" style="padding: 16px;">

src/dev/pages/drawer/drawer-modal.ejs

@@ -6,7 +6,7 @@
       <forge-app-bar-menu-button id="drawer-modal-app-bar-menu-button" slot="start"></forge-app-bar-menu-button>
     </forge-app-bar>
     <forge-modal-drawer open slot="left">
-      <forge-list>
+      <forge-list navlist>
         <forge-list-item selected>
           <forge-icon slot="leading" name="inbox"></forge-icon>
           Inbox

src/dev/pages/drawer/drawer-permanent.ejs

@@ -23,7 +23,7 @@
         <div slot="start">Header</div>
       </forge-toolbar>
       <aside>
-        <forge-list>
+        <forge-list navlist>
           <forge-list-item selected>
             <forge-icon slot="leading" name="inbox"></forge-icon>
             Inbox

src/dev/pages/tooltip/tooltip.ejs

@@ -1,4 +1,32 @@
-<forge-button variant="raised">Hover me</forge-button>
-<forge-tooltip id="tooltip">✨ Tooltips are cool ✨</forge-tooltip>
+<div class="tooltip-demo">
+  <section class="vert">
+    <h3 class="forge-typography--heading2">Common</h3>
+    <div>
+      <forge-button variant="raised">Hover me</forge-button>
+      <forge-tooltip type="description">Forge tooltips are cool!</forge-tooltip>
+    </div>
+  </section>
+
+  <section class="vert">
+    <h3 class="forge-typography--heading2">w/Long text</h3>
+    <div>
+      <forge-button variant="raised">Hover me</forge-button>
+      <forge-tooltip>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi exercitationem possimus modi, illum amet sapiente voluptas harum consequatur ex eius accusantium ut ratione nulla est a? Voluptatum eveniet earum dignissimos!</forge-tooltip>
+    </div>
+  </section>
+
+  <section class="vert">
+    <h3 class="forge-typography--heading2">w/Custom</h3>
+    <div>
+      <forge-button variant="raised">Hover me</forge-button>
+      <forge-tooltip>
+        <div style="display: flex; align-items: center; gap: 16px;">
+          <forge-avatar text="Tyler Forge"></forge-avatar>
+          Custom tooltip w/Avatar
+        </div>
+      </forge-tooltip>
+    </div>
+  </section>
+</div>
 
 <script type="module" src="tooltip.ts"></script>

src/dev/pages/tooltip/tooltip.html

@@ -4,21 +4,39 @@
     title: 'Tooltip',
     includePath: './pages/tooltip/tooltip.ejs',
     options: [
-      { type: 'text-field', id: 'tooltip-text', label: 'Text', defaultValue: '✨ Tooltips are cool ✨' },
-      { type: 'text-field', inputType: 'number', id: 'tooltip-delay', label: 'Delay', defaultValue: 500 },
+      { type: 'text-field', inputType: 'number', id: 'opt-delay', label: 'Delay', defaultValue: 500 },
       {
         type: 'select',
-        id: 'tooltip-position',
-        label: 'Position',
+        id: 'opt-placement',
+        label: 'Placement',
         defaultValue: 'right',
         options: [
+          { label: 'Top start', value: 'top-start' },
           { label: 'Top', value: 'top' },
+          { label: 'Top end', value: 'top-end' },
+          { label: 'Right start', value: 'right-start' },
           { label: 'Right', value: 'right' },
+          { label: 'Right end', value: 'right-end' },
+          { label: 'Bottom start', value: 'bottom-start' },
           { label: 'Bottom', value: 'bottom' },
-          { label: 'Left', value: 'left' }
+          { label: 'Bottom end', value: 'bottom-end' },
+          { label: 'Left start', value: 'left-start' },
+          { label: 'Left', value: 'left' },
+          { label: 'Left end', value: 'left-end' }
+        ]
+      },
+      {
+        type: 'select',
+        label: 'Trigger type',
+        multiple: true,
+        id: 'opt-trigger-type',
+        defaultValue: 'hover',
+        options: [
+          { label: 'Hover', value: 'hover' },
+          { label: 'Focus', value: 'focus' },
+          { label: 'Longpress (default on mobile)', value: 'longpress' }
         ]
       },
-      { type: 'switch', id: 'tooltip-builder', label: 'Use builder' }
     ]
   }
 })

src/dev/pages/tooltip/tooltip.scss

@@ -0,0 +1,9 @@
+h3 {
+  margin: 0;
+}
+
+.tooltip-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}

src/dev/pages/tooltip/tooltip.ts

@@ -1,34 +1,19 @@
 import '$src/shared';
 import '@tylertech/forge/button';
 import '@tylertech/forge/tooltip';
-import type { ISelectComponent, ISwitchComponent, ITooltipComponent } from '@tylertech/forge';
+import type { ISelectComponent, ITooltipComponent } from '@tylertech/forge';
+import './tooltip.scss';
 
-const tooltip = document.querySelector('#tooltip') as ITooltipComponent;
+const demoEl = document.querySelector('.tooltip-demo') as HTMLElement;
+const delayInput = document.querySelector('#opt-delay') as HTMLInputElement;
+delayInput.addEventListener('input', () => getAllTooltips().forEach(tt => tt.delay = +(delayInput.value ?? 0)));
 
-const textInput = document.querySelector('#tooltip-text') as HTMLInputElement;
-textInput.addEventListener('input', () => tooltip.textContent = textInput.value);
+const placementSelect = document.querySelector('#opt-placement') as ISelectComponent;
+placementSelect.addEventListener('change', () => getAllTooltips().forEach(tt => tt.placement = placementSelect.value));
 
-const delayInput = document.querySelector('#tooltip-delay') as HTMLInputElement;
-delayInput.addEventListener('input', () => tooltip.delay = +(delayInput.value ?? 0));
+const triggerTypeSelect = document.querySelector('#opt-trigger-type') as ISelectComponent;
+triggerTypeSelect.addEventListener('change', () => getAllTooltips().forEach(tt => tt.triggerType = triggerTypeSelect.value));
 
-const positionSelect = document.querySelector('#tooltip-position') as ISelectComponent;
-positionSelect.addEventListener('change', () => tooltip.position = positionSelect.value);
-
-const useBuilderCheckbox = document.querySelector('#tooltip-builder') as ISwitchComponent;
-useBuilderCheckbox.addEventListener('forge-switch-change', ({ detail: selected }) => tooltip.builder = selected ? tooltipBuilder : undefined);
-
-function tooltipBuilder(): HTMLElement {
-  const div = document.createElement('div');
-  div.classList.add('flex');
-
-  const avatar = document.createElement('forge-avatar');
-  avatar.letterCount = 2;
-  avatar.text = 'Tyler Forge™';
-  div.appendChild(avatar);
-
-  const span = document.createElement('span');
-  span.textContent = `Custom: ${textInput.value}`;
-  div.appendChild(span);
-
-  return div;
+function getAllTooltips(): ITooltipComponent[] {
+  return Array.from(demoEl.querySelectorAll('forge-tooltip'));
 }

src/dev/src/partials/header.ejs

@@ -1,7 +1,7 @@
 <forge-app-bar slot="header" id="page-app-bar" title-text="<%= site.title %><%= title ? ` - ${title}` : null %>" href="/">
   <forge-icon name="forge_logo" slot="logo"></forge-icon>
-  <forge-icon-button slot="end" id="dark-theme-button" aria-label="Toggle theme">
+  <forge-icon-button slot="end" id="dark-theme-button">
     <forge-icon name="brightness_3"></forge-icon>
   </forge-icon-button>
-  <forge-tooltip position="left">Toggle theme</forge-tooltip>
+  <forge-tooltip slot="end" type="label" placement="left">Toggle theme</forge-tooltip>
 </forge-app-bar>

src/lib/app-bar/help-button/app-bar-help-button-adapter.ts

@@ -30,11 +30,11 @@ export class AppBarHelpButtonAdapter extends BaseAdapter<IAppBarHelpButtonCompon
     this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName) as IIconButtonComponent;
     this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName) as IIconComponent;
 
-    const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+    const originalAriaLabelledBy = this._iconButtonElement.getAttribute('aria-labelledby');
 
     this._forwardObserver = forwardAttributes(this._component, APP_BAR_HELP_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
-      if (name === 'aria-label' && !value) {
-        value = originalAriaLabel;
+      if (name === 'aria-labelledby' && !value) {
+        value = originalAriaLabelledBy;
       }
       toggleAttribute(this._iconButtonElement, !!value, name, value ?? undefined);
     });

src/lib/app-bar/help-button/app-bar-help-button.html

@@ -1,8 +1,8 @@
 <template>
   <forge-menu placement="bottom-end">
-    <forge-icon-button aria-label="Open help menu">
+    <forge-icon-button>
       <forge-icon name="help"></forge-icon>
     </forge-icon-button>
-    <forge-tooltip delay="500" position="bottom">Help</forge-tooltip>
+    <forge-tooltip type="label" placement="bottom">Help</forge-tooltip>
   </forge-menu>
 </template>

src/lib/app-bar/help-button/app-bar-help-button.test.ts

@@ -37,14 +37,16 @@ describe('App Bar Help Button', () => {
     expect(iconButtonEl.getAttribute('aria-label')).to.equal('foo');
   });
 
-  it('should reset internal aria-label to default', async () => {
+  it('should remove internal aria-label if arial-label removed', async () => {
     const el = await fixture<IAppBarHelpButtonComponent>(html`<forge-app-bar-help-button aria-label="foo"></forge-app-bar-help-button>`);
     const iconButtonEl = el.querySelector('forge-icon-button') as HTMLElement;
 
+    expect(iconButtonEl.getAttribute('aria-label')).to.equal('foo');
+
     el.removeAttribute('aria-label');
     await elementUpdated(el);
 
-    expect(iconButtonEl.getAttribute('aria-label')).to.equal('Open help menu');
+    expect(iconButtonEl.getAttribute('aria-label')).to.be.null;
   });
 
   it('should set icon', async () => {

src/lib/app-bar/menu-button/app-bar-menu-button.html

@@ -1,6 +1,6 @@
 <template>
-  <forge-icon-button aria-label="Toggle menu">
+  <forge-icon-button>
     <forge-icon name="menu"></forge-icon>
   </forge-icon-button>
-  <forge-tooltip delay="500" position="bottom">Menu</forge-tooltip>
+  <forge-tooltip type="label" placement="bottom">Menu</forge-tooltip>
 </template>

src/lib/app-bar/menu-button/app-bar-menu-button.test.ts

@@ -20,14 +20,29 @@ describe('App Bar Menu Button', () => {
     expect(iconButtonEl.getAttribute('aria-label')).to.equal('foo');
   });
 
-  it('should reset internal aria-label to default', async () => {
+  it('should remove internal aria-label if aria-label removed', async () => {
     const el = await fixture<IAppBarMenuButtonComponent>(html`<forge-app-bar-menu-button aria-label="foo"></forge-app-bar-menu-button>`);
     const iconButtonEl = el.querySelector('forge-icon-button') as HTMLElement;
 
+    expect(iconButtonEl.getAttribute('aria-label')).to.equal('foo');
+
     el.removeAttribute('aria-label');
     await elementUpdated(el);
 
-    expect(iconButtonEl.getAttribute('aria-label')).to.equal('Toggle menu');
+    expect(iconButtonEl.getAttribute('aria-label')).to.be.null;
+  });
+
+  it('should reset internal aria-labelledby to tooltip id if external aria-labelledby removed', async () => {
+    const el = await fixture<IAppBarMenuButtonComponent>(html`<forge-app-bar-menu-button aria-labelledby="foo"></forge-app-bar-menu-button>`);
+    const iconButtonEl = el.querySelector('forge-icon-button') as HTMLElement;
+    const tooltipEl = el.querySelector('forge-tooltip') as HTMLElement;
+
+    expect(iconButtonEl.getAttribute('aria-labelledby')).to.equal('foo');
+
+    el.removeAttribute('aria-labelledby');
+    await elementUpdated(el);
+
+    expect(iconButtonEl.getAttribute('aria-labelledby')).to.equal(tooltipEl.id);
   });
 
   it('should set icon', async () => {

src/lib/app-bar/menu-button/app-bar-menu-button.ts

@@ -64,11 +64,11 @@ export class AppBarMenuButtonComponent extends BaseComponent implements IAppBarM
       this._iconElement.name = this._iconName;
     }
 
-    const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+    const originalAriaLabelledby = this._iconButtonElement.getAttribute('aria-labelledby');
 
     this._forwardObserver = forwardAttributes(this, APP_BAR_MENU_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
-      if (name === 'aria-label' && !value) {
-        value = originalAriaLabel;
+      if (name === 'aria-labelledby' && !value) {
+        value = originalAriaLabelledby;
       }
       toggleAttribute(this._iconButtonElement, !!value, name, value ?? undefined);
     });

src/lib/app-bar/notification-button/app-bar-notification-button-adapter.ts

@@ -37,11 +37,11 @@ export class AppBarNotificationButtonAdapter extends BaseAdapter<IAppBarNotifica
     this._badgeElement = getLightElement(this._component, BADGE_CONSTANTS.elementName) as IBadgeComponent;
     this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName) as IIconComponent;
 
-    const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+    const originalAriaLabelledby = this._iconButtonElement.getAttribute('aria-labelledby');
 
     this._forwardObserver = forwardAttributes(this._component, APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
-      if (name === 'aria-label' && !value) {
-        value = originalAriaLabel;
+      if (name === 'aria-labelledby' && !value) {
+        value = originalAriaLabelledby;
       }
       toggleAttribute(this._iconButtonElement, !!value, name, value ?? undefined);
     });

src/lib/app-bar/notification-button/app-bar-notification-button.html

@@ -1,7 +1,7 @@
 <template>
-  <forge-icon-button aria-label="Show notifications">
+  <forge-icon-button>
     <forge-icon></forge-icon>
     <forge-badge slot="badge"></forge-badge>
   </forge-icon-button>
-  <forge-tooltip delay="500" position="bottom">Notifications</forge-tooltip>
+  <forge-tooltip type="label" placement="bottom">Notifications</forge-tooltip>
 </template>