From 827c36bb1d3d91df3fd2063c8697f667d313c3ea Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 26 Aug 2022 09:12:51 -0400
Subject: [PATCH] update tree; fixes #879

---
 docs/resources/changelog.md                  |  2 ++
 src/components/tree-item/tree-item.styles.ts | 16 ++++++++++++++++
 src/components/tree-item/tree-item.ts        |  5 +++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index edef5925..9a28dd6a 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,8 +10,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Added animation to `<sl-tree-item>` on expand and collapse
 - Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
 - Fixed a bug in `<sl-tree-item>` that prevented custom expand/collapse icons from rendering
+- Fixed a bug in `<sl-tree-item>` where the `expand-icon` and `collapse-icon` slots were reversed
 
 ## 2.0.0-beta.82
 
diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 693c3af8..d95ab8f2 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -43,6 +43,22 @@ export default css`
     letter-spacing: var(--sl-letter-spacing-normal);
   }
 
+  .tree-item__default-toggle-button {
+    transition: var(--sl-transition-medium) transform ease;
+  }
+
+  :host([expanded]) .tree-item__default-toggle-button {
+    transform: rotate(90deg);
+  }
+
+  :host([expanded]) .tree-item--rtl .tree-item__default-toggle-button {
+    transform: rotate(-90deg);
+  }
+
+  .tree-item--rtl {
+    outline: dotted 1px tomato;
+  }
+
   .tree-item__checkbox::part(base) {
     display: flex;
     align-items: center;
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index c8caa283..603fa8f1 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -234,10 +234,11 @@ export default class SlTreeItem extends ShoelaceElement {
             ${when(
               showExpandButton,
               () => html`
-                <slot name="${this.expanded ? 'expand-icon' : 'collapse-icon'}">
+                <slot name="${this.expanded ? 'collapse-icon' : 'expand-icon'}">
                   <sl-icon
+                    class="tree-item__default-toggle-button"
                     library="system"
-                    name="${this.expanded ? 'chevron-down' : isRtl ? 'chevron-left' : 'chevron-right'}"
+                    name=${isRtl ? 'chevron-left' : 'chevron-right'}
                   ></sl-icon>
                 </slot>
               `