refactor(progressbars): Added CSS parts documentation

* Moved slotchange to a delegated handler * Some minor template cleanups
IgniteUI · Jun 6, 2024 · 1e2780c · 1e2780c
1 parent 562e34a
commit 1e2780c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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()}
     `;