From 728f42b4ad219f5c947cfd5226db7959c3cfd9c1 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 9 Feb 2023 10:04:53 -0800
Subject: [PATCH] fix(tree-item): preserves consistent height with or w/t
 actions-end  (#6403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** #6361, #3127


## Summary
Moved the `actions-end` slot outside of the `node-container` layout and
placed it next to it instead, similar to `notice`. This way the padding
on the `node-container` does not add to the action-ends.

Expected consistent height on the `tree-item` when bringing in
`actions-end` can be preserved like this (here to show designers how
this can be demo-ed to end-users).

s (24) tree-item: s slotted component + s action
m (32) tree-item: m slotted component + m action
l (48) tree-item: l slotted component + l action


https://user-images.githubusercontent.com/19231036/216716464-8413540a-85f5-4183-a2b1-b67652ae1384.mov


We need to follow up on clipping the action:

- We’re not normally clipping actions to accommodate component heights,
it’s inconsistent with how we normally handle slots. So here I’m
clipping the actions for the time being and marking this internally as a
known issue (Figma and implementation side)
- Large clips outline: clips top and bottom, will be added to the note
above.
---
 src/components/tree-item/resources.ts   |   3 +-
 src/components/tree-item/tree-item.scss |  86 ++++++++++++--------
 src/components/tree-item/tree-item.tsx  |  27 ++++---
 src/components/tree/tree.stories.ts     | 101 +++++++++++++++++++-----
 4 files changed, 154 insertions(+), 63 deletions(-)

diff --git a/src/components/tree-item/resources.ts b/src/components/tree-item/resources.ts
index 297a60be9b3..e22f6e946b2 100644
--- a/src/components/tree-item/resources.ts
+++ b/src/components/tree-item/resources.ts
@@ -8,7 +8,8 @@ export const CSS = {
   bulletPointIcon: "bullet-point",
   checkmarkIcon: "checkmark",
   itemExpanded: "item--expanded",
-  iconStart: "icon-start"
+  iconStart: "icon-start",
+  nodeAndActionsContainer: "node-actions-container"
 };
 
 export const SLOTS = {
diff --git a/src/components/tree-item/tree-item.scss b/src/components/tree-item/tree-item.scss
index 539bb8cb5fa..6d9190f7e0f 100644
--- a/src/components/tree-item/tree-item.scss
+++ b/src/components/tree-item/tree-item.scss
@@ -9,23 +9,34 @@
   @apply hidden;
 }
 
+// Revisit: We don't normally clip actions to accommodate component heights, it’s inconsistent with how we normally handle slots.
+// This also results in clipping the top/bottom of the blue focus outline.
+.node-actions-container {
+  @apply overflow-hidden flex justify-between;
+}
+
 @include calciteHydratedHidden();
 @include disabled();
 
 :host([scale="s"]) {
   @apply text-n2h;
 
-  .node-container {
-    --calcite-tree-padding-y: theme("padding.1");
-    .checkbox,
-    .chevron,
-    .checkmark,
-    .bullet-point {
-      margin-inline: theme("margin.1");
+  .node-actions-container {
+    @apply h-6;
+    .node-container {
+      --calcite-tree-padding-y: theme("padding.1");
+      .checkbox,
+      .chevron,
+      .checkmark,
+      .bullet-point {
+        margin-inline: theme("margin.1");
+      }
+      .icon-start {
+        margin-inline: theme("margin.3");
+      }
     }
-    .icon-start,
     .actions-end {
-      margin-inline: theme("margin.1");
+      @apply inline-flex;
     }
   }
 }
@@ -33,17 +44,22 @@
 :host([scale="m"]) {
   @apply text-n1h;
 
-  .node-container {
-    --calcite-tree-padding-y: theme("padding.2");
-    .checkbox,
-    .chevron,
-    .checkmark,
-    .bullet-point {
-      margin-inline: theme("margin.2");
+  .node-actions-container {
+    @apply h-8;
+    .node-container {
+      --calcite-tree-padding-y: theme("padding.2");
+      .checkbox,
+      .chevron,
+      .checkmark,
+      .bullet-point {
+        margin-inline: theme("margin.2");
+      }
+      .icon-start {
+        margin-inline: theme("margin.3");
+      }
     }
-    .icon-start,
     .actions-end {
-      margin-inline: theme("margin.2");
+      @apply inline-flex;
     }
   }
 }
@@ -51,17 +67,22 @@
 :host([scale="l"]) {
   @apply text-0h;
 
-  .node-container {
-    --calcite-tree-padding-y: theme("padding.3");
-    .checkbox,
-    .chevron,
-    .checkmark,
-    .bullet-point {
-      margin-inline: theme("margin.3");
+  .node-actions-container {
+    @apply h-12;
+    .node-container {
+      --calcite-tree-padding-y: theme("padding.3");
+      .checkbox,
+      .chevron,
+      .checkmark,
+      .bullet-point {
+        margin-inline: theme("margin.3");
+      }
+      .icon-start {
+        margin-inline: theme("margin.3");
+      }
     }
-    .icon-start,
     .actions-end {
-      margin-inline: theme("margin.3");
+      @apply inline-flex;
     }
   }
 }
@@ -102,14 +123,17 @@
 // focus styles
 :host {
   @apply focus-base;
+  &:focus,
+  &:active {
+    @apply focus-inset outline-none;
+  }
 }
 
-:host(:focus) {
+:host(:focus:not([disabled])) {
   @apply focus-inset outline-none;
 }
 
-slot[name="actions-end"]::slotted(*),
-.actions-end {
+slot[name="actions-end"]::slotted(*) {
   @apply flex self-stretch flex-row items-center overflow-visible;
 }
 
@@ -239,7 +263,7 @@ slot[name="actions-end"]::slotted(*),
     transform: rotate(180deg);
   }
 
-  .item--expanded > .node-container > & {
+  .item--expanded .node-container > & {
     transform: rotate(90deg);
   }
 }
diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx
index b94802c1b93..5a52e2a6e1c 100644
--- a/src/components/tree-item/tree-item.tsx
+++ b/src/components/tree-item/tree-item.tsx
@@ -311,22 +311,25 @@ export class TreeItem
         role="treeitem"
       >
         <div class={{ [CSS.itemExpanded]: isExpanded }}>
-          <div
-            class={{
-              [CSS.nodeContainer]: true,
-              [CSS_UTILITY.rtl]: rtl
-            }}
-            data-selection-mode={this.selectionMode}
-            ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}
-          >
-            {chevron}
-            {itemIndicator}
-            {this.iconStart ? iconStartEl : null}
-            {checkbox ? checkbox : defaultSlotNode}
+          <div class={CSS.nodeAndActionsContainer}>
+            <div
+              class={{
+                [CSS.nodeContainer]: true,
+                [CSS_UTILITY.rtl]: rtl
+              }}
+              data-selection-mode={this.selectionMode}
+              ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}
+            >
+              {chevron}
+              {itemIndicator}
+              {this.iconStart ? iconStartEl : null}
+              {checkbox ? checkbox : defaultSlotNode}
+            </div>
             <div class={CSS.actionsEnd} hidden={!hasEndActions}>
               {slotNode}
             </div>
           </div>
+
           <div
             class={{
               [CSS.childrenContainer]: true,
diff --git a/src/components/tree/tree.stories.ts b/src/components/tree/tree.stories.ts
index e3d663dc417..760e2883db2 100644
--- a/src/components/tree/tree.stories.ts
+++ b/src/components/tree/tree.stories.ts
@@ -41,8 +41,21 @@ const treeItems = html`
   </calcite-tree-item>
 `;
 
-const slottedDropdown = html`
-  <calcite-dropdown slot="actions-end" id="slottedDropdown">
+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="multi">
+      <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">
     <calcite-action slot="trigger" icon="ellipsis"></calcite-action>
     <calcite-dropdown-group group-title="Settings" selection-mode="multi">
       <calcite-dropdown-item>Group elements</calcite-dropdown-item>
@@ -54,24 +67,33 @@ const slottedDropdown = html`
   </calcite-dropdown>
 `;
 
-const treeItemsWithSlottedDropdownsAndIconStart = html`
+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="multi">
+      <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`
   <calcite-tree-item icon-start="${select("icon-start", iconNames, "palette")}" expanded>
     <a>Child 1</a>
-    ${slottedDropdown} ${slottedDropdown}
+    ${slottedLargeDropdown} ${slottedLargeDropdown}
   </calcite-tree-item>
-  <calcite-tree-item>
+  <calcite-tree-item expanded>
     <a>Child 2</a>
     <calcite-tree slot="children" expanded>
-      <calcite-tree-item>
+      <calcite-tree-item expanded>
         <a>Grandchild 1</a>
-        ${slottedDropdown} ${slottedDropdown}
-      </calcite-tree-item>
-      <calcite-tree-item>
-        <a>Grandchild 2</a>
         <calcite-tree slot="children" expanded>
           <calcite-tree-item icon-start="${select("icon-start", iconNames, "palette")}" expanded>
             <a>Great-Grandchild 1</a>
-            ${slottedDropdown}
+            ${slottedLargeDropdown}${slottedLargeDropdown}
           </calcite-tree-item>
         </calcite-tree>
       </calcite-tree-item>
@@ -79,14 +101,54 @@ const treeItemsWithSlottedDropdownsAndIconStart = html`
   </calcite-tree-item>
   <calcite-tree-item icon-start="${select("icon-start", iconNames, "palette")}" expanded>
     <a>Child 3</a>
-    ${slottedDropdown}
+    ${slottedLargeDropdown}
     <calcite-tree slot="children" expanded>
       <calcite-tree-item icon-start="${select("icon-start", iconNames, "palette")}">
         <a>Grandchild 1</a>
       </calcite-tree-item>
       <calcite-tree-item expanded>
         <a>Grandchild 2</a>
-        ${slottedDropdown}
+        ${slottedLargeDropdown}
+      </calcite-tree-item>
+    </calcite-tree>
+  </calcite-tree-item>
+`;
+
+const slottedDefaultActionsEnd = html`
+  <calcite-tree-item icon-start="palette" expanded>
+    <a>Child 1</a>
+  </calcite-tree-item>
+  <calcite-tree-item expanded>
+    <a>Child 2</a>
+    <calcite-tree slot="children" expanded>
+      <calcite-tree-item expanded>
+        <a>Grandchild 1</a>
+        <calcite-tree slot="children" expanded>
+          <calcite-tree-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>
+`;
+
+const slottedSmallActionsEnd = html`
+  <calcite-tree-item icon-start="palette" expanded>
+    <a>Child 1</a>
+  </calcite-tree-item>
+  <calcite-tree-item expanded>
+    <a>Child 2</a>
+    <calcite-tree slot="children" expanded>
+      <calcite-tree-item expanded>
+        <a>Grandchild 1</a>
+        <calcite-tree slot="children" expanded>
+          <calcite-tree-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>
@@ -142,12 +204,13 @@ export const withLines_TestOnly = (): string => html`
   </calcite-tree>
 `;
 
-export const actionsEndDropdownsAndIconStart_TestOnly = (): string => html`<calcite-tree
-  style="width: 350px"
-  scale="${select("scale", ["s", "m", "l"], "m")}"
->
-  ${treeItemsWithSlottedDropdownsAndIconStart}
-</calcite-tree>`;
+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 darkModeRTL_TestOnly = (): string => html`
   <calcite-tree