From 3c0fbf5f6789d7822a3c4050a5d56baee0a2f1a9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 26 Jun 2023 16:19:34 -0700 Subject: [PATCH] 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:** 7209f9bc9fa5aaad361532409bc129400643f459 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 --- .../src/components/tree-item/tree-item.e2e.ts | 24 +++++++++ .../src/components/tree-item/tree-item.scss | 8 ++- .../src/components/tree-item/tree-item.tsx | 54 +------------------ 3 files changed, 29 insertions(+), 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 index 580a4c26b58..99b2c0027ec 100644 --- 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` + + ` + ); + + 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 index 5514d402fb3..89011af4006 100644 --- 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 index 3f6ed880c4f..b7733e7323b 100644 --- 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)} > @@ -360,10 +314,6 @@ export class TreeItem ); } - setTransitionEl(el: HTMLDivElement): void { - this.transitionEl = el; - } - //-------------------------------------------------------------------------- // // Event Listeners