Clarity: [UI] Refactor Forms

[adityarb88]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Refactor Clarity forms to fix the following issues:

1. Get rid of position: relative from .form-group so that tooltips inside of forms don't get clipped off when the form is placed in a container with overflowing content. (#931)
2. Prevent labels inside of forms from wrapping on top of each other in both regular and compact forms. (#626)

Note: Might need to get in touch with UX to revisit the specs for the labels inside of forms.

Actual behavior

Forms right now have the above 2 mentioned github issues

Reproduction of behavior

More info provided in the above 2 mentioned github issues

Environment details

• Angular version: NA

• Clarity version: All

• OS and version: All

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[adityarb88]

The more that I think about it, the more I think that this would have to be a breaking change. Simply getting rid of position: relative from .form-groups might not work because that would mean that we have to get rid of the left padding in the .form-group as well to position the first label without position: absolute. If we get rid of the padding then the form fields to the right of the first label inside of the .form-group might wrap below the label because we don't have the padding anymore.

One simple fix is to wrap the form fields on the right of the first label inside of a container and disable flex wrap. That way overflowing form fields wrap directly inside of the container but this is a breaking change.

Forms in grid on the other hand handle this well right now. We just need to get rid of the position styles for form groups in grids to make sure that tooltips don't clip.

[mathisscott]

I would recommend giving a plunkr for the workaround in grid and posting that for 0.9 users along with the removal of position styles for forms in grids.

And then starting work on the breaking change for 0.10.

[mathisscott]

Is there any way we could do some sort of deprecation strategy where the old forms CSS still works but new CSS is introduced for the new DOM structure in 0.10? That way people can update forms and we can switch over to the new DOM structure 100% in 0.11...

[adityarb88]

@mathisscott: What I want to check is that instead of doing the breaking change, can we recommend to use forms in grid for these complex cases where you anticipate having larger labels which might wrap and tooltips which might be clipped (for eg in modals)?

[jansivans]

What's the status of this issue?

[mathisscott]

@jansivans
It's in progress. Other priorities pulled our UX resource from it for a couple of weeks. We'll get back on it as soon as resourcing allows.

[whizkidwwe1217]

Will this be available in the next release?

[gnomeontherun]

This will be fixed in 0.12, with the updated grid and form styles. The existing form and grid will continue to exist (for now) but can not be patched for this specific bug.

[rdvojmoc]

When we can expect some docs or examples where this changes will be described?

[gnomeontherun]

I've been working on some drafts, the goal is for next week sometime.

[gnomeontherun]

The forms have been completed for 1.0 but there are still some possible enhancements that might be added as we go. Closing this epic for this workset.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.