fix(dropdown)!: change display to inline-block to ease truncation set…

…up (#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).

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", () => {

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();

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>`;