js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix transition in Firefox

Browse Source
This commit is contained in:
Cory LaViska
2022-08-30 17:51:51 -05:00
parent 8d0d0ac4e0
commit 05e026876a
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/tree-item/tree-item.styles.ts
View File

@@ -47,11 +47,11 @@ export default css`
transition: var(--sl-transition-medium) transform ease;
}
:host([expanded]) .tree-item__default-toggle-button {
.tree-item--expanded .tree-item__default-toggle-button {
transform: rotate(90deg);
}
:host([expanded]) .tree-item--rtl .tree-item__default-toggle-button {
.tree-item--expanded.tree-item--rtl .tree-item__default-toggle-button {
transform: rotate(-90deg);
}

10
src/components/tree-item/tree-item.ts
View File

@@ -77,6 +77,7 @@ export default class SlTreeItem extends ShoelaceElement {
@query('slot[name=children]') childrenSlot: HTMLSlotElement;
@query('.tree-item__item') itemElement: HTMLDivElement;
@query('.tree-item__children') childrenContainer: HTMLDivElement;
@query('.tree-item__expand-button slot') expandButtonSlot: HTMLSlotElement;
connectedCallback(): void {
super.connectedCallback();
@@ -127,6 +128,10 @@ export default class SlTreeItem extends ShoelaceElement {
@watch('expanded', { waitUntilFirstUpdate: true })
handleExpandAnimation() {
if (this.expandButtonSlot) {
this.expandButtonSlot.name = this.expanded ? 'collapse-icon' : 'expand-icon';
}
if (this.expanded) {
if (this.lazy) {
this.loading = true;
@@ -213,6 +218,7 @@ export default class SlTreeItem extends ShoelaceElement {
part="base"
class="${classMap({
'tree-item': true,
'tree-item--expanded': this.expanded,
'tree-item--selected': this.selected,
'tree-item--disabled': this.disabled,
'tree-item--leaf': this.isLeaf,
@@ -241,8 +247,10 @@ export default class SlTreeItem extends ShoelaceElement {
${when(this.loading, () => html` <sl-spinner></sl-spinner> `)}
${when(
showExpandButton,
// This slot's name changes from `expand-icon` to `collapse-icon` when the tree item is expanded, but we
// do that in the watch handler instead of here in the template because the transition breaks in Firefox.
() => html`
<slot name="${this.expanded ? 'collapse-icon' : 'expand-icon'}">
<slot class="tree-item__expand-icon-slot" name="expand-icon">
<sl-icon
class="tree-item__default-toggle-button"
library="system"