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

[Shell Panel] display-mode="float-all" has multiple bugs #9926

Closed
6 of 10 tasks
ashetland opened this issue Jul 31, 2024 · 7 comments
Closed
6 of 10 tasks

[Shell Panel] display-mode="float-all" has multiple bugs #9926

ashetland opened this issue Jul 31, 2024 · 7 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely 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
2025-02-06 - 3.0....

Comments

@ashetland
Copy link
Contributor

ashetland commented Jul 31, 2024 •
edited by macandcheese
Loading

Check existing issues

Actual Behavior

The new float-all configuration does not match other floating UI and the resize affordance is misplaced.

Expected Behavior

Reproduction Sample

https://codepen.io/ashetland/pen/zYVZBPG?editors=1000

Reproduction Steps

  1. Open the codepen
  2. Note the sharp corners, no shadow, perimeter border, double border next to Action Bar, and the odd placement of the drag affordance

Reproduction Version

v2.11.0

Relevant Info

Related issue #7513

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

No response

Calcite package

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

Esri team

Calcite (design)
@ashetland ashetland added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jul 31, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. 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 Jul 31, 2024
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 3 A day or two of work, likely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Jul 31, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jul 31, 2024
@geospatialem geospatialem added estimate - 5 A few days of work, definitely requires updates to tests. and removed estimate - 3 A day or two of work, likely requires updates to tests. labels Aug 1, 2024
@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 Aug 6, 2024
@josercarcamo josercarcamo 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 Oct 23, 2024
@macandcheese
Copy link
Contributor

macandcheese commented Nov 21, 2024 •
edited
Loading

In a later version, 2.13.2 - the height of the Shell Panel seems too tall, like it's not compensating for the margin when in float-all - maybe a block-size: calc(100% - 1rem); or otherwise is needed (Note - this didn't exist in the version of original Codepen, but posting here for visibility) cc @ashetland https://codepen.io/mac_and_cheese/pen/oNKrrWZ?editors=1000

Screenshot 2024-11-21 at 10 39 17 AM

@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 2 - in development Issues that are actively being worked on. labels Jan 13, 2025
@macandcheese
Copy link
Contributor

@ashetland for the following item:

disable float-all resizing until #5652 lands

Can we just leave the functionality and then improve it when that lands? This way any implementations of that behavior will continue to work and just benefit from future updates.

@ashetland
Copy link
Contributor Author

Sounds good to me.

@macandcheese macandcheese 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 Jan 21, 2025
@macandcheese macandcheese mentioned this issue Jan 30, 2025
Merged
macandcheese added a commit that referenced this issue Feb 3, 2025
@macandcheese
fix(shell-panel): Fix visual issues in displayMode="float-all" (#11410
59bcc30 
)

**Related Issue:** #9926 

## Summary
Adds some styling to address the visual issues in Shell Panel.

![Screenshot 2025-01-29 at 6 58
09 PM](https://github.com/user-attachments/assets/957f812d-201e-42e5-b723-30d1362bd606)
![Screenshot 2025-01-29 at 6 57
27 PM](https://github.com/user-attachments/assets/15db515a-8573-44ee-ab9d-486aa3755165)



Note - I went down the rabbit hole of trying to conditionally pass
corner-radius to slotted Actions, Panels, etc. - it would involve a lot
of internal tokens and conditional states to handle various arrangements
of components. This could be something to look at in the future but I'm
not sure we want to handle this here.

![Screenshot 2025-01-29 at 6 54
39 PM](https://github.com/user-attachments/assets/e73c5c6a-deb2-4ad8-8733-ad716fbc0593)
@macandcheese macandcheese 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 Feb 3, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 3, 2025

Installed and assigned for verification.

@geospatialem
Copy link
Member

Verified the changes in 3.0.0-next.126.

Did observe when resizable is present and the component is in focus a line is added for resizing the component via https://codepen.io/geospatialem/pen/ByBeGdK, is that intended or do we need an additional follow-up issue to tackle? cc @macandcheese @ashetland

Image

@macandcheese
Copy link
Contributor

macandcheese commented Feb 4, 2025 •
edited
Loading

That's intended (or, at least, no different than before this PR) - further updates will occur here: #5652

@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 Feb 4, 2025
@geospatialem
Copy link
Member

Thanks, Adam. All bugs mentioned above are mitigated as-expected. Closing the above as verified 👍🏻

benelan pushed a commit that referenced this issue Feb 8, 2025
@macandcheese @benelan
fix(shell-panel): Fix visual issues in displayMode="float-all" (#11410
85af56d 
)

**Related Issue:** #9926 

## Summary
Adds some styling to address the visual issues in Shell Panel.

![Screenshot 2025-01-29 at 6 58
09 PM](https://github.com/user-attachments/assets/957f812d-201e-42e5-b723-30d1362bd606)
![Screenshot 2025-01-29 at 6 57
27 PM](https://github.com/user-attachments/assets/15db515a-8573-44ee-ab9d-486aa3755165)



Note - I went down the rabbit hole of trying to conditionally pass
corner-radius to slotted Actions, Panels, etc. - it would involve a lot
of internal tokens and conditional states to handle various arrangements
of components. This could be something to look at in the future but I'm
not sure we want to handle this here.

![Screenshot 2025-01-29 at 6 54
39 PM](https://github.com/user-attachments/assets/e73c5c6a-deb2-4ad8-8733-ad716fbc0593)
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. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely 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
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

No branches or pull requests
6 participants
@jcfranco @macandcheese @geospatialem @DitwanP @ashetland @josercarcamo