Shadow option is broken

[davidjb99]

@andressotomayorb commented on Wed Mar 10 2021

As a user when I try to add shadow to an element it is not reflected on the editor, but if I go to the preview, there it is visible.

Screen.Recording.2021-03-10.at.20.08.44.mov

[janwirth]

Problem Overview
The problem here is that funk uses shadows to draw outlines around elements (the HUD). The user-defined shadows are incorrectly overridden by the funk HUD-shadows.

Solution
When adding a custom shadow, the HUD shadows should disappear.

1. Replace shadow rendering with function that outputs a Maybe String
2. override the HUD shadows if we have Just shadowString.

Development Handoff
Relevant code sections

• custom shadows are rendered here: https://github.com/funk-team/funkLang/blob/master/src/DesignSystem/Shadow.elm#L88
• shaodws are merged here: https://github.com/funk-team/funkLang/blob/master/src/Renderer/StyleCompositor.elm#L44
• shadows are incorrectly put into decorations rather than overriding existing shadows https://github.com/funk-team/funkLang/blob/master/src/Spec/Element/Render.elm#L315 which causes them to take a lower priority

Acceptance criteria

• write e2e test that validates the behavior (shadow being rendered in calculatedStyles)
• fix the behavior

Archive: Discussion & Proposed solutions

• @davidjb99 Should the HUD shadows disappear or stay when the user added a custom shadow? I suggest the outline disappears once the user adds a custom shadow because: 1. the element should then still be distinguishable from the background 2. the HUD introduces noise when trying to design shadows.

• A: replace shadow rendering with renderer that outputs a Maybe String, then override the HUD shadows if we have Just shadowString

• B: Change shadows field type to Element.Attribute msg. Problem: this will not allow stacking multiple shadows and limit design options down the line

[janwirth]

Blocked by #50

[davidjb99]

I think hiding the shadow in the HUD as you suggest is fine when a user adds a shadow to an element.

stacking shadows would be good to have at some point so I would go with option A