fix(tree-item): preserves consistent height with or w/t actions-end (#…

…6403) **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.
Esri · Feb 9, 2023 · 728f42b · 728f42b
1 parent 3e9b62e
commit 728f42b
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 63 deletions.
diff --git 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
@@ -9,59 +9,80 @@
   @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;
     }
   }
 }
 
 :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;
     }
   }
 }
 
 :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
@@ -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
@@ -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,39 +67,88 @@ 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>
     </calcite-tree>
   </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