Skip to content
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

fix(tree): allow single select only and add indicator #9405

Merged
merged 9 commits into from
May 23, 2024
Merged

fix(tree): allow single select only and add indicator #9405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a517cb3
fix(tree): allow single select only and add indicator
josercarcamo May 23, 2024
5eef759
Merge branch 'main' into josercarcamo/7899-single-persist-bugs
josercarcamo May 23, 2024
89cf8ed
Added e2e for single persist
josercarcamo May 23, 2024
481e1f1
Merge branch 'josercarcamo/7899-single-persist-bugs' of github.com:Es…
josercarcamo May 23, 2024
63c2dff
Merge branch 'main' into josercarcamo/7899-single-persist-bugs
josercarcamo May 23, 2024
fc5ad9e
Fixed selection clearing
josercarcamo May 23, 2024
054f2d9
Merge branch 'main' into josercarcamo/7899-single-persist-bugs
josercarcamo May 23, 2024
40d7f6f
Added single-persist story
josercarcamo May 23, 2024
be86afa
Merge branch 'josercarcamo/7899-single-persist-bugs' of github.com:Es…
josercarcamo May 23, 2024
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
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/tree-item/tree-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent

render(): VNode {
const rtl = getElementDir(this.el) === "rtl";
const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children";
Copy link
Member

Choose a reason for hiding this comment

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

Do existing screenshot tests show changes? If not, can we add a screenshot test for he bullet point?

const showBulletPoint =
this.selectionMode === "single" ||
this.selectionMode === "children" ||
this.selectionMode === "single-persist";
const showCheckmark =
this.selectionMode === "multiple" || this.selectionMode === "multichildren";
const showBlank = this.selectionMode === "none" && !this.hasChildren;
Expand Down
31 changes: 31 additions & 0 deletions packages/calcite-components/src/components/tree/tree.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1348,5 +1348,36 @@ describe("calcite-tree", () => {
await directItemClick(page, gc1);
expect(await tree.getProperty("selectedItems")).toHaveLength(0);
});

it("single-persist allows only one selection", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-tree selection-mode="single-persist">
<calcite-tree-item id="child1">Child 1</calcite-tree-item>
<calcite-tree-item id="sub1">
Child 2
<calcite-tree slot="children" selection-mode="single-persist">
<calcite-tree-item id="gc1">Grandchild 1</calcite-tree-item>
<calcite-tree-item>Grandchild 2</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
`);
const tree = await page.find("calcite-tree");
expect(await tree.getProperty("selectedItems")).toHaveLength(0);
const child1 = await page.find("#child1");
await directItemClick(page, child1);
expect(await tree.getProperty("selectedItems")).toHaveLength(1);
await directItemClick(page, child1);
expect(await tree.getProperty("selectedItems")).toHaveLength(1);
const sub1 = await page.find("#sub1");
await directItemClick(page, sub1);
expect(await tree.getProperty("selectedItems")).toHaveLength(1);
const gc1 = await page.find("#gc1");
await directItemClick(page, gc1);
expect(await tree.getProperty("selectedItems")).toHaveLength(1);
await directItemClick(page, gc1);
expect(await tree.getProperty("selectedItems")).toHaveLength(1);
});
});
});
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/tree/tree.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export default {
},
};

const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"];
const selectionModes = ["single", "single-persist", "children", "multichildren", "ancestors", "none", "multiple"];

export const simple = (): string => html`
<calcite-tree
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/tree/tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,8 @@ export class Tree {
(((this.selectionMode === "single" || this.selectionMode === "multiple") &&
childItems.length <= 0) ||
this.selectionMode === "children" ||
this.selectionMode === "multichildren");
this.selectionMode === "multichildren" ||
(this.selectionMode === "single-persist" && !target.hasChildren));

const shouldUpdateExpand =
["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&
Expand Down
55 changes: 55 additions & 0 deletions packages/calcite-components/src/demos/tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,61 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
</div>
</div>

<!-- single-persist select -->
<div class="parent">
<div class="child right-aligned-text">single persist select</div>

<div class="child">
<calcite-tree lines selection-mode="single-persist" scale="s">
<calcite-tree-item> Child 1 </calcite-tree-item>

<calcite-tree-item>
Child 2

<calcite-tree slot="children" selection-mode="single-persist">
<calcite-tree-item> Grandchild 1 </calcite-tree-item>

<calcite-tree-item> Grandchild 2 </calcite-tree-item>

<calcite-tree-item>
Grandchild 3
<calcite-tree slot="children" selection-mode="single-persist">
<calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
<calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
<calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</div>

<div class="child">
<calcite-tree lines selection-mode="single-persist" scale="m">
<calcite-tree-item> Child 1 </calcite-tree-item>

<calcite-tree-item>
Child 2

<calcite-tree slot="children" selection-mode="single-persist">
<calcite-tree-item> Grandchild 1 </calcite-tree-item>

<calcite-tree-item> Grandchild 2 </calcite-tree-item>

<calcite-tree-item>
Grandchild 3
<calcite-tree slot="children" selection-mode="single-persist">
<calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
<calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
<calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</div>
</div>

<!-- multiple select -->
<div class="parent">
<div class="child right-aligned-text">multiple select</div>
Expand Down
Loading