[@next] refactor button component (#420)

tyler-technologies-oss · Nov 8, 2023 · 328bf26 · 328bf26
1 parent b52af7a
commit 328bf26
Show file tree

Hide file tree

Showing 219 changed files with 4,243 additions and 3,451 deletions.
diff --git a/README.md b/README.md
@@ -100,9 +100,6 @@ The `forge.css` file contains other stylesheets that you may or may not need. We
 /// Include the theme and typography styles
 @use '@tylertech/forge/dist/theme/forge-theme.css';
 @use '@tylertech/forge/dist/typography/forge-typography.css';
-
-/// Include styles for <forge-button> elements
-@use '@tylertech/forge/dist/button/forge-button.css';
 ```
 
 Additionally, apply the `forge-typography` class to a root element (typically the `<body>`):
@@ -143,9 +140,7 @@ Now the text-field and button components can be used anywhere in the DOM:
   <input type="text" id="input" />
 </forge-text-field>
 
-<forge-button type="raised">
-  <button type="button">Button</button>
-</forge-button>
+<forge-button variant="raised">Button</forge-button>
 ```
 
 Don't forget to also add the `forge-typography` class to the `<body>` element to ensure your application inherits the default typography styles:

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/dev/index.ejs b/src/dev/index.ejs
@@ -3,7 +3,7 @@
   <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">
+    <button type="button" id="clear-button" aria-label="Clear filter">
       <forge-icon name="close"></forge-icon>
     </button>
   </forge-icon-button>

diff --git a/src/dev/pages/banner/banner.ejs b/src/dev/pages/banner/banner.ejs
@@ -1,9 +1,7 @@
 <forge-banner id="banner">
   <forge-icon id="leading-icon" slot="icon" name="add_alert"></forge-icon>
   <div id="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
-  <forge-button id="action-button" type="outlined" slot="button">
-    <button type="button">Learn more</button>
-  </forge-button>
+  <forge-button id="action-button" variant="outlined" slot="button">Learn more</forge-button>
 </forge-banner>
 
 <script type="module" src="banner.ts"></script>
diff --git a/src/dev/pages/banner/banner.ts b/src/dev/pages/banner/banner.ts
@@ -2,7 +2,6 @@ import '$src/shared';
 import { IconRegistry } from '@tylertech/forge/icon';
 import '@tylertech/forge/banner';
 import '@tylertech/forge/button';
-import '@tylertech/forge/button/forge-button.scss';
 import { tylIconAddAlert } from '@tylertech/tyler-icons/standard';
 import type { IBannerComponent, ISelectComponent, ISwitchComponent } from '@tylertech/forge';
 

diff --git a/src/dev/pages/bottom-sheet/bottom-sheet.ejs b/src/dev/pages/bottom-sheet/bottom-sheet.ejs
@@ -1,11 +1,7 @@
 <div class="vert demo">
-  <forge-button type="raised" id="show-standard-bottom-sheet-button">
-    <button type="button">Show standard bottom sheet</button>
-  </forge-button>
+  <forge-button variant="raised" id="show-standard-bottom-sheet-button">Show standard bottom sheet</forge-button>
 
-  <forge-button type="raised" id="show-standard-scrollable-sheet-button">
-    <button type="button">Show scrollable bottom sheet</button>
-  </forge-button>
+  <forge-button variant="raised" id="show-standard-scrollable-sheet-button">Show scrollable bottom sheet</forge-button>
 </div>
 
 <forge-drawer id="side-sheet" direction="right" open="false"></forge-drawer>
@@ -14,9 +10,7 @@
 <template id="forge-standard-bottom-sheet-template">
   <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px;">
     Standard bottom sheet
-    <forge-button type="outlined">
-      <button type="button" id="close-button">Close</button>
-    </forge-button>
+    <forge-button variant="outlined" id="close-button">Close</forge-button>
   </div>
 </template>
 
@@ -38,12 +32,8 @@
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia deleniti id sint recusandae minus ullam aliquam voluptatibus sunt consequuntur, ab laborum nesciunt enim dolorem! Quas corrupti itaque est accusantium rerum.</p>
   </section>
   <footer class="forge-dialog__footer">
-    <forge-button type="outlined">
-      <button type="button" id="cancel-button">Disagree</button>
-    </forge-button>
-    <forge-button type="raised">
-      <button type="button" id="accept-button" forge-bottom-sheet-focus>Agree</button>
-    </forge-button>
+    <forge-button variant="outlined" id="cancel-button">Disagree</forge-button>
+    <forge-button variant="raised" id="accept-button" forge-bottom-sheet-focus>Agree</forge-button>
   </footer>
 </template>
 

diff --git a/src/dev/pages/bottom-sheet/bottom-sheet.scss b/src/dev/pages/bottom-sheet/bottom-sheet.scss
@@ -1,9 +1,5 @@
 .demo {
   forge-button {
     width: 256px;
-
-    button {
-      width: 256px;
-    }
   }
 }
diff --git a/src/dev/pages/bottom-sheet/bottom-sheet.ts b/src/dev/pages/bottom-sheet/bottom-sheet.ts
@@ -2,7 +2,6 @@ import '$src/shared';
 import '@tylertech/forge/bottom-sheet';
 import { IBottomSheetComponent } from '@tylertech/forge/bottom-sheet';
 import '@tylertech/forge/button';
-import '@tylertech/forge/button/forge-button.scss';
 import '@tylertech/forge/dialog/forge-dialog-utils.scss';
 import './bottom-sheet.scss';
 

diff --git a/src/dev/pages/busy-indicator/busy-indicator.ejs b/src/dev/pages/busy-indicator/busy-indicator.ejs
@@ -1,7 +1,5 @@
 <div class="busy-indicator-host">
-  <forge-button type="raised">
-    <button id="show-busy-indicator-button">Show busy indicator</button>
-  </forge-button>
+  <forge-button variant="raised" id="show-busy-indicator-button">Show busy indicator</forge-button>
 </div>
 
 <script type="module" src="busy-indicator.ts"></script>
diff --git a/src/dev/pages/busy-indicator/busy-indicator.ts b/src/dev/pages/busy-indicator/busy-indicator.ts
@@ -3,7 +3,6 @@ import type { IBusyIndicatorComponent, ISelectComponent, ISwitchComponent } from
 import '@tylertech/forge/busy-indicator';
 import '@tylertech/forge/busy-indicator/forge-busy-indicator.scss';
 import '@tylertech/forge/button';
-import '@tylertech/forge/button/forge-button.scss';
 import './busy-indicator.scss';
 
 const titleInput = document.querySelector('#title-input') as HTMLInputElement;

diff --git a/src/dev/pages/button/button.ejs b/src/dev/pages/button/button.ejs
@@ -1,34 +1,60 @@
-<div class="vert">
-  <forge-button>
-    <button type="button">Default button</button>
+<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 type="raised">
-    <button type="button">Raised button</button>
+
+  <forge-button variant="outlined">
+    <forge-icon slot="start" name="favorite"></forge-icon>
+    w/Leading icon
   </forge-button>
-  <forge-button type="unelevated">
-    <button type="button">Unelevated button</button>
-  </forge-button>
-  <forge-button type="outlined">
-    <button type="button">Outlined button</button>
-  </forge-button>
-  <forge-button type="outlined">
-    <button type="button">
-      <forge-icon name="favorite"></forge-icon>
-      <span>w/Leading Icon</span>
-    </button>
-  </forge-button>
-  <forge-button type="outlined">
-    <button type="button">
-      <span>w/Trailing icon</span>
-      <forge-icon name="favorite"></forge-icon>
-    </button>
+
+  <forge-button variant="outlined">
+    w/Trailing icon
+    <forge-icon slot="end" name="favorite"></forge-icon>
   </forge-button>
-  <forge-button type="outlined">
-    <a href="javascript: alert('Anchor link button works!');">
-      <span>w/anchor tag</span>
-      <forge-icon name="open_in_new"></forge-icon>
-    </a>
+
+  <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>
+    <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>
+        <input type="text" placeholder="Text input" aria-label="Test form input" autocomplete="off" />
+      </forge-text-field>
+      <div>
+        <forge-button id="submit-btn" variant="outlined" type="submit" name="submit-btn" formaction="javascript: alert('<forge-button> submit override action');">Submit</forge-button>
+        <forge-button id="reset-btn" variant="outlined" type="reset">Reset</forge-button>
+      </div>
+    </form>
+  </div>
+
+  <div>
+    <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>
+
+  <div>
+    <h3 class="forge-typography--heading2">Dialog</h3>
+    <forge-button variant="raised" id="show-dialog-btn">Show dialog</forge-button>
+    <dialog id="test-dialog">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus architecto sunt esse voluptatum possimus magnam omnis ipsum commodi neque maxime ab facere reiciendis, ex distinctio soluta qui maiores et aliquam.</p>
+      <form method="dialog">
+        <forge-button type="submit" variant="raised">Close</forge-button>
+      </form>
+    </dialog>
+  </div>
 </div>
 
 <script type="module" src="button.ts"></script>
diff --git a/src/dev/pages/button/button.html b/src/dev/pages/button/button.html
@@ -4,8 +4,28 @@
     title: 'Button',
     includePath: './pages/button/button.ejs',
     options: [
-      { type: 'switch', label: 'Disabled', id: 'disabled-switch' },
-      { type: 'switch', label: 'Dense', id: 'dense-switch' }
+      { type: 'switch', label: 'Disabled', id: 'opt-disabled' },
+      { type: 'switch', label: 'Dense', id: 'opt-dense' },
+      { type: 'switch', label: 'Pill', id: 'opt-pill' },
+      { type: 'switch', label: 'Anchor', id: 'opt-anchor' },
+      { type: 'switch', label: 'Popover icon', id: 'opt-popover-icon' },
+      { type: 'switch', label: 'Form prevent default', id: 'opt-form-prevent' },
+      { type: 'switch', label: 'Anchor prevent default', id: 'opt-href-prevent' },
+      {
+        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' }
+        ]
+      }
     ]
   }
 })

