docs: layout guide #1091
docs: layout guide #1091
Conversation
kuzhelov
requested review from
dvdzkwsk,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
Codecov Report
@@ Coverage Diff @@
## master #1091 +/- ##
=======================================
Coverage 82.09% 82.09%
=======================================
Files 711 711
Lines 8528 8528
Branches 1224 1224
=======================================
Hits 7001 7001
Misses 1511 1511
Partials 16 16
Continue to review full report at Codecov.
|
docs/src/views/Layout.tsx
Outdated
| {code('Grid')}. | ||
| </li> | ||
| </ul> | ||
| <Header as="h3">Note on Segment component</Header> |
There was a problem hiding this comment.
Actually, we should have the same note about Box component
There was a problem hiding this comment.
nit: We can move this section after Flex recipes
There was a problem hiding this comment.
Notes on Box component
speaking of the Box component - it seems that the first thing we should do is rather fix its description. I've intentionally consulted about whether the Box component is seen now as a layout one, given the recent change of its description: https://github.com/stardust-ui/react/blob/master/packages/react/src/components/Box/Box.tsx#L20
Thus, lets just make things consistent - change the description of Box component and put an update to the guides then - otherwise it will just create conflicting thoughts in the client's head.
Why not put after Flex recipies
This is, actually, done intentionally. Given current usage statistics, the problems that are described in this 'Notes' section is much more serious (especially taking their conequences into account) rather than the ones introduced by overuse of, say, Flex.Item. Thus, it is very important to make this note earlier than later.
Another point relates to where this paragraph semantically attributes to: it definitely should be a part of the section where Stardust layout components are enumerated, with the corresponding use-cases for each - and thus I would rather leave it here and won't introduce a separate section for it.
There was a problem hiding this comment.
We added note about Segment, it's cool 👍
But, I want avoid the following thing: "Okay, I can't use Segment... Oh, we have have Box, let's do <Box styles={{ display: 'flex' }} />!" I.e. Box can be abused for layouts purposes, too.
There was a problem hiding this comment.
agree - then, if we agree on fixing Box description (which now states that it is a layout component), then let me do that and introduce a dedicated section to the Layout guide
| <Flex.Item> | ||
| <Button content="Deny" /> | ||
| </Flex.Item> | ||
| </Flex> |
There was a problem hiding this comment.
I like the way how it's done on overreacted.io:
Something like this will be really nice :)
There was a problem hiding this comment.
yes, fully agree - I would say, anything that would allow us to have comments preserved would be already a huge win :) for now can do either of two:
- use the approach currently taken
- or write code twice - one for example's code, one for the actual rendering
Given these options, have chosen the first approach because, essentially, it will at least guarantee that these two things (code and rendered output) won't go out of sync
There was a problem hiding this comment.
Let's leave as is for now, duplication is more evil 😈
|
Could we add linked to the layout guide in the Flex, Segment, Box, Layout components? (Put in description as link?) Let's also update description of Box and Segment and explicitly say what they're used for and not used for. Having this information duplicated isn't a bad thing.... |
Introduces first version of Stardust Layout guide.
This version is specifically focused on
Apart from that, several style issues in Stardust guides were addressed.