title: forces margins inconsistanly

[hipitihop]

The title component forces top-margin and bottom-margin by default, not sure why, but it is also difficult/impossible to override as it uses !important

Default:

[[rc/title
   :level :level2
   :label "My Title"]

If I use :parts :wrapper to set top bottom margin, it is ignored. If I use :style {:margin-bottom "0px" :margin-top "0px"} only the top takes.

I find 9/10 I give up on using title because the defaults don't suit the container and the overrides are as much effort as using normal rc/label and restyle with larger font etc.

[kimo-k]

I find this annoying too. It seems to throw off our fibonacci-based layout convention.

[dbarabashh]

Hey @kimo-k and @hipitihop !

I've been looking into the issue with title margins and I think I found solution that might work well. Idea is to move margin control from the span element to the wrapper component and make margins optional by default.

1. Updated default margins to "0":

:or {margin-top "0" margin-bottom "0"}

2. Moved margin styles to the wrapper component:

wrapper-style (merge
               (get-in parts [:wrapper :style])
               {:margin-top margin-top
                :margin-bottom margin-bottom})

This gives us three flexible ways to control margins:

1. Direct props (simplest):

[title
 :level :level2
 :margin-top "1em"
 :margin-bottom "0.5em"
 :label "My Title"]

2. Using :parts (more control):

[title
 :level :level2
 :parts {:wrapper {:style {:margin "2em 0"}}}
 :label "My Title"]

3. No margins (clean):

[title
 :level :level2
 :label "My Title"]

What do you think? Is this the kind of flexibility we're looking for? Let me know if you'd like to see more examples or if you have any suggestions for improvement. Cheers

[kimo-k]

Sounds like a good direction. What are the implications of declaring a margin on the wrapper instead of the child?