Panel - allow customizing width of `header-content` slot

[iyouth23]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

AGOL Map Viewer would like the header-content slot of calcite-panel to allow for a custom width. This can be achieved by setting flex: 1 1 auto; to .header-content in the panel component: https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-components/src/components/panel/panel.scss#L182-L185.

This enhancement is important because after migrating from calcite-modal to calcite-dialog, we can no longer customize the width of the header-content slot. This was previously allowed with calcite-modal since the header slot was not wrapped within a calcite-panel, but to my knowledge we can no longer just set the header slot to, for example, width: 50%.

Acceptance Criteria

Within a calcite-dialog, Map Viewer needs a way to set the width of the calcite-panel header to 50%, or have it extend until the inline editable content reaches the Close button on the right: https://codepen.io/iyouth66/pen/oNKNqxy.

(Example using calcite-modal for comparison: https://codepen.io/iyouth66/pen/bGXGKpj)

Relevant Info

cc @AdelheidF

Which Component

calcite-panel

Example Use Case

https://codepen.io/iyouth66/pen/oNKNqxy

Priority impact

impact - p1 - need for current milestone

Calcite package

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

Esri team

ArcGIS Online

[ellenupp]

+1 for Dashboards.

We'd like to be able to make the header-content in dialog full width to have centered titles, as was possible with modal.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified with the Chromatic build