Center (layout)
sumius opened this issue · 8 comments
Visual
const centerStyles = () => css`
${spacing({ top: 'zetta' })} // optional prop?
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;Context
Centering content is a common task and I've seen a lot of duplicated code for solving this. My proposal is to create a layout component that can be used in these cases, similar to the code snippet above. It could include more optional props to cater for more use cases.
State
No state.
Progressive enhancement
This is just about centering a single item, so the behaviour on smaller screens would be the same. We could consider having an alignment component that excepts several items, but then the scope increases and is another discussion all together.
This makes sense I think! It seems similar to our style mixins to me, a small utility that avoids having to repeat common code. I'd add it as a mixin rather than a component to avoid the extra DOM nesting. Other thoughts @sumup-oss/design-system-codeowners?
Mixin is a good idea!
Yeah, adding this as a style mixin sounds good.
Sidenote: Is the screenshot above using the NotificationFullscreen component?
Sidenote: Is the screenshot above using the NotificationFullscreen component?
Yes, it does @connor-baer
Do you want to submit a PR for it @sumius?
Center mixin added.
...and about to get released in 4.17.0 🎉 Thanks again @sumius