[@next] refactor button toggle (#442)

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

@@ -1,17 +1,131 @@
-<h3 class="forge-typography--heading2">Static</h3>
-<forge-button-toggle-group id="button-toggle-group">
-  <forge-button-toggle value="email" aria-label="By email">
-    <forge-icon name="email" slot="leading"></forge-icon>
-    By email
-  </forge-button-toggle>
-  <forge-button-toggle value="mail" aria-label="By mail">By mail</forge-button-toggle>
-  <forge-button-toggle value="phone" aria-label="By phone">
-    By phone
-    <forge-icon name="phone" slot="trailing"></forge-icon>
-  </forge-button-toggle>
-</forge-button-toggle-group>
+<div class="button-toggle-demo-container">
+  <!-- Default -->
+  <section>
+    <h3 class="forge-typography--heading2">Default</h3>
+    <forge-button-toggle-group id="button-toggle-group" aria-label="Choose communication type">
+      <forge-button-toggle value="email">
+        <forge-icon name="email" slot="start"></forge-icon>
+        By email
+      </forge-button-toggle>
+      <forge-button-toggle value="mail">
+        <forge-icon name="mail" slot="start"></forge-icon>
+        By mail
+      </forge-button-toggle>
+      <forge-button-toggle value="phone">
+        <forge-icon name="phone" slot="start"></forge-icon>
+        By phone
+      </forge-button-toggle>
+    </forge-button-toggle-group>
+  </section>
 
-<h3 class="forge-typography--heading2">Dynamic</h3>
-<forge-button-toggle-group id="button-toggle-group-dynamic"></forge-button-toggle-group>
+  <!-- No outline -->
+  <section>
+    <h3 class="forge-typography--heading2">No outline</h3>
+    <forge-button-toggle-group no-outline>
+      <forge-button-toggle value="email" aria-label="By email">
+        <forge-icon name="email" slot="start"></forge-icon>
+        By email
+      </forge-button-toggle>
+      <forge-button-toggle value="mail" aria-label="By mail">
+        <forge-icon name="mail" slot="start"></forge-icon>
+        By mail
+      </forge-button-toggle>
+      <forge-button-toggle value="phone" aria-label="By phone">
+        <forge-icon name="phone" slot="start"></forge-icon>
+        By phone
+      </forge-button-toggle>
+    </forge-button-toggle-group>
+  </section>
+
+  <!-- w/Dividers -->
+  <section>
+    <h3 class="forge-typography--heading2">w/Dividers</h3>
+    <forge-button-toggle-group>
+      <forge-button-toggle value="email" aria-label="By email">
+        <forge-icon name="email" slot="start"></forge-icon>
+        By email
+      </forge-button-toggle>
+      <forge-divider vertical></forge-divider>
+      <forge-button-toggle value="mail" aria-label="By mail">
+        <forge-icon name="mail" slot="start"></forge-icon>
+        By mail
+      </forge-button-toggle>
+      <forge-divider vertical></forge-divider>
+      <forge-button-toggle value="phone" aria-label="By phone">
+        <forge-icon name="phone" slot="start"></forge-icon>
+        By phone
+      </forge-button-toggle>
+    </forge-button-toggle-group>
+  </section>
+
+  <!-- Form -->
+  <section>
+    <h3 class="forge-typography--heading2">Form associated</h3>
+    <form id="button-toggle-form">
+      <forge-stack>
+        <forge-button-toggle-group id="my-button-toggle-group" name="my-button-toggle-group" required>
+          <forge-button-toggle value="email" aria-label="By email">
+            <forge-icon name="email" slot="start"></forge-icon>
+            By email
+          </forge-button-toggle>
+          <forge-divider vertical></forge-divider>
+          <forge-button-toggle value="mail" aria-label="By mail">
+            <forge-icon name="mail" slot="start"></forge-icon>
+            By mail
+          </forge-button-toggle>
+          <forge-divider vertical></forge-divider>
+          <forge-button-toggle value="phone" aria-label="By phone">
+            <forge-icon name="phone" slot="start"></forge-icon>
+            By phone
+          </forge-button-toggle>
+        </forge-button-toggle-group>
+        <forge-stack inline>
+          <forge-button variant="outlined" type="reset">Reset</forge-button>
+          <forge-button variant="outlined" type="submit">Submit</forge-button>
+        </forge-stack>
+      </forge-stack>
+    </form>
+  </section>
+
+  <!-- Toolbar -->
+  <section>
+    <h3 class="forge-typography--heading2">Toolbar (custom)</h3>
+    <forge-card id="toolbar-card">
+      <div class="toolbar-card__container">
+        <forge-button-toggle-group no-outline multiple aria-label="Choose a format">
+          <forge-button-toggle value="bold" aria-label="Bold">
+            <forge-icon name="format_bold"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="italic" aria-label="Italic">
+            <forge-icon name="format_italic"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="underline" aria-label="Underline">
+            <forge-icon name="format_underlined"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="strikethrough" aria-label="Strikethrough">
+            <forge-icon name="format_strikethrough"></forge-icon>
+          </forge-button-toggle>
+        </forge-button-toggle-group>
+
+        <forge-divider vertical></forge-divider>
+
+        <forge-button-toggle-group no-outline>
+          <forge-button-toggle value="align-left" aria-label="Align left">
+            <forge-icon name="format_align_left"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="align-center" aria-label="Align center">
+            <forge-icon name="format_align_center"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="align-right" aria-label="Align right">
+            <forge-icon name="format_align_right"></forge-icon>
+          </forge-button-toggle>
+          <forge-button-toggle value="align-justify" aria-label="Align justify">
+            <forge-icon name="format_align_justify"></forge-icon>
+          </forge-button-toggle>
+        </forge-button-toggle-group>
+      </div>
+    </forge-card>
+  </section>
+</div>
 
 <script type="module" src="button-toggle.ts"></script>

src/dev/pages/button-toggle/button-toggle.html

@@ -4,12 +4,28 @@
     title: 'Button toggle',
     includePath: './pages/button-toggle/button-toggle.ejs',
     options: [
+      {
+        type: 'select',
+        label: 'Theme',
+        id: 'opt-theme',
+        defaultValue: 'primary',
+        options: [
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Tertiary', value: 'tertiary' },
+          { label: 'Success', value: 'success' },
+          { label: 'Error', value: 'error' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Info', value: 'info' }
+        ]
+      },
       { type: 'switch', label: 'Multiple', id: 'button-toggle-multiple' },
       { type: 'switch', label: 'Mandatory', id: 'button-toggle-mandatory' },
       { type: 'switch', label: 'Vertical', id: 'button-toggle-vertical' },
       { type: 'switch', label: 'Stretch', id: 'button-toggle-stretch' },
       { type: 'switch', label: 'Dense', id: 'button-toggle-dense' },
-      { type: 'switch', label: 'Disabled', id: 'button-toggle-disabled' }
+      { type: 'switch', label: 'Disabled', id: 'button-toggle-disabled' },
+      { type: 'switch', label: 'Readonly', id: 'button-toggle-readonly' }
     ]
   }
 })

