Enable mdv2 updates (#1823)

* chore: disable new mdv2 style table tokens * chore: update tabs selected index aPI * chore: remove unused avatar.scss file * chore: fix date range mdv2 * chore: temp disable background colour tokens * chore: mdv2 support legacy default colour * chore: increment package version * chore: toggle switch update --------- Co-authored-by: James Nestor <[email protected]>
momentum-design · Nov 14, 2024 · 6c58267 · 6c58267
1 parent 857fb80
commit 6c58267
Show file tree

Hide file tree

Showing 25 changed files with 254 additions and 242 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.18",
+  "version": "2.14.19",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
@@ -373,7 +373,7 @@ export class TabsTemplateSandbox extends LitElement {
           Single Button Reset
         </md-toggle-switch>
         <div>
-          <md-tabs justified selected="0">
+          <md-tabs justified selected-index="0">
             <md-tab slot="tab" aria-label="entry-point">
               <span>Entry Point</span>
             </md-tab>

diff --git a/web-components/src/components/avatar/Avatar.ts b/web-components/src/components/avatar/Avatar.ts
@@ -94,7 +94,9 @@ export namespace Avatar {
     private get avatarLetterClassMap() {
       return {
         "md-decrypting": this.decrypting,
-        [`md-avatar--${this.color}`]: this.color
+        [`md-avatar--${this.color}`]: this.color,
+        "new-momentum": this.newMomentum,
+        "has-color": !!this.color
       };
     }
 

diff --git a/web-components/src/components/avatar/scss/avatar.scss b/web-components/src/components/avatar/scss/avatar.scss
@@ -82,8 +82,13 @@
 
   .md-avatar__letter {
     @include avatar-contents-base;
-    background-color: $avatar-letter__background;
-    color: $avatar-letter__color;
+    background-color: $avatar-legacy-letter__background;
+    color: $avatar-legacy-letter__color;
+
+    &.new-momentum {
+      background-color: $avatar-letter__background;
+      color: $avatar-letter__color;
+    }
 
     md-loading {
       align-items: center;
@@ -184,6 +189,10 @@
     &.md-avatar--lime {
       background-color: var(--avatar-lime-bg-color);
     }
+
+    &.has-color {
+      color: $avatar-letter__color-text-color;
+    }
   }
 
   .md-avatar__img--hidden {

diff --git a/web-components/src/components/avatar/scss/settings.scss b/web-components/src/components/avatar/scss/settings.scss
@@ -55,6 +55,11 @@ $avatar--rona__shadow--dark:
 $avatar-letter__color: var(--avatar-letter-text-color);
 $avatar-letter__background: var(--avatar-letter-bg-color);
 
+$avatar-legacy-letter__color: var(--avatar-letter-legacy-text-color, var(--avatar-letter-text-color));
+$avatar-legacy-letter__background: var(--avatar-letter-legacy-bg-color, var(--avatar-letter-bg-color));
+
+$avatar-letter__color-text-color: var(--avatar-letter-color-avatar-text-color, --avatar-letter-text-color);
+
 $avatar-icon__color: var(--avatar-icon-icon-color, $black-80);
 $avatar-icon__background: $gray-5-88;
 

diff --git a/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js b/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
 
 const avatar = {
   prefix: "mdv2",
@@ -10,6 +11,17 @@ const avatar = {
     },
     "text-color": {
       common: "$mds-color-theme-common-text-primary-normal"
+    },
+    "legacy-bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[80].name
+    },
+    "legacy-text-color": {
+      light: colors.gray[90].name,
+      dark: colors.gray[10].name
+    },
+    "color-avatar-text-color": {
+      common: "$mds-color-theme-common-text-primary-normal"
     }
   },
   icon: {

diff --git a/web-components/src/components/combobox/ComboBox.test.ts b/web-components/src/components/combobox/ComboBox.test.ts
@@ -1475,18 +1475,21 @@ describe("Combobox Component", () => {
       el.inputValue = "One";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("Search results: 1 results found.");
+
+      const inputEl = el.shadowRoot!.querySelector("input");
+
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results: 1 results found.");
 
       el.searchResultAriaLabel = "";
       el.ariaLabel = "Search results";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("Search results, 1 results found.");
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results, 1 results found.");
 
       el.ariaLabel = "";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("ComboBox Element, 1 results found.");
+      expect(inputEl?.getAttribute("aria-label")).toEqual("ComboBox Element, 1 results found.");
     });
 
     test("should change selected option for virtual scroll", async () => {

diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts
@@ -92,7 +92,8 @@ export namespace ComboBox {
 
     @property({ type: String, reflect: true }) ariaLabel = ""; // This aria-label is used by default when there is no search or list-items are displayed.
     @property({ type: String, attribute: "search-result-aria-label" }) searchResultAriaLabel = ""; // This aria-label is dynamic and used when there is search and list-items are displayed.
-    @internalProperty() ariaLabelForComboBox = ""; // This internal property is used to conditionally set aria-label.
+    @internalProperty()
+    private ariaLabelForComboBox = ""; // This internal property is used to conditionally set aria-label.
 
     @property({ type: String, attribute: "clear-aria-label" }) clearAriaLabel = "Clear";
     @property({ type: String, attribute: "arrow-aria-label" }) arrowAriaLabel = "Expand";

diff --git a/web-components/src/components/date-range-picker/DateRangePicker.test.ts b/web-components/src/components/date-range-picker/DateRangePicker.test.ts
@@ -32,11 +32,7 @@ describe("DatePicker Component", () => {
     const firstDate = DateTime.fromObject({ month: 11, day: 15 });
     const secondDate = firstDate.plus({ days: 5 });
 
-    const el: DateRangePicker.ELEMENT = await fixture(
-      html`
-        <md-date-range-picker value={''}></md-date-range-picker>
-      `
-    );
+    const el: DateRangePicker.ELEMENT = await fixture(html` <md-date-range-picker value=""></md-date-range-picker> `);
 
     const selectFunc = jest.spyOn(el, "handleDateSelection");
     const updateFunc = jest.spyOn(el, "updateValue");
@@ -81,7 +77,7 @@ describe("DatePicker Component", () => {
     const eventSpy = jest.fn((event: CustomEvent) => {
       capturedEvent = event;
     }) as unknown as EventListener;
-    el.addEventListener('date-range-change', eventSpy as EventListener);
+    el.addEventListener("date-range-change", eventSpy as EventListener);
 
     el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 1 }) } });
     expect(el.startDate).not.toBeUndefined();
@@ -98,12 +94,12 @@ describe("DatePicker Component", () => {
     expect(capturedEvent).not.toBeNull();
     expect(capturedEvent!.detail).toEqual({
       startDate: el.startDate,
-      endDate: el.endDate,
+      endDate: el.endDate
     });
   });
 
   describe("should handle range modification scenarios", () => {
-    const date1 =  DateTime.fromObject({ month: 11, day: 15 });
+    const date1 = DateTime.fromObject({ month: 11, day: 15 });
     const date2 = date1.plus({ days: 10 });
     const date3 = date2.plus({ days: 10 });
     const date4 = date3.plus({ days: 10 });
@@ -113,9 +109,7 @@ describe("DatePicker Component", () => {
       [date4, date3, date2, date1],
       [date2, date1, date4, date3],
       [date3, date4, date1, date2]
-      ]
-    )
-    ("should handle date selection in order %s %s %s %s", async (dateA, dateB, dateC, dateD) => {
+    ])("should handle date selection in order %s %s %s %s", async (dateA, dateB, dateC, dateD) => {
       const el = await fixtureFactory();
       expect(el.startDate).toBeUndefined();
       expect(el.endDate).toBeUndefined();

diff --git a/web-components/src/components/date-range-picker/DateRangePicker.ts b/web-components/src/components/date-range-picker/DateRangePicker.ts
@@ -47,17 +47,14 @@ export namespace DateRangePicker {
       const selection: DateTime = e.detail.data;
       if (!this.startDate) {
         this.startDate = this.dateToSqlTranslate(selection);
-      }
-      else if (!this.endDate) {
+      } else if (!this.endDate) {
         if (selection < DateTime.fromISO(this.startDate)) {
           this.endDate = this.startDate;
           this.startDate = this.dateToSqlTranslate(selection);
-        }
-        else {
+        } else {
           this.endDate = this.dateToSqlTranslate(selection);
         }
-      }
-      else {
+      } else {
         this.startDate = this.dateToSqlTranslate(selection);
         this.endDate = undefined;
       }
@@ -70,12 +67,12 @@ export namespace DateRangePicker {
       if (!this.startDate || !this.endDate) {
         return;
       }
-      
+
       const event = new CustomEvent("date-range-change", {
         detail: {
           startDate: this.startDate,
-          endDate: this.endDate,
-        },
+          endDate: this.endDate
+        }
       });
       this.dispatchEvent(event);
     }