feat(chips): refactor to use tokens

tyler-technologies-oss · Feb 23, 2024 · 8454b18 · 8454b18
1 parent acd8abd
commit 8454b18
Show file tree

Hide file tree

Showing 33 changed files with 2,251 additions and 1,062 deletions.
diff --git a/src/dev/pages/chips/chips.ejs b/src/dev/pages/chips/chips.ejs
@@ -1,158 +1,243 @@
 <div class="vert">
-  <div id="chips-basic">
+  <!-- Basic chips -->
+  <section>
     <h3 class="forge-typography--heading2">Basic chips</h3>
-    <forge-chip-set style="width: 600px; display: flex; flex: auto; flex-direction: row; flex-wrap: wrap;">
+    <forge-chip-set>
       <forge-chip>Small</forge-chip>
       <forge-chip>Medium</forge-chip>
       <forge-chip>Large</forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
+
+  <!-- Anchor chips -->
+  <section>
+    <h3 class="forge-typography--heading2">Chips w/anchor links</h3>
+    <forge-chip-set>
+      <forge-chip href="javascript: void(0);">Anchor chip</forge-chip>
+      <forge-chip href="javascript: alert('Alert from anchor chip');">
+        <forge-icon name="alert" slot="start"></forge-icon>
+        Alert
+      </forge-chip>
+      <forge-chip href="javascript: console.log('Log from anchor chip');">Console log</forge-chip>
+      <forge-chip href="https://www.google.com/">
+        Google
+        <forge-icon name="open_in_new" slot="end"></forge-icon>
+      </forge-chip>
+    </forge-chip-set>
+  </section>
 
-  <div id="chips-choice">
+  <!-- Choice chips -->
+  <section>
     <h3 class="forge-typography--heading2">Choice chips</h3>
     <forge-chip-set type="choice">
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
       <forge-chip>Large</forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-choice-vertical">
+  <!-- Vertical choice chips-->
+  <section>
     <h3 class="forge-typography--heading2">Choice chips (vertical)</h3>
     <forge-chip-set type="choice" vertical>
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
       <forge-chip>Large</forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-filter">
-    <h3 class="forge-typography--heading2">Filter chips</h3>
-    <h4 class="forge-typography--subheading1">No leading icon</h4>
+  <!-- Filter chips -->
+  <section>
+    <h3 class="forge-typography--heading2">Filter chips w/out icons</h3>
     <forge-chip-set type="filter">
       <forge-chip value="tops" selected>Tops</forge-chip>
       <forge-chip value="bottoms" selected>Bottoms</forge-chip>
       <forge-chip value="shoes">Shoes</forge-chip>
       <forge-chip value="accessories">Accessories</forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-filter-leading">
-    <h3 class="forge-typography--heading2">With leading icon</h3>
+  <!-- Start icons -->
+  <section>
+    <h3 class="forge-typography--heading2">With start icon</h3>
     <forge-chip-set type="filter">
       <forge-chip selected>
-        <forge-icon slot="leading" name="face"></forge-icon>
+        <forge-icon slot="start" name="account"></forge-icon>
         Alice
       </forge-chip>
       <forge-chip selected>
-        <forge-icon slot="leading" name="face"></forge-icon>
+        <forge-icon slot="start" name="account"></forge-icon>
         Bob
       </forge-chip>
       <forge-chip>
-        <forge-icon slot="leading" name="face"></forge-icon>
+        <forge-icon slot="start" name="account"></forge-icon>
         Charlie
       </forge-chip>
       <forge-chip>
-        <forge-icon slot="leading" name="face"></forge-icon>
+        <forge-icon slot="start" name="account"></forge-icon>
         Danielle
       </forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-action">
-    <h3 class="forge-typography--heading2">Action chips</h3>
+  <!-- End icons -->
+  <section>
+    <h3 class="forge-typography--heading2">With end icon</h3>
+    <forge-chip-set type="filter">
+      <forge-chip selected>
+        Alice
+        <forge-icon slot="end" name="account"></forge-icon>
+      </forge-chip>
+      <forge-chip selected>
+        Bob
+        <forge-icon slot="end" name="account"></forge-icon>
+      </forge-chip>
+      <forge-chip>
+        Charlie
+        <forge-icon slot="end" name="account"></forge-icon>
+      </forge-chip>
+      <forge-chip>
+        Danielle
+        <forge-icon slot="end" name="account"></forge-icon>
+      </forge-chip>
+    </forge-chip-set>
+  </section>
+
+  <!-- Start avatar -->
+  <section>
+    <h3 class="forge-typography--heading2">With start avatar</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
-        <forge-icon slot="leading" name="event"></forge-icon>
+        <forge-avatar slot="start" text="Tyler Forge"></forge-avatar>
         Add to calendar
       </forge-chip>
       <forge-chip value="bookmark">
