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

[Stepper] When programmatically switching to / from layout="horizontal-single", component breaks #8931

Closed
2 of 6 tasks
macandcheese opened this issue Mar 13, 2024 · 2 comments
Closed
2 of 6 tasks

[Stepper] When programmatically switching to / from layout="horizontal-single", component breaks #8931

macandcheese opened this issue Mar 13, 2024 · 2 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 - 2 Small fix or update, may require 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-03-26 - Mar ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Mar 13, 2024 •
edited
Loading

Check existing issues

Actual Behavior

When programmatically adjusting the layout property to / from horizontal-single, the component does not correctly display the steps. It only displays a single step. In some cases, it displays all the step text on top of one another. Switching between only horizontal and vertical works fine. The issue is worse after adjusting the width of the component - I think the resizeObserver in the component is causing it. And probably unneeded since this is just changed via prop value.

Screen.Recording.2024-03-12.at.6.45.00.PM.mov

Expected Behavior

I'd expect the component to toggle between states without issue.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/jORrZvr

Reproduction Steps

  1. Open Codepen
  2. Switch to / from the horizontal-single layout mode.
  3. Notice only a single step will appear in horizontal-single with all step text stacked.
  4. Adjust the preview window width.
  5. Notice the component now behaves differently - showing only a single step, even while switching between the previously-unaffected horizontal and vertical

Reproduction Version

2.6.0

Relevant Info

No response

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

This happens when programmatically setting the property. The Codepen shows a button-click example, but a more realistic implementation is in the Codepen, a simplified "responsive adjustment" to the property value.

Quick look at the code suggests something in determineActiveStepper() or the width-determining resizeObserver() could be the issue. Since the property is not set based on width change of the Stepper component, do we need to monitor width? The bug is worse (only shows a single step) after adjusting the page width. The bug is still present before this, just not as bad.

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)
@macandcheese macandcheese 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 Mar 13, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. Calcite (design) Issues logged by Calcite designers. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Mar 13, 2024
@jcfranco jcfranco added p - high Issue should be addressed in the current milestone, impacts component or core functionality needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. estimate - 2 Small fix or update, may require updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Mar 14, 2024
@jcfranco jcfranco added this to the 2024-03-26 - Mar Release milestone Mar 14, 2024
@jcfranco jcfranco self-assigned this Mar 15, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Mar 15, 2024
@jcfranco jcfranco mentioned this issue Mar 15, 2024
Merged
jcfranco added a commit that referenced this issue Mar 15, 2024
@jcfranco
fix(stepper): fix layout when switching modes dynamically to `horizon…
01f58bf 
…tal-single` (#8946)

**Related Issue:** #8931 

## Summary

Fixes an issue that caused step labels to overlap when dynamically
switching to `horizontal-single` layout mode.
@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 Mar 15, 2024
@github-actions 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 needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Mar 16, 2024
@geospatialem
Copy link
Member

Verified in 2.7.0-next.5 with https://codepen.io/geospatialem/pen/qBwbaxp:

responsive-stepper-validate

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 - 2 Small fix or update, may require 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-03-26 - Mar Release
Development

No branches or pull requests
4 participants
@jcfranco @macandcheese @geospatialem @DitwanP