einride/ui

Suggestion: VerticalLayout with size 0

Closed this issue · 8 comments

When using VeritcalLayout with for example MegaTitle / Title1 etc you get both margin from the text element and the gap from VerticalLayout (atm the smallest is 8 px).

It would be nice to have the possility to set gap as 0 while still getting the "column layout behaviour" if elements in the layout have their own margin

Sounds good to me!

I'm thinking a "none" option to reflect css terminology, do you think that works or should we use something more aligned with the other values like "xs", "md" etc? @filiptammergard

On the other hand, size = "none" is a bit misleading. Maybe size = "0" / "zero" / "collapsed" or similar would be better

Implemented here: #247

Thanks! Why is the prop named size? You mentioned keeping stuff aligend with css-terminology and for me it would make more sense if the name was gap. I'm just curious, nothing you need to fix

Thanks! Why is the prop named size? You mentioned keeping stuff aligend with css-terminology and for me it would make more sense if the name was gap. I'm just curious, nothing you need to fix

Valid point! This is only named size because that's the name of the same prop in <VerticalSpacing>. But while the prop name makes sense in that component it doesn't really make sense here.

gap="none"|"sm"|... would make sense here.

The only thing we need to consider here is that this would be a breaking change.

Ah okey. I understand. It makes more sense in <VerticalSpacing> to name it size. Otherwise it would be height for vertical and width for horizontal 🤔

Anyway, don't renam if it is breaking. (Maybe we could stack up breaking changes and do a lot of the in the same patch)
Going forward I think, just as @jenseo mentioned it would be nice to try to keep css-terminilogy where it is applicable and make sense

Since it's breaking and since we're not utilizing npm yet (right?), should we go with adding the size = "none" option for now and then when we have better version control in place do the switch from size -> gap? I'm not sure how it's used by the teams at the moment but breaking changes should be easier to introduce when we use the npm repo I guess @filiptammergard @bjornlexell