fix(dropdown-item): bumping the scale of icon to M when parent dropdo…

…wn is scale L (#6254)

**Related Issue:** #5698

## Summary

Bumping the scale of the icon to M when the parent `dropdown-item` is
`scale="l"` for a visual distinction between larger and smaller
components without affecting the height of the `dropdown-item` when
icon(s) are added or removed. Added a `_testOnly` snapshot.

src/components/dropdown-item/dropdown-item.scss

@@ -11,7 +11,7 @@
 }
 
 .container--l {
-  @apply text-0h py-3;
+  @apply text-0h py-2.5;
   padding-inline-end: theme("padding.4");
   padding-inline-start: theme("padding.10");
 }
@@ -63,7 +63,7 @@
 }
 
 .dropdown-item-content {
-  @apply flex-auto;
+  @apply flex-auto py-0.5;
   padding-inline-end: theme("margin.auto");
   padding-inline-start: theme("margin.1");
 }

src/components/dropdown-item/dropdown-item.tsx

@@ -12,16 +12,15 @@ import {
 } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
-
+import { RequestedItem } from "../dropdown-group/interfaces";
+import { FlipContext, Scale, SelectionMode } from "../interfaces";
+import { CSS } from "./resources";
 import {
   componentLoaded,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
 } from "../../utils/loadable";
-import { RequestedItem } from "../dropdown-group/interfaces";
-import { FlipContext, SelectionMode } from "../interfaces";
-import { CSS } from "./resources";
 
 /**
  * @slot - A slot for adding text.
@@ -128,34 +127,34 @@ export class DropdownItem implements LoadableComponent {
   }
 
   render(): VNode {
-    const scale = getElementProp(this.el, "scale", "m");
+    const scale = getElementProp(this.el, "scale", this.scale);
     const iconStartEl = (
       <calcite-icon
-        class="dropdown-item-icon-start"
+        class={CSS.iconStart}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
-        scale="s"
+        scale={scale === "l" ? "m" : "s"}
       />
     );
     const contentNode = (
-      <span class="dropdown-item-content">
+      <span class={CSS.itemContent}>
         <slot />
       </span>
     );
     const iconEndEl = (
       <calcite-icon
-        class="dropdown-item-icon-end"
+        class={CSS.iconEnd}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
-        scale="s"
+        scale={scale === "l" ? "m" : "s"}
       />
     );
 
     const slottedContent =
       this.iconStart && this.iconEnd
         ? [iconStartEl, contentNode, iconEndEl]
         : this.iconStart
-        ? [iconStartEl, <slot />]
+        ? [iconStartEl, contentNode]
         : this.iconEnd
         ? [contentNode, iconEndEl]
         : contentNode;
@@ -165,7 +164,7 @@ export class DropdownItem implements LoadableComponent {
     ) : (
       <a
         aria-label={this.label}
-        class="dropdown-link"
+        class={CSS.link}
         href={this.href}
         ref={(el) => (this.childLink = el)}
         rel={this.rel}
@@ -202,9 +201,9 @@ export class DropdownItem implements LoadableComponent {
         >
           {this.selectionMode !== "none" ? (
             <calcite-icon
-              class="dropdown-item-icon"
+              class={CSS.icon}
               icon={this.selectionMode === "multiple" ? "check" : "bullet-point"}
-              scale="s"
+              scale={scale === "l" ? "m" : "s"}
             />
           ) : null}
           {contentEl}
@@ -284,6 +283,9 @@ export class DropdownItem implements LoadableComponent {
   /** if href is requested, track the rendered child link*/
   private childLink: HTMLAnchorElement;
 
+  /** Specifies the scale of dropdown-item controlled by the parent, defaults to m */
+  scale: Scale = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods

src/components/dropdown-item/resources.ts

@@ -5,5 +5,10 @@ export const CSS = {
   containerLarge: "container--l",
   containerMulti: "container--multi-selection",
   containerSingle: "container--single-selection",
-  containerNone: "container--none-selection"
+  containerNone: "container--none-selection",
+  icon: "dropdown-item-icon",
+  iconEnd: "dropdown-item-icon-end",
+  iconStart: "dropdown-item-icon-start",
+  itemContent: "dropdown-item-content",
+  link: "dropdown-link"
 };

src/components/dropdown/dropdown.e2e.ts

@@ -1069,7 +1069,7 @@ describe("calcite-dropdown", () => {
       filterInput.value = "nums";
     });
 
-    expect(dropdownContentHeight.height).toBe("64px");
+    expect(dropdownContentHeight.height).toBe("72px");
   });
 
   it("owns a floating-ui", () =>

src/components/dropdown/dropdown.stories.ts

@@ -480,3 +480,13 @@ export const flipPlacements_TestOnly = (): string => html`
     document.querySelector(".my-dropdown").flipPlacements = ["right"];
   </script>
 `;
+
+export const mediumIconForLargeDropdownItem_TestOnly = (): string => html`
+  <calcite-dropdown scale="l" width="m" open>
+    <calcite-dropdown-group group-title="View">
+      <calcite-dropdown-item scale="l">Table</calcite-dropdown-item>
+      <calcite-dropdown-item icon-start="grid" scale="l">Grid</calcite-dropdown-item>
+      <calcite-dropdown-item icon-start="grid" icon-end="grid" scale="l">Grid</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-dropdown>
+`;