Stepper component 2.0 update breaks BA Experience builder widget

[ddred11]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Current updated behavior of the stepper widget breaks our UI for the Business Analyst widget in Experience Builder. At the default width of our widget, user can no longer see additional steps or easily click on them to forward the experience. Making this widget wider is a challenge given the canvas space in Experience Builder. .

Acceptance Criteria

We would like to have the component provided properties that would allow developers to set the width where the responsive design of the widget trigger so that we can return our widget to this experience.

Relevant Info

Breaks existing functionality. Will affect current users and the apps they have created with this widget.

Which Component

Stepper component

Example Use Case

No response

Priority impact

p1 - need for current milestone

Calcite package

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

Esri team

ArcGIS Business/Community Analyst

[macandcheese]

This will also affect anyone trying to use the Stepper in Modal, as the width is often "below" the current breakpoint to swap to this mode. As a designer / dev user, I want to be able to ensure the Stepper doesn't enter this mode.

[SkyeSeitz]

Issue #8174 is to add the component tokens to do this customization. In the meantime, can we perhaps add the css vars for Stepper Item's minWidth value at each scale? @geospatialem Is it possible to prioritize for this milestone?

cc @alisonailea

[geospatialem]

In the meantime, can we perhaps add the css vars for Stepper Item's minWidth value at each scale? @geospatialem Is it possible to prioritize for this milestone?

@SkyeSeitz It looks like there are still some follow-up's if this would indeed solve the use case on the stepper-item component, such as would users need to know the number of stepper-items rendered and set a minWidth based off the number of items?

Instead, wondering if each breakpoint value defined be overridden to another value, or in cases where the user does not want responsive behavior, have the ability to "zero" out the value?

[SkyeSeitz]

Thanks @geospatialem for the clarifying question!

Regardless of stepper width or number of stepper-items, the consideration for the user is how narrow do they want to allow stepper-items to get before stepper switches to the single view.

Some users may want to set the minWidth to as low as 0px to essentially opt out of the single view. Meaning stepper-items will always continue to squeeze and share inline space as the window narrows.


On the other hand, some users may still want stepper to switch to the single view, but just at a lower threshold where stepper-items are allowed to squeeze further than our default provided minWidth. I think this is especially effective, if wanting to build for windows that may change in width or if the stepper may be viewed on a mobile device.

Happy to discuss further as well!

[ftiru]

@geospatialem Any update on this issue please? We need this fix for the February release of AGOL as our widget is dependent on this feature please.

[eriklharper]

@ftiru Is there a reason why the condensed experience doesn't fit the bill for your scenario? You can still navigate with the left/right arrows to each of the steps.

[ftiru]

@eriklharper @geospatialem On production right now, users can create apps like this (narrow BA widget with large map) and easily navigate between the 3 steps of the BA widget by clicking on the steppers/headers as follows which has been the default behavior and that our users are familiar with:

With the recent calcite update, we lost this option to click on the headers for navigation between steps by default. In addition, the stepper labels (Search, Buffer, Infographics) get hidden even when the widget is still wide as follows:

We have to make our BA widget too wide to get that functionality back. For example here. I had to stretch the BA widget as wide as the map to get the default behavior back:

Basically, the condensed experience does not work well with our widget as it happens even when the widget is wide as follows:

We need to control when the condensed view should happen to our widget as the current calcite default behavior is not working.

[eriklharper]

Curious if you set scale="s" if that would allow the step headings to appear at the right width?

[macandcheese]

We need to support a way to disable or opt-out of this, or at least "fake opting out" by setting css property / breakpoint overrides. The examples above are clearly worse off for the responsive behavior.

Setting a different scale just to get this to fit here would have other implications across the UI - inconsistent font size, spacing, etc., when positioned amongst other "m" scale elements, and would likely be just as fragile as "s" would have its own magic width.

[eriklharper]

@ftiru thanks for the detailed screenshots, these are really helpful!

[github-actions[bot]]

Installed and assigned for verification.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 2.5.1 with https://codepen.io/geospatialem/pen/ZEPVaZL: