chore: add primary style to tabs and rounded style (#1810)

* chore: add primary style to tabs and rounded style * chore: update dragger * chore: update version * chore: update momentum design versions * chore: update icons to 2.1 v 3 will remove used icons --------- Co-authored-by: James Nestor <jnestor@cisco.com>
momentum-design · Nov 1, 2024 · 4b58188 · 4b58188
1 parent e8e9782
commit 4b58188
Show file tree

Hide file tree

Showing 18 changed files with 235 additions and 53 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.14",
+  "version": "2.14.15",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -58,9 +58,9 @@
     "@interactjs/interact": "1.10.3",
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
-    "@momentum-design/brand-visuals": "0.0.27",
-    "@momentum-design/icons": "0.1.0",
-    "@momentum-design/tokens": "^0.1.2",
+    "@momentum-design/brand-visuals": "0.1.1",
+    "@momentum-design/icons": "0.2.1",
+    "@momentum-design/tokens": "0.2.2",
     "@popperjs/core": "^2.11.8",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",

diff --git a/web-components/src/[sandbox]/examples/grabber.ts b/web-components/src/[sandbox]/examples/grabber.ts
@@ -79,7 +79,17 @@ export class GrabberTemplateSandbox extends LitElement {
         .toggle-container {
           display: flex;
           align-items: center;
-          height: 800px;
+          height: 500px;
+        }
+
+        .dragger-container {
+          display: flex;
+          align-items: center;
+          width: 400px;
+          max-height: 200px;
+          min-height: 0px;
+          height: 100px;
+          flex-direction: column;
         }
 
         .toggle-div {
@@ -95,11 +105,22 @@ export class GrabberTemplateSandbox extends LitElement {
           width: 0px;
         }
 
+        .dragger-div {
+          max-height: 200px;
+          min-height: 0px;
+        }
+
         .divider {
           width: 1px;
           height: 100%;
           background: var(--md-nav-divider-primary);
         }
+
+        .h-divider {
+          height: 1px;
+          width: 100%;
+          background: var(--md-nav-h-divider-primary);
+        }
       </style>
       <div>
         <h3 class="sandbox-header" style="margin: .5rem 1rem">Leading</h3>
@@ -121,6 +142,11 @@ export class GrabberTemplateSandbox extends LitElement {
         <md-grabber id="grabberBottom" alignment="bottom"></md-grabber>
         ${this.grabberDetailTemplate(this.grabberBottom)}
       </div>
+      <div class="custom-grabber">
+        <h3 class="sandbox-header" style="margin: .5rem 1rem">Bottom disable-click-toggle dragger</h3>
+        <md-grabber id="grabberBottom" alignment="bottom" disable-click-toggle dragger></md-grabber>
+        ${this.grabberDetailTemplate(this.grabberBottom)}
+      </div>
       <div>
         <h3 class="sandbox-header" style="margin: .5rem 1rem">Toggle Width Example</h3>
         <div class="toggle-container">
@@ -133,6 +159,14 @@ export class GrabberTemplateSandbox extends LitElement {
           ></md-grabber>
         </div>
       </div>
+      <div>
+        <h3 class="sandbox-header" style="margin: .5rem 1rem">Drag height Example</h3>
+        <div class="dragger-container">
+          <md-grabber id="grabberDrag" alignment="bottom" disable-click-toggle dragger></md-grabber>
+          <div class="dragger-div" id="draggerDiv"></div>
+          <div class="h-divider"></div>
+        </div>
+      </div>
     `;
   }
 

diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
@@ -559,27 +559,27 @@ export class TabsJustifiedTemplateSandbox extends LitElement {
 
   get tabsJustifiedHugTemplate(): TemplateResult {
     return html`
-      <h3>md-tabs justified hug primaryPill</h3>
-      <md-tabs draggable justified hug-tabs type="primaryPill" newMomentum>
-        <md-tab slot="tab" name="History" type="primaryPill" newMomentum>
+      <h3>md-tabs justified hug rounded primary</h3>
+      <md-tabs draggable justified hug-tabs type="rounded" newMomentum variant="primary">
+        <md-tab slot="tab" name="History" type="rounded" newMomentum variant="primary">
           <span>All</span>
         </md-tab>
         <md-tab-panel slot="panel">
           <span>Content for "Contact History"</span>
         </md-tab-panel>
-        <md-tab slot="tab" name="History" type="primaryPill" newMomentum>
+        <md-tab slot="tab" name="History" type="rounded" newMomentum variant="primary">
           <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" type="primaryPill" newMomentum>
+        <md-tab slot="tab" name="History" type="rounded" newMomentum variant="primary">
           <md-icon name="browser-bold" size="16" iconSet="momentumDesign"></md-icon>
         </md-tab>
         <md-tab-panel slot="panel">
           <span>Content for "Third Tab"</span>
         </md-tab-panel>
-        <md-tab slot="tab" name="History" type="primaryPill" newMomentum>
+        <md-tab slot="tab" name="History" type="rounded" newMomentum variant="primary">
           <md-icon name="alert_16"></md-icon>
         </md-tab>
         <md-tab-panel slot="panel">

diff --git a/web-components/src/components/grabber/Grabber.test.ts b/web-components/src/components/grabber/Grabber.test.ts
@@ -168,4 +168,27 @@ describe("Grabber component", () => {
 
     mockDispatchEvent.mockRestore();
   });
+
+  describe("disableClickToggle property", () => {
+    test("should have disableClickToggle default to false", async () => {
+      const element = await fixture<Grabber.ELEMENT>(html`<md-grabber></md-grabber>`);
+      expect(element.disableClickToggle).toBe(false);
+    });
+
+    test("should reflect the disable-click-toggle attribute", async () => {
+      const element = await fixture<Grabber.ELEMENT>(html`<md-grabber disable-click-toggle></md-grabber>`);
+      expect(element.disableClickToggle).toBe(true);
+    });
+
+    test("should toggle disableClickToggle property when attribute changes", async () => {
+      const element = await fixture<Grabber.ELEMENT>(html`<md-grabber></md-grabber>`);
+      element.setAttribute("disable-click-toggle", "");
+      await element.updateComplete;
+      expect(element.disableClickToggle).toBe(true);
+
+      element.removeAttribute("disable-click-toggle");
+      await element.updateComplete;
+      expect(element.disableClickToggle).toBe(false);
+    });
+  });
 });
diff --git a/web-components/src/components/grabber/Grabber.ts b/web-components/src/components/grabber/Grabber.ts
@@ -7,9 +7,9 @@
  */
 
 import "@/components/icon/Icon";
-import { Key } from "@/constants";
 import { FocusMixin } from "@/mixins";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { isActionKey } from "@/utils/keyboard";
 import reset from "@/wc_scss/reset.scss";
 import { html, LitElement, property } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -22,44 +22,67 @@ export namespace Grabber {
     /**
      * aria label of unchecked grabber
      */
-    @property({ type: String }) label = "Expand";
+    @property({ type: String })
+    label = "Expand";
 
     /**
      * aria label of checked grabber
      */
-    @property({ type: String }) checkedLabel = "Collapse";
+    @property({ type: String })
+    checkedLabel = "Collapse";
 
     /**
      * If true, the grabber is hovered. grabber-hover-changed event is dispatched on hover change
      */
-    @property({ type: Boolean }) hovered = false;
+    @property({ type: Boolean })
+    hovered = false;
 
     /**
      * If true, the grabber is disabled
      */
-    @property({ type: Boolean }) disabled = false;
+    @property({ type: Boolean })
+    disabled = false;
 
     /**
      * If true, the grabber is checked
      */
-    @property({ type: Boolean }) checked = false;
+    @property({ type: Boolean })
+    checked = false;
 
     /**
      * If true, the grabber is visible. Grabber will also be visible if it is focused
      */
-    @property({ type: Boolean }) visible = true;
+    @property({ type: Boolean })
+    visible = true;
 
     /**
      * True when grabber has keyboard focus
      */
-    @property({ type: Boolean }) focused = false;
+    @property({ type: Boolean })
+    focused = false;
 
     /**
-     * Alignment that says if the `md-grabbewr` is being used for leading, trailing, top or bottom
+     * By default clicking the grabber toggles the checked state and fires an event.
+     * Setting this attribute will prevent the checked state from being toggled
+     */
+    @property({ type: Boolean, attribute: "disable-click-toggle" })
+    disableClickToggle = false;
+
+    /**
+     * Alignment that says if the `md-grabber` is being used for leading, trailing, top or bottom
      *
      * Default: leading
      */
-    @property({ type: String, reflect: true }) alignment: "leading" | "trailing" | "top" | "bottom" = "leading";
+    @property({ type: String, reflect: true })
+    alignment: "leading" | "trailing" | "top" | "bottom" = "leading";
+
+    /**
+     * Update the icon and icon size for dragger type
+     *
+     * Default: false
+     */
+    @property({ type: Boolean })
+    dragger = false;
 
     connectedCallback() {
       super.connectedCallback();
@@ -91,11 +114,19 @@ export namespace Grabber {
     }
 
     handleMouseDown() {
+      if (this.disableClickToggle) {
+        return;
+      }
+
       this.toggleGrabber();
     }
 
     handleKeyDown(e: KeyboardEvent) {
-      if (e.code === Key.Enter || e.code === Key.Space || e.code === Key.NumpadEnter) {
+      if (this.disableClickToggle) {
+        return;
+      }
+
+      if (isActionKey(e.code)) {
         e.preventDefault();
         this.toggleGrabber();
       }
@@ -137,24 +168,34 @@ export namespace Grabber {
       return {
         "md-grabber--active": this.checked,
         "md-grabber--disabled": this.disabled,
+        "md-grabber--dragger": this.dragger,
         [`md-grabber--${this.alignment}`]: this.alignment,
         visible: this.visible || this.focused
       };
     }
 
     get iconName() {
+      if (this.dragger) {
+        return "list-menu-bold";
+      }
+
       if (this.alignment === "leading" || this.alignment === "trailing") {
         return this.checked ? "arrow-left-bold" : "arrow-right-bold";
       }
 
       return this.checked ? "arrow-up-bold" : "arrow-down-bold";
     }
 
+    get iconSize() {
+      return this.dragger ? "10" : "12";
+    }
+
     render() {
       return html`
         <div class="md-grabber__container">
           <button
             class="md-grabber ${classMap(this.grabberClassMap)}"
+            part="grabber"
             aria-pressed=${this.checked}
             ?disabled=${this.disabled}
             tabindex="0"
@@ -168,7 +209,7 @@ export namespace Grabber {
             @focus="${() => this.handleFocus()}"
             @blur="${() => this.handleBlur()}"
           >
-            <md-icon name="${this.iconName}" size="12" iconSet="momentumDesign"></md-icon>
+            <md-icon name="${this.iconName}" size="${this.iconSize}" iconSet="momentumDesign"></md-icon>
           </button>
         </div>
       `;

diff --git a/web-components/src/components/grabber/scss/grabber.scss b/web-components/src/components/grabber/scss/grabber.scss
@@ -47,6 +47,10 @@
     border: 1px solid var(--grabber-border-color);
     border-left-width: 0;
 
+    &.md-grabber--dragger {
+      cursor: ew-resize;
+    }
+
     &:not(.visible) {
       transform: translate3d(-100%, 0, 0);
     }
@@ -64,6 +68,10 @@
     border: 1px solid var(--grabber-border-color);
     border-top-width: 0;
 
+    &.md-grabber--dragger {
+      cursor: ns-resize;
+    }
+
     &:not(.visible) {
       transform: translate3d(0, -100%, 0);
     }

diff --git a/web-components/src/components/tabs/Tab.ts b/web-components/src/components/tabs/Tab.ts
@@ -40,6 +40,7 @@ export namespace Tab {
     @property({ type: String }) type: Tabs.TabsType = "line";
     @property({ type: Boolean }) newMomentum = false;
     @property({ type: Boolean }) onlyIcon = false;
+    @property({ type: String }) variant: Tabs.TabVariant = "ghost";
 
     private _disabled = false;
     @property({ type: Boolean, reflect: true })
@@ -194,8 +195,9 @@ export namespace Tab {
           part="tab"
           class="${classMap({
             closable: this.closable !== "",
-            isPill: this.type === "pill" || this.type === "primaryPill",
-            primary: this.type === "primaryPill",
+            isPill: this.type === "pill",
+            isRounded: this.type === "rounded",
+            primary: this.variant === "primary",
             newMomentum: this.newMomentum,
             onlyIcon: this.onlyIcon
           })}"

diff --git a/web-components/src/components/tabs/Tabs.ts b/web-components/src/components/tabs/Tabs.ts
@@ -44,7 +44,8 @@ export namespace Tabs {
   type TabsViewportDataList = TabViewportData[];
 
   type TabId = Element["id"];
-  export type TabsType = "line" | "pill" | "primaryPill";
+  export type TabsType = "line" | "pill" | "rounded";
+  export type TabVariant = "ghost" | "primary";
 
   @customElementWithCheck("md-tabs")
   export class ELEMENT extends ResizeMixin(RovingTabIndexMixin(SlottedMixin(LitElement))) {
@@ -68,6 +69,7 @@ export namespace Tabs {
     @property({ type: String, attribute: "comp-unique-id" }) compUniqueId = "";
     @property({ type: String }) type: Tabs.TabsType = "line";
     @property({ type: Boolean }) newMomentum = false;
+    @property({ type: String }) variant: TabVariant = "ghost";
 
     @internalProperty() private isMoreTabMenuVisible = false;
     @internalProperty() private isMoreTabMenuMeasured = false;
@@ -1124,6 +1126,7 @@ export namespace Tabs {
                   .isCrossVisible=${true}
                   tabIndex="${this.getTabIndex(tab)}"
                   .newMomentum=${this.newMomentum}
+                  variant=${this.variant}
                   type=${this.type}
                   .onlyIcon="${tab.onlyIcon}"
                 >

diff --git a/web-components/src/components/tabs/scss/module.scss b/web-components/src/components/tabs/scss/module.scss
@@ -8,8 +8,6 @@
 
 @import "@/wc_scss/typography/settings";
 
-@import "./vars/lm-tabs-settings";
-
 @import "./settings";
 @import "./mixins";
 @import "./tab";