Updates placeholder for post comment block #27013
Conversation
karmatosed
added
Needs Design Feedback
karmatosed
requested review from
ajitbohra,
Soean and
talldan
as code owners
|
Size Change: -13 B (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
|
Looping in @jameskoster here as potentially this block will get iterated outside of this PR. My thinking is this visual fix can ease whilst that's getting done, but happy to close now I know about #26856. Ideally going beyond the visual fix bringing in an input field could be a nice change similar to the table block, but there's a visual win outside of that change here. |
| } | ||
|
|
||
| input { | ||
| height: 36px; |
There was a problem hiding this comment.
You can replace 36px with $button-size here.
|
Cool PR. I think it needs a slightly different approach though. For a basic placeholder such as this one, you shouldn't need to create a new editor style just to fix this layout issue, those should be fixed at the component level, i.e. so every future placeholder like this works. So I did a little inspecting, you can look here:
So it looks from the above that |
|
@jasmussen Thanks for the review. I did remove the styles and would love to fix at component level if that's possible. I did some digging and could manage to get the class to wrap everything, but not on specific element. I'd happily learnt that though in this case. |
|
Yep, looks like this uses the In the mean time, as a description change, we can probably just get this in. |
Ah! This explains why I couldn't get it to work way I expected whilst following definitions! No rush at all on this, I'll look at getting this merged as a string and then we can take from there. |
(Forgive me for stating obvious things. I'm just walking through all the steps) Based on the original screenshot, it looks like there's a height difference between the controls (input x button). ⚛️ Systematic Control UIFrom a systematic perspective, all control elements should have the same height value. They should also have a series of height variants (e.g. small -> large). In the case of G2 Components, the cluster of input + button would look like this: <Grid templateColumns="200px 1fr">
<TextInput {...props} />
<Button {...props} />
</Grid>The sizes can be made larger through the <Grid templateColumns="200px 1fr">
<TextInput size="large" {...props} />
<Button size="large" {...props} />
</Grid>The 🛰 SpacingYou may notice there's nothing specified for spacing 🤔. That's because For ✨ ExamplesI've prepared an example CodeSandbox with various examples. https://codesandbox.io/s/g2-control-cluster-size-example-4blni Hope this helps! |
gziolo
added
[Block] Comments (legacy)
This is a little PR that cleans up the placeholder on post comment block. Whilst a lot of these content type blocks are a work in progress, there are some visual hitches that can be smoothed. Primarily what this does:
Before:
After:
Feedback
I specifically would like a code review, but this shouldn't need much feedback as really just aligning with other blocks. Of course, any input is always welcome.