feat(icon-button): refactored icon-button

tyler-technologies-oss · Nov 15, 2023 · f0395f4 · f0395f4
1 parent e6cafc3
commit f0395f4
Show file tree

Hide file tree

Showing 116 changed files with 3,491 additions and 2,548 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "@material/elevation": "^14.0.0",
     "@material/feature-targeting": "^14.0.0",
     "@material/form-field": "^14.0.0",
-    "@material/icon-button": "^14.0.0",
     "@material/menu-surface": "^14.0.0",
     "@material/ripple": "^14.0.0",
     "@material/rtl": "^14.0.0",

diff --git a/src/dev/index.ejs b/src/dev/index.ejs
@@ -2,10 +2,8 @@
 <forge-text-field>
   <forge-icon slot="leading" name="search"></forge-icon>
   <input type="text" placeholder="Filter..." id="search-field" />
-  <forge-icon-button slot="trailing" dense density-level="3">
-    <button type="button" id="clear-button" aria-label="Clear filter">
-      <forge-icon name="close"></forge-icon>
-    </button>
+  <forge-icon-button slot="trailing" density="medium" id="clear-button" aria-label="Clear filter">
+    <forge-icon name="close"></forge-icon>
   </forge-icon-button>
 </forge-text-field>
 

diff --git a/src/dev/pages/app-bar/app-bar.ejs b/src/dev/pages/app-bar/app-bar.ejs
@@ -6,7 +6,7 @@
   <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="end">
-      <button class="tyler-icons">keyboard_voice</button>
+      <forge-icon name="keyboard_voice"></forge-icon>
     </forge-icon-button>
   </forge-app-bar-search>
 
@@ -18,12 +18,12 @@
     slot="end"
     avatar-text="First Last"
     full-name="First Last"
-    email="first.last@forge.tylerdev.io"
+    email="first.last@tylerforge.io"
     profile-button
     profile-button-text="View profile">
   </forge-app-bar-profile-button>
 
-  <forge-tab-bar slot="bottom" active-tab="0" clustered>
+  <forge-tab-bar slot="bottom" active-tab="0" clustered scroll-buttons>
     <forge-tab>Tab 1</forge-tab>
     <forge-tab>Tab 2</forge-tab>
     <forge-tab>Tab 3</forge-tab>

diff --git a/src/dev/pages/autocomplete/autocomplete.ejs b/src/dev/pages/autocomplete/autocomplete.ejs
@@ -4,10 +4,8 @@
       <forge-text-field>
         <input type="text" id="autocomplete-input" aria-label="Choose state" />
         <label for="autocomplete-input">Choose state</label>
-        <forge-icon-button slot="trailing" dense density-level="2">
-          <button type="button" data-forge-autocomplete-clear>
-            <forge-icon name="close"></forge-icon>
-          </button>
+        <forge-icon-button slot="trailing" density="medium" data-forge-autocomplete-clear>
+          <forge-icon name="close"></forge-icon>
         </forge-icon-button>
         <forge-icon slot="trailing" name="arrow_drop_down" data-forge-dropdown-icon></forge-icon>
       </forge-text-field>

diff --git a/src/dev/pages/autocomplete/autocomplete.ts b/src/dev/pages/autocomplete/autocomplete.ts
@@ -228,25 +228,17 @@ function headerBuilderCallback(): HTMLElement {
   const textField = document.createElement('forge-text-field');
   textField.appendChild(input);
 
-  const button = document.createElement('button');
+  const button = document.createElement('forge-icon-button');
   button.style.marginLeft = '8px';
   button.type = 'button';
-  button.addEventListener('click', () => {
-    autocomplete.open = false;
-  });
+  button.addEventListener('click', () => autocomplete.open = false);
 
   const icon = document.createElement('forge-icon');
   icon.name = 'close';
   button.appendChild(icon);
-
-  const iconButton = document.createElement('forge-icon-button');
-  iconButton.appendChild(button);
-  window.requestAnimationFrame(() => {
-    iconButton.layout();
-  });
 
   div.appendChild(textField);
-  div.appendChild(iconButton);
+  div.appendChild(button);
 
   return div;
 }

diff --git a/src/dev/pages/badge/badge.ejs b/src/dev/pages/badge/badge.ejs
@@ -8,23 +8,17 @@
 
   <div class="vert">
     <forge-icon-button class="forge-icon-button--with-badge">
