From 5a86ee34ee9764aeede9632c45714cdc46775d23 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 4 Dec 2024 18:14:33 -0600
Subject: [PATCH 1/6] feat(tree,tree-item): update indentation

---
 .../src/components/tree-item/tree-item.scss   | 107 +++++++-----------
 .../src/components/tree-item/tree-item.tsx    |  33 +++---
 2 files changed, 61 insertions(+), 79 deletions(-)

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 35cfb8714c1..22851769d37 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -17,20 +17,20 @@
 
   .node-actions-container {
     @apply min-h-[1.5rem];
-    .node-container {
-      .checkbox,
-      .checkmark,
-      .bullet-point {
-        margin-inline: theme("margin.1");
-      }
-      .icon-start {
-        margin-inline: theme("margin.3");
-      }
-      .chevron {
-        padding: theme("padding.1");
-      }
+    .node-container,
+    .checkbox-container {
+      gap: 0.25rem;
     }
   }
+  .children-container {
+    margin-inline-start: theme("margin.3");
+  }
+}
+
+:host([scale="s"][lines]) {
+  .children-container ::slotted(*) {
+    padding-inline-start: 0.5rem;
+  }
 }
 
 :host([scale="m"]) {
@@ -38,20 +38,19 @@
 
   .node-actions-container {
     @apply min-h-[2rem];
-    .node-container {
-      .checkbox,
-      .checkmark,
-      .bullet-point {
-        margin-inline: theme("margin.2");
-      }
-      .icon-start {
-        margin-inline: theme("margin.3");
-      }
-      .chevron {
-        padding: theme("padding.2");
-      }
+    .node-container,
+    .checkbox-container {
+      gap: 0.5rem;
     }
   }
+  .children-container {
+    margin-inline-start: theme("margin.4");
+  }
+}
+:host([scale="m"][lines]) {
+  .children-container ::slotted(*) {
+    padding-inline-start: 0.6rem;
+  }
 }
 
 :host([scale="l"]) {
@@ -59,21 +58,20 @@
 
   .node-actions-container {
     @apply min-h-[2.75rem];
-    .node-container {
-      .checkbox,
-      .checkmark,
-      .bullet-point {
-        margin-inline: theme("margin.3");
-      }
-      .icon-start {
-        margin-inline: theme("margin.3");
-      }
-      .chevron {
-        padding-inline: var(--calcite-spacing-md);
-        padding-block: var(--calcite-spacing-sm-plus);
-      }
+    .node-container,
+    .checkbox-container {
+      gap: 0.75rem;
     }
   }
+  .children-container {
+    margin-inline-start: theme("margin.6");
+  }
+}
+
+:host([scale="l"][lines]) {
+  .children-container ::slotted(*) {
+    padding-inline-start: 0.8rem;
+  }
 }
 
 :host([lines]) {
@@ -154,7 +152,7 @@
 
 .children-container {
   @apply relative h-0 overflow-hidden opacity-0 origin-top;
-  margin-inline-start: theme("margin.5");
+  // margin-inline-start: theme("margin.5");
   transform: scaleY(0);
   transition:
     var(--calcite-animation-timing) $easing-function,
@@ -198,35 +196,14 @@
   }
 }
 
-:host([selection-mode="none"]:not([has-children])) {
-  &:host([scale="s"]) .node-container {
-    padding-inline-start: theme("padding.2");
-  }
-  &:host([scale="m"]) .node-container {
-    padding-inline-start: theme("padding.4");
-  }
-  &:host([scale="l"]) .node-container {
-    padding-inline-start: theme("padding.6");
-  }
+:host([scale="s"]) .node-container {
+  padding-inline-start: theme("padding.1");
 }
-
-// ancestors selection-mode, dropdown without children
-:host(:not([has-children])) {
-  &:host([scale="s"]) .node-container[data-selection-mode="ancestors"] .checkbox {
-    padding-inline-start: theme("padding.5");
-  }
-  &:host([scale="m"]) .node-container[data-selection-mode="ancestors"] .checkbox {
-    padding-inline-start: theme("padding.6");
-  }
-  &:host([scale="l"]) .node-container[data-selection-mode="ancestors"] .checkbox {
-    padding-inline-start: 1.75rem;
-  }
+:host([scale="m"]) .node-container {
+  padding-inline-start: theme("padding.2");
 }
-// ancestors selection-mode, dropdown with children
-:host([has-children]) .node-container[data-selection-mode="ancestors"] {
-  .checkbox {
-    margin-inline-start: 0;
-  }
+:host([scale="l"]) .node-container {
+  padding-inline-start: theme("padding.3");
 }
 
 // dropdown with children
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 941990ed8da..0daa035b74e 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -354,18 +354,19 @@ export class TreeItem extends LitElement implements InteractiveComponent {
     const showBlank = this.selectionMode === "none" && !this.hasChildren;
     const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
 
-    const chevron = this.hasChildren ? (
-      <calcite-icon
-        class={{
-          [CSS.chevron]: true,
-          [CSS_UTILITY.rtl]: rtl,
-        }}
-        data-test-id="icon"
-        icon={ICONS.chevronRight}
-        onClick={this.iconClickHandler}
-        scale={getIconScale(this.scale)}
-      />
-    ) : null;
+    const chevron =
+      this.hasChildren || this.selectionMode === "ancestors" ? (
+        <calcite-icon
+          class={{
+            [CSS.chevron]: true,
+            [CSS_UTILITY.rtl]: rtl,
+          }}
+          data-test-id="icon"
+          icon={this.hasChildren ? ICONS.chevronRight : ICONS.blank}
+          onClick={this.iconClickHandler}
+          scale={getIconScale(this.scale)}
+        />
+      ) : null;
     const defaultSlotNode: JsxNode = <slot key="default-slot" />;
 
     const checkbox =
@@ -382,7 +383,6 @@ export class TreeItem extends LitElement implements InteractiveComponent {
             }
             scale={getIconScale(this.scale)}
           />
-          <label class={CSS.checkboxLabel}>{defaultSlotNode}</label>
         </div>
       ) : null;
     const selectedIcon = showBulletPoint
@@ -462,8 +462,13 @@ export class TreeItem extends LitElement implements InteractiveComponent {
             >
               {chevron}
               {itemIndicator}
+              {checkbox ? checkbox : null}
               {this.iconStart ? iconStartEl : null}
-              {checkbox ? checkbox : defaultSlotNode}
+              {checkbox ? (
+                <label class={CSS.checkboxLabel}>{defaultSlotNode}</label>
+              ) : (
+                defaultSlotNode
+              )}
             </div>
             <div class={CSS.actionsEnd} hidden={!hasEndActions} ref={this.actionSlotWrapper}>
               {slotNode}

From b951c83369579d550dbfeb40cace504847da1e7e Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 5 Dec 2024 14:31:47 -0600
Subject: [PATCH 2/6] fix indent when lines are set to false

---
 .../src/components/tree-item/tree-item.scss               | 8 --------
 1 file changed, 8 deletions(-)

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 22851769d37..21f9538c293 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -25,9 +25,6 @@
   .children-container {
     margin-inline-start: theme("margin.3");
   }
-}
-
-:host([scale="s"][lines]) {
   .children-container ::slotted(*) {
     padding-inline-start: 0.5rem;
   }
@@ -46,8 +43,6 @@
   .children-container {
     margin-inline-start: theme("margin.4");
   }
-}
-:host([scale="m"][lines]) {
   .children-container ::slotted(*) {
     padding-inline-start: 0.6rem;
   }
@@ -66,9 +61,6 @@
   .children-container {
     margin-inline-start: theme("margin.6");
   }
-}
-
-:host([scale="l"][lines]) {
   .children-container ::slotted(*) {
     padding-inline-start: 0.8rem;
   }

From 57903c876fc4c4ee5db5f40a818442420d312118 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 5 Dec 2024 15:04:42 -0600
Subject: [PATCH 3/6] cleanup

---
 .../calcite-components/src/components/tree-item/tree-item.scss   | 1 -
 1 file changed, 1 deletion(-)

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 21f9538c293..aa9b33b18ac 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -144,7 +144,6 @@
 
 .children-container {
   @apply relative h-0 overflow-hidden opacity-0 origin-top;
-  // margin-inline-start: theme("margin.5");
   transform: scaleY(0);
   transition:
     var(--calcite-animation-timing) $easing-function,

From f6b9babc774358cfbe63813c231161991bf42f55 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 5 Dec 2024 18:18:43 -0600
Subject: [PATCH 4/6] add padding-block

---
 .../src/components/tree-item/tree-item.scss                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 aa9b33b18ac..d64a61555ed 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -188,13 +188,13 @@
 }
 
 :host([scale="s"]) .node-container {
-  padding-inline-start: theme("padding.1");
+  padding: theme("padding.1");
 }
 :host([scale="m"]) .node-container {
-  padding-inline-start: theme("padding.2");
+  padding: theme("padding.2");
 }
 :host([scale="l"]) .node-container {
-  padding-inline-start: theme("padding.3");
+  padding: theme("padding.3");
 }
 
 // dropdown with children

From 3f476b97585eae0b0c7aee9cb6caac9e016d5859 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 5 Dec 2024 23:30:41 -0600
Subject: [PATCH 5/6] tokenize

---
 .../src/components/tree-item/tree-item.scss   | 71 ++++++++-----------
 1 file changed, 31 insertions(+), 40 deletions(-)

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 d64a61555ed..9cee9d5d507 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -1,12 +1,42 @@
+:host([scale="s"]) {
+  --calcite-internal-tree-item-spacing-unit: 0.25rem;
+  --calcite-internal-tree-item-children-container-padding: 1.25rem;
+  --calcite-internal-tree-item-line-left-position: 0.75rem;
+}
+
+:host([scale="m"]) {
+  --calcite-internal-tree-item-spacing-unit: 0.5rem;
+  --calcite-internal-tree-item-children-container-padding: 1.5rem;
+  --calcite-internal-tree-item-line-left-position: 1rem;
+}
+
+:host([scale="l"]) {
+  --calcite-internal-tree-item-spacing-unit: 0.75rem;
+  --calcite-internal-tree-item-children-container-padding: 2.25rem;
+  --calcite-internal-tree-item-line-left-position: 1.5rem;
+}
+
 :host {
   @apply text-color-3
     block
     max-w-full
     cursor-pointer;
+
+  .children-container ::slotted(*) {
+    padding-inline-start: var(--calcite-internal-tree-item-children-container-padding);
+  }
 }
 
 .node-actions-container {
   @apply flex;
+
+  .node-container,
+  .checkbox-container {
+    gap: var(--calcite-internal-tree-item-spacing-unit);
+  }
+  .node-container {
+    padding: var(--calcite-internal-tree-item-spacing-unit);
+  }
 }
 
 @include calcite-hydrated-hidden();
@@ -17,16 +47,6 @@
 
   .node-actions-container {
     @apply min-h-[1.5rem];
-    .node-container,
-    .checkbox-container {
-      gap: 0.25rem;
-    }
-  }
-  .children-container {
-    margin-inline-start: theme("margin.3");
-  }
-  .children-container ::slotted(*) {
-    padding-inline-start: 0.5rem;
   }
 }
 
@@ -35,16 +55,6 @@
 
   .node-actions-container {
     @apply min-h-[2rem];
-    .node-container,
-    .checkbox-container {
-      gap: 0.5rem;
-    }
-  }
-  .children-container {
-    margin-inline-start: theme("margin.4");
-  }
-  .children-container ::slotted(*) {
-    padding-inline-start: 0.6rem;
   }
 }
 
@@ -53,16 +63,6 @@
 
   .node-actions-container {
     @apply min-h-[2.75rem];
-    .node-container,
-    .checkbox-container {
-      gap: 0.75rem;
-    }
-  }
-  .children-container {
-    margin-inline-start: theme("margin.6");
-  }
-  .children-container ::slotted(*) {
-    padding-inline-start: 0.8rem;
   }
 }
 
@@ -76,6 +76,7 @@
         z-default;
     // ensure lines don't overlap focus outline
     block-size: 96%;
+    left: var(--calcite-internal-tree-item-line-left-position);
     content: "";
     background-color: var(--calcite-color-border-2);
   }
@@ -187,16 +188,6 @@
   }
 }
 
