Bottom container style and behavior customization

[FikriMilano]

Is your feature request related to a problem? Please describe.
The current submit button container at the bottom of the screen, has no shadow at the moment.

FHIRCore has a UX design update that requires the submit button container to have a shadow in the upward direction when there’s content below it, and just a border line at the top if there's no content below it, i.e. at the end of the list.

Describe the solution you'd like
The bottom submit button container should display a shadow at the top side if there's content below or just a border line if there's no content below.

Describe alternatives you've considered
Configurable?

Additional context
This is related to the UX Questionnaire adjustments that is ongoing on FHIRCore opensrp/fhircore#1974.

Adjusted design:

Would you like to work on the issue?
Yeah

[FikriMilano]

cc @f-odhiambo

[FikriMilano]

@shelaghm what do you think of this UX change?

cc @rowo

[shelaghm]

Hi @FikriMilano @rowo

We are currently supporting Material 3 design system on the FHIR SDK and the latest material.io guidelines, indicate

Instead of elevating with a drop shadow, top app bars use a color fill to create separation from content

I understand that your design system leverages drop shadows throughout the application and your desire to continue to do so. I'm not opposed to making something like this configurable, but we are trying to be conscious of how many different elements become configurable, while also following the latest Material theming patterns and behavior. @jingtang10 what are your thoughts on this?

@rowo Are you currently using the material theme builder and tokens? Any plans for adapting your design system in the future? Asking because it will be helpful to understand how critical the drop shadows are?

[FikriMilano]

@shelaghm sorry, I think there's a bit misunderstanding here.

I was implying the container of Save button, at the bottom of the screen. There's a shadow there.

Not the top app bar.

[shelaghm]

@FikriMilano Ohh, yes, I misunderstood. Thanks for clarifying.

Yes, I think this can be configurable. Some of the options I imagine are:

Some implementation suggestions:

• In the material theme: can use the outline color.
• There's pre-set elevation tokens that you can use. Elevation #2 is probably a good option to start with.

[FikriMilano]

@shelaghm this image is very helpful, and thanks for the suggestions!