-      <button type="button">
-        <forge-icon name="notifications" external></forge-icon>
-      </button>
+      <forge-icon name="notifications" external></forge-icon>
       <forge-badge dot positioned></forge-badge>
     </forge-icon-button>
 
     <forge-icon-button class="forge-icon-button--with-badge">
-      <button type="button">
-        <forge-icon name="notifications" external></forge-icon>
-      </button>
+      <forge-icon name="notifications" external></forge-icon>
       <forge-badge positioned>99</forge-badge>
     </forge-icon-button>
 
     <forge-icon-button class="forge-icon-button--with-badge">
-      <button type="button">
-        <forge-icon name="notifications" external></forge-icon>
-      </button>
+      <forge-icon name="notifications" external></forge-icon>
       <forge-badge positioned>999999+</forge-badge>
     </forge-icon-button>
   </div>

diff --git a/src/dev/pages/button-area/button-area.ejs b/src/dev/pages/button-area/button-area.ejs
@@ -7,11 +7,9 @@
         <div>Content</div>
       </div>
       <forge-icon-button data-forge-ignore>
-        <button>
-          <forge-icon name="favorite"></forge-icon>
-        </button>
-        <forge-tooltip>Like</forge-tooltip>
+        <forge-icon name="favorite"></forge-icon>
       </forge-icon-button>
+      <forge-tooltip>Like</forge-tooltip>
       <forge-icon name="chevron_right"></forge-icon>
     </div>
   </forge-button-area>
@@ -29,11 +27,9 @@
           <div>Subheading</div>
         </div>
         <forge-icon-button data-forge-ignore>
-          <button>
-            <forge-icon name="favorite"></forge-icon>
-          </button>
-          <forge-tooltip>Like</forge-tooltip>
+          <forge-icon name="favorite"></forge-icon>
         </forge-icon-button>
+        <forge-tooltip>Like</forge-tooltip>
         <forge-open-icon></forge-open-icon>
       </div>
     </forge-button-area>

diff --git a/src/dev/pages/button/button.ejs b/src/dev/pages/button/button.ejs
@@ -1,32 +1,56 @@
 <div class="button-demo">
-  <forge-button>Default button</forge-button>
-  <forge-button variant="raised">Raised button</forge-button>
-  <forge-button variant="flat">Flat button</forge-button>
-  <forge-button variant="outlined">Outlined button</forge-button>
-  <forge-button variant="outlined">
-    <span>w/&lt;span&gt; container</span>
-  </forge-button>
-
-  <forge-button variant="outlined">
-    <forge-icon slot="start" name="favorite"></forge-icon>
-    w/Leading icon
-  </forge-button>
-
-  <forge-button variant="outlined">
-    w/Trailing icon
-    <forge-icon slot="end" name="favorite"></forge-icon>
-  </forge-button>
-
-  <forge-button variant="outlined" disabled href="javascript: alert('Anchor link button works!');">
-    w/Anchor link
-    <forge-icon slot="end" name="open_in_new"></forge-icon>
-  </forge-button>
-
-  <forge-button variant="link">Link button</forge-button>
-
-  <forge-button class="custom-button">Custom button</forge-button>
-
-  <div>
+  <section class="vert">
+    <h3 class="forge-typography--heading2">Variants</h3>
+    <forge-button>Text button</forge-button>
+    <forge-button variant="outlined">Outlined button</forge-button>
+    <forge-button variant="tonal">Tonal button</forge-button>
+    <forge-button variant="filled">Filled button</forge-button>
+    <forge-button variant="raised">Raised button</forge-button>
+    <forge-button variant="link">Link button</forge-button>
+  </section>
+
+  <section class="vert">
+    <h3 class="forge-typography--heading2">Slots</h3>
+
+    <forge-button variant="outlined">
+      <span>w/&lt;span&gt; text container</span>
+    </forge-button>
+
+    <forge-button variant="outlined">
+      <forge-icon slot="start" name="favorite"></forge-icon>
+      w/Start icon
+    </forge-button>
+
+    <forge-button variant="outlined">
+      w/End icon
+      <forge-icon slot="end" name="favorite"></forge-icon>
+    </forge-button>
+  </section>
+
+  <section>
+    <h3 class="forge-typography--heading2">Anchor</h3>
+    <forge-button variant="outlined" href="javascript: alert('Anchor link button works!');">
+      w/Anchor link
+      <forge-icon slot="end" name="open_in_new"></forge-icon>
+    </forge-button>
+  </section>
+
+  <section>
+    <h3 class="forge-typography--heading2">Custom</h3>
+    <forge-button class="custom-button">Custom button</forge-button>
+  </section>
+
+  <section>
+    <h3 class="forge-typography--heading2">Label aware</h3>
+    <forge-label class="vert">
+      <forge-button variant="outlined">
+        <forge-icon name="favorite"></forge-icon>
+      </forge-button>
+      <span>Label text for the button</span>
+    </forge-label>
+  </section>
+
+  <section>
     <h3 class="forge-typography--heading2">Form example</h3>
     <form class="test-form" id="test-btn-form" action="javascript: alert('<form> submit action');">
       <forge-text-field>
