fix(list-item, stack): stretch action-menu and handle when placed ins…

…ide 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.
Esri · Nov 16, 2023 · 8a16a69 · 8a16a69
1 parent 6d0a2d6
commit 8a16a69
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 };