search

commercetools / ui-kit

Component library 💅
https://uikit.commercetools.com
MIT License
144 stars 25 forks source link

Grid.Item placeSelf prop options inconsistent from standard CSS Grid option #2868

Open jocelyn-dunkley opened 1 month ago

jocelyn-dunkley commented 1 month ago

Describe the bug According to the Mozilla place-self docs, it's supposed to be a shorthand for alignSelf and justifySelf. So you are supposed to be able to add two options like "end start" or "stretch center". But the Grid.Item only allows for 1 string option like "end". I assume the logic on your end was that if you wanted to have different self values you should use both alignSelf and justifySelf props separately. Like<Grid.Item alignSelf="center" justifySelf="end"> However it seems like you're trying to have the Grid component match the normal CSS grid so this inconsistency is a bit confusing.

To Reproduce

Expected behavior I can use the placeSelf prop to add max 2 options which will correspond to alignSelf and justifySelf, respectively.

ddouglasz commented 1 month ago

Thanks for reporting. Yes, the place-self property can combine the align-self and justify-self property. I can make more findings to know if there is a reason why we kept it this way. We will discuss this and see if we are considering the possibility of taking advantage of the place-self property.