@salesforcedevs/dx-components 1.3.83 → 1.3.85

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -369,7 +369,7 @@ a.image-container > img {
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
-.dx-text-heading-2 {
+.dx-text-display-2 {
     padding-bottom: var(--dx-g-spacing-sm);
     display: block;
 }
@@ -480,11 +480,11 @@ dx-image-and-label {
         margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
     }
 
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: var(--dx-g-text-xl);
     }
 
-    .dx-text-heading-2 {
+    .dx-text-display-2 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-2xl);
     }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -2,14 +2,14 @@
     <div class={classname} part="container" style={style}>
         <div class="container-layout">
             <template if:true={labelAsPrimaryHeading}>
-                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
+                <h1 if:true={label} class="label dx-text-display-6">{label}</h1>
             </template>
             <template if:false={labelAsPrimaryHeading}>
-                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+                <p if:true={label} class="label dx-text-display-6">{label}</p>
             </template>
             <div class="featured-content-main-content">
                 <template if:false={labelAsPrimaryHeading}>
-                    <h1 class="title dx-text-heading-2">
+                    <h1 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}
@@ -24,7 +24,7 @@
                     </h1>
                 </template>
                 <template if:true={labelAsPrimaryHeading}>
-                    <h2 class="title dx-text-heading-2">
+                    <h2 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}

package/src/modules/dx/featuresList/featuresList.css

@@ -1,11 +1,11 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     display: inline-flex;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     padding-bottom: var(--dx-g-spacing-xl);
 }
 

package/src/modules/dx/featuresList/featuresList.html

@@ -1,10 +1,10 @@
 <template>
     <div class="container">
-        <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
+        <h2 if:true={title} class="dx-text-display-4">{title}</h2>
         <ul>
             <template for:each={options} for:item="option">
                 <li key={option.id} class="option">
-                    <div class="dx-text-heading-5">
+                    <div class="dx-text-display-8">
                         <dx-icon
                             class="icon"
                             size="small"

package/src/modules/dx/filterMenu/filterMenu.html

@@ -62,10 +62,7 @@
                                             stroke-width="2"
                                             stroke-linecap="round"
                                             stroke-linejoin="round"
-                                            class="
-                                                feather feather-chevron-down
-                                                year-caret
-                                            "
+                                            class="feather feather-chevron-down year-caret"
                                         >
                                             <polyline
                                                 points="6 9 12 15 18 9"
@@ -88,9 +85,7 @@
                                                 {month.id}&nbsp;
                                                 <span
                                                     if:true={filtersDatesLoading}
