From 8a16a69caff33fa3d504f87343db9d7ffdf955ad Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 16 Nov 2023 11:40:56 -0800
Subject: [PATCH] fix(list-item, stack): stretch action-menu and handle when
 placed inside a list-item or stack. (#8185)

**Related Issue:** #8187

## Summary

- Adds css to stack and list-item to treat an action-menu the same as an
action
- This makes the action take up the full height of the list-item/stack
- Previously, the action-menu would stop at 32x32 pixels.
---
 .../src/components/list-item/list-item.scss   |  4 +++-
 .../src/components/list/list.stories.ts       | 20 +++++++++++++++++++
 .../src/components/stack/stack.scss           |  4 +++-
 .../src/components/stack/stack.stories.ts     | 15 ++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 3638453dc01..928464a0f61 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -136,7 +136,9 @@ td:focus {
 
 .actions-start,
 .actions-end {
-  ::slotted(calcite-action) {
+  ::slotted(calcite-action),
+  ::slotted(calcite-action-menu),
+  ::slotted(calcite-handle) {
     @apply self-stretch;
 
     color: inherit;
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index f8aac4fea92..dc371b3f932 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -65,6 +65,26 @@ export const onlyLabelVersusOnlyDescription_TestOnly = (): string => html`
   </calcite-list>
 `;
 
+export const stretchSlottedContent = (): string => html`
+  <calcite-list ${knobsHTML()}>
+    <calcite-list-item label="This has no description.">
+      <calcite-handle slot="actions-start"></calcite-handle>
+      <calcite-action
+        slot="actions-start"
+        appearance="transparent"
+        text="Banana"
+        icon="banana"
+        text-enabled
+      ></calcite-action>
+      <calcite-action-menu appearance="transparent" slot="actions-end">
+        <calcite-action appearance="transparent" text="Plus" icon="plus" text-enabled></calcite-action>
+        <calcite-action appearance="transparent" text="Minus" icon="minus" text-enabled></calcite-action>
+        <calcite-action appearance="transparent" text="Table" icon="table" text-enabled></calcite-action>
+      </calcite-action-menu>
+    </calcite-list-item>
+  </calcite-list>
+`;
+
 export const nestedItems = (): string => html`
   <calcite-list ${knobsHTML()}>
     <calcite-list-item
diff --git a/packages/calcite-components/src/components/stack/stack.scss b/packages/calcite-components/src/components/stack/stack.scss
index 32920d59adf..98fbe09625f 100644
--- a/packages/calcite-components/src/components/stack/stack.scss
+++ b/packages/calcite-components/src/components/stack/stack.scss
@@ -63,7 +63,9 @@
 
 .actions-start,
 .actions-end {
-  ::slotted(calcite-action) {
+  ::slotted(calcite-action),
+  ::slotted(calcite-action-menu),
+  ::slotted(calcite-handle) {
     @apply self-stretch;
 
     color: inherit;
diff --git a/packages/calcite-components/src/components/stack/stack.stories.ts b/packages/calcite-components/src/components/stack/stack.stories.ts
index 6d07fd5a4d4..fd8c76e1bf3 100644
--- a/packages/calcite-components/src/components/stack/stack.stories.ts
+++ b/packages/calcite-components/src/components/stack/stack.stories.ts
@@ -24,6 +24,21 @@ const simpleHTML = html`<calcite-stack>
 
 export const simple = (): string => simpleHTML;
 
+export const stretchSlottedContent = (): string => html`
+  <calcite-stack>
+    <calcite-handle slot="actions-start"></calcite-handle>
+    <calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
+    Hello World
+    <calcite-avatar slot="content-end" thumbnail="${thumbnailImage}" scale="s"> </calcite-avatar>
+    <calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
+    <calcite-action-menu slot="actions-end" appearance="transparent">
+      <calcite-action appearance="transparent" text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action appearance="transparent" text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action appearance="transparent" text="Table" icon="table" text-enabled></calcite-action>
+    </calcite-action-menu>
+  </calcite-stack>
+`;
+
 export const simpleDarkMode_TestOnly = (): string => simpleHTML;
 simpleDarkMode_TestOnly.parameters = { modes: modesDarkDefault };