chore: various additional changes to the app-bar sub-components, a11y updates, various bug fixes/cleanup

package.json

@@ -54,7 +54,6 @@
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.3.0",

src/dev/pages/app-bar/app-bar.ejs

@@ -1,19 +1,22 @@
-<forge-app-bar id="forge-app-bar-example" title-text="App bar">
+<forge-app-bar id="forge-app-bar-example" title-text="App Bar" href="javascript: void(0);" aria-label="Demo app bar">
   <forge-icon slot="logo" external external-type="custom" name="forge_logo"></forge-icon>
 
   <forge-app-bar-menu-button slot="start" id="forge-app-bar-example-menu-button"></forge-app-bar-menu-button>
 
   <forge-app-bar-search id="app-bar-search" slot="center">
     <input type="text" placeholder="Search" aria-label="Search" />
-    <forge-icon-button id="app-bar-search-action" slot="action">
+    <forge-icon-button id="app-bar-search-action" slot="action" aria-label="Search by voice">
       <forge-icon name="keyboard_voice"></forge-icon>
     </forge-icon-button>
   </forge-app-bar-search>
 
+
   <forge-app-bar-help-button slot="end"></forge-app-bar-help-button>
   <forge-app-bar-notification-button slot="end"></forge-app-bar-notification-button>
   <forge-app-bar-app-launcher-button slot="end"></forge-app-bar-app-launcher-button>
-
+
+  <forge-button slot="end">Sign in</forge-button>
+
   <forge-app-bar-profile-button
     slot="end"
     avatar-text="First Last"

src/dev/pages/app-bar/app-bar.html

@@ -7,17 +7,27 @@
       {
         type: 'select',
         label: 'Theme',
-        id: 'app-bar-theme-select',
+        id: 'opt-theme',
         defaultValue: '',
         options: [
           { label: 'Default', value: '' },
           { label: 'White', value: 'white' }
         ]
       },
-      { type: 'text-field', label: 'Title text', id: 'app-bar-title-input', defaultValue: 'App bar' },
-      { type: 'switch', label: 'Raised', id: 'app-bar-raised-toggle', defaultValue: true },
-      { type: 'switch', label: 'Show tabs', id: 'app-bar-show-tabs-toggle', defaultValue: true },
-      { type: 'switch', label: 'Use profile card builder', id: 'app-bar-profile-card-builder-toggle' }
+      {
+        type: 'select',
+        label: 'Elevation',
+        id: 'opt-elevation',
+        defaultValue: 'raised',
+        options: [
+          { label: 'Raised (default)', value: 'raised' },
+          { label: 'None ', value: '' }
+        ]
+      },
+      { type: 'text-field', label: 'Title text', id: 'opt-title-text', defaultValue: 'App bar' },
+      { type: 'switch', label: 'Href', id: 'opt-href', defaultValue: true },
+      { type: 'switch', label: 'Show tabs', id: 'opt-show-tabs', defaultValue: true },
+      { type: 'switch', label: 'Use profile card builder', id: 'opt-profile-card-builder' }
     ]
   }
 })

src/dev/pages/app-bar/app-bar.ts

@@ -8,6 +8,7 @@ import '@tylertech/forge/tabs';
 
 // Icons
 import type {
+  AppBarElevation,
   IAppBarComponent,
   IAppBarHelpButtonComponent,
   IAppBarMenuButtonComponent,
@@ -45,7 +46,6 @@ IconRegistry.define([
   tylIconKeyboardVoice
 ]);
 
-const pageAppBar = document.querySelector('forge-app-bar#page-app-bar') as IAppBarComponent;
 const appBar = document.querySelector('forge-app-bar#forge-app-bar-example') as IAppBarComponent;
 const appBarSearch = appBar.querySelector('forge-app-bar-search#app-bar-search') as IAppBarSearchComponent;
 const appBarProfileButton = appBar.querySelector('forge-app-bar-profile-button') as IAppBarProfileButtonComponent;
@@ -79,7 +79,36 @@ appBarSearch.addEventListener('forge-app-bar-search-input', ({ detail }) => {
   document.body.appendChild(toast);
 });
 
-const useProfileCardBuilderToggle = document.querySelector('#app-bar-profile-card-builder-toggle') as ISwitchComponent;
+const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', () => {
+  appBar.theme = themeSelect.value || '';
+});
+
+const elevationSelect = document.querySelector('#opt-elevation') as ISelectComponent;
+elevationSelect.addEventListener('change', ({ detail }) => {
+  appBar.elevation = detail as AppBarElevation;
+});
+
+const titleInput = document.querySelector('#opt-title-text') as HTMLInputElement;
+titleInput.addEventListener('input', () => {
+  appBar.titleText = titleInput.value;
+});
+
+const hrefToggle = document.querySelector('#opt-href') as ISwitchComponent;
+hrefToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  appBar.href = selected ? 'javascript: void(0);' : undefined;
+});
+
+const showTabsToggle = document.querySelector('#opt-show-tabs') as ISwitchComponent;
+showTabsToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  if (selected) {
+    appBar.appendChild(appBarTabs);
+  } else {
+    appBarTabs.remove();
+  }
+});
+
+const useProfileCardBuilderToggle = document.querySelector('#opt-profile-card-builder') as ISwitchComponent;
 useProfileCardBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   appBarProfileButton.profileCardBuilder = selected ? profileCardBuilder : undefined;
 });