src/dev/pages/button-toggle/button-toggle.scss

@@ -1,5 +1,19 @@
-@use '../../src/shared';
+@use '../../../lib/button-toggle/button-toggle-group';
 
-button {
-  width: 256px;
-}
+#toolbar-card {
+  display: inline-block;
+  --forge-card-padding: 0;
+
+  @include button-toggle-group.provide-theme((
+    padding: 4px
+  ));
+
+  .toolbar-card__container {
+    display: flex;
+  }
+
+  forge-divider {
+    height: auto;
+    margin-block: 4px;
+  }
+}

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

@@ -1,66 +1,102 @@
 import '$src/shared';
 import '@tylertech/forge/button-toggle';
 import '@tylertech/forge/icon';
+import '@tylertech/forge/divider';
+import '@tylertech/forge/stack';
 import { IconRegistry } from '@tylertech/forge/icon';
-import type { IButtonToggleGroupComponent } from '@tylertech/forge/button-toggle';
+import type { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData, IButtonToggleGroupComponent, IButtonToggleSelectEventData } from '@tylertech/forge/button-toggle';
+import type { ISelectComponent } from '@tylertech/forge/select';
 import type { ISwitchComponent } from '@tylertech/forge/switch';
-import { tylIconEmail, tylIconFavorite, tylIconPerson, tylIconPhone, tylIconStar } from '@tylertech/tyler-icons/standard';
+import {
+  tylIconEmail,
+  tylIconMail,
+  tylIconFavorite,
+  tylIconFormatAlignCenter,
+  tylIconFormatAlignJustify,
+  tylIconFormatAlignLeft,
+  tylIconFormatAlignRight,
+  tylIconFormatBold,
+  tylIconFormatItalic,
+  tylIconFormatStrikethrough,
+  tylIconFormatUnderlined,
+  tylIconPerson,
+  tylIconPhone,
+  tylIconStar
+} from '@tylertech/tyler-icons/standard';
+import './button-toggle.scss';
 
 IconRegistry.define([
   tylIconEmail,
+  tylIconMail,
   tylIconPhone,
   tylIconStar,
   tylIconFavorite,
-  tylIconPerson
+  tylIconPerson,
+  tylIconFormatBold,
+  tylIconFormatItalic,
+  tylIconFormatUnderlined,
+  tylIconFormatStrikethrough,
+  tylIconFormatAlignLeft,
+  tylIconFormatAlignCenter,
+  tylIconFormatAlignRight,
+  tylIconFormatAlignJustify
 ]);
 