-:host([scale="s"]) .node-container {
-  padding: theme("padding.1");
-}
-:host([scale="m"]) .node-container {
-  padding: theme("padding.2");
-}
-:host([scale="l"]) .node-container {
-  padding: theme("padding.3");
-}
-
 // dropdown with children
 :host([has-children]) .node-container {
   .bullet-point,

From 5945edbca5790b4d7f33e106b6ca1d488fe90a4a Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Fri, 6 Dec 2024 18:26:54 -0600
Subject: [PATCH 6/6] refactor

---
 .../src/components/tree-item/tree-item.scss   |  33 +-
 .../src/components/tree/tree.stories.ts       | 395 ++++--------------
 2 files changed, 95 insertions(+), 333 deletions(-)

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 9cee9d5d507..5da9c962735 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -1,19 +1,25 @@
 :host([scale="s"]) {
   --calcite-internal-tree-item-spacing-unit: 0.25rem;
+  --calcite-internal-tree-item-padding-block: 0.25rem;
   --calcite-internal-tree-item-children-container-padding: 1.25rem;
   --calcite-internal-tree-item-line-left-position: 0.75rem;
+  @apply text-n2h;
 }
 
 :host([scale="m"]) {
   --calcite-internal-tree-item-spacing-unit: 0.5rem;
+  --calcite-internal-tree-item-padding-block: 0.5rem;
   --calcite-internal-tree-item-children-container-padding: 1.5rem;
   --calcite-internal-tree-item-line-left-position: 1rem;
+  @apply text-n1h;
 }
 
 :host([scale="l"]) {
   --calcite-internal-tree-item-spacing-unit: 0.75rem;
+  --calcite-internal-tree-item-padding-block: 0.625rem;
   --calcite-internal-tree-item-children-container-padding: 2.25rem;
   --calcite-internal-tree-item-line-left-position: 1.5rem;
+  @apply text-0h;
 }
 
 :host {
@@ -35,37 +41,14 @@
     gap: var(--calcite-internal-tree-item-spacing-unit);
   }
   .node-container {
-    padding: var(--calcite-internal-tree-item-spacing-unit);
+    padding-inline: var(--calcite-internal-tree-item-spacing-unit);
+    padding-block: var(--calcite-internal-tree-item-padding-block);
   }
 }
 
 @include calcite-hydrated-hidden();
 @include disabled();
 