diff --git a/src/dev/pages/button/button.scss b/src/dev/pages/button/button.scss
@@ -1,5 +1,84 @@
 @use '../../src/shared';
+@use '../../../lib/button';
+@use '../../../lib/focus-indicator';
+@use '../../../lib/core/styles/elevation';
 
-button, a {
+.button-demo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+forge-button {
   width: 256px;
 }
+
+form:has(forge-button) forge-button {
+  width: auto;
+}
+
+#my-popover {
+  max-inline-size: 500px;
+}
+
+.test-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+h3 {
+  margin-block: 16px;
+}
+
+.custom-button {
+  --_custom-button-background: var(--forge-theme-primary);
+
+  @include button.provide-theme((
+    height: 56px,
+    dense-height: 40px,
+    focus-indicator-offset: 4px,
+    shadow: elevation.value(2),
+    hover-shadow: elevation.value(4),
+    active-shadow: elevation.value(8),
+    color: var(--forge-theme-on-primary),
+    background: var(--_custom-button-background),
+    disabled-background: linear-gradient(to right, #aaa 0%, #ccc  51%, #aaa  100%),
+    disabled-shadow: none
+  ));
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(100% - 4px);
+    height: 50%;
+    pointer-events: none;
+    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+  }
+
+  &[popover-icon] {
+    @include button.provide-theme(( justify: space-between ));
+  }
+
+  &[theme=secondary] {
+    --_custom-button-background: var(--forge-theme-secondary);
+  }
+  &[theme=tertiary] {
+    --_custom-button-background: var(--forge-theme-primary);
+  }
+  &[theme=success] {
+    --_custom-button-background: var(--forge-theme-success);
+  }
+  &[theme=error] {
+    --_custom-button-background: var(--forge-theme-error);
+  }
+  &[theme=warning] {
+    --_custom-button-background: var(--forge-theme-warning);
+  }
+  &[theme=info] {
+    --_custom-button-background: var(--forge-theme-info);
+  }
+}