[Container] Add vertical & horizontal padding, margin, border shortcuts

[robinweser]

No description provided.

[tkh44]

What did you have in mind for the api of these shortcuts?

What would be your ideal way to represent multi-value values, e.g. padding: 4px 4px 8px 4px;

I see how you have it in the readme. I may be able to give this a shot today.

[robinweser]

Heyhey @tkh44 cool that you're in!
I just thought about sth. like <Container paddingVertical={10} /> which adds either paddingTop: 10, paddingBottom: 10 or padding: 10px 0 but I guess the first one would be better to merge multiple values. (if you also use the pure top, left, right, bottom in combination with those)

You may also check out React Native's <View> Component. As far as I know they have implemented those exactly as I thought we could do it too.

[tkh44]

Sounds good. I'll take a look at the react native implementation.

[tkh44]

After playing with this a bit tonight I don't think that having the shortcuts explicit (Vertical/Horizontal) would work out too well. Might as well use the css shorthand style. Borders are very tricky because of their complicated nature. I did come up with this

https://jsbin.com/jociwi/35/edit?js,console

There are several test cases at the bottom. I think you could just merge these produced props with what you have. What do you think? If you like it I can implement this in the lib or we can make changes as necessary.

[robinweser]

Alright I see. Great work you did there. Is React Native actually providing the border shortcut values? I guess perhaps padding and margin are just right (and I really often need exactly vertical/horizontal borders).
Me might only implement those, I don't know exactly. I do not want to increase complexity and bundle size needlessly. What do you think about it?

[tkh44]

They actually don't provide any of these shortcuts as you have them. They just provide a style hook and check against a given list of proptypes.

https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.js#L265

You can see the prop types here

• StylePropTypes
  https://github.com/facebook/react-native/blob/master/Libraries/Components/View/ViewStylePropTypes.js
• LayoutPropTypes
  https://github.com/facebook/react-native/blob/f7c48ee0cef0bd8cb5fe94ce2e7d1e028c553a83/Libraries/StyleSheet/LayoutPropTypes.js

My suggestion would be to just emulate the react-native api as close as possible while keeping the way this lib has predefined box layouts and just provide shortcuts for the box-model properties as seen here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model.

This would give a standard and intuitive way to communicate that the given component has shortcuts for all of the box model properties and they will be converted to the proper styles.

[robinweser]

@tkh44 I totally forgot to answer 😅 I actually thought they'd provide such style properties, but seems I got that wrong or perhaps saw it somewhere else. I agree with your idea to keep the API as simple and standard as possible. Feel free to push any improvements :)

So I guess we can close this one?

[tkh44]

Yeah you can close this one.