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

Calcite Stepper: Issues with disabled state, change events, and styles in v2.0.0 #8397

Closed
3 of 6 tasks
noahmulfinger opened this issue Dec 11, 2023 · 7 comments
Closed
3 of 6 tasks

Calcite Stepper: Issues with disabled state, change events, and styles in v2.0.0 #8397

noahmulfinger opened this issue Dec 11, 2023 · 7 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Developer Experience Issues logged by ArcGIS Developer Experience team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. calcite-components-react Issues specific to the @esri/calcite-components-react package. 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
2023 December Pri...

Comments

@noahmulfinger
Copy link
Contributor

Check existing issues

Actual Behavior

I found the following issues when testing the stepper on calcite-components v2.0.0. They are reproducible in the linked repro sample.

  1. It is not possible to disable the next/previous step action buttons when the stepper is in single step view mode.
  2. The onCalciteStepperItemChange event does not emit when switching to a step that is disabled, or when switching to the first step (using the step action buttons)
  3. The headings for non-disabled stepper items are not visible.
  4. The content for disabled stepper items is not visible.

Expected Behavior

  1. It should be possible to disable the next/previous step action buttons, and if possible they should be disabled if the next or previous step is marked as disabled.
  2. The onCalciteStepperItemChange should always emit when a step changes.
  3. The headings should always be visible
  4. The content should always be visible.

Reproduction Sample

https://codesandbox.io/p/sandbox/runtime-morning-tqdjmw?file=%2Fsrc%2FApp.js%3A15%2C40

Reproduction Steps

  1. Open the repro sample
  2. Switch between steps using the next/previous action buttons
  3. View the console log to see the stepper item change events.

Reproduction Version

2.0.0

Relevant Info

Tested in Chrome 120.0.6099.71 and Firefox 122.0a1

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

Needed for updating the underlying theme functionality for developer website.

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 Developer Experience
@noahmulfinger noahmulfinger 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 Dec 11, 2023
@github-actions github-actions bot added impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone calcite-components Issues specific to the @esri/calcite-components package. ArcGIS Developer Experience Issues logged by ArcGIS Developer Experience team members. calcite-components-react Issues specific to the @esri/calcite-components-react package. labels Dec 11, 2023
@jcfranco
Copy link
Member

Created a vanilla repro case for comparison purposes based on @noahmulfinger's sample.

Prior to the responsiveness updates, disabled steps could not be accessed, so we need to handle this path as well. There may be some UI/UX tweaks needed as well. cc @anveshmekala @SkyeSeitz @ashetland

@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed needs triage Planning workflow - pending design/dev review. labels Dec 13, 2023
@anveshmekala
Copy link
Contributor

Hi @noahmulfinger , Thanks for testing the new stepper single view layout. Some of the UX behavior is preserved to match the existing workflow. Regarding the change event not emitted when switching to first step, i am able to reproduce this and will work on the fix. For the other issues mentioned , some of them can be added as enhancement.

  1. Currently we do not offer disabling next and previous buttons .The idea was to allow user to access enabled stepper-item which falls after the disabled step or before the disabled ones. Disabling next/previous buttons can be optional , will get this added as part of enhancement.

  2. onCalciteStepperItemChange not emitted when switching to a disabled step is by design since change events are emitted only when there is a change in selection. In the multiple view layout a user cannot select disabled stepper-item hence change event isn't emitted and we are preserving similar behavior. Can sense confusion here as there is no option to select in single view mode and switching to a specific stepper-item is viewed as selection.

  3. Currently in V2.0 ,the heading is visible for all stepper-items in single view layout. Please let us know if i am missing something. Used https://codesandbox.io/p/sandbox/runtime-morning-tqdjmw?file=%2Fsrc%2FApp.js%3A15%2C40 for testing.

  4. The content is hidden for disabled stepper-item to match the behavior of multiple view layout where user cannot select a disabled stepper-item and content is only visible when selected. Perhaps we can display content for disabled items irrespective of view layout. Thoughts?

cc @jcfranco @SkyeSeitz @ashetland

@noahmulfinger
Copy link
Contributor Author

@anveshmekala Thanks for the info.

For item 3, I still see the heading is not visible, but this is only in macOS dark mode. This is what i see: Screenshot 2023-12-13 at 11 15 55 AM

For item 4, personally I think the current behavior of hiding the content for disabled steps is fine, as long as the step isn't able to be selected (in reference to item 1).

For reference, we are using the stepper for a set of forms in a workflow within a modal. The user has to fill out a form to continue to the next step. This is why the single view mode next/previous buttons not being disabled is not ideal. But not sure if that's a recommended/expected use case for the stepper.

@anveshmekala
Copy link
Contributor

i see the issue with heading now and step-bar colors are inconsistent.

Regarding the previous/next step, the use case mentioned makes a good point to disable previous and next step. We'll add that as a opt-in feature. Thanks @noahmulfinger

@anveshmekala anveshmekala self-assigned this Dec 13, 2023
@anveshmekala anveshmekala added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Dec 13, 2023
@anveshmekala anveshmekala mentioned this issue Dec 13, 2023
Merged
@anveshmekala
Copy link
Contributor

Hi @noahmulfinger , the dark-mode issue is fixed with 2.1.0-next.8 version of calcite-components-react.

https://codesandbox.io/p/sandbox/sad-babbage-nfdd9n

@anveshmekala anveshmekala 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 Dec 14, 2023
anveshmekala added a commit that referenced this issue Dec 15, 2023
@anveshmekala
fix(stepper): emits calciteStepperItemChange event when switched to…
508979f 
… first step (#8422)

**Related Issue:** #8397 

## Summary

Emits `calciteStepperItemChange` event when switched to the first
enabled step in single view layout.
@anveshmekala anveshmekala 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 Dec 15, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Dec 15, 2023

🍰 Verified locally on 2.1.0-next.9

Screen.Recording.2023-12-15.at.10.58.46.AM.mov

@DitwanP DitwanP closed this as completed Dec 15, 2023
@DitwanP DitwanP 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 Dec 15, 2023
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 Developer Experience Issues logged by ArcGIS Developer Experience team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. calcite-components-react Issues specific to the @esri/calcite-components-react package. 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
2023 December Priorities
Development

No branches or pull requests
5 participants
@jcfranco @geospatialem @noahmulfinger @DitwanP @anveshmekala