feat: introduce o3-grid-column-width CSS Custom Property
#1776
Conversation
components/o3-foundation/grid.css
Outdated
| @@ -10,6 +11,7 @@ | |||
| repeat(var(--o3-grid-columns), 1fr) 8px; | |||
| --o3-grid-area: 'bleed-left content-start . . . . . . content-end bleed-right'; | |||
| --o3-grid-columns: 8; | |||
| --o3-grid-column-width: calc((740px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns)); | |||
There was a problem hiding this comment.
Unsure if a hard value of 740px is going to work here. It's going to need the px value for calculation but I don't see how I can get a fluid value outside of vw 🤔
There was a problem hiding this comment.
It's not going to work because there's no 740px container, the grid is flexible.
We should only need to set the two Custom Property twice. Once for the fluid grid, then once when it's fixed at 1220px.
I haven't thought about it deeply but: vw is closer to what we actually mean but I we might want to be careful of scrollbars or dynamic viewports.
Alternatively, can we assume the grid is a containing block and use 100%?
--o3-grid-column-width: calc((100% - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
There was a problem hiding this comment.
Finally, maybe --o3-grid-column-width isn't actually what we want public! If our aim is to allow people to set widths of nested items, to align with grid columns, we need to account for gaps.
This is not a very fun API to set a width of 6 cols:
div {
width: calc(((var(--o3-grid-column-width) + var(--o3-grid-gap)) * 6) - var(--o3-grid-gap))
}
There was a problem hiding this comment.
Alternatively, can we assume the grid is a containing block and use 100%?
Does this imply that any component using this var must be inside a grid? Is this going to be problematic with form elements which may not necessarily be in a grid?
There was a problem hiding this comment.
This is not a very fun API to set a width of 6 cols:
div { width: calc(((var(--o3-grid-column-width) + var(--o3-grid-gap)) * 6) - var(--o3-grid-gap)) }
Is this example correct? We already have gap calculated as part of o3-grid-column-width.
There was a problem hiding this comment.
div {
width: calc(((var(--o3-grid-column-width) + var(--o3-grid-gap)) * 6) - var(--o3-grid-gap))
}
This could potentially be fixed by allowing the user to set a custom property in scope to control the value of 6:
// somewhere in o-grid.
--o3-grid-span-columns: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-span-columns-count)) - var(--o3-grid-gap))
// a local file
div {
--o3-grid-span-columns-count: 6
width: var(--o3-grid-span-columns)
}
I'm not a fan of the naming here, ideally I want to differentiate between the var to give you the width value and the var to control how many columns, maybe --o3-grid-columns-to-span?
There was a problem hiding this comment.
I've introduced a new variable to allow this, it will need to be paired with a user-controlled var to work. Let me know what you think, I'll write docs once we've agreed an approach.
There was a problem hiding this comment.
That's a great idea 👍 Naming these are hard but I like your initial suggestion.
These seem quite clearly connected:
--o3-grid-span-columns--o3-grid-span-columns-count
These seem more loosely associated by name:
--o3-grid-span-columns--o3-grid-columns-to-span
There was a problem hiding this comment.
Maybe?
--o3-grid-columns-to-span-width--o3-grid-columns-to-span-count
There was a problem hiding this comment.
Adjusted, thanks :)
|
Looks good 😄 Now just to document in the README and potentially add a demo, showing a nested element aligned to the grid, to the Story? |
| @@ -74,6 +74,10 @@ export function O3Grid() { | |||
| {item.text} | |||
| </div> | |||
| ))} | |||
| <div style={{gridColumn: `content-start / span 6`, backgroundColor: 'tomato'}}> | |||
| Span 6 | |||
| <div className='nested-element'>Nested Element</div> | |||
There was a problem hiding this comment.
Styles should be inline here so they are visible in Storybook's HTML tab. Otherwise there is no way to know whether nested-element is something Origami provides or not, and no way to know how it works without opening dev tools
Describe your changes
Some components outside of grids may use grid dimensions. For example, form elements may use
max-widthconstrained by a number of columns in grid, without being part of one.This PR adds CSS custom properties at each breakpoint to give components outside of a grid some values to work with.
Issue ticket number and link
Link to Figma designs
Checklist before requesting a review
percylabel for o-[COMPONENT] orchromaticlabel for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md