-:host([scale="s"]) {
-  @apply text-n2h;
-
-  .node-actions-container {
-    @apply min-h-[1.5rem];
-  }
-}
-
-:host([scale="m"]) {
-  @apply text-n1h;
-
-  .node-actions-container {
-    @apply min-h-[2rem];
-  }
-}
-
-:host([scale="l"]) {
-  @apply text-0h;
-
-  .node-actions-container {
-    @apply min-h-[2.75rem];
-  }
-}
-
 :host([lines]) {
   .children-container::after {
     @apply transition-default
diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
index cf58db9312a..149bd33b16f 100644
--- a/packages/calcite-components/src/components/tree/tree.stories.ts
+++ b/packages/calcite-components/src/components/tree/tree.stories.ts
@@ -1,29 +1,55 @@
-import { boolean, modesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
-import { ATTRIBUTES } from "../../../.storybook/resources";
+import type { Scale } from "../interfaces";
 import { Tree } from "./tree";
 
-const { selectionMode, scale } = ATTRIBUTES;
-
-type TreeStoryArgs = Pick<Tree, "lines" | "selectionMode" | "scale">;
+/**
+ * This decorator takes HTML for items and will create a composite story for all scales for each specified selection mode.
+ *
+ * @param itemsStory - the HTML story template for items
+ * @param context - the context object
+ * @param context.args - the args object
+ * @param context.args.selectionMode - the selection mode(s) to use for the tree
+ * @param context.args.lines
+ * @returns the composite story for all scales for  specified selection mode
+ */
+function allScaleTreeBuilder(
+  itemsStory: () => string,
+  context: { args: { selectionMode: Tree["selectionMode"]; lines: boolean } },
+): string {
+  const items = itemsStory();
+  const { selectionMode, lines } = context.args;
+  const scales: Scale[] = ["s", "m", "l"];
+
+  return html`
+    <style>
+      .tree-container {
+        flex: 1;
+        margin-right: 10px;
+      }
+      .container {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
+
+    <div class="container">
+      ${scales.map(
+        (scale) => html`
+          <div class="tree-container">
+            <h3>${selectionMode} selection mode + ${scale} scale</h3>
+            <calcite-tree selection-mode="${selectionMode || "single"}" ${lines ? "lines" : ""} scale="${scale}">
+              ${items}
+            </calcite-tree>
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
 
 export default {
   title: "Components/Tree",
-  args: {
-    lines: false,
-    selectionMode: selectionMode.values[0],
-    scale: scale.defaultValue,
-  },
-  argTypes: {
-    selectionMode: {
-      options: selectionMode.values,
-      control: { type: "select" },
-    },
-    scale: {
-      options: scale.values,
-      control: { type: "select" },
-    },
-  },
   parameters: {
     chromatic: {
       delay: 1000,
@@ -31,17 +57,17 @@ export default {
   },
 };
 
-const treeItems = html`
+const treeItems = (expanded = true) => html`
   <calcite-tree-item label="test item">
     <a>Child 1</a>
   </calcite-tree-item>
-  <calcite-tree-item label="test item" icon-start="palette">
+  <calcite-tree-item label="test item" icon-start="palette" ${expanded ? "expanded" : ""}>
     <a>Child 2</a>
     <calcite-tree slot="children" icon-start="palette">
       <calcite-tree-item label="test item">
         <a>Grandchild 1</a>
       </calcite-tree-item>
-      <calcite-tree-item label="test item" icon-start="palette">
+      <calcite-tree-item label="test item" icon-start="palette" ${expanded ? "expanded" : ""}>
         <a>Grandchild 2</a>
         <calcite-tree slot="children" icon-start="palette">
           <calcite-tree-item label="test item">
@@ -54,7 +80,7 @@ const treeItems = html`
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>
-  <calcite-tree-item label="test item">
+  <calcite-tree-item label="test item" ${expanded ? "expanded" : ""}>
     <a>Child 3</a>
     <calcite-tree slot="children">
       <calcite-tree-item label="test item">
@@ -67,21 +93,8 @@ const treeItems = html`
   </calcite-tree-item>
 `;
 
-const slottedLargeDropdown = html`
-  <calcite-dropdown slot="actions-end" id="slottedLargeDropdown" scale="l">
-    <calcite-action slot="trigger" icon="ellipsis" scale="l"></calcite-action>
-    <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
-      <calcite-dropdown-item>Group elements</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Display mode" selection-mode="single">
-      <calcite-dropdown-item selected>Row</calcite-dropdown-item>
-      <calcite-dropdown-item>Column</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-
-const slottedDefaultDropdown = html`
-  <calcite-dropdown slot="actions-end" id="slottedDefaultDropdown">
+const slottedDefaultDropdown = (scale: string) => html`
+  <calcite-dropdown slot="actions-end" id="slottedDefaultDropdown" scale="${scale}">
     <calcite-action slot="trigger" icon="ellipsis"></calcite-action>
     <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
       <calcite-dropdown-item>Group elements</calcite-dropdown-item>
@@ -93,129 +106,66 @@ const slottedDefaultDropdown = html`
   </calcite-dropdown>
 `;
 
-const slottedSmallDropdown = html`
-  <calcite-dropdown slot="actions-end" id="slottedDefaultDropdown" scale="s">
-    <calcite-action slot="trigger" icon="ellipsis" scale="s"></calcite-action>
-    <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
-      <calcite-dropdown-item>Group elements</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Display mode" selection-mode="single">
-      <calcite-dropdown-item selected>Row</calcite-dropdown-item>
-      <calcite-dropdown-item>Column</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-
-const iconStartLargeActionsEnd = html`
+const iconStartLargeActionsEnd = (scale: string) => html`
   <calcite-tree-item label="test item" icon-start="palette" expanded>
-    <a>Child 1</a>
-    ${slottedLargeDropdown} ${slottedLargeDropdown}
+    <a>Child 1 </a>
+    ${slottedDefaultDropdown(scale)} ${slottedDefaultDropdown(scale)}
   </calcite-tree-item>
   <calcite-tree-item label="test item" expanded>
-    <a>Child 2</a>
+    <a>Child 2 </a>
     <calcite-tree slot="children" expanded>
       <calcite-tree-item label="test item" expanded>
-        <a>Grandchild 1</a>
+        <a>Grandchild 1 </a>
         <calcite-tree slot="children" expanded>
           <calcite-tree-item label="test item" icon-start="palette" expanded>
-            <a>Great-Grandchild 1</a>
-            ${slottedLargeDropdown}${slottedLargeDropdown}
+            <a>Great - Grandchild 1 </a>
+            ${slottedDefaultDropdown(scale)}${slottedDefaultDropdown(scale)}
           </calcite-tree-item>
         </calcite-tree>
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>
   <calcite-tree-item label="test item" icon-start="palette" expanded>
-    <a>Child 3</a>
-    ${slottedLargeDropdown}
+    <a>Child 3 </a>
+    ${slottedDefaultDropdown(scale)}
     <calcite-tree slot="children" expanded>
       <calcite-tree-item label="test item" icon-start="palette">
-        <a>Grandchild 1</a>
+        <a>Grandchild 1 </a>
       </calcite-tree-item>
       <calcite-tree-item label="test item" expanded>
-        <a>Grandchild 2</a>
-        ${slottedLargeDropdown}
+        <a>Grandchild 2 </a>
+        ${slottedDefaultDropdown(scale)}
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>
 `;
 
-const slottedDefaultActionsEnd = html`
-  <calcite-tree-item label="test item" icon-start="palette" expanded>
-    <a>Child 1</a>
-  </calcite-tree-item>
-  <calcite-tree-item label="test item" expanded>
-    <a>Child 2</a>
-    <calcite-tree slot="children" expanded>
-      <calcite-tree-item label="test item" expanded>
-        <a>Grandchild 1</a>
-        <calcite-tree slot="children" expanded>
-          <calcite-tree-item label="test item" icon-start="palette" expanded>
-            <a>Great-Grandchild 1</a>
-            ${slottedDefaultDropdown}${slottedDefaultDropdown}
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>
-  </calcite-tree-item>
-`;
+export const singleSelectionMode = (): string => html` ${treeItems()} `;
 
-const slottedSmallActionsEnd = html`
-  <calcite-tree-item label="test item" icon-start="palette" expanded>
-    <a>Child 1</a>
-  </calcite-tree-item>
-  <calcite-tree-item label="test item" expanded>
-    <a>Child 2</a>
-    <calcite-tree slot="children" expanded>
-      <calcite-tree-item label="test item" expanded>
-        <a>Grandchild 1</a>
-        <calcite-tree slot="children" expanded>
-          <calcite-tree-item label="test item" icon-start="palette" expanded>
-            <a>Great-Grandchild 1</a>
-            ${slottedSmallDropdown}${slottedSmallDropdown}
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>
-  </calcite-tree-item>
-`;
+singleSelectionMode.decorators = [allScaleTreeBuilder];
 
-export const simple = (args: TreeStoryArgs): string => html`
-  <calcite-tree ${boolean("lines", args.lines)} selection-mode="${args.selectionMode}" scale="${args.scale}">
-    ${treeItems}
-  </calcite-tree>
-`;
+export const selectionModeNone = (): string => html`${treeItems()}`;
+selectionModeNone.decorators = [allScaleTreeBuilder];
+selectionModeNone.args = { selectionMode: "none" };
 
-export const selectionModeNone = (): string => html` <calcite-tree selection-mode="none">${treeItems}</calcite-tree> `;
+export const multipleSelectionModeWithLines_TestOnly = (): string => html` ${treeItems()} `;
 
-export const withLines_TestOnly = (): string => html`
-  <calcite-tree lines>
-    <calcite-tree-item label="test item"> Child 1 </calcite-tree-item>
-    <calcite-tree-item label="test item" expanded>
-      Child 2
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> Grandchild 1 </calcite-tree-item>
-        <calcite-tree-item label="test item"> Grandchild 2 </calcite-tree-item>
-        <calcite-tree-item label="test item" expanded>
-          Grandchild 3
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> Great-Grandchild 1 </calcite-tree-item>
-            <calcite-tree-item label="test item"> Great-Grandchild 2 </calcite-tree-item>
-            <calcite-tree-item label="test item"> Great-Grandchild 3 </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-`;
+multipleSelectionModeWithLines_TestOnly.decorators = [allScaleTreeBuilder];
+multipleSelectionModeWithLines_TestOnly.args = { lines: true, selectionMode: "multiple" };
 
-export const iconStartAndActionsEnd = (): string => html`
-  <div style="width: 650px">
-    <calcite-tree style="margin: 80px" scale="l"> ${iconStartLargeActionsEnd} </calcite-tree>
-    <calcite-tree style="margin: 80px" scale="m"> ${slottedDefaultActionsEnd} </calcite-tree>
-    <calcite-tree style="margin: 80px" scale="s"> ${slottedSmallActionsEnd} </calcite-tree>
-  </div>
-`;
+export const ancestorsSelectionModeWithLines_TestOnly = (): string => html` ${treeItems()} `;
+
+ancestorsSelectionModeWithLines_TestOnly.decorators = [allScaleTreeBuilder];
+ancestorsSelectionModeWithLines_TestOnly.args = { lines: true, selectionMode: "ancestors" };
+
+export const singlePersistSelectionModeWithLines_TestOnly = (): string => html` ${treeItems()} `;
+
+singlePersistSelectionModeWithLines_TestOnly.decorators = [allScaleTreeBuilder];
+singlePersistSelectionModeWithLines_TestOnly.args = { lines: true, selectionMode: "single-persist" };
+
+export const iconStartAndActionsEnd = (scale: string): string => html` ${iconStartLargeActionsEnd(scale)} `;
+
+iconStartAndActionsEnd.decorators = [allScaleTreeBuilder];
 
 export const treeItemTextContentWraps_TestOnly = (): string => html`
   <calcite-tree style="width: 300px">
@@ -257,10 +207,9 @@ export const treeItemContentIsNotClipped_TestOnly = (): string => html`
   </calcite-tree>
 `;
 
-export const darkModeRTL_TestOnly = (): string => html`
-  <calcite-tree class="calcite-mode-dark" dir="rtl" selection-mode="single" scale="m"> ${treeItems} </calcite-tree>
-`;
+export const darkModeRTL_TestOnly = (): string => html` ${treeItems()} `;
 darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+darkModeRTL_TestOnly.decorators = [allScaleTreeBuilder];
 
 export const OverflowingSubtree = (): string =>
   html`<div style="width:400px">
@@ -298,173 +247,3 @@ export const OverflowingSubtree = (): string =>
         }, 1000);
       });
     </script>`;
-
-export const allSelectionModesExpanded_TestOnly = (): string => html`
-  <h2>ancestors</h2>
-  <calcite-tree selection-mode="ancestors">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>children</h2>
-  <calcite-tree selection-mode="children">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>multichildren</h2>
-  <calcite-tree selection-mode="multichildren">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>multiple</h2>
-  <calcite-tree selection-mode="multiple">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>none</h2>
-  <calcite-tree selection-mode="none">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>single</h2>
-  <calcite-tree selection-mode="single">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-
-  <h2>single-persist</h2>
-  <calcite-tree selection-mode="single-persist">
-    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
-
-    <calcite-tree-item label="test item" expanded>
-      <span>Child 2</span>
-
-      <calcite-tree slot="children">
-        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
-
-        <calcite-tree-item label="test item">
-          <span>Grandchild 3</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>
-`;