@jack-henry/jh-elements 2.0.0-beta.12 → 2.0.0-beta.14

package/components/table/table.js

@@ -174,8 +174,8 @@ export class JhTable extends LitElement {
       :host([scrollable]) .table-wrapper {
         position: relative;
         overflow-x: hidden;
-        flex: 1 1 auto;
-        /* display grid makes sticky work and shadows go till bottom. */
+        flex: 1 1 auto;        
+        /* display grid makes sticky work and shows horizontal scrollbar on top. */
         display: grid;
       }
 
@@ -187,7 +187,7 @@ export class JhTable extends LitElement {
         /* removes bouncy scroll behavior in Safari and FF */
         /* overscroll-behavior: none; */
       }
-      :host([scrollable]) .scrollable {
+      :host([scrollable]) .table {
         width: auto;
         position: relative;
       }
@@ -199,7 +199,7 @@ export class JhTable extends LitElement {
         outline-width: var(--jh-border-focus-width);
         outline-style: var(--jh-border-focus-style);
       }
-      .table-wrapper:focus-visible {
+      .table-container:focus-visible, :host([scrollable]) .table-wrapper:focus-visible {
         outline: none;
       }
     `;
@@ -294,29 +294,28 @@ export class JhTable extends LitElement {
     this.#id = id++;
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   async firstUpdated() {
     if (!this.scrollable) return;
 
-    let scrollTable = this.shadowRoot.querySelector('.table');
-    await scrollTable.updateComplete;
-    let originalTableWidth = scrollTable.getBoundingClientRect().width;
-
     this.observer = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         let table = entry.target.shadowRoot.querySelector('.table');
         let tableContainer =
           entry.target.shadowRoot.querySelector('.table-container');
+        if (!table || !tableContainer) return;
         if (table.scrollWidth > tableContainer.clientWidth) {
-          table.classList.add('scrollable');
-        } else {
-          if (table.scrollWidth >= originalTableWidth) {
-            table.classList.remove('scrollable');
+          tableContainer.setAttribute('tabindex', '0');
+         }
+        else {
             tableContainer.removeAttribute('tabindex');
-          } else {
-            table.classList.add('scrollable');
-            tableContainer.setAttribute('tabindex', '0');
           }
-        }
       });
     });
 
@@ -354,7 +353,7 @@ export class JhTable extends LitElement {
       <slot name="jh-table-toolbar" @slotchange=${this.#handleSlot}></slot>
       <div class="table-wrapper">
         <div class="table-container" tabindex="${ifDefined(this.scrollable ? '0' : null)}">
-          <div class="table ${this.scrollable ? 'scrollable' : ''}" role="table" 
+          <div class="table" role="table" 
           aria-labelledby="table-caption-${this.#id}" aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}>
             <slot name="jh-table-header" class="header" role="rowgroup"></slot>
             <slot class="body" role="rowgroup"></slot>

package/components/table-data-cell/table-data-cell.js

@@ -62,7 +62,8 @@ export class JhTableDataCell extends LitElement {
         font-size: var(--footer-font-size, var(--jh-font-body-regular-1-font-size));      
         font-family: var(--footer-font-family, var(--jh-font-body-regular-1-font-family));
         display: table-cell;
-        width: 100%;
+        width: auto;
+        box-sizing: border-box;
       }
       :host([horizontal-align="left"]) {
         text-align: left;

package/components/table-header-cell/table-header-cell.js

@@ -99,7 +99,7 @@ export class JhTableHeaderCell extends LitElement {
         vertical-align: var(--vertical-align, top);
         display: table-cell;
         box-sizing: border-box;
-        width: 100%;
+        width: auto;
       }
       :host([sortable]:hover) {
         border-bottom-color: var(--jh-table-header-cell-color-border-bottom-hover, var(--jh-border-decorative-color));

package/components/tag/tag.js

@@ -376,19 +376,22 @@ export class JhTag extends LitElement {
     if (this.dismissible) {
       dismissBtn = html`
       <jh-button
-        size="medium"
+        size="x-small"
         appearance="secondary"
         accessible-label=${this.dismissButtonAccessibleLabel}
         @click=${this.#handleDismissal}>
-        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon">
-          <jh-icon-xmark slot="jh-button-icon"></jh-icon-xmark>
+        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon-left">
+          <jh-icon-xmark slot="jh-button-icon-left"></jh-icon-xmark>
         </slot>
       </jh-button>
       `;
     }
 
     if (this.dismissible && this.tooltipLabel) {
-      dismissBtn = html`<jh-tooltip label=${this.tooltipLabel}>${dismissBtn}</jh-tooltip>`;
+      dismissBtn = html`<jh-tooltip>
+        ${dismissBtn}
+        <div slot="jh-tooltip-content">${this.tooltipLabel}</div>
+      </jh-tooltip>`;
     }
     return dismissBtn;
   }

package/components/toast/toast.js

@@ -74,8 +74,6 @@ export class JhToast extends LitElement {
 
   static get properties() {
     return {
-      /** Sets the background color of the toast to convey message connotation. */
-      appearance: { type: String, reflect: true },
       /** Adds an aria-label to the dismiss button to assist screen readers. */
       dismissButtonAccessibleLabel: {
         type: String,
@@ -94,8 +92,6 @@ export class JhToast extends LitElement {
     super();
     /** @type {number} */
     this.timeout = 5000;
-    /** @type {'positive'|'neutral'|'negative'} */
-    this.appearance = 'neutral';
     /** @type {string} */
     this.dismissButtonAccessibleLabel = null;
     /** @type {boolean} */
@@ -151,7 +147,7 @@ export class JhToast extends LitElement {
   render() {
     return html`
       <jh-notification
-        appearance=${this.appearance}
+        appearance="neutral"
         dismiss-button-accessible-label=${this.dismissButtonAccessibleLabel}
         ?hide-dismiss-button=${this.hideDismissButton}
         ?stacked=${this.stacked}>