feat(tree,tree-item): update indentation (#10990)

**Related Issue:** #7096 ## Summary Updates padding indentation for `tree-item`'s in `tree`
Esri · Dec 12, 2024 · 5970cd3 · 5970cd3
1 parent 796b89b
commit 5970cd3
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 417 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
@@ -1,80 +1,53 @@
+: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 {
   @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;
-}
-
-@include calcite-hydrated-hidden();
-@include disabled();
-
-:host([scale="s"]) {
-  @apply text-n2h;
 
-  .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: var(--calcite-internal-tree-item-spacing-unit);
   }
-}
-
-:host([scale="m"]) {
-  @apply text-n1h;
-
-  .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 {
+    padding-inline: var(--calcite-internal-tree-item-spacing-unit);
+    padding-block: var(--calcite-internal-tree-item-padding-block);
   }
 }
 
-:host([scale="l"]) {
-  @apply text-0h;
-
-  .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);
-      }
-    }
-  }
-}
+@include calcite-hydrated-hidden();
+@include disabled();
 
 :host([lines]) {
   .children-container::after {
@@ -86,6 +59,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);
   }
@@ -154,7 +128,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,
@@ -198,37 +171,6 @@
   }
 }
 
-: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");
-  }
-}
-
-// 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;
-  }
-}
-// ancestors selection-mode, dropdown with children
-:host([has-children]) .node-container[data-selection-mode="ancestors"] {
-  .checkbox {
-    margin-inline-start: 0;
-  }
-}
-
 // dropdown with children
 :host([has-children]) .node-container {
   .bullet-point,

diff --git 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}