FI-3019: Add custom blockquote styles #556
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #556 +/- ##
=======================================
Coverage 83.97% 83.97%
=======================================
Files 262 262
Lines 11430 11430
Branches 1260 1260
=======================================
Hits 9598 9598
Misses 1822 1822
Partials 10 10
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
It does look a little too subtle to me. Let's look to see what it is in this interface for a comparison:
Based on this, I would recommend a thicker line and maybe even making quoted text a tad lighter as a visual cue (only if meets accessibility guidelines though)? Not that GitHub is some kind of authority on this, but it does agree with my impression. |
| let lineIsQuote = false; | ||
| const quotes: string[] = []; | ||
| // Separate description into sections of blockquotes and non-blockquotes | ||
| descriptionLines.forEach((line) => { |
There was a problem hiding this comment.
Wow this is a lot more complex than I thought it would have to be. Why can't this whole file just be something like this (a very cursory search resulted in this, apologies if there is an obvious reason why this isn't supported):
<Markdown
components={{
blockquote: ({node, children}) => (
<blockquote style={{borderLeft: "4px solid #ccc", paddingLeft: "1rem"}}>
{children}
</blockquote>
)
}}
>
{markdown}
</Markdown>There was a problem hiding this comment.
The main reason is that blockquotes on different lines appear as separate blockquote components, so the bar on the left would render separately per line — assuming that it would be part of one blockquote, we’d actually want only one bar to render, hence the complicated logic.
There was a problem hiding this comment.
This is what I mean by the way:
There was a problem hiding this comment.
What was your input to that? I'd expect there to be a blank between the lines if it was like this:
> This is a blockquote
> This is another blockquote
vs. this:
> This is a blockquote
>
> This is another blockquote
That's consistent with what github does:
Checking what this does:
Separate 1
Separate 2
VS putting in the GT sign on a blank line.
Separate 1
Separate 2
There was a problem hiding this comment.
Oh yeah I was checking against the first one -- I can simplify things then
|
Updated styling, new version looks like this:
This color works with a11y contrast standards so it should be good to go. |
| @@ -17,6 +17,14 @@ class DemoGroup < Inferno::TestGroup | |||
|
|
|||
| This is a dummy canonical link http://hl7.org/fhir/ValueSet/my-valueset|0.8 that should not be | |||
| interpreted as a table | |||
|
|
|||
| > This is a blockquote | |||
|
|
|||
|
Not to iterate this to death playing code golf... but... is there a reason we can't just set a css rule for |
AlyssaWang
force-pushed
the
FI-3019-blockquotes
branch
from
d3bc20d to
110d2e6
Compare
Yeah that's true.. should be updated in the latest push |
Summary
Adds a bar on the left of blockquotes.
Open to feedback about appearance, e.g. bar should be thicker!
Testing Guidance
Visual test with Demo Suite -- blockquotes should show up with a bar on the left.