eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiForm] pass `fullWidth` from root EuiForm via context to children

Open spalger opened this issue 3 years ago • 2 comments

When writing an <EuiForm> which is supposed to expand to the full width of the container you need to add fullWidth to every form group, row, and input in the form. It would be awesome if we could specify fullWidth on the EuiForm element and have that change the default value of fullWidth within each child component by passing true down via context.

If folks wouldn't mind this being implemented I'd be happy to try putting up a PR.

spalger avatar Sep 07 '22 14:09 spalger

We always love getting PRs! What approach are you thinking in terms of implementation? Are you thinking of either a ReactContext set by EuiForm, or using React.cloneElement on each child/grandchild to try to set props?

FWIW I'd lean slightly towards context over cloneElement, and if using a context, I'd also want individual children to be able to set their own fullWidth prop that overrides the context.

Hope that helps!

cee-chen avatar Sep 07 '22 16:09 cee-chen

Yeah, I was planning to go with context. I'll give it a shot and make sure that child elements only use the fullWidth from context if their fullWidth prop is undefined.

spalger avatar Sep 07 '22 20:09 spalger