From 0f087f9dcc1bf5c25e62261014eadd9116d5ab3b Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Thu, 6 Jun 2024 14:27:57 +0300
Subject: [PATCH] refactor(progressbars): Added CSS parts documentation (#1234)

* Moved slotchange to a delegated handler
* Some minor template cleanups
---
 src/components/progress/base.ts              | 12 ++++----
 src/components/progress/circular-progress.ts | 28 +++++++++---------
 src/components/progress/linear-progress.ts   | 30 ++++++++++----------
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/progress/base.ts b/src/components/progress/base.ts
index 6ab177569..f66e59077 100644
--- a/src/components/progress/base.ts
+++ b/src/components/progress/base.ts
@@ -115,10 +115,6 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     }
   }
 
-  protected slotChanged() {
-    this.requestUpdate();
-  }
-
   constructor() {
     super();
     this.__internals = this.attachInternals();
@@ -127,6 +123,12 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     this.__internals.ariaValueMin = '0';
   }
 
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
   protected override updated() {
     this._updateARIA();
   }
@@ -201,7 +203,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
       this.indeterminate || this.hideLabel || this.assignedElements.length;
 
     return html`
-      <slot part="label" @slotchange=${this.slotChanged}></slot>
+      <slot part="label"></slot>
       ${hasNoLabel
         ? nothing
         : html`<span part="label value">${this.renderLabelText()}</span>`}
diff --git a/src/components/progress/circular-progress.ts b/src/components/progress/circular-progress.ts
index ee5c82771..5785d7a2d 100644
--- a/src/components/progress/circular-progress.ts
+++ b/src/components/progress/circular-progress.ts
@@ -20,19 +20,19 @@ import { all } from './themes/circular/themes.js';
  * @slot - The text area container.
  * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.
  *
- * @csspart svg
- * @csspart gradient_start
- * @csspart gradient_end
- * @csspart track
- * @csspart fill
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart svg - The igc-circular-progress SVG element.
+ * @csspart gradient_start - The igc-circular-progress linear-gradient start color.
+ * @csspart gradient_end - The igc-circular-progress linear-gradient end color.
+ * @csspart track - The igc-circular-progress ring track area.
+ * @csspart fill - The igc-circular-progress indicator area.
+ * @csspart label - The igc-circular-progress label.
+ * @csspart value - The igc-circular-progress label value.
+ * @csspart indeterminate - The igc-circular-progress indeterminate state.
+ * @csspart primary - The igc-circular-progress primary state.
+ * @csspart danger - The igc-circular-progress error state.
+ * @csspart warning - The igc-circular-progress warning state.
+ * @csspart info - The igc-circular-progress info state.
+ * @csspart success - The igc-circular-progress success state.
  */
 @themes(all)
 export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
@@ -92,7 +92,7 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
 
     return html`
       <svg part=${partNameMap(parts)}>${this.renderSvg()}</svg>
-      <slot name="gradient" @slotchange=${this.slotChanged}></slot>
+      <slot name="gradient"></slot>
       ${this.renderDefaultSlot()}
     `;
   }
diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts
index e0634a9da..02a0f3fd5 100644
--- a/src/components/progress/linear-progress.ts
+++ b/src/components/progress/linear-progress.ts
@@ -18,17 +18,17 @@ import { all } from './themes/linear/themes.js';
  *
  * @slot - The text area container.
  *
- * @csspart track
- * @csspart fill
- * @csspart striped
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart track - The igc-linear-progress track area.
+ * @csspart fill - The igc-linear-progress indicator area.
+ * @csspart striped - The igc-linear-progress striped indicator.
+ * @csspart label - The igc-linear-progress label.
+ * @csspart value - The igc-linear-progress label value.
+ * @csspart indeterminate - The igc-linear-progress indeterminate state.
+ * @csspart primary - The igc-linear-progress indicator primary state.
+ * @csspart danger - The igc-linear-progress indicator error state.
+ * @csspart warning - The igc-linear-progress indicator warning state.
+ * @csspart info - The igc-linear-progress indicator info state.
+ * @csspart success - The igc-linear-progress indicator success state.
  */
 @themes(all)
 export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
@@ -61,7 +61,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
     | 'bottom-end' = 'top-start';
 
   protected override render() {
-    const parts = {
+    const parts = partNameMap({
       fill: true,
       striped: this.striped,
       indeterminate: this.indeterminate,
@@ -70,7 +70,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
       danger: this.variant === 'danger',
       warning: this.variant === 'warning',
       info: this.variant === 'info',
-    };
+    });
 
     const animation = {
       width: `${this.progress * 100}%`,
@@ -79,8 +79,8 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
 
     return html`
       <div part="track">
-        <div part=${partNameMap(parts)} style=${styleMap(animation)}></div>
-        <div part="${partNameMap(parts)} secondary"></div>
+        <div part=${parts} style=${styleMap(animation)}></div>
+        <div part="${parts} secondary"></div>
       </div>
       ${this.renderDefaultSlot()}
     `;