[Design Issue] Indicate why save buttons are disabled

[beparticular]

Currently in the system, we are disabling save buttons in subforms, create new APD fields (future), and possibly in other places, to indicate that a user cannot move forward without completing all the fields. This however isn't an interaction that is commonly used because people need to know why the button is disabled. We aren't able to give them any information on why in the current state of the app because we don't mark fields as required due to our validation limitations. (NOTE FOR REFINEMENT - since this is only in subforms and other fields where we can and do validation, what would be the lift to do this better?)

To make it clear to users why the button is disabled, we should look to give a tip on hover (or click?), when people try to move forward using the disabled button. This would be a bandaid fix.

Sizing depends on which direction we go in.

This task is done when…

• [x] designs are created, taking into consideration validation, multiple FFY, multiple entries, long entries, weird entries, and/or the export view if applicable
• [ ] 508 visual, content, and UX considerations and/or recommendations are reviewed
• [ ] designs are shared
• [ ] designs are approved by product
• [ ] if there is a long discussion, a summary of changes for dev will be added to the last comment before transfer
• [ ] a list of changes to be made if this is improving an existing feature

[beparticular]

For now let's just make the hover info for the submit button. And then reflect later on if this pattern could be changed.

[akuas]

I have updated the subforms to make sure all the save buttons are disabled until the subform is complete and that for all the subforms, we maintain a tooltip indicating the all fields are required when in the disabled state.

[akuas]

MMIS Create a New APD Activity Schedule and Milestones HITECH Key State Personnel State Costs Outcomes Private Contractor Costs

[akuas]

1. For Create a New APD button, the language is "All fields are required to create an APD"
2. For the subforms except Activities Dashboard and Outcomes, the language is "All fields are required" @beparticular Does this language seem appropriate? I don't think we need to customize each tooltip to the subform they are on i.e. "All fields are required to add a Key State Personnel"
3. For outcomes the language is "At least one outcome is required"

[beparticular]

@akuas

I think this all sounds good, including not customizing the language unless it's specifically needed, like with the outcomes call out.

Holding this in ready to review for when Jerome returns.

[jeromeleecms]

Is it clearer to add "before saving" (i.e. "All fields are required before saving.")? Other than that, looks good!

[akuas]

@jeromeleecms Not sure if it sounds better to say "to save" or "before saving" but I have updated it to say "before saving."

[akuas]

@thetif @mirano-darren @itsonlydio This ticket is ready for dev.

[akuas]

The action is to add a tooltip to the pages above indicating All fields are required before saving, all fields are required to create an APD, and at least one outcome is required

[jeromeleecms]

Hmmm... open to feed back from Dev and Quality for a third opinion. But that also sounds OK.

[jeromeleecms]

Spun up #4306 for this. Tif reviewed this is good to close.