search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

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

Closed noahmulfinger closed 10 months ago

noahmulfinger commented 10 months ago

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 team

ArcGIS Developer Experience

jcfranco commented 10 months ago

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

anveshmekala commented 10 months ago

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 commented 10 months ago

@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 commented 10 months ago

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 commented 10 months ago

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

github-actions[bot] commented 10 months ago

Installed and assigned for verification.

DitwanP commented 10 months ago

🍰 Verified locally on 2.1.0-next.9

https://github.com/Esri/calcite-design-system/assets/60022782/cecf5258-6de3-44a1-b5d9-b60a857ab7e9