fix(list-item, stack): stretch dropdown when placed inside a list-ite…

…m or stack (#8204) **Related Issue:** #8185 ## Summary - stretch dropdown component in list-item and stack
Esri · Nov 17, 2023 · 05e6b65 · 05e6b65
1 parent 43be03b
commit 05e6b65
Show file tree

Hide file tree

Showing 4 changed files with 20 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
@@ -146,7 +146,8 @@ td:focus {
 .actions-end {
   ::slotted(calcite-action),
   ::slotted(calcite-action-menu),
-  ::slotted(calcite-handle) {
+  ::slotted(calcite-handle),
+  ::slotted(calcite-dropdown) {
     @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
@@ -81,6 +81,14 @@ export const stretchSlottedContent = (): string => html`
         <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-dropdown slot="actions-end">
+        <calcite-action appearance="transparent" icon="plus" slot="trigger"></calcite-action>
+        <calcite-dropdown-group selection-mode="single" group-title="Sort by">
+          <calcite-dropdown-item>Relevance</calcite-dropdown-item>
+          <calcite-dropdown-item selected="">Date modified</calcite-dropdown-item>
+          <calcite-dropdown-item>Title</calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>
     </calcite-list-item>
   </calcite-list>
 `;

diff --git a/packages/calcite-components/src/components/stack/stack.scss b/packages/calcite-components/src/components/stack/stack.scss
@@ -65,7 +65,8 @@
 .actions-end {
   ::slotted(calcite-action),
   ::slotted(calcite-action-menu),
-  ::slotted(calcite-handle) {
+  ::slotted(calcite-handle),
+  ::slotted(calcite-dropdown) {
     @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
@@ -36,6 +36,14 @@ export const stretchSlottedContent = (): string => html`
       <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-dropdown slot="actions-end">
+      <calcite-action appearance="transparent" icon="plus" slot="trigger"></calcite-action>
+      <calcite-dropdown-group selection-mode="single" group-title="Sort by">
+        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
+        <calcite-dropdown-item selected="">Date modified</calcite-dropdown-item>
+        <calcite-dropdown-item>Title</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
   </calcite-stack>
 `;