@@ -113,35 +142,3 @@ function profileCardBuilder(): HTMLElement {
   listElement.appendChild(buildListItemElement('My Preferences', 'settings', 'preferences'));
   return listElement;
 }
-
-const appBarRaisedToggle = document.querySelector('#app-bar-raised-toggle') as ISwitchComponent;
-appBarRaisedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  appBar.raised = selected;
-  pageAppBar.raised = selected;
-});
-
-const appBarTitleInput = document.querySelector('#app-bar-title-input') as HTMLInputElement;
-appBarTitleInput.addEventListener('input', () => {
-  appBar.titleText = appBarTitleInput.value;
-});
-
-const appBarThemeSelect = document.querySelector('#app-bar-theme-select') as ISelectComponent;
-appBarThemeSelect.addEventListener('change', () => {
-  if (appBarThemeSelect.value) {
-    appBar.setAttribute('theme', appBarThemeSelect.value);
-    pageAppBar.setAttribute('theme', appBarThemeSelect.value);
-  } else {
-    appBar.removeAttribute('theme');
-    pageAppBar.removeAttribute('theme');
-  }
-});
-
-const showAppBarTabsToggle = document.querySelector('#app-bar-show-tabs-toggle') as ISwitchComponent;
-showAppBarTabsToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  if (selected) {
-    appBarTabs.style.removeProperty('display');
-  } else {
-    appBarTabs.style.display = 'none';
-  }
-});
-

src/dev/pages/button/button.ejs

@@ -50,6 +50,36 @@
     </forge-label>
   </section>
 
+  <section>
+    <h3 class="forge-typography--heading2">w/Circular progress</h3>
+    <div class="flex">
+      <forge-button class="auto-width">
+        <span>Saving...</span>
+        <forge-circular-progress aria-label="Saving variant text" slot="end"></forge-circular-progress>
+      </forge-button>
+
+      <forge-button class="auto-width" variant="outlined">
+        <span>Saving...</span>
+        <forge-circular-progress aria-label="Saving variant outlined" slot="end"></forge-circular-progress>
+      </forge-button>
+
+      <forge-button class="auto-width" variant="tonal">
+        <span>Saving...</span>
+        <forge-circular-progress aria-label="Saving variant tonal" slot="end"></forge-circular-progress>
+      </forge-button>
+
+      <forge-button class="auto-width" variant="filled">
+        <span>Saving...</span>
+        <forge-circular-progress aria-label="Saving variant filled" slot="end"></forge-circular-progress>
+      </forge-button>
+
+      <forge-button class="auto-width" variant="raised">
+        <span>Saving...</span>
+        <forge-circular-progress aria-label="Saving variant raised" slot="end"></forge-circular-progress>
+      </forge-button>
+    </div>
+  </section>
+
   <section>
     <h3 class="forge-typography--heading2">Form example</h3>
     <form class="test-form" id="test-btn-form" action="javascript: alert('<form> submit action');">

src/dev/pages/button/button.scss

@@ -14,7 +14,8 @@ forge-button {
   width: 256px;
 }
 
-form:has(forge-button) forge-button {
+form:has(forge-button) forge-button,
+forge-button.auto-width {
   width: auto;
 }
 

src/dev/pages/button/button.ts

@@ -80,7 +80,7 @@ anchorToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
 
 const popoverIconToggle = document.querySelector('#opt-popover-icon') as ISwitchComponent;
 popoverIconToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  allButtons.forEach(btn => btn.popoverIcon = selected);
+  allButtons.filter(btn => btn.id !== 'popover-button').forEach(btn => btn.popoverIcon = selected);
 });
 
 const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;

src/dev/pages/circular-progress/circular-progress.ejs

@@ -1,3 +1,3 @@
-<forge-circular-progress id="circular-progress" class="forge-typography--label"></forge-circular-progress>
+<forge-circular-progress id="circular-progress" class="forge-typography--label" aria-label="Circular progress demo"></forge-circular-progress>
 
 <script type="module" src="circular-progress.ts"></script>

src/dev/pages/circular-progress/circular-progress.html

@@ -24,7 +24,7 @@
       { type: 'text-field', inputType: 'number', label: 'Track width', id: 'opt-track-width', defaultValue: 12 },
       { type: 'switch', label: 'Determinate', id: 'opt-determinate' },
       { type: 'switch', label: 'Show percent', id: 'opt-show-percent', disabled: true },
