From 897a7777cebab29fde29bdcf1693c4648e1d6ac3 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 22 Nov 2023 16:11:38 -0800
Subject: [PATCH] fix(dropdown)!: change display to inline-block to ease
 truncation setup (#8253)

**Related Issue:** #5903

## Summary

BREAKING CHANGE: Dropdown's default `display` was changed from
`inline-flex` to `inline-block` to make it easier to prompt truncation
in trigger button text with minimal impact to layout (by setting an
explicit width **or** setting `width: 100%` or `display: block` on the
dropdown of a width-constrained parent).
---
 .../src/components/dropdown/dropdown.e2e.ts    |  2 +-
 .../src/components/dropdown/dropdown.scss      |  2 +-
 .../components/dropdown/dropdown.stories.ts    | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index a99f1007b58..4fcaa9c328e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -58,7 +58,7 @@ describe("calcite-dropdown", () => {
     });
 
     describe("renders", () => {
-      renders(simpleDropdownHTML, { display: "inline-flex" });
+      renders(simpleDropdownHTML, { display: "inline-block" });
     });
 
     describe("honors hidden attribute", () => {
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index 20184ba91a9..37bf1dd21e6 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -7,7 +7,7 @@
  */
 
 :host {
-  @apply inline-flex flex-initial;
+  @apply inline-block flex-initial;
 }
 
 @include disabled();
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 76811abbf26..1d53146e208 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -462,3 +462,21 @@ export const triggerWordBreak_TestOnly = (): string => html`<div style="width:30
   </calcite-dropdown-group>
 </calcite-dropdown>
 </div>`;
+
+export const settingFullWidthEnablesTriggerTruncation_TestOnly = (): string => html`<div
+  style="width: 300px; border: solid"
+>
+  <calcite-dropdown style="width: 100%;">
+    <calcite-button width="full" slot="trigger"
+      >This is some really long text that will eventually overrun the container</calcite-button
+    >
+    <calcite-dropdown-group group-title="Natural places">
+      <calcite-dropdown-item>Mountain</calcite-dropdown-item>
+      <calcite-dropdown-item>River</calcite-dropdown-item>
+      <calcite-dropdown-item>Waterfall</calcite-dropdown-item>
+      <calcite-dropdown-item>Rainforest</calcite-dropdown-item>
+      <calcite-dropdown-item>Tundra</calcite-dropdown-item>
+      <calcite-dropdown-item>Desert</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-dropdown>
+</div>`;