Skip to content

Commit

Permalink
update open, closed, and closable props when expanded, collapsed, and…
Browse files Browse the repository at this point in the history 
… collapsible are set
  • Loading branch information
@Elijbet
Elijbet committed Dec 6, 2024
1 parent 9f313a7 commit baff4a7
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 57 deletions.
43 changes: 18 additions & 25 deletions packages/calcite-components/src/components/list-item/list-item.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,22 @@ describe("calcite-list-item", () => {
propertyName: "expanded",
defaultValue: false,
},
{
propertyName: "closed",
defaultValue: false,
},
{
propertyName: "collapsed",
defaultValue: false,
},
{
propertyName: "closable",
defaultValue: false,
},
{
propertyName: "collapsible",
defaultValue: false,
},
{
propertyName: "dragHandle",
defaultValue: false,
Expand Down Expand Up @@ -345,13 +361,13 @@ describe("calcite-list-item", () => {
it("should fire close event when closed", async () => {
const page = await newE2EPage({ html: "<calcite-list-item closable>test</calcite-list-item>" });

const calciteListItemClose = await page.spyOnEvent("calciteListItemClose", "window");
const calciteListItemCollapsed = await page.spyOnEvent("calciteListItemCollapsed", "window");

const closeButton = await page.find(`calcite-list-item >>> .${CSS.actionsEnd} calcite-action`);

await closeButton.click();

expect(calciteListItemClose).toHaveReceivedEventTimes(1);
expect(calciteListItemCollapsed).toHaveReceivedEventTimes(1);
});

it("should fire calciteListItemToggle event when opened and closed", async () => {
Expand All @@ -377,29 +393,6 @@ describe("calcite-list-item", () => {
expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
});

it("should fire calciteListItemToggle event when expanded and collapsed", async () => {
const page = await newE2EPage({
html: html`<calcite-list-item display-mode="nested"
><calcite-list><calcite-list-item></calcite-list-item></calcite-list
></calcite-list-item>`,
});

const listItem = await page.find("calcite-list-item");
const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");

expect(await listItem.getProperty("expanded")).toBe(false);

const openButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);

await openButton.click();
expect(await listItem.getProperty("expanded")).toBe(true);
expect(calciteListItemToggle).toHaveReceivedEventTimes(1);

await openButton.click();
expect(await listItem.getProperty("expanded")).toBe(false);
expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
});

it("should not fire calciteListItemToggle event without nested items", async () => {
const page = await newE2EPage({
html: html`<calcite-list-item display-mode="nested"></calcite-list-item>`,
Expand Down
62 changes: 30 additions & 32 deletions packages/calcite-components/src/components/list-item/list-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ export class ListItem
calciteInternalListItemToggle = createEvent({ cancelable: false });

/** Fires when the close button is clicked. */
calciteListItemCollapse = createEvent({ cancelable: false });
calciteListItemCollapsed = createEvent({ cancelable: false });

/** Fires when the component is selected. */
calciteListItemSelect = createEvent({ cancelable: false });
Expand Down Expand Up @@ -378,26 +378,31 @@ export class ListItem
To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
Please refactor your code to reduce the need for this check.
Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
if (changes.has("expanded")) {
this.open = this.expanded;
}

if (changes.has("collapsible")) {
this.closable = this.collapsible;
}

if (changes.has("collapsed")) {
this.closed = this.collapsed;
}

if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
this.activeHandler(this.active);
}

if (
(changes.has("closed") || changes.has("collapsed")) &&
(this.hasUpdated || this.closed !== false || this.collapsed !== false)
) {
if (changes.has("closed") && (this.hasUpdated || this.closed !== false)) {
this.handleCollapsedChange();
}

if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
this.handleDisabledChange();
}

if (
changes.has("open") ||
(changes.has("expanded") &&
(this.hasUpdated || this.open !== false || this.expanded !== false))
) {
if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
this.handleExpandedChange();
}

Expand Down Expand Up @@ -518,8 +523,8 @@ export class ListItem
}

private handleCollapseClick(): void {
this.closed = this.collapsed = true;
this.calciteListItemCollapse.emit();
this.closed = true;
this.calciteListItemCollapsed.emit();
}

private handleContentSlotChange(event: Event): void {
Expand Down Expand Up @@ -578,8 +583,8 @@ export class ListItem
this.toggle();
}

private toggle(value = !this.open || !this.expanded): void {
this.open = this.expanded = value;
private toggle(value = !this.open): void {
this.open = value;
this.calciteListItemToggle.emit();
}

Expand Down Expand Up @@ -631,7 +636,6 @@ export class ListItem
actionsStartEl: { value: actionsStartEl },
actionsEndEl: { value: actionsEndEl },
open,
expanded,
expandable,
} = this;

Expand All @@ -649,7 +653,7 @@ export class ListItem
event.preventDefault();
const nextIndex = currentIndex + 1;
if (currentIndex === -1) {
if ((!open || !expanded) && expandable) {
if (!open && expandable) {
this.toggle(true);
this.focusCell(null);
} else if (cells[0]) {
Expand All @@ -663,7 +667,7 @@ export class ListItem
const prevIndex = currentIndex - 1;
if (currentIndex === -1) {
this.focusCell(null);
if ((open || expanded) && expandable) {
if (open && expandable) {
this.toggle(false);
} else {
this.calciteInternalFocusPreviousItem.emit();
Expand Down Expand Up @@ -789,7 +793,7 @@ export class ListItem
}

private renderExpanded(): JsxNode {
const { el, open, expanded, expandable, messages, displayMode, scale } = this;
const { el, open, expandable, messages, displayMode, scale } = this;

if (displayMode !== "nested") {
return null;
Expand All @@ -798,7 +802,7 @@ export class ListItem
const dir = getElementDir(el);

const icon = expandable
? open || expanded
? open
? ICONS.open
: dir === "rtl"
? ICONS.collapsedRTL
Expand All @@ -807,11 +811,7 @@ export class ListItem

const iconScale = getIconScale(scale);

const tooltip = expandable
? open || expanded
? messages.collapse
: messages.expand
: undefined;
const tooltip = expandable ? (open ? messages.collapse : messages.expand) : undefined;

const expandedClickHandler = expandable ? this.handleToggleClick : undefined;

Expand Down Expand Up @@ -845,19 +845,19 @@ export class ListItem
}

private renderActionsEnd(): JsxNode {
const { label, hasActionsEnd, closable, collapsible, messages } = this;
const { label, hasActionsEnd, closable, messages } = this;
return (
<div
ariaLabel={label}
class={{ [CSS.actionsEnd]: true, [CSS.gridCell]: true }}
hidden={!(hasActionsEnd || closable || collapsible)}
hidden={!(hasActionsEnd || closable)}
key="actions-end-container"
onFocusIn={this.focusCellActionsEnd}
ref={this.actionsEndEl}
role="gridcell"
>
<slot name={SLOTS.actionsEnd} onSlotChange={this.handleActionsEndSlotChange} />
{closable || collapsible ? (
{closable ? (
<calcite-action
appearance="transparent"
class={CSS.collapse}
Expand Down Expand Up @@ -914,7 +914,7 @@ export class ListItem
<div
class={{
[CSS.nestedContainer]: true,
[CSS.nestedContainerExpanded]: this.expandable && (this.open || this.expanded),
[CSS.nestedContainerExpanded]: this.expandable && this.open,
}}
>
<slot onSlotChange={this.handleDefaultSlotChange} ref={this.defaultSlotEl} />
Expand Down Expand Up @@ -976,7 +976,6 @@ export class ListItem
const {
expandable,
open,
expanded,
level,
active,
label,
Expand All @@ -985,7 +984,6 @@ export class ListItem
selectionMode,
interactionMode,
closed,
collapsed,
filterHidden,
bordered,
disabled,
Expand All @@ -1009,7 +1007,7 @@ export class ListItem
<InteractiveContainer disabled={disabled}>
<div class={{ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered }}>
<div
ariaExpanded={expandable ? open || expanded : null}
ariaExpanded={expandable ? open : null}
ariaLabel={label}
ariaLevel={level}
ariaSelected={selected}
Expand All @@ -1021,7 +1019,7 @@ export class ListItem
[CSS.containerBorderSelected]: selectionBorderSelected,
[CSS.containerBorderUnselected]: selectionBorderUnselected,
}}
hidden={closed || collapsed || filterHidden}
hidden={closed || filterHidden}
onFocus={this.focusCellNull}
onFocusIn={this.emitInternalListItemActive}
onKeyDown={this.handleItemKeyDown}
Expand Down

0 comments on commit baff4a7

Please sign in to comment.