-      { type: 'switch', label: 'Show track', id: 'opt-show-track', disabled: false, defaultValue: true },
+      { type: 'switch', label: 'Show track', id: 'opt-show-track', disabled: false },
     ]
   }
 })

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

@@ -61,6 +61,44 @@
     </forge-icon-button>
   </section>
 
+  <section>
+    <h3 class="forge-typography--heading2">w/Badge</h3>
+    <forge-icon-button aria-label="With dot badge">
+      <forge-icon name="notifications"></forge-icon>
+      <forge-badge slot="badge" dot></forge-badge>
+    </forge-icon-button>
+
+    <forge-icon-button aria-label="With badge count">
+      <forge-icon name="notifications"></forge-icon>
+      <forge-badge slot="badge">99+</forge-badge>
+    </forge-icon-button>
+  </section>
+
+  <section>
+    <h3 class="forge-typography--heading2">w/Circular progress</h3>
+    <div class="flex">
+      <forge-icon-button>
+        <forge-circular-progress aria-label="With circular progress"></forge-circular-progress>
+      </forge-icon-button>
+
+      <forge-icon-button variant="outlined">
+        <forge-circular-progress aria-label="Outlined with circular progress"></forge-circular-progress>
+      </forge-icon-button>
+
+      <forge-icon-button variant="tonal">
+        <forge-circular-progress aria-label="Tonal with circular progress"></forge-circular-progress>
+      </forge-icon-button>
+
+      <forge-icon-button variant="Filled">
+        <forge-circular-progress aria-label="Filled with circular progress"></forge-circular-progress>
+      </forge-icon-button>
+
+      <forge-icon-button variant="raised">
+        <forge-circular-progress aria-label="Raised with circular progress"></forge-circular-progress>
+      </forge-icon-button>
+    </div>
+  </section>
+
   <section>
     <h3 class="forge-typography--heading2">Label aware</h3>
     <div class="flex">
@@ -82,12 +120,12 @@
   <section>
     <h3 class="forge-typography--heading2">Slots</h3>
     <div class="flex">
-      <forge-icon-button>
+      <forge-icon-button aria-label="With start slot icon">
         <forge-icon slot="start" name="arrow_drop_down"></forge-icon>
         <forge-icon name="favorite"></forge-icon>
       </forge-icon-button>
 
-      <forge-icon-button>
+      <forge-icon-button aria-label="With end slot icon">
         <forge-icon name="favorite"></forge-icon>
         <forge-icon slot="end" name="arrow_drop_down"></forge-icon>
       </forge-icon-button>

src/dev/pages/icon-button/icon-button.ts

@@ -6,7 +6,7 @@ import { IconRegistry } from '@tylertech/forge/icon';
 import type { IIconButtonComponent } from '@tylertech/forge/icon-button';
 import type { ISelectComponent } from '@tylertech/forge/select';
 import type { ISwitchComponent } from '@tylertech/forge/switch';
-import { tylIconCheck, tylIconClose, tylIconFavorite, tylIconFileCopy, tylIconOpenInNew, tylIconSettings } from '@tylertech/tyler-icons/standard';
+import { tylIconCheck, tylIconClose, tylIconFavorite, tylIconFileCopy, tylIconOpenInNew, tylIconSettings, tylIconNotifications } from '@tylertech/tyler-icons/standard';
 import './icon-button.scss';
 
 IconRegistry.define([
@@ -15,7 +15,8 @@ IconRegistry.define([
   tylIconClose,
   tylIconOpenInNew,
   tylIconSettings,
-  tylIconFileCopy
+  tylIconFileCopy,
+  tylIconNotifications
 ]);
 
 const allIconButtons = Array.from(document.querySelectorAll<IIconButtonComponent>('.content forge-icon-button'));

src/dev/pages/linear-progress/linear-progress.ejs

@@ -1,3 +1,3 @@
-<forge-linear-progress id="linear-progress" data-aria-label="Linear progress demo"></forge-linear-progress>
+<forge-linear-progress id="linear-progress" aria-label="Linear progress demo"></forge-linear-progress>
 
 <script type="module" src="linear-progress.ts"></script>

src/dev/pages/linear-progress/linear-progress.html

@@ -6,6 +6,7 @@
     options: [
       {
         type: 'select',
+        label: 'Mode',
         id: 'opt-mode',
         defaultValue: 'indeterminate',
         options: [

src/dev/pages/menu/menu.ejs

@@ -1,5 +1,4 @@
 <forge-menu id="forge-menu-example">
-  <!-- <button type="button">Show menu</button> -->
   <forge-button variant="raised">Show menu</forge-button>
 </forge-menu>
 

src/dev/pages/profile-card/profile-card.ejs

@@ -0,0 +1,5 @@
+<forge-card class="demo-card" no-padding>
+  <forge-profile-card full-name="First Last" email="first.last@tylerforge.io"></forge-profile-card>
+</forge-card>
+
+<script type="module" src="profile-card.ts"></script>