refactor: partNameMap as a Lit directive (#1673)

Author: rkaraivanov

src/components/button-group/toggle-button.ts

@@ -4,7 +4,7 @@ import { property, query } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
@@ -80,10 +80,7 @@ export default class IgcToggleButtonComponent extends LitElement {
   protected override render() {
     return html`
       <button
-        part=${partNameMap({
-          toggle: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ toggle: true, focused: this._kbFocus.focused })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}

src/components/button/button-base.ts

@@ -6,7 +6,7 @@ import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 
 export interface IgcButtonEventMap {
   // For analyzer meta only:
@@ -140,10 +140,7 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   private renderButton() {
     return html`
       <button
-        part=${partNameMap({
-          base: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._kbFocus.focused })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
@@ -158,13 +155,10 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   private renderLinkButton() {
     return html`
       <a
-        part=${partNameMap({
-          base: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._kbFocus.focused })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-disabled=${this.disabled}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}

src/components/calendar/calendar.ts

@@ -23,13 +23,13 @@ import { IgcCalendarResourceStringEN } from '../common/i18n/calendar.resources.j
 import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { partMap } from '../common/part-map.js';
 import {
   clamp,
   findElementFromEventPath,
   first,
   formatString,
   last,
-  partNameMap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { ContentOrientation } from '../types.js';
@@ -427,15 +427,15 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   }
 
   protected renderNavigationButtons() {
-    const parts = partNameMap({
+    const parts = {
       'navigation-button': true,
       vertical: this.orientation === 'vertical',
-    });
+    };
 
     return html`
       <div part="navigation-buttons">
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.previousButtonLabel}
           @click=${this.navigatePrevious}
         >
@@ -447,7 +447,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
         </button>
 
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.nextButtonLabel}
           @click=${this.navigateNext}
         >

src/components/calendar/days-view/days-view.ts

@@ -11,7 +11,8 @@ import { IgcCalendarResourceStringEN } from '../../common/i18n/calendar.resource
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, first, last, partNameMap, take } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk, first, last, take } from '../../common/util.js';
 import { IgcCalendarBaseComponent } from '../base.js';
 import {
   areSameMonth,
@@ -382,7 +383,6 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     const inactive = !areSameMonth(day, this._activeDate);
 
     return {
-      date: true,
       disabled: disabled || hidden,
       first: this.isFirstInRange(day),
       last: this.isLastInRange(day),
@@ -403,13 +403,12 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     const { changePreview, clearPreview } = this.getDayHandlers(day);
 
     const props = this.getDayProperties(day, today);
-    const parts = partNameMap(props);
 
     return html`
-      <span part=${parts}>
+      <span part=${partMap({ date: true, ...props })}>
         <span
           role="gridcell"
-          part=${parts.replace('date', 'date-inner')}
+          part=${partMap({ 'date-inner': true, ...props })}
           aria-label=${ariaLabel}
           aria-disabled=${props.disabled}
           aria-selected=${props.selected}
@@ -438,8 +437,8 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
 
   protected renderWeekNumber(start: CalendarDay, last: boolean) {
     return html`
-      <span role="rowheader" part=${partNameMap({ 'week-number': true, last })}>
-        <span part=${partNameMap({ 'week-number-inner': true, last })}>
+      <span role="rowheader" part=${partMap({ 'week-number': true, last })}>
+        <span part=${partMap({ 'week-number-inner': true, last })}>
           ${start.week}
         </span>
       </span>

src/components/calendar/helpers.spec.ts

@@ -47,7 +47,7 @@ export function getDayViewDOM(element: IgcDaysViewComponent) {
       get disabled() {
         return Array.from(
           root.querySelectorAll<HTMLElement>(
-            'span[part*="date-inner disabled"]'
+            'span[part~="date-inner"][part~="disabled"]'
           )
         );
       },

src/components/calendar/months-view/months-view.ts

@@ -11,7 +11,8 @@ import { registerComponent } from '../../common/definitions/register.js';
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } from '../../common/util.js';
 import { MONTHS_PER_ROW, areSameMonth, getViewElement } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
@@ -119,14 +120,12 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
     const current = areSameMonth(now, entry);
     const selected = this._value.month === entry.month;
 
-    const parts = { selected, current };
-
     return html`
-      <span part=${partNameMap({ month: true, ...parts })}>
+      <span part=${partMap({ month: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${entry.month}
-          part=${partNameMap({ 'month-inner': true, ...parts })}
+          part=${partMap({ 'month-inner': true, selected, current })}
           aria-selected=${selected}
           aria-label=${ariaLabel}
           tabindex=${active ? 0 : -1}

src/components/calendar/years-view/years-view.ts

@@ -9,7 +9,8 @@ import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressC
 import { registerComponent } from '../../common/definitions/register.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } from '../../common/util.js';
 import { YEARS_PER_ROW, getViewElement, getYearRange } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
@@ -96,14 +97,13 @@ export default class IgcYearsViewComponent extends EventEmitterMixin<
   protected renderYear(year: number, now: CalendarDay) {
     const selected = this._value.year === year;
     const current = year === now.year;
-    const parts = { selected, current };
 
     return html`
-      <span part=${partNameMap({ year: true, ...parts })}>
+      <span part=${partMap({ year: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${year}
-          part=${partNameMap({ 'year-inner': true, ...parts })}
+          part=${partMap({ 'year-inner': true, selected, current })}
           aria-selected=${selected}
           tabindex=${selected ? 0 : -1}
         >

src/components/carousel/carousel-indicator-container.ts

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import { styles } from './themes/carousel-indicator-container.base.css.js';
 import { all } from './themes/indicator-container.js';
@@ -39,7 +39,7 @@ export default class IgcCarouselIndicatorContainerComponent extends LitElement {
   protected override render() {
     return html`
       <div
-        part=${partNameMap({
+        part=${partMap({
           base: true,
           focused: this._kbFocus.focused,
         })}

src/components/carousel/carousel.ts

@@ -32,6 +32,7 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { partMap } from '../common/part-map.js';
 import {
   asNumber,
   createCounter,
@@ -40,7 +41,6 @@ import {
   formatString,
   isLTR,
   last,
-  partNameMap,
   wrap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -740,14 +740,18 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   private indicatorTemplate() {
-    const parts = partNameMap({
+    const parts = {
       indicators: true,
       start: this.indicatorsOrientation === 'start',
-    });
+    };
 
     return html`
       <igc-carousel-indicator-container>
-        <div ${ref(this._indicatorsContainerRef)} role="tablist" part=${parts}>
+        <div
+          ${ref(this._indicatorsContainerRef)}
+          role="tablist"
+          part=${partMap(parts)}
+        >
           <slot
             name="indicator"
             @slotchange=${this.handleIndicatorSlotChange}
@@ -763,19 +767,19 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   private labelTemplate() {
-    const parts = partNameMap({
+    const parts = {
       label: true,
       indicators: true,
       start: this.indicatorsOrientation === 'start',
-    });
+    };
     const value = formatString(
       this.slidesLabelFormat,
       this.current + 1,
       this.total
     );
 
     return html`
-      <div part=${parts}>
+      <div part=${partMap(parts)}>
         <span>${value}</span>
       </div>
     `;

src/components/checkbox/checkbox.ts

@@ -5,7 +5,8 @@ import { live } from 'lit/directives/live.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { createCounter } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcCheckboxBaseComponent } from './checkbox-base.js';
 import { all } from './themes/checkbox-themes.js';
@@ -89,7 +90,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
 
     return html`
       <label
-        part=${partNameMap({
+        part=${partMap({
           base: true,
           checked,
           focused: this._kbFocus.focused,
@@ -113,14 +114,14 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
         />
-        <span part=${partNameMap({ control: true, checked })}>
-          <span part=${partNameMap({ indicator: true, checked })}>
+        <span part=${partMap({ control: true, checked })}>
+          <span part=${partMap({ indicator: true, checked })}>
             ${this._isIndigo ? this.renderIndigo() : this.renderStandard()}
           </span>
         </span>
         <span
           .hidden=${this.hideLabel}
-          part=${partNameMap({ label: true, checked })}
+          part=${partMap({ label: true, checked })}
           id=${this.labelId}
           ><slot></slot>
         </span>