Add RecordForm Component with Docked Footer Support

[interactivellama]

Since InlineEdit is going to be deprecated. The form editing pattern is a Popover/Edit icon button for single input fields and the SLDS Form Edit mode for multiple field forms.

I propose creating a <Form> component that wraps form elements and allows adding a Docked Form Footer. The following is a mockup. Docked Footer should always be paired with Read/Edit mode of forms.

Consumers would still need to update inputs from read only variants to base inputs themselves, but I'm open to suggestions. I would be difficult to pass a prop down into the inputs directly since they may be nested in formatting. This might be a place to use React's context?

The primary issue with Docked Form footer is that it might need to be fixed to the bottom of the page and not scroll.

I need additional input from stakeholders.

[kwilloughby]

As a FYI...I need to share/discuss the visual aspects of this with Alan on the SLDS team. I will reach out to him next week.

[tanhengyeow]

Hi @kwilloughby @interactivellama

Would be glad to help out this issue 😄 Are there any updates discussed offline for the direction for this issue?

[interactivellama]

This needs a props proposal with some sample example JSX. I recommend throwing together some non-working JSX of what would be in the examples first. That is a mockup of https://www.lightningdesignsystem.com/components/form-element/#View-Mode and of https://www.lightningdesignsystem.com/components/form-element/#Edit-Mode

This would also add a DockedFooter component (that also needs a props proposal) that would put passed into a prop of the RecordForm component. The form component would have an edit and view mode. The RecordForm could have any children (since it could be one column, two column, etc), but all the inputs inside of it in the example would switch between a readonly mode like <Input variant="read-only"/> and the base <Input />. It would be fine to ask the consumer developer to manage the view and edit modes of the child inputs, since are some complex examples like a mailing address might get changes from simple text to 5 inputs when in edit mode.

[interactivellama]

What you don't see in the examples unfortunately, is that DockedFooter https://www.lightningdesignsystem.com/components/docked-form-footer/ his fixed to the bottom of the form and does not move on scroll. If the RecordForm does off the page, the DockedFooters sits on the bottom of the page. If the form doesn't go off the page, then it sits at the bottom of the form HTML element.