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

Support panel collapsing #7498

Closed
2 of 3 tasks
driskull opened this issue Aug 9, 2023 · 15 comments
Closed
2 of 3 tasks

Support panel collapsing #7498

driskull opened this issue Aug 9, 2023 · 15 comments
Assignees
@geospatialem @SkyeSeitz @ashetland @brittneytewks
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript 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. low risk Issues with low risk for consideration in low risk milestones p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2023 September Pr...

Comments

@driskull
Copy link
Member

driskull commented Aug 9, 2023

Check existing issues

Description

Add the ability to collapse a calcite-panel.

Some use cases for the panel call for the ability to collapse the content of the panel with a button in the header.

For example:

Aug-09-2023 10-58-19

Acceptance Criteria

This would be done by adding a collapsable property as well as a collapsed property.

Relevant Info

#7491

Which Component

calcite-panel

Example Use Case

<calcite-panel collapsable collapsed heading="My Panel">Hello World!</calcite-panel>

Priority impact

p3 - want for upcoming milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react

Esri team

ArcGIS Maps SDK for JavaScript
@driskull driskull added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 9, 2023
@driskull driskull mentioned this issue Aug 9, 2023
Merged
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. p3 - want for upcoming milestone labels Aug 9, 2023
@driskull
Copy link
Member Author

driskull commented Aug 9, 2023

One question I had is if the collapse button should always be farthest to the left or next to the close button?

@macandcheese
Copy link
Contributor

I'd think we would want to place it alongside other component-rendered content, but cc @SkyeSeitz @ashetland @asangma

@SkyeSeitz
Copy link

In a similar conversation on Block, we discussed the chevron being placed adjacent to the heading at all times and not at the extent. This would also allow for the close-button to remain at the end which should be consistent.

driskull added a commit that referenced this issue Aug 9, 2023
@driskull
fix(panel): Fix heading border when only text content is slotted (#7491)
7704400 
**Related Issue:** #7489

## Summary

- Restores border-block-end by default.
- Adds internal CSS variable for temporary usage
- Issue to add panel collapsing support:
#7498
- Adds story tests
@SkyeSeitz
Copy link

Summarizing a few thoughts that consider this pattern across Block, Panel, and Accordion:
While placing collapse at the start of actions-end nicely "book-ends" the expand/collapse hitbox on Block, Panel's hitbox is only tied to the collapse button itself, so it is preferable to have it fall at the end of Panel when closable="false" and is consistent with Accordion's end chevron.

image

Link to Figma file

cc @asangma for any additional thoughts.

@driskull
Copy link
Member Author

@asangma if you're ok with having the collapse next to the close button should I update the popup to do that?

@asangma
Copy link
Contributor

asangma commented Aug 10, 2023

I think if the heading container were to be the hit-area for expand/collapse, we'd want to have the heading and expand/collapse icon all be contained in the same button.

If expand/collapse is its own distinct hit area that the component renders, it makes sense to have it be next to the other actions that Panel renders, i.e. the close button.

@driskull
Copy link
Member Author

Yeah that makes sense. So should it be its own distinct area or not?

@asangma
Copy link
Contributor

asangma commented Aug 10, 2023 •
edited
Loading

Having the heading container be the button aligns with Accordion and Block, no?

@macandcheese
Copy link
Contributor

macandcheese commented Aug 10, 2023 •
edited
Loading

Yes, both of those are intended to be wholly clickable - Not sure if we want to change Panel to match as it would only be in the case that it is collapsible and IMO kind of conflates the use case with Block. Tree, for example could have a separate hit area for collapsing as well, so not sure it’s a need to match Block / Accordion here…

@driskull
Copy link
Member Author

I'm ok with the whole title being clickable or just the action. Either way seems fine to me.

@macandcheese
Copy link
Contributor

macandcheese commented Aug 11, 2023 •
edited
Loading

I think because Panel have a possibility of having some really wide width in some cases, such as in a bottom / top Shell Panel making it a smaller, Action-sized area rendered next to the close (when provided) is the best option here. Sound good @asangma @SkyeSeitz @ashetland ?

@ashetland
Copy link
Contributor

I think because Panel have a possibility of having some really wide width in some cases, such as in a bottom / top action bar, making it a smaller, Action-sized area rendered next to the close (when provided) is the best option here. Sound good @asangma @SkyeSeitz @ashetland ?

Agreed

@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists estimate - 3 A day or two of work, likely requires updates to tests. low risk Issues with low risk for consideration in low risk milestones labels Sep 18, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Sep 18, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Sep 18, 2023
driskull added a commit that referenced this issue Sep 20, 2023
@driskull
feat(panel, flow-item): add support for collapsing content. #7498
34528db
@driskull driskull mentioned this issue Sep 20, 2023
Merged
@driskull
Copy link
Member Author

@asangma one thing you brought up from the Popup work is that the icons should be reversed if the panel expands up vs down. We would need to achieve this from some kind of property since the panel itself doesn't know anything about the direction its expanding.

Is this worth doing via a prop?

If we do this for panel, the same argument could be made for doing it to accordion or block. You can see an example of an accordion opening up here: https://codepen.io/driskull/pen/PoXEBMZ?editors=1000

Sep-21-2023 08-50-00

@jcfranco jcfranco mentioned this issue Sep 21, 2023
Open
driskull added a commit that referenced this issue Sep 27, 2023
@driskull
feat(panel, flow-item): add support for collapsing content (#7857)
855754d 
**Related Issue:** #7498

## Summary

- Add support for collapsing panel content via an action in the header
- Adds props `collapsible`, `collapsed` and `collapseDirection` to both
`flow-item` and `panel`
  - `collapseDirection` is internal for discussion
- Depending on which way the panel expands, the icons may need to be
reversed.
  - This property allows that. cc @asangma for more information.
  - We can remove this prop if we don't think its necessary
- Adds event `calcitePanelToggle`.
  - Block calls this event `calciteBlockToggle`.
  - ActionPad calls this event `calciteActionPadToggle`
- Copies t9n messages from block component (expand/collapse) messages.
- Adds CSS custom properties for the panel/flow-item to disable the
header's bottom border
  - `--calcite-panel-header-border-block-end`
  - `--calcite-flow-item-header-border-block-end`
- Removes unused private properties on panel 🧹 
- Adds screenshot tests & stories
- Adds usage file
- Updates HTML file for panel
- Adds e2e tests
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 27, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@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 28, 2023
@geospatialem
Copy link
Member

Verified in 1.9.0-next.12 with panel and flow-item with https://codepen.io/geospatialem/pen/rNoKdag with the collapse-direction, collapsed, and collapsible attributes.

@SkyeSeitz SkyeSeitz removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@SkyeSeitz SkyeSeitz

@ashetland ashetland

@brittneytewks brittneytewks

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript 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. low risk Issues with low risk for consideration in low risk milestones p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2023 September Priorities - Main release
Development

No branches or pull requests
7 participants
@driskull @macandcheese @geospatialem @asangma @SkyeSeitz @ashetland @brittneytewks