fix: callout styling #891
fix: callout styling #891
Conversation
There was a problem hiding this comment.
Tried this locally and it's working great save for one edge case I noticed.
| {empty || React.Children.toArray(children)[0]} | ||
| </h3> | ||
| {empty ? children : React.Children.toArray(children).slice(1)} | ||
| {React.Children.toArray(children).slice(1)} |
There was a problem hiding this comment.
Why do we not need this ternary logic anymore? Is it possibly related to this discrepancy?
There was a problem hiding this comment.
It was a little simpler to leave the title/heading as an empty child. But we could just as easier refactor the code not to.
components/Callout/style.scss
Outdated
| border-color: var(--border); | ||
| color: var(--text); | ||
| padding: $l-offset; | ||
| min-height: 3 * $l-offset; |
There was a problem hiding this comment.
Hmmm, interesting that we need to set a minimum height at all here… (And also kinda strange to see this left offset var being used to set the height!)
There was a problem hiding this comment.
Probably not a huge deal, but it does suggest that there was some underlying change to the callout markup? It'd be nice to know what that is/why it broke the layout!
There was a problem hiding this comment.
This is/was actually a pre-existing condition? Perhaps it was a regression I introduced, but it is happening in core @readme/markdown.
There was a problem hiding this comment.
Ahhh, I see, I see… Unlikely to be something you introduced though! I probably just never tested my original CSS against an entirely empty callout since it’s (technically) not a case that we support.
There was a problem hiding this comment.
Interesting—even GitHub doesn't handle empty quotes particularly gracefully… Check it out:
Honestly, thinking about it a little harder now, there shouldn't really ever be a scenario where you'd have an empty callout. Maybe we can just remove this line entirely?
| min-height: 3 * $l-offset; |
|
This PR was released!🚀 Changes included in v6.75.0-beta.45 |
🧰 Changes
Fixes empty header callout styling.
🧬 QA & Testing