update tree; fixes #879

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
 

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;

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>
               `