Tab icon updates (#1750)

* chore: update tabs * chore: persist selection of tab in sandbox. fix more margin * chore: update alignment and truncation
momentum-design · Aug 29, 2024 · 2e26803 · 2e26803
1 parent 388818e
commit 2e26803
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 130 deletions.
diff --git a/web-components/src/[sandbox]/examples/icon.ts b/web-components/src/[sandbox]/examples/icon.ts
@@ -24,7 +24,7 @@ export const iconTemplate = html`
   <h3>Using new icon enabled (enabled):</h3>
   <md-icon
     name="search_16"
-    iconSet="momentumDesign"
+    iconSet="preferMomentumDesign"
     class="testClass"
     size="50"
     color="var(--avatar-presence-active)"

diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
@@ -546,7 +546,7 @@ export const tabsTemplate = html`
     <div>
       <md-tabs selected="2" draggable>
         <md-tab disabled slot="tab" name="History" closable="auto" label="History">
-          <md-icon name="recents_16"></md-icon>
+          <md-icon name="recents-bold" size="16" iconSet="momentumDesign"></md-icon>
           <span>Contact History</span>
         </md-tab>
         <md-tab-panel slot="panel">
@@ -560,7 +560,7 @@ export const tabsTemplate = html`
           <span>Content for "WxM"</span>
         </md-tab-panel>
         <md-tab slot="tab" name="Answer" closable="auto">
-          <md-icon name="alarm_16"></md-icon>
+          <md-icon name="alarm_16" iconSet="preferMomentumDesign"></md-icon>
           <md-tooltip placement="top" message="Cisco Answer for very very long label">
             <span class="text-ellipsis">Cisco Answer for very very long label</span>
           </md-tooltip>
@@ -677,7 +677,7 @@ export const tabsTemplate = html`
           <span>Content for "Contact History"</span>
         </md-tab-panel>
         <md-tab slot="tab" closable="auto" name="WxM" label="WxM">
-          <span style="height: 16px; width: 16px"><img src="${svgWxm}"/></span>
+          <span style="height: 16px; width: 16px"><img src="${svgWxm}" /></span>
           <span>Cisco WxM</span>
         </md-tab>
         <md-tab-panel slot="panel">
@@ -709,13 +709,13 @@ export const tabsTemplate = html`
           <span>Content for "Contact History"</span>
         </md-tab-panel>
         <md-tab slot="tab" name="History">
-          <span style="height: 16px; width: 16px; height: 100%"><img src="${svgWxm}"/></span>
+          <span style="height: 16px; width: 16px; height: 100%"><img src="${svgWxm}" /></span>
         </md-tab>
         <md-tab-panel slot="panel">
           <span>Content for "WxM"</span>
         </md-tab-panel>
         <md-tab slot="tab" name="History">
-          <md-icon name="browser_16"></md-icon>
+          <md-icon name="browser-bold" size="16" iconSet="momentumDesign"></md-icon>
         </md-tab>
         <md-tab-panel slot="panel">
           <span>Content for "Third Tab"</span>
@@ -794,7 +794,7 @@ export const tabsTemplate = html`
         <span>Content for "Contact History"</span>
       </md-tab-panel>
       <md-tab slot="tab" name="History" newMomentum type="Pill">
-        <span style="height: 16px; width: 16px"><img src="${svgWxm}"/></span>
+        <span style="height: 16px; width: 16px"><img src="${svgWxm}" /></span>
         <span>Cisco WxM</span>
       </md-tab>
       <md-tab-panel slot="panel">

diff --git a/web-components/src/[sandbox]/sandbox.ts b/web-components/src/[sandbox]/sandbox.ts
@@ -177,7 +177,7 @@ export class Sandbox extends LitElement {
       <md-theme class="theme-toggle" id="app-theme" ?darkTheme=${this.darkTheme} theme=${this.theme}>
         <div class="header-controls">${this.themeToggle()} ${this.containerColorOptionTemplate()}</div>
 
-        <md-tabs direction="vertical" class="explorer">
+        <md-tabs direction="vertical" class="explorer" persist-selection tabs-id="explorer">
           <md-tab slot="tab" name="Accordion">
             <span>md-accordion</span>
           </md-tab>

diff --git a/web-components/src/components/icon/Icon.ts b/web-components/src/components/icon/Icon.ts
@@ -167,7 +167,7 @@ export namespace Icon {
      * ```html
      * <md-icon iconSet="momentumUI" name="search_16"></md-icon> <!-- Uses the legacy font-based icon set -->
      * <md-icon iconSet="momentumDesign" name="search-bold" size="16"></md-icon> <!-- Uses the new SVG-based icon set -->
-     * <md-icon iconSet="preferMomentumDesign name="search+16""></md-icon> <!-- Attempts to map icons to the new SVG-based set -->
+     * <md-icon iconSet="preferMomentumDesign name="search_16""></md-icon> <!-- Attempts to map icons to the new SVG-based set -->
      * ```
      */
     @property({ type: String }) iconSet: IconSet = "momentumUI";

diff --git a/web-components/src/components/input/Input.ts b/web-components/src/components/input/Input.ts
@@ -406,9 +406,7 @@ export namespace Input {
               .value=${this.value}
               aria-describedby=${this.ariaDescribedBy}
               aria-controls=${this.ariaControls}
-              aria-expanded=${ifDefined(
-                this.ariaExpandedValue !== undefined ? this.ariaExpandedValue.toString() : undefined
-              )}
+              aria-expanded=${ifDefined(this.ariaExpandedValue ?? undefined)}
               aria-label=${this.ariaLabel}
               aria-invalid=${this.ariaInvalid as ARIA_INVALID}
               aria-errormessage=${`${this.htmlId}-message`}

diff --git a/web-components/src/components/tabs/Tab.ts b/web-components/src/components/tabs/Tab.ts
@@ -167,6 +167,20 @@ export namespace Tab {
       }
     }
 
+    renderCrossButton() {
+      return html`
+        <div
+          ?disabled=${this.disabled}
+          tabindex="-1"
+          class="tab-action-button"
+          @click=${(e: MouseEvent) => this.handleCrossClick(e)}
+          @keydown=${(e: KeyboardEvent) => this.handleCrossKeydown(e)}
+        >
+          <md-icon tabindex="0" name="cancel-bold" size="14" iconSet="momentumDesign"></md-icon>
+        </div>
+      `;
+    }
+
     render() {
       return html`
         <button
@@ -187,19 +201,7 @@ export namespace Tab {
           @click=${(e: MouseEvent) => this.handleClick(e)}
         >
           <slot class="tab-slot"></slot>
-          ${this.isCrossVisible && this.closable
-            ? html`
-                <div
-                  ?disabled=${this.disabled}
-                  tabindex="-1"
-                  class="tab-action-button"
-                  @click=${(e: MouseEvent) => this.handleCrossClick(e)}
-                  @keydown=${(e: KeyboardEvent) => this.handleCrossKeydown(e)}
-                >
-                  <md-icon tabindex="0" name="cancel_14"></md-icon>
-                </div>
-              `
-            : ""}
+          ${this.isCrossVisible && this.closable ? this.renderCrossButton() : ""}
         </button>
       `;
     }

diff --git a/web-components/src/components/tabs/Tabs.ts b/web-components/src/components/tabs/Tabs.ts
@@ -135,7 +135,7 @@ export namespace Tabs {
       }
     }
 
-    private getAriaConrolId(tab: Tab.ELEMENT) {
+    private getAriaControlId(tab: Tab.ELEMENT) {
       if (tab.id?.startsWith(MORE_MENU_TAB_COPY_ID_PREFIX)) {
         return `${MORE_MENU_TAB_COPY_ID_PREFIX}${tab.id}`;
       } else {
@@ -706,7 +706,7 @@ export namespace Tabs {
       this.moveFocusToTab(visibleTabs[newIndex]);
     }
 
-    moveFocusToTab(tabElement: any) {
+    moveFocusToTab(tabElement: Element | undefined) {
       setTimeout(() => (tabElement as HTMLElement)?.focus(), 0);
     }
 
@@ -1112,7 +1112,7 @@ export namespace Tabs {
                   name="${tab.name}"
                   id="${this.getCopyTabId(tab)}"
                   aria-label=${tab.ariaLabel}
-                  aria-controls="${this.getAriaConrolId(tab)}"
+                  aria-controls="${this.getAriaControlId(tab)}"
                   .isCrossVisible=${true}
                   tabIndex="${this.getTabIndex(tab)}"
                   .newMomentum=${this.newMomentum}
@@ -1150,7 +1150,12 @@ export namespace Tabs {
               type=${this.type}
             >
               <span class="md-menu-overlay__overflow-label">${this.overflowLabel}</span>
-              <md-icon name="${!this.isMoreTabMenuOpen ? "arrow-down_16" : "arrow-up_16"}" class="more-icon"></md-icon>
+              <md-icon
+                name="${!this.isMoreTabMenuOpen ? "arrow-down-bold" : "arrow-up-bold"}"
+                iconSet="momentumDesign"
+                size="16"
+                class="more-icon"
+              ></md-icon>
             </md-tab>
             <div
               id="tabs-more-list"
@@ -1177,7 +1182,7 @@ export namespace Tabs {
                     name="${tab.name}"
                     id="${this.getCopyTabId(tab)}"
                     aria-label=${tab.ariaLabel}
-                    aria-controls="${this.getAriaConrolId(tab)}"
+                    aria-controls="${this.getAriaControlId(tab)}"
                     @click="${() => this.handleOverlayClose()}"
                     tabIndex="${this.tabHiddenIdPositiveTabIndex === tab.id ? 0 : -1}"
                     ariaRole="menuitem"

diff --git a/web-components/src/components/tabs/scss/mixins.scss b/web-components/src/components/tabs/scss/mixins.scss
@@ -1,5 +1,6 @@
 @mixin tab-button-span() {
-  display: inline-block;
-  line-height: $tab-span-height;
-  vertical-align: top;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
diff --git a/web-components/src/components/tabs/scss/tab.scss b/web-components/src/components/tabs/scss/tab.scss
@@ -100,7 +100,13 @@
 }
 
 .tab-slot {
-  display: block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  max-width: 100%;
+  height: 100%;  
 }
 
 slot {
@@ -136,6 +142,7 @@ slot {
 .closable {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 md-icon {
@@ -160,6 +167,7 @@ button {
   text-decoration: none;
   white-space: nowrap;
   width: 100%;
+  vertical-align: middle;
 
   &:disabled {
     background: $tab-none-bg;
@@ -185,8 +193,7 @@ button {
   }
 
   span {
-    @include tab-button-span;
-    padding: $tab-slot-padding;
+    @include tab-button-span;    
   }
 
   &:hover {
@@ -205,20 +212,22 @@ button {
 
 button.newMomentum {
   cursor: pointer;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
 
   /* Sizing and spacing */
   min-height: 1.75rem;
-  padding: 0 .625rem 0 .625rem;
+  padding: 0 0.625rem 0 0.625rem;
   justify-content: center;
+}
 
-  .tab-slot {
-    justify-content: center !important;
-    align-items: center !important;
-  }
-
-  .tab-action-button {
-    height:90%;
+:host([vertical])  {
+  button {
+    .tab-slot {
+      justify-content: flex-start;
+    }
   }
 }
 

diff --git a/web-components/src/components/tabs/scss/tabs.scss b/web-components/src/components/tabs/scss/tabs.scss
@@ -37,12 +37,13 @@
   text-align: center;
   width: 100%;
 
-  .md-menu-overlay__more {
+  .md-menu-overlay__more {    
     height: 100%;
     margin-left: auto;
     width: auto;
     max-width: 128.5px;
     .md-menu-overlay__overflow-label{
+      display: inline-block;
       max-width: 70px;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -93,7 +94,7 @@
       &::part(tab) {
         text-align: left;
         padding-left: 16px;
-        padding-right: 16px;
+        padding-right: 16px; 
       }
     }
   }
@@ -119,27 +120,22 @@
   padding: $tab-base-indent;
 }
 
-md-tab {
-  md-icon,
-  img {
-    margin-right: 0.5rem;
-
-    &.more-icon{
-      margin-right: 0;
-      margin-left: 0.5rem;
-    }
-  }
-}
-
 md-menu-overlay {
   md-tab {
-    md-tooltip {
+    md-tooltip {      
       width: 170px;
-      position: absolute;
+      position: relative;
+      display: inline-flex;
+      min-height: 28px;      
+      align-items: center;
+      overflow: hidden;      
 
       .text-ellipsis {
-        width: 170px;
-        position: absolute;
+        display: inline-block;
+        vertical-align: middle;
+        width: 100%;
+        max-width: 100%;
+        position: relative;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;