Clay: ClayPaginationBar is missing padding/margin top

[albinojunior]

What is your question?

I recently saw that the ClayPaginationBar is missing a padding/margin top, and consequently is very close to the element above it.

The question is:
Was the padding/margin removal intentional?
I need to know so that I can correct my component if necessary, or wait for a possible correction in clay.

Thanks!

[bryceosterhaus]

@albinojunior I was looking over the lexicon definition and there is no specified border or padding so I believe this is intentional.

cc: @drakonux can you verify this?

[drakonux]

It was intentional 😉. The Pagination component can be used in different contexts, so it is designed without a top border or padding.

The designer/developer using the component needs to decide the distance between it and other components. By default, we recommend distance multiples of 8 but it depends on the context.

[pat270]

I recently saw that the ClayPaginationBar is missing a padding/border top, and consequently is very close to the element above it.

Just for clarification, I think the CSS properties that we are talking about is margin-top or padding-top.

[albinojunior]

Thanks for clarification guys.

I really changed margin to border. I'm sorry.

I've decided to put the padding/margin top inside my component, but I was just ask because bottom padding/margin of ClayPaginationBar keep there.

My last question is:
There is reason to building the component without a top padding/margin but with a bottom padding/margin?

I'm just asking this because when I was began use the component on my project the padding/margin (top/bottom) was there and the top padding/margin just disappeared.

[pat270]

@albinojunior The reason there is no padding-top or margin-top on the component is because we don't know if the component before it will use padding-bottom or use margin-bottom but is wrapped in something that is display: flex. There is no fixed size that would get it correct in all situations, so we left it to be set by the component before it.

Also if the pagination bar was also included at the top, padding-top / margin-top would create unnecessary space.

[jbalsas]

This reminded me about Layout util components. I think it's about time we tackle that. Providing layout utils might alleviate this pain since we might account for some of these spacing in those containers (when reasonable) to simplify creating Lexicon layouts...

@bryceosterhaus, @matuzalemsteles, thoughts?