search

grommet / hpe-design-system

HPE Design System
48 stars 23 forks source link

Wizard - Revisit footer placement and stickiness #1914

Open ecircenis opened 2 years ago

ecircenis commented 2 years ago

If you look at the first wizard example in DS at full screen and move through the pages, the footer is not in a consistent place from page to page. We should ensure that the footer does not jump around as the user navigates through the wizard. The text on the DS says that the footer should be placed directly below inputs. I think we need to adjust this to ensure that the footer is also in the same location on all wizard pages. This facilitates movement through the wizard, especially when the wizard is also used for edit use cases.

Is this issue related to the design system core library or design system website?

design-system-website

URL, screen shot, or CodeSandbox exhibiting the issue

https://design-system.hpe.design/templates/wizard https://design-system.hpe.design/templates/wizard#header-and-footer-behavior

bahriaditi commented 2 years ago

Updated the ticket name because this new request seemed related:

Because this is a full screen modal, I get that the header being fixed helps “frame” the content, but I’d rather we just fix/pin the header only, let the steppers, content, and footer all scroll together. Thoughts?

See complete Slack thread

vavalos5 commented 1 year ago

Was brought up again during GLCP Crit. If a user is going through a normal wizard experience and one of the pages has a DataTable, the "next button" placement would jump from its original placement. Figma example here.