patternfly
Create demo to show how alerts can be used in forms and modals
Describe the issue. What is the expected and unexpected behavior? Frequently in product, our Alert component is being combined with our Form and Modal components, but we don't have a demo showing this interaction. We have an Invalid with form alert example, but I think it would be helpful to show the full interaction that could happen between a modal, a form, and hitting the submit button to create an alert. (Especially given that users can be unaware of how to make this interaction accessible.) It might also be helpful to show a more complex alert like the new expandable alert to show the most complicated variation.
For example, I've seen this use case that might be helpful to demonstrate:
@jessiehuff thanks for doing this! in fact in cockpit we have 100s of dialogs of that pattern and we are unsure if the error alerts should be at the top of bottom of the modal. Any clarification with an example in the docs will be very helpful!
@mcarrano could we add this to a milestone?
Also, for parity, should we create a corresponding issue in core?
Are there other types of alerts we'd want to include in this demo? info + warnings or multiple errors etc. If so, we might want design to build a few demos as well.
Design doc issue: https://github.com/patternfly/patternfly-org/issues/2988
Allison reviewed the design doc and marvel for this issue. @mmenestr @mcarrano Let me know if anything else is needed.
@pankajshivpuje I think this is fine, except that I'm having trouble understanding what we should use the approach with the inline alert at the top of the page, and when we do not. For example, for short forms contained in a modal, this feels unnecessary since the entire form is in view. For longer forms, I think it's very helpful. Thoughts? Is it that the alert with links is a more accessible solution?
@jessiehuff perhaps also take a look.
@mcarrano Agree. I think that for short forms in modal or wizard we should point out the given place with an error without an inline alert. We can use https://www.patternfly.org/v4/demos/password-strength or https://www.patternfly.org/v4/components/form#invalid with a helper text under the text field. I would use the inline alert with other invalid form inputs in a longer form where more inputs are wrong.
Here are some other use-cases such as warnings or info inline alerts in forms or wizard.
@mmenestr @mcarrano My apologies for responding late. I have completed all updates as suggested. Here is the updated design doc and Marvel. Please let me know if any other updates are needed.
Thanks @pankajshivpuje. Looks good to me. @mmenestr do you see any additional issues?
Just looked at it once more and there are still minor changes to make - it's the same change in every image (removing the icon next to the helper text, and making the helper text regular weight font)
@mmenestr design doc and marvel are now updated. Sorry, I just wanted to circle back with individual product sketch files before making these changes. Please let me know if you see anything else.
Design guideline issue opened: https://github.com/patternfly/patternfly-org/issues/2988
@mmenestr @andrew-ronaldson I have started working on design guidelines that relates to the alerts demos from issue#1125. Is there a way to find out if the alerts demos were implemented in the alerts page or demo section so I can update the appropriate guidelines accordingly.
@pankajshivpuje you should able to look through the alert demos and go from there (?) But I'm not sure demos were created for this. I think it's enough to just add guidance for this in the design guidelines, along with images reflecting the guidance.