Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Panel - allow customizing width of header-content slot #10385

Closed
2 of 6 tasks
iyouth23 opened this issue Sep 25, 2024 · 3 comments
Closed
2 of 6 tasks

Panel - allow customizing width of header-content slot #10385

iyouth23 opened this issue Sep 25, 2024 · 3 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-09-30 - 2.13...

Comments

@iyouth23
Copy link

Check existing issues

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

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

Esri team

ArcGIS Online
@iyouth23 iyouth23 added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Sep 25, 2024
@github-actions github-actions bot added ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Sep 25, 2024
@ellenupp
Copy link

+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.

image

@geospatialem geospatialem added the ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. label Sep 30, 2024
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. estimate - 3 A day or two of work, likely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Sep 30, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 30, 2024
@jcfranco jcfranco mentioned this issue Sep 30, 2024
Merged
jcfranco added a commit that referenced this issue Sep 30, 2024
@jcfranco
feat(panel): improve panel header layout (#10446)
12f1476 
**Related Issue:** #10385

## Summary

Slotted content will now adjust its size and position to allow more
flexible layouts, similar to how content behaves in `modal`.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Sep 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Sep 30, 2024
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Sep 30, 2024
@geospatialem
Copy link
Member

Verified with the Chromatic build

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
5 participants
@jcfranco @geospatialem @ellenupp @iyouth23 @DitwanP