fix(tree-item): restore selection icon to bullet when selection-mode='single'|'single-persist'|'children' (#13915)

**Related Issue:** #13817

Restores selection icon to bullet-point when
`selection-mode='single'|'single-persist'|'children'`

Author: anveshmekala

packages/components/src/components/tree-item/resources.ts

@@ -5,13 +5,13 @@ export const CSS = {
   checkbox: "checkbox",
   checkboxContainer: "checkbox-container",
   checkboxLabel: "checkbox-label",
-  checkmarkIcon: "checkmark",
   chevron: "chevron",
   childrenContainer: "children-container",
   iconStart: "icon-start",
   itemExpanded: "item--expanded",
   nodeAndActionsContainer: "node-actions-container",
   nodeContainer: "node-container",
+  selectionIcon: "selection-icon",
 };
 
 export const SLOTS = {
@@ -21,6 +21,7 @@ export const SLOTS = {
 
 export const ICONS: Record<string, IconName> = {
   blank: "blank",
+  bulletPoint: "bullet-point",
   checkmark: "check",
   checkSquareF: "check-square-f",
   chevronRight: "chevron-right",

packages/components/src/components/tree-item/tree-item.e2e.ts

@@ -472,7 +472,7 @@ describe("calcite-tree-item", () => {
           },
           "--calcite-tree-selected-icon-color": {
             targetProp: "color",
-            shadowSelector: `.${CSS.checkmarkIcon}`,
+            shadowSelector: `.${CSS.selectionIcon}`,
             selector: "calcite-tree-item",
           },
         },
@@ -486,7 +486,7 @@ describe("calcite-tree-item", () => {
         {
           "--calcite-tree-selected-icon-color": {
             targetProp: "color",
-            shadowSelector: `.${CSS.checkmarkIcon}`,
+            shadowSelector: `.${CSS.selectionIcon}`,
             selector: "calcite-tree-item",
           },
         },

packages/components/src/components/tree-item/tree-item.scss

@@ -178,8 +178,7 @@
 
 .node-container {
   @apply relative flex grow items-center min-w-0;
-
-  .checkmark {
+  .selection-icon {
     @apply transition-default opacity-0;
     color: var(--calcite-color-border-1);
   }
@@ -188,7 +187,7 @@
 .node-container:hover,
 :host([selected]) .node-container:hover,
 :host(:focus:not([disabled])) .node-container {
-  .checkmark {
+  .selection-icon {
     @apply opacity-100;
   }
 }
@@ -204,15 +203,15 @@
     --calcite-icon-color: var(--calcite-internal-tree-item-text-color);
   }
 
-  .checkmark {
+  .selection-icon {
     @apply opacity-100;
     color: var(--calcite-tree-selected-icon-color, var(--calcite-color-brand));
   }
 }
 
 // dropdown with children
 :host([has-children]) .node-container {
-  .checkmark {
+  .selection-icon {
     @apply hidden;
   }
 }
@@ -235,7 +234,7 @@
 }
 
 :host([selected]) {
-  .checkmark {
+  .selection-icon {
     color: var(--calcite-tree-selected-icon-color, var(--calcite-color-brand));
   }
   .checkbox {

packages/components/src/components/tree-item/tree-item.tsx

@@ -360,14 +360,29 @@ export class TreeItem extends LitElement {
     }
   }
 
+  private getSelectionIcon(): IconName {
+    const { selectionMode, hasChildren } = this;
+    if (
+      selectionMode === "single" ||
+      selectionMode === "children" ||
+      selectionMode === "single-persist"
+    ) {
+      return ICONS.bulletPoint;
+    } else if (selectionMode === "multiple" || selectionMode === "multichildren") {
+      return ICONS.checkmark;
+    } else if (selectionMode === "none" && !hasChildren) {
+      return ICONS.blank;
+    }
+    return null;
+  }
+
   //#endregion
 
   //#region Rendering
 
   override render(): JsxNode {
     const rtl = getElementDir(this.el) === "rtl";
-    const showCheckmark = this.selectionMode !== "none" && this.selectionMode !== "ancestors";
-    const showBlank = this.selectionMode === "none" && !this.hasChildren;
+    const selectionIcon = this.getSelectionIcon();
     const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
 
     const chevron =
@@ -401,14 +416,14 @@ export class TreeItem extends LitElement {
           />
         </div>
       ) : null;
-    const selectedIcon = showCheckmark ? ICONS.checkmark : showBlank ? ICONS.blank : null;
-    const itemIndicator = selectedIcon ? (
+
+    const itemIndicator = selectionIcon ? (
       <calcite-icon
         class={{
-          [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
+          [CSS.selectionIcon]: true,
           [CSS_UTILITY.rtl]: rtl,
         }}
-        icon={selectedIcon}
+        icon={selectionIcon}
         scale={getIconScale(this.scale)}
       />
     ) : null;

packages/components/src/components/tree/tree.stories.ts

@@ -57,8 +57,8 @@ export default {
   },
 };
 
-const treeItems = (expanded = true) => html`
-  <calcite-tree-item label="test item">
+const treeItems = (expanded = true, isSelectionModeNone = false) => html`
+  <calcite-tree-item label="test item" ${!isSelectionModeNone ? "selected" : ""}>
     <a>Child 1</a>
   </calcite-tree-item>
   <calcite-tree-item label="test item" icon-start="palette" ${expanded ? "expanded" : ""}>
@@ -144,7 +144,7 @@ export const singleSelectionMode = (): string => html` ${treeItems()} `;
 singleSelectionMode.decorators = [allScaleTreeBuilder];
 singleSelectionMode.args = { selectionMode: "single" };
 
-export const selectionModeNone = (): string => html`${treeItems()}`;
+export const selectionModeNone = (): string => html`${treeItems(true, true)}`;
 selectionModeNone.decorators = [allScaleTreeBuilder];
 selectionModeNone.args = { selectionMode: "none" };