-const buttonToggleGroupStatic = document.querySelector('#button-toggle-group') as IButtonToggleGroupComponent;
-const buttonToggleGroupDynamic = document.querySelector('#button-toggle-group-dynamic') as IButtonToggleGroupComponent;
-buttonToggleGroupDynamic.options = [
-  { label: 'Left', value: 'left', leadingIcon: 'star', leadingIconType: 'component' },
-  { label: 'Middle', value: 'middle', leadingIcon: 'favorite', leadingIconType: 'component' },
-  { label: 'Right', value: 'right', trailingIcon: 'person', trailingIconType: 'component' }
-];
+function getButtonToggleGroups(): IButtonToggleGroupComponent[] {
+  return Array.from(document.querySelectorAll<IButtonToggleGroupComponent>('forge-button-toggle-group'));
+}
 
-buttonToggleGroupStatic.addEventListener('forge-button-toggle-group-change', ({ detail }) => {
+const buttonToggleDemoContainer = document.querySelector('.button-toggle-demo-container');
+buttonToggleDemoContainer.addEventListener('forge-button-toggle-group-change', ({ detail }: CustomEvent<IButtonToggleGroupChangeEventData>) => {
   console.log('[forge-button-toggle-group-change]', detail);
 });
-buttonToggleGroupStatic.addEventListener('forge-button-toggle-select', ({ detail }) => {
+buttonToggleDemoContainer.addEventListener('forge-button-toggle-select', ({ detail }: CustomEvent<IButtonToggleSelectEventData>) => {
   console.log('[forge-button-toggle-select]', detail);
 });
 
+const form = document.getElementById('button-toggle-form') as HTMLFormElement;
+form.addEventListener('submit', (evt: Event) => {
+  evt.preventDefault();
+  const formData = new FormData(form);
+  console.log('[form submit]', formData.getAll('my-button-toggle-group'));
+});
+
+const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', ({ detail: theme }: CustomEvent<ButtonToggleGroupTheme>) => {
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.theme = theme);
+});
+
 const multipleToggle = document.querySelector('#button-toggle-multiple') as ISwitchComponent;
 multipleToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.multiple = selected;
-  buttonToggleGroupDynamic.multiple = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.multiple = selected);
 });
 
 const mandatoryToggle = document.querySelector('#button-toggle-mandatory') as ISwitchComponent;
 mandatoryToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.mandatory = selected;
-  buttonToggleGroupDynamic.mandatory = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.mandatory = selected);
 });
 
 const verticalToggle = document.querySelector('#button-toggle-vertical') as ISwitchComponent;
 verticalToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.vertical = selected;
-  buttonToggleGroupDynamic.vertical = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.vertical = selected);
 });
 
 const stretchToggle = document.querySelector('#button-toggle-stretch') as ISwitchComponent;
 stretchToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.stretch = selected;
-  buttonToggleGroupDynamic.stretch = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.stretch = selected);
 });
 
 const denseToggle = document.querySelector('#button-toggle-dense') as ISwitchComponent;
 denseToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.dense = selected;
-  buttonToggleGroupDynamic.dense = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.dense = selected);
 });
 
 const disabledToggle = document.querySelector('#button-toggle-disabled') as ISwitchComponent;
 disabledToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  buttonToggleGroupStatic.disabled = selected;
-  buttonToggleGroupDynamic.disabled = selected;
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.disabled = selected);
+});
+
+const readonlyToggle = document.querySelector('#button-toggle-readonly') as ISwitchComponent;
+readonlyToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  getButtonToggleGroups().forEach(buttonToggle => buttonToggle.readonly = selected);
 });

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

@@ -144,12 +144,4 @@ describe('App Bar', () => {
   function getFocusIndicator(el: IAppBarComponent): IFocusIndicatorComponent {
     return el.shadowRoot?.querySelector('forge-focus-indicator') as IFocusIndicatorComponent;
   }
-
-  function clickElement(el: HTMLElement): Promise<void> {
-    const { x, y, width, height } = el.getBoundingClientRect();
-    return sendMouse({ type: 'click', position: [
-      Math.floor(x + window.scrollX + width / 2),
-      Math.floor(y + window.scrollY + height / 2),
-    ]});
-  }
 });