Skip to content

feat(list-item, list): add expanded property and deprecate open property #11003

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Mar 5, 2025
Merged

feat(list-item, list): add expanded property and deprecate open property #11003

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9f313a7
feat(list-item): deprecate open/close props in favor of expanded/coll…
Elijbet Dec 6, 2024
baff4a7
update open, closed, and closable props when expanded, collapsed, and…
Elijbet Dec 6, 2024
80016aa
merge and resolve conflicts
Elijbet Feb 13, 2025
ffb8596
expanded prop instead of open, but retain closed/closable
Elijbet Feb 13, 2025
0dccaf3
WIP: expanded in e2e tests
Elijbet Feb 14, 2025
2adfacb
open to expanded styling transition
Elijbet Feb 17, 2025
d797570
cleanup tests
Elijbet Feb 17, 2025
041a083
revert readme lint changes, expanded prop in stories and demo
Elijbet Feb 19, 2025
212b0a6
keep the open/closed tests grouped in a deprecated describe block
Elijbet Feb 28, 2025
1f30e8c
tidy up with describe blocks
Elijbet Feb 28, 2025
93af02d
add logger warning for the deprecation
Elijbet Feb 28, 2025
d1a8bcb
Update external usage of the open property to use expanded instead.
Elijbet Feb 28, 2025
13ee94d
cleanup
Elijbet Feb 28, 2025
fea03c4
reverse describe block changes
Elijbet Mar 3, 2025
eca03ca
add a test that checks that setting open will set expanded
Elijbet Mar 3, 2025
5f9b34d
Merge branch 'dev' into elijbet/6473-update-open-close-pattern
Elijbet Mar 5, 2025
0e6cb7d
refine deprecated prop test name
Elijbet Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 82 additions & 34 deletions packages/calcite-components/src/components/list-item/list-item.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,18 @@ describe("calcite-list-item", () => {
propertyName: "open",
defaultValue: false,
},
{
propertyName: "expanded",
defaultValue: false,
},
{
propertyName: "closed",
defaultValue: false,
},
{
propertyName: "closable",
defaultValue: false,
},
{
propertyName: "dragHandle",
defaultValue: false,
Expand Down Expand Up @@ -90,6 +102,22 @@ describe("calcite-list-item", () => {
propertyName: "sortHandleOpen",
value: true,
},
{
propertyName: "open",
value: true,
},
{
propertyName: "expanded",
value: true,
},
{
propertyName: "closed",
value: true,
},
{
propertyName: "closable",
value: true,
},
]);
});

Expand Down Expand Up @@ -370,50 +398,69 @@ describe("calcite-list-item", () => {
expect(calciteListItemClose).toHaveReceivedEventTimes(1);
});

it("should fire calciteListItemToggle event when opened and closed", async () => {
const page = await newE2EPage({
html: html`<calcite-list-item id="test" display-mode="nested"
><calcite-list display-mode="nested"><calcite-list-item></calcite-list-item></calcite-list
></calcite-list-item>`,
describe("calciteListItemToggle event", () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✨🏆✨

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

const listItem = await page.find("#test");
const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");

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

const expandedButton = await page.find(`#test >>> .${CSS.expandedContainer}`);

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

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

const listItem = await page.find("#test");
const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
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>`,
});

expect(await listItem.getProperty("open")).toBe(false);
const listItem = await page.find("calcite-list-item");
const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");

const openButton = await page.find(`#test >>> .${CSS.openContainer}`);
expect(await listItem.getProperty("expanded")).toBe(false);

await openButton.click();
expect(await listItem.getProperty("open")).toBe(true);
expect(calciteListItemToggle).toHaveReceivedEventTimes(1);
const expandedButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);

await openButton.click();
expect(await listItem.getProperty("open")).toBe(false);
expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
expect(expandedButton.getAttribute("title")).toBe(null);

await expandedButton.click();
expect(await listItem.getProperty("expanded")).toBe(false);
expect(calciteListItemToggle).toHaveReceivedEventTimes(0);

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

it("should not fire calciteListItemToggle event without nested items", async () => {
// Broader functionality related to the 'expanded' prop is covered in the `expanded` tests.
it("should map deprecated 'open' prop to 'expanded' prop", async () => {
const page = await newE2EPage({
html: html`<calcite-list-item display-mode="nested"></calcite-list-item>`,
html: html`<calcite-list-item></calcite-list-item>`,
});

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

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

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

expect(openButton.getAttribute("title")).toBe(null);

await openButton.click();
expect(await listItem.getProperty("open")).toBe(false);
expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
listItem.setProperty("open", true);
await page.waitForChanges();
expect(await listItem.getProperty("expanded")).toBe(true);

await openButton.click();
expect(await listItem.getProperty("open")).toBe(false);
expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
listItem.setProperty("open", false);
await page.waitForChanges();
expect(await listItem.getProperty("expanded")).toBe(false);
});

it("should set displayMode on slotted list", async () => {
Expand All @@ -438,16 +485,16 @@ describe("calcite-list-item", () => {
expect(await list.getProperty("displayMode")).toBe("flat");
});

it("flat list should not render open container", async () => {
it("flat list should not render expanded container", async () => {
const page = await newE2EPage({
html: html`<calcite-list-item display-mode="flat"
><calcite-list><calcite-list-item></calcite-list-item></calcite-list
></calcite-list-item>`,
});

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

expect(openButton).toBe(null);
expect(expandedButton).toBe(null);
});

it("renders with iconStart", async () => {
Expand Down Expand Up @@ -526,6 +573,7 @@ describe("calcite-list-item", () => {
},
);
});

describe(`selection-appearance="border"`, () => {
themed(
html`<calcite-list-item
Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/list-item/list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
margin-inline-start: var(--calcite-list-spacing-indent, theme("spacing.6"));
}

.nested-container--open {
.nested-container--expanded {
@apply flex;
}

Expand Down Expand Up @@ -373,12 +373,12 @@
@apply flex-initial;
}

.open-container {
.expanded-container {
color: var(--calcite-list-icon-color, var(--calcite-color-text-3));
padding-inline: var(--calcite-spacing-xxs);
}

:host(:not([disabled])) .container:hover .open-container {
:host(:not([disabled])) .container:hover .expanded-container {
color: var(--calcite-list-icon-color, var(--calcite-color-text-1));
}

Expand All @@ -388,7 +388,7 @@
.content-end,
.selection-container,
.drag-container,
.open-container {
.expanded-container {
@apply flex items-center;

calcite-action,
Expand All @@ -397,7 +397,7 @@
}
}

.open-container,
.expanded-container,
.selection-container {
@apply cursor-pointer;
}
Expand Down
Loading
Loading