-        <forge-icon slot="leading" name="bookmark"></forge-icon>
+        <forge-avatar slot="start" text="Tyler Forge"></forge-avatar>
         Bookmark
       </forge-chip>
       <forge-chip value="alarm">
-        <forge-icon slot="leading" name="alarm"></forge-icon>
+        <forge-avatar slot="start" text="Tyler Forge"></forge-avatar>
         Set alarm
       </forge-chip>
       <forge-chip value="directions">
-        <forge-icon slot="leading" name="directions"></forge-icon>
+        <forge-avatar slot="start" text="Tyler Forge"></forge-avatar>
         Get directions
       </forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-avatar">
-    <h3 class="forge-typography--heading2">With leading avatar</h3>
+  <!-- End avatar -->
+  <section>
+    <h3 class="forge-typography--heading2">With end avatar</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
-        <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
         Add to calendar
+        <forge-avatar slot="end" text="Tyler Forge"></forge-avatar>
       </forge-chip>
       <forge-chip value="bookmark">
-        <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
         Bookmark
+        <forge-avatar slot="end" text="Tyler Forge"></forge-avatar>
       </forge-chip>
       <forge-chip value="alarm">
-        <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
         Set alarm
+        <forge-avatar slot="end" text="Tyler Forge"></forge-avatar>
       </forge-chip>
       <forge-chip value="directions">
-        <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
         Get directions
+        <forge-avatar slot="end" text="Tyler Forge"></forge-avatar>
       </forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-input">
+  <!-- Action chips -->
+  <section id="chips-action">
+    <h3 class="forge-typography--heading2">Action chips</h3>
+    <forge-chip-set>
+      <forge-chip value="calendar">
+        <forge-icon slot="start" name="event"></forge-icon>
+        Add to calendar
+      </forge-chip>
+      <forge-chip value="bookmark">
+        <forge-icon slot="start" name="bookmark"></forge-icon>
+        Bookmark
+      </forge-chip>
+      <forge-chip value="alarm">
+        <forge-icon slot="start" name="alarm"></forge-icon>
+        Set alarm
+      </forge-chip>
+      <forge-chip value="directions">
+        <forge-icon slot="start" name="directions"></forge-icon>
+        Get directions
+      </forge-chip>
+    </forge-chip-set>
+  </section>
+
+  <!-- Input chips -->
+  <section id="chips-input">
     <h3 class="flex forge-typography--heading2">
       Input chips
       <span>
-        <forge-icon-button id="refresh-button">
+        <forge-icon-button id="refresh-button" aria-label="Reset input chips demo">
           <forge-icon name="refresh"></forge-icon>
         </forge-icon-button>
       </span>
     </h3>
     <forge-chip-set type="input">
       <forge-chip>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Falmouth
       </forge-chip>
       <forge-chip>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Yarmouth
       </forge-chip>
       <forge-chip>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Plano
       </forge-chip>
       <forge-chip>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Renton
       </forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
 
-  <div id="chips-input">
+  <!-- Invalid chips -->
+  <section>
     <h3 class="forge-typography--heading2">Invalid chips</h3>
     <forge-chip-set type="input">
       <forge-chip invalid>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Falmouth
       </forge-chip>
       <forge-chip invalid>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Yarmouth
       </forge-chip>
       <forge-chip invalid>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Plano
       </forge-chip>
       <forge-chip invalid>
-        <forge-icon slot="leading" name="place"></forge-icon>
+        <forge-icon slot="start" name="place"></forge-icon>
         Renton
       </forge-chip>
     </forge-chip-set>
-  </div>
+  </section>
+
+  <!-- Field chips -->
+  <section>
+    <h3 class="forge-typography--heading2">Field chips</h3>
+    <label class="forge-typography--label1" for="chip-field-input">Field label</label>
+    <forge-text-field>
+      <input type="text" id="chip-field-input" />
+      <forge-chip-set type="field" dense slot="leading">
+        <forge-chip>Small</forge-chip>
+        <forge-chip>Medium</forge-chip>
+        <forge-chip>Large</forge-chip>
+      </forge-chip-set>
+    </forge-text-field>
+  </section>
 </div>
 
 <script type="module" src="chips.ts"></script>
