Research what should be the API for some of the parts inside layouts like title, action bar
bentleyvk opened this issue · 2 comments
Grid:
For layout with grid we could use grid-row: span [number] and grid-column: span [number]
User would just need to provide two numbers in React props.
https://codepen.io/greta-nausdait/pen/abVmVxb
MUI does something similar only for columns https://mui.com/components/grid/
We would still need to figure out default row-height and responsive behaviour. I think those are just design choices and easily achievable with this approach.
API:
We could create Centered, TitleArea , DataArea, Grid, Card components.
(simple example https://codepen.io/greta-nausdait/pen/abVmVxb)
Title Area (blue in codepen) is just a container and we provide more specific one (eg. PageTitle) with title and description props for users who don't want to find out Headline and text components.
This way:
- lazy users use page title component for text and we provide vertical spacing.
- not so lazy users can put grid there and have more complex layouts.
For grid, if we use row span and column span, we must handle responsive behaviour and size breakpoints. We could use current responsive design breakpoints and column count (12, 8, 4) or (4, 2 and 1) and just calculate card size.
Eg. we have 4-2-1 system, user wants card to span 4 columns, if medium screen this card takes 2 columns and etc (full width). If users want card to span 3 columns, in medium screens this card takes 1 column. I'm not sure if this makes sense and probably this can be very hard to write in code.
Don't add links to internal resources, also Teams might delete everything. Better copy paste what we have in Teams.