Grid

[airikej]

• No API changes, would move from Community to Tedi-ready component
• Add unit test for Row and Col components
• Simplify story description and move documentation to ZeroHeight
• Replace and update Row and Col import paths in Community components

Later:

• Update Tedi-ready component stories with Row and Col components

[tarmokullas]

Would it be possible to make <Col><Row>...</Row></Col> also work and be legible? Currently, there is a rule that Col has to be a direct child of Row.

I find <Row direction="column"><Col>...</Col></Row> to be a bit controversial since they switch meaning and make code reading worse.

[airikej]

The grid system is built on Bootstrap 5's structure, where a common design rule is that columns (<Col>) are always wrapped by rows (<Row>). Changing this hierarchy would introduce significant risks, such as:

• Breaking consistency: The grid relies on a predictable structure. Deviating from this could lead to unexpected behavior, making layouts harder to maintain and debug. Allowing rows and columns to be used interchangeably would defeat the purpose of the grid system

• Responsiveness issues: Bootstrap’s responsive design depends on the row/column hierarchy. Breaking this structure could cause layout problems across different screen sizes

I understand that using <Row direction="column"> may not seem ideal for readability, but this is due to Bootstrap’s internal structure. Additionally, this pattern isn't widely used, so sticking to the standard approach is generally safer

[tarmokullas]

Okay, that makes sense. I've had to use Bootstrap very seldom, so I didn't know it was already set up there. Let's keep it as is, then. Thanks for the explanation!