diff --git a/src/dev/pages/chips/chips.html b/src/dev/pages/chips/chips.html
@@ -4,6 +4,21 @@
     title: 'Chips',
     includePath: './pages/chips/chips.ejs',
     options: [
+    {
+        type: 'select',
+        label: 'Theme',
+        id: 'opt-theme',
+        defaultValue: 'primary',
+        options: [
+          { label: 'Primary (default)', 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: 'Dense', id: 'opt-dense' },
       { type: 'switch', label: 'Disabled', id: 'opt-disabled' }
     ]

diff --git a/src/dev/pages/chips/chips.ts b/src/dev/pages/chips/chips.ts
@@ -1,19 +1,22 @@
 import '$src/shared';
 import '@tylertech/forge/chips';
 import '@tylertech/forge/icon-button';
-import { IChipSetComponent, IconRegistry, ISwitchComponent } from '@tylertech/forge';
+import { IChipSetComponent, IconRegistry, ISelectComponent, ISwitchComponent } from '@tylertech/forge';
 import type { IChipComponent } from '@tylertech/forge';
-import { tylIconAlarm, tylIconBookmark, tylIconDirections, tylIconEvent, tylIconFace, tylIconPlace, tylIconRefresh } from '@tylertech/tyler-icons/standard';
+import { tylIconAlarm, tylIconBookmark, tylIconDirections, tylIconEvent, tylIconOpenInNew, tylIconPlace, tylIconRefresh } from '@tylertech/tyler-icons/standard';
+import { tylIconAccount, tylIconAlert } from '@tylertech/tyler-icons/extended';
 import { showToast } from '$src/utils/utils';
 
 IconRegistry.define([
   tylIconRefresh,
-  tylIconFace,
+  tylIconAccount,
   tylIconEvent,
   tylIconBookmark,
   tylIconAlarm,
   tylIconDirections,
-  tylIconPlace
+  tylIconPlace,
+  tylIconOpenInNew,
+  tylIconAlert
 ]);
 
 const chipsDenseToggle = document.querySelector('#opt-dense') as ISwitchComponent;
@@ -23,6 +26,7 @@ const chipsDisabledToggle = document.querySelector('#opt-disabled') as ISwitchCo
 const actionExample = document.querySelector('#chips-action');
 const actionChipSet = actionExample.querySelector('forge-chip-set');
 actionChipSet.addEventListener('forge-chip-select', ({ detail: { value }}) => {
+  console.log('[forge-chip-select]', value);
   showToast(`Action Chip Selected: ${value}`);
 });
 
@@ -31,6 +35,7 @@ let deletedChips = [];
 const inputExample = document.querySelector('#chips-input');
 const inputChipSet = inputExample.querySelector('forge-chip-set[type=input]');
 inputChipSet.addEventListener('forge-chip-delete', ({ target }) => {
+  console.log('[forge-chip-delete]', target);
   deletedChips.push(target);
   (target as IChipComponent).remove();
 });
@@ -42,6 +47,15 @@ refreshButton.addEventListener('click', () => {
   deletedChips = [];
 });
 
+// Theme
+const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', ({ detail }) => {
+  const chipSets = document.querySelectorAll('forge-chip-set') as NodeListOf<IChipSetComponent>;
+  for (const chipSet of chipSets) {
+    chipSet.theme = detail;
+  }
+});
+
 // Dense toggling
 chipsDenseToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const chipSets = document.querySelectorAll('forge-chip-set') as NodeListOf<IChipSetComponent>;

diff --git a/src/lib/avatar/index.scss b/src/lib/avatar/index.scss
@@ -0,0 +1 @@
+@forward './core';
diff --git a/src/lib/chip-field/chip-field-foundation.ts b/src/lib/chip-field/chip-field-foundation.ts
@@ -155,7 +155,7 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo
   }
 
   private _memberIsActive(ele: HTMLElement): boolean {
-    return getActiveElement(ele.ownerDocument) === ele || ele.hasAttribute('focused');
+    return ele.matches(':focus-within') || getActiveElement(ele.ownerDocument) === ele || ele.hasAttribute('focused');
   }
 
   private _getActiveMember(): HTMLElement | null {

diff --git a/src/lib/chips/build.json b/src/lib/chips/build.json