fix(tree-item): ensure expanded tree-item is displayed when expanded …

…and made visible (#7216) **Related Issue:** #6575 ## Summary This updates the styling on tree items to ensure they are rendered regardless of its expand/collapse transition. **Note:** 7209f9b removes `OpenCloseComponent` implementation since the hooks no longer did anything. We can reapply it once we add corresponding events to tree items. Release-As: 1.4.3 --------- Co-authored-by: Ben Elan <no-reply@benelan.dev>
Esri · Jun 26, 2023 · 3c0fbf5 · 3c0fbf5
1 parent 311e3b5
commit 3c0fbf5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 57 deletions.
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -416,4 +416,28 @@ describe("calcite-tree-item", () => {
 
     expect(await page.evaluate(() => document.activeElement.id)).toBe("xlr");
   });
+
+  it("displaying an expanded item is visible", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`
+        <calcite-tree id="root" style="display:none;">
+          <calcite-tree-item expanded
+            >parent
+            <calcite-tree slot="children">
+              <calcite-tree-item id="child">child</calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>
+      `
+    );
+
+    await page.$eval("#root", (root: HTMLCalciteTreeElement) => (root.style.display = ""));
+    await page.waitForChanges();
+
+    const item = await page.$("#child");
+    const itemBounds = await item.boundingBox();
+
+    expect(itemBounds.height).not.toBe(0);
+  });
 });
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -136,17 +136,15 @@
 }
 
 .children-container {
-  @apply relative h-0 overflow-hidden;
+  @apply relative h-0 overflow-hidden opacity-0 origin-top;
   margin-inline-start: theme("margin.5");
   transform: scaleY(0);
-  opacity: 0;
   transition: var(--calcite-animation-timing) $easing-function, opacity var(--calcite-animation-timing) $easing-function,
     all var(--calcite-animation-timing) ease-in-out; // note that we're transitioning transform, not height!
-  transform-origin: top; // keep the top of the element in the same place. this is optional.
 
   .item--expanded > & {
-    @apply overflow-visible;
-    opacity: 1;
+    @apply overflow-visible opacity-100;
+    transform: none;
     block-size: auto;
   }
 }

diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -30,7 +30,6 @@ import {
   InteractiveComponent,
   updateHostInteraction
 } from "../../utils/interactive";
-import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { CSS_UTILITY } from "../../utils/resources";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
 import { TreeItemSelectDetail } from "./interfaces";
@@ -46,9 +45,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
   styleUrl: "tree-item.scss",
   shadow: true
 })
-export class TreeItem
-  implements ConditionalSlotComponent, InteractiveComponent, OpenCloseComponent
-{
+export class TreeItem implements ConditionalSlotComponent, InteractiveComponent {
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -83,7 +80,6 @@ export class TreeItem
   @Watch("expanded")
   expandedHandler(newValue: boolean): void {
     this.updateParentIsExpanded(this.el, newValue);
-    onToggleOpenCloseComponent(this, true);
   }
 
   /**
@@ -124,48 +120,11 @@ export class TreeItem
   @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode;
 
   @Watch("selectionMode")
-  getselectionMode(): void {
+  getSelectionMode(): void {
     this.isSelectionMultiLike =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
   }
 
-  openTransitionProp = "opacity";
-
-  transitionProp = "expanded";
-
-  /**
-   * Specifies element that the transition is allowed to emit on.
-   */
-  transitionEl: HTMLDivElement;
-
-  /**
-   * Defines method for `beforeOpen` event handler.
-   */
-  onBeforeOpen(): void {
-    this.transitionEl.style.transform = "scaleY(1)";
-  }
-
-  /**
-   * Defines method for `open` event handler:
-   */
-  onOpen(): void {
-    this.transitionEl.style.transform = "none";
-  }
-
-  /**
-   * Defines method for `beforeClose` event handler:
-   */
-  onBeforeClose(): void {
-    // pattern needs to be defined on how we emit events for components without `open` prop.
-  }
-
-  /**
-   * Defines method for `close` event handler:
-   */
-  onClose(): void {
-    this.transitionEl.style.transform = "scaleY(0)";
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -213,9 +172,6 @@ export class TreeItem
   }
 
   componentWillLoad(): void {
-    if (this.expanded) {
-      onToggleOpenCloseComponent(this, true);
-    }
     requestAnimationFrame(() => (this.updateAfterInitialRender = true));
   }
 
@@ -350,8 +306,6 @@ export class TreeItem
             data-test-id="calcite-tree-children"
             onClick={this.childrenClickHandler}
             role={this.hasChildren ? "group" : undefined}
-            // eslint-disable-next-line react/jsx-sort-props
-            ref={(el) => this.setTransitionEl(el)}
           >
             <slot name={SLOTS.children} />
           </div>
@@ -360,10 +314,6 @@ export class TreeItem
     );
   }
 
-  setTransitionEl(el: HTMLDivElement): void {
-    this.transitionEl = el;
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Event Listeners