Merge branch 'next' into next-button-area-refactor

tyler-technologies-oss · Feb 28, 2024 · da7c5d2 · da7c5d2
2 parents fa1f22a + b37410a
commit da7c5d2
Show file tree

Hide file tree

Showing 124 changed files with 3,734 additions and 3,699 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,42 @@
+# v2.21.3 (Thu Feb 22 2024)
+
+#### 🐛 Bug Fix
+
+- chore: upgrade auto to fix release [#479](https://github.com/tyler-technologies-oss/forge/pull/479) ([@DRiFTy17](https://github.com/DRiFTy17))
+- feat: bump `@tylertech/forge-core` to `2.3.1` to use constructable stylesheets by default [#475](https://github.com/tyler-technologies-oss/forge/pull/475) ([@DRiFTy17](https://github.com/DRiFTy17))
+
+#### Authors: 1
+
+- Kieran Nichols ([@DRiFTy17](https://github.com/DRiFTy17))
+
+---
+
+# v2.21.2 (Thu Feb 15 2024)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Eli Ganem ([@eliganemtyler](https://github.com/eliganemtyler)), for all your work!
+
+#### 🐛 Bug Fix
+
+- fix(date-picker): open calendar on min enabled month when current month is after max date [#472](https://github.com/tyler-technologies-oss/forge/pull/472) ([@samrichardsontylertech](https://github.com/samrichardsontylertech) [@DRiFTy17](https://github.com/DRiFTy17))
+- fix(menu): map deprecated `icon` property to `leadingIcon` when options are loaded from factory [#461](https://github.com/tyler-technologies-oss/forge/pull/461) ([@eliganemtyler](https://github.com/eliganemtyler))
+- fix(paginator): revert naive focus management changes in favor of default browser implementation when focused elements are disabled [#468](https://github.com/tyler-technologies-oss/forge/pull/468) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(list): fixed a bug where keyboard navigation was not scoped within sub-lists [#458](https://github.com/tyler-technologies-oss/forge/pull/458) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(dialog): fixed a bug where opening dialogs with focused Forge elements that use the ripple could be misaligned [#457](https://github.com/tyler-technologies-oss/forge/pull/457) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(open-icon): auto-register correct "horizontal" icon [#449](https://github.com/tyler-technologies-oss/forge/pull/449) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix: identify readonly properties in custom elements manifest [#465](https://github.com/tyler-technologies-oss/forge/pull/465) ([@MikeMatusz](https://github.com/MikeMatusz))
+- fix(calendar): fixed a bug where the calendar would not reflect the correct month if the max date is before the current the month [#448](https://github.com/tyler-technologies-oss/forge/pull/448) ([@DRiFTy17](https://github.com/DRiFTy17))
+
+#### Authors: 4
+
+- Eli Ganem ([@eliganemtyler](https://github.com/eliganemtyler))
+- Kieran Nichols ([@DRiFTy17](https://github.com/DRiFTy17))
+- Mike Matuszak ([@MikeMatusz](https://github.com/MikeMatusz))
+- Sam Richardson ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+---
+
 # v2.21.1 (Thu Dec 14 2023)
 
 #### 🐛 Bug Fix

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge",
-  "version": "3.0.0-next.14",
+  "version": "2.21.3",
   "description": "Tyler Forge™ Web Components library",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",
@@ -54,15 +54,15 @@
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
     "@material/typography": "^14.0.0",
-    "@tylertech/forge-core": "^2.3.0",
+    "@tylertech/forge-core": "^2.3.1",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@auto-it/conventional-commits": "^10.46.0",
-    "@auto-it/first-time-contributor": "^10.46.0",
-    "@auto-it/npm": "^10.46.0",
+    "@auto-it/conventional-commits": "^11.0.5",
+    "@auto-it/first-time-contributor": "^11.0.5",
+    "@auto-it/npm": "^11.0.5",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@esm-bundle/chai": "^4.3.4-fix.0",
@@ -81,7 +81,7 @@
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-junit-reporter": "^0.6.0",
     "@web/test-runner-playwright": "^0.10.1",
-    "auto": "^10.46.0",
+    "auto": "^11.0.5",
     "commitlint": "^17.6.3",
     "eslint-formatter-codeframe": "^7.32.1",
     "http-server": "^14.1.1",

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' }
     ]