Slotted block elements in dialog's content-top/content-bottom slots hug content

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

If a block element is slotted into a dialog component's content-top or content-bottom slots, the element loses its block display and hugs its content as if it was an inline element.

Expected Behavior

The slotted block elements maintain their block display.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/NWZYLNK

Reproduction Steps

1. Visit the sample
2. Use the slotted elements' lightpink background color to judge whether or not they're stretching to fill the width of their container or hugging their content instead.

Reproduction Version

2.11.1

Relevant Info

I would question if it's appropriate/expected for components to be placing <slot> elements within flex layouts. It's not documented, so it leads to unexpected layouts where block elements don't behave like block elements by default.

Additionally, if the user needs a flex layout, they'll likely slot an element with a flex layout anyway since there's no way to fully customize the other flex-related styles on the slot's container.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

A workaround is to add flex: 1 styles to the slotted elements.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[jcfranco]

@nwhittaker makes a solid point. Since we don't explicitly document the parent display of slotted content, developers are left guessing, which isn't great for DX.

I believe we use display: flex in several places, but I doubt it's consistent for all slot containers (I could be wrong on this).

We should discuss this further to see what our options are since this is a concern for all components. cc @driskull @macandcheese @geospatialem

[geospatialem]

Spike next steps:

• Are other design systems using one over the other, or a combination?
• Determine the use of slots with display (block and flex) across the design system
• Determine next steps around panel and dialog (and potentially other components that should be tackled sooner as a high priority) and if we can provide a path forward in the short-term
• Consider for a documentation update based on ☝🏻 above findings