-                                                    class="
-                                                        filters-dates-loading
-                                                    "
+                                                    class="filters-dates-loading"
                                                 ></span>
                                                 <span
                                                     if:false={filtersDatesLoading}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -80,10 +80,9 @@ export default class FilterMenu extends LightningElement {
 
     private setIntedeterminateStatus(checkbox: any, value: boolean) {
         if ("isYear" in checkbox.value && !checkbox.value.isYear) {
-            const yearCheckBox: any =
-                checkbox.parentElement.parentElement.parentElement.querySelector(
-                    ".checkbox-year"
-                );
+            const yearCheckBox: any = checkbox.parentElement.parentElement.parentElement.querySelector(
+                ".checkbox-year"
+            );
             yearCheckBox.indeterminate = value;
         }
     }

package/src/modules/dx/footer/footer.html

@@ -24,7 +24,7 @@
         >
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h2 class="dx-text-heading-3">
+                <h2 class="dx-text-display-4">
                     Get the latest
                     <br />
                     developer updates.

package/src/modules/dx/footer/links.ts

@@ -81,7 +81,8 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
         options: [
             {
                 link: {
-                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
+                    href:
+                        "https://trailhead.salesforce.com/trailblazer-community/feed"
                 },
                 label: "Trailblazer Community",
                 id: "Trailblazer Community"
@@ -158,7 +159,8 @@ export const termsLinks = [
         label: "Legal"
     },
     {
-        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        href:
+            "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
     { href: "https://trust.salesforce.com/en/", label: "Trust" },

package/src/modules/dx/grid/grid.ts

@@ -67,8 +67,6 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (
-            e.target as LightningSlotElement
-        ).assignedElements().length;
+        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
     }
 }

package/src/modules/dx/groupText/groupText.css

@@ -76,12 +76,12 @@
 /* breakpoints tablet */
 
 @media screen and (max-width: 1024px) {
-    .title.dx-text-heading-2 {
+    .title.dx-text-display-2 {
         font-size: var(--dx-g-text-3xl);
         line-height: var(--dx-g-spacing-2xl);
     }
 
-    .subtitle.dx-text-heading-6 {
+    .subtitle.dx-text-display-8 {
         font-size: var(--dx-g-text-sm);
     }
 
@@ -90,15 +90,11 @@
         line-height: var(--dx-g-spacing-lg);
     }
 
-    .title.dx-text-heading-3 {
+    .title.dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-xl);
     }
 
-    .subtitle.dx-text-heading-7 {
-        font-size: var(--dx-g-text-xs);
-    }
-
     .body.dx-text-body-2 {
         font-size: var(--dx-g-text-sm);
         line-height: var(--dx-g-spacing-lg);

package/src/modules/dx/groupText/groupText.html

@@ -1,10 +1,10 @@
 <template>
     <div class={className}>
-        <span if:true={label} class="label dx-text-heading-6">{label}</span>
+        <span if:true={label} class="label dx-text-display-8">{label}</span>
         <div class={titleClassname} role="heading" aria-level={titleAriaLevel}>
             {title}
         </div>
-        <span class={subtitleClassname} if:true={hasSubtitle}>
+        <span class="subtitle dx-text-display-8" if:true={hasSubtitle}>
             <span if:true={owner}>{owner}</span>
             <span if:true={attributionLink}>
                 By&nbsp;

package/src/modules/dx/groupText/groupText.ts

@@ -11,13 +11,8 @@ const LARGE = "large";
 const MEDIUM = "medium";
 
 const titleClasses = {
-    [LARGE]: "dx-text-heading-2",
-    [MEDIUM]: "dx-text-heading-3"
-};
-
-const subtitleClasses = {
-    [LARGE]: "dx-text-heading-6",
-    [MEDIUM]: "dx-text-heading-7"
+    [LARGE]: "dx-text-display-2",
+    [MEDIUM]: "dx-text-display-4"
 };
 
 export default class GroupText extends LightningElement {
@@ -76,10 +71,6 @@ export default class GroupText extends LightningElement {
         return cx("title", titleClasses[this.size]);
     }
 
-    private get subtitleClassname() {
-        return cx("subtitle", subtitleClasses[this.size]);
-    }
-
     private get hasButtonGroup(): boolean {
         return !!(this.primaryLink || this.secondaryLink || this.tertiaryLink);
     }

package/src/modules/dx/header/header.html

@@ -50,7 +50,7 @@
                             symbol={brand}
                             size="xlarge"
                         ></dx-icon>
-                        <span class="dx-text-heading-4 subtitle">
+                        <span class="dx-text-display-6 subtitle">
                             {subtitle}
                         </span>
                     </a>

package/src/modules/dx/logo/logo.html

@@ -1,6 +1,6 @@
 <template>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
-        <span class="dx-text-heading-7">{label}</span>
+        <span class="dx-text-display-8">{label}</span>
     </a>
 </template>

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -1,9 +1,9 @@
 <template>
     <div class="container" style={style}>
         <div class={textStyle}>
-            <h1 class="heading dx-text-heading-2">{title}</h1>
+            <h1 class="heading dx-text-display-2">{title}</h1>
             <span class="body dx-text-body-1">{body}</span>
-            <span if:true={subtitle} class="subtitle dx-text-heading-4b">
+            <span if:true={subtitle} class="subtitle dx-text-display-7">
                 {subtitle}
             </span>
             <div class="button-container">

package/src/modules/dx/podcastHost/podcastHost.html

@@ -8,7 +8,7 @@
                 <h2>
                     <span class="dx-text-label-2">Hosted by</span>
                     <br />
-                    <span class="dx-text-heading-4">{fullName}</span>
+                    <span class="dx-text-display-6">{fullName}</span>
                 </h2>
             </div>
             <div class="host-bio">

package/src/modules/dx/popover/popover.ts

@@ -246,9 +246,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (
-            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
-        ) as HTMLElement | null;
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));

package/src/modules/dx/searchResults/searchResults.ts

@@ -19,7 +19,9 @@ interface CoveoSearch {
 
 declare const Coveo: CoveoSearch;
 
-function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
+function getPaginationState(
+    event: CoveoSDK.IQuerySuccessEventArgs
+): {
     numberOfPages: number;
     currentPage: number;
 } {

package/src/modules/dx/section/section.css

@@ -61,7 +61,7 @@
     max-width: 800px;
 }
 
-.dx-text-heading-custom {
+.dx-text-display-custom {
     color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
     font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
     font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);

package/src/modules/dx/section/section.html

@@ -27,7 +27,7 @@
         </svg>
 
         <div part="text" class="text" if:true={hasText}>
-            <span class="label dx-text-heading-6" if:true={label}>{label}</span>
+            <span class="label dx-text-display-8" if:true={label}>{label}</span>
             <h2 class={headingClassName} if:true={title}>{title}</h2>
             <span class="subtitle dx-text-body-1" if:true={subtitle}>
                 {subtitle}

package/src/modules/dx/section/section.ts

@@ -37,7 +37,7 @@ export default class Section extends LightningElement {
     }
 
     private get headingClassName() {
-        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+        return cx("heading", `dx-text-display-${this.headingLevel}`);
     }
 
     private get hasText(): boolean {

package/src/modules/dx/select/select.ts

@@ -79,8 +79,9 @@ export default class Select extends LightningElement {
 
     get selectElement() {
         if (!this._selectElement) {
-            this._selectElement =
-                this.template.querySelector<HTMLSelectElement>("select");
+            this._selectElement = this.template.querySelector<HTMLSelectElement>(
+                "select"
+            );
         }
         return this._selectElement;
     }

package/src/modules/dx/sidebar/sidebar.html

@@ -29,7 +29,7 @@
         ></dx-button>
         <div class="sidebar-header padding-horizontal">
             <div class="header" if:false={mobile}>
-                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
             </div>
             <div class="search">
@@ -43,7 +43,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-heading-6"
+                class="results-heading dx-text-display-8"
                 if:true={showResultsHeading}
             >
                 Results

package/src/modules/dx/sidebar/sidebar.ts

@@ -51,11 +51,9 @@ export default class Sidebar extends SidebarBase {
 
     @api
     setInputValue(searchTerm: string) {
-        (
-            this.template.querySelector(
-                "dx-sidebar-search"
-            ) as unknown as SidebarSearch
-        )?.setInputValue(searchTerm);
+        ((this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown) as SidebarSearch)?.setInputValue(searchTerm);
     }
 
     private expanded: boolean = true;
@@ -215,9 +213,9 @@ export default class Sidebar extends SidebarBase {
             return;
         }
 
-        const search = this.template.querySelector(
+        const search = (this.template.querySelector(
             "dx-sidebar-search"
-        ) as unknown as SidebarSearch;
+        ) as unknown) as SidebarSearch;
 
         if (
             this.isNearBottomOfSearchResults &&

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -31,7 +31,7 @@
         <template if:true={expanded}>
             <div class="padding-horizontal">
                 <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                    <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
                 </div>
                 <div class="search">

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -247,8 +247,11 @@ export default class SidebarSearch extends LightningElement {
             return;
         }
 
-        const { isLoading, firstSearchExecuted, results } =
-            this.resultList.state;
+        const {
+            isLoading,
+            firstSearchExecuted,
+            results
+        } = this.resultList.state;
 
         if ((!firstSearchExecuted && !isLoading) || !this.value) {
             // coveo search is firing off some unwanted payloads on startup

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -123,8 +123,8 @@ export default class TabPanelList extends LightningElement {
             "dx-tab-panel-item:not(.more-btn-container)"
         );
         const moreBtn = this.template.querySelector(".more-btn-container")!;
-        const containerWidth =
-            this.template.querySelector(".tablist")!.offsetWidth;
+        const containerWidth = this.template.querySelector(".tablist")!
+            .offsetWidth;
         let stopWidth = this.template.querySelector(
             "dx-tab-panel-item.more-btn-container"
         )!.offsetWidth;

package/src/modules/dx/toc/toc.css

@@ -39,7 +39,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }

package/src/modules/dx/toc/toc.ts

@@ -58,7 +58,7 @@ export default class Toc extends LightningElement {
 
     private get titleClassName() {
         return cx(
-            "dx-text-heading-5 toc_title",
+            "dx-text-display-8 toc_title",
             !this.showContent && "state-hide-content"
         );
     }

package/src/modules/dxBaseElements/matchMediaElement/matchMediaElement.ts

@@ -19,8 +19,10 @@ const breakpointConfigs = [
 ];
 
 export abstract class MatchMediaElement extends LightningElement {
-    private deviceType: DEVICE_MOBILE | DEVICE_TABLET | DEVICE_DESKTOP =
-        DEVICE_DESKTOP;
+    private deviceType:
+        | DEVICE_MOBILE
+        | DEVICE_TABLET
+        | DEVICE_DESKTOP = DEVICE_DESKTOP;
     private matches: {
         match: MediaQueryList;
         callback: (e: MediaQueryListEvent | MediaQueryList) => void;

package/src/modules/dxHelpers/card/card.css

@@ -246,16 +246,12 @@ a.dx-card-base:hover dx-card-title {
         line-height: 16px;
     }
 
-    .dx-text-heading-3:not(.static-font) {
+    .dx-text-display-4:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5:not(.static-font) {
-        font-size: 12px;
-    }
-
-    .dx-text-heading-6:not(.static-font) {
+    .dx-text-display-8:not(.static-font) {
         font-size: var(--dx-g-text-sm);
     }
 }