From acf76cf3596d354c5affd78c0526a72f3c64eb37 Mon Sep 17 00:00:00 2001
From: Matt Walkland <42933808+mwalklandIDBS@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:59:50 +0000
Subject: [PATCH] Expose spinner part on tree item (#1937)

* Expose spinner part on tree item

* Add spinner__base to exportparts of tree-item
---
 src/components/tree-item/tree-item.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts
index 4fe9f7333c..d5d785397e 100644
--- a/src/components/tree-item/tree-item.component.ts
+++ b/src/components/tree-item/tree-item.component.ts
@@ -46,6 +46,8 @@ import type { CSSResultGroup, PropertyValueMap } from 'lit';
  * @csspart item--selected - Applied when the tree item is selected.
  * @csspart indentation - The tree item's indentation container.
  * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
  * @csspart label - The tree item's label.
  * @csspart children - The container that wraps the tree item's nested children.
  * @csspart checkbox - The checkbox that shows when using multiselect.
@@ -257,7 +259,7 @@ export default class SlTreeItem extends ShoelaceElement {
             })}
             aria-hidden="true"
           >
-            ${when(this.loading, () => html` <sl-spinner></sl-spinner> `)}
+            ${when(this.loading, () => html` <sl-spinner part="spinner" exportparts="base:spinner__base"></sl-spinner> `)}
             <slot class="tree-item__expand-icon-slot" name="expand-icon">
               <sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
             </slot>