@@ -37,15 +61,15 @@
         <forge-button id="reset-btn" variant="outlined" type="reset">Reset</forge-button>
       </div>
     </form>
-  </div>
+  </section>
 
-  <div>
+  <section>
     <h3 class="forge-typography--heading2">Popover target</h3>
     <forge-button id="popover-button" aria-expanded="false" popovertarget="my-popover" popover-icon variant="raised">Show popover</forge-button>
     <div popover id="my-popover">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam blanditiis cum quod, velit, architecto consequatur commodi sint odit non deleniti qui? Accusamus expedita, exercitationem laborum architecto facere quasi rem! Voluptate!</div>
-  </div>
+  </section>
 
-  <div>
+  <section>
     <h3 class="forge-typography--heading2">Dialog</h3>
     <forge-button variant="raised" id="show-dialog-btn">Show dialog</forge-button>
     <dialog id="test-dialog">
@@ -54,7 +78,7 @@
         <forge-button type="submit" variant="raised">Close</forge-button>
       </form>
     </dialog>
-  </div>
+  </section>
 </div>
 
 <script type="module" src="button.ts"></script>
diff --git a/src/dev/pages/button/button.ts b/src/dev/pages/button/button.ts
@@ -6,6 +6,7 @@ import { IconRegistry } from '@tylertech/forge/icon';
 import { tylIconFavorite, tylIconOpenInNew } from '@tylertech/tyler-icons/standard';
 import { tylIconForgeLogo } from '@tylertech/tyler-icons/custom';
 import '@tylertech/forge/button';
+import '@tylertech/forge/label';
 import './button.scss';
 
 IconRegistry.define([tylIconForgeLogo, tylIconFavorite, tylIconOpenInNew]);

diff --git a/src/dev/pages/card/card.ejs b/src/dev/pages/card/card.ejs
@@ -3,10 +3,8 @@
     <h3 class="forge-typography--heading4" slot="start">
       This is the card title
     </h3>
-    <forge-icon-button slot="end">
-      <button type="button" aria-label="View options">
-        <forge-icon name="more_vert" external></forge-icon>
-      </button>
+    <forge-icon-button slot="end" aria-label="View options">
+      <forge-icon name="more_vert" external></forge-icon>
     </forge-icon-button>
   </forge-toolbar>
 

diff --git a/src/dev/pages/chips/chips.ejs b/src/dev/pages/chips/chips.ejs
@@ -107,10 +107,8 @@
     <h3 class="flex forge-typography--heading2">
       Input chips
       <span>
-        <forge-icon-button>
-          <button type="button" id="refresh-button">
-            <forge-icon name="refresh"></forge-icon>
-          </button>
+        <forge-icon-button id="refresh-button">
+          <forge-icon name="refresh"></forge-icon>
         </forge-icon-button>
       </span>
     </h3>

diff --git a/src/dev/pages/dialog/dialog-template-basic.ejs b/src/dev/pages/dialog/dialog-template-basic.ejs
@@ -2,10 +2,8 @@
   <forge-scaffold>
     <forge-toolbar slot="header" class="header-toolbar" no-border forge-dialog-move-target>
       <h1 slot="start" class="forge-typography--heading4">Dialog title</h1>
-      <forge-icon-button slot="end">
-        <button type="button" id="close-button">
-          <forge-icon name="close"></forge-icon>
-        </button>
+      <forge-icon-button slot="end" id="close-button">
+        <forge-icon name="close"></forge-icon>
       </forge-icon-button>
     </forge-toolbar>
     <div slot="body" class="dialog-body">