Add footnote styles

[talum]

Adding footnote styles to Primer.

While enabling footnote support, we iterated on the styles within dotcom. Now that they seem fairly stable, it'd be great to finish them up and move them.

Here's an example:

and a gif showing the :target styles:

---

Q: Since these new updates aren't in dotcom yet, I'm wondering, what's the release time on a change like this? 🤔 (In other words, is it worthwhile for me to make the corresponding change in dotcom first?)

/cc @primer/css-reviewers

[changeset-bot]

🦋 Changeset detected

Latest commit: ee6c52e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vdepizzol]

I'm noticing quite a jump in the footnote element when it receives the :target pseudo-class:

• Can we make sure the :target styling doesn't affect the position of the bullet point element?
• Can we position the borders in such a way it that they don't touch the edges? See example below.
• Should we be specific about this :target rule? It's currently being applied to any element inside .markdown-body .footnotes, but maybe we should be more specific.

Example of surrounding border better respecting the spacing around:

Link to Figma exploration

Thank you! 🙇 🙇 🙇

[talum]

Makes sense...I think this is going to be as close as I can get due to time constraints. I'll play around a little more on Monday and push it up. Thanks for your guidance and patience! I haven't done my own CSS in quite a bit of time. ✨

Eliminated bullet point positioning jump

[simurai]

This is a bit tricky because the list-item numbers are "outside" of the <li>. Tried using list-style-position: inside;, but that caused problems with multi-line content like pagraphs.

This PR #1624 uses a ::before pseudo element to "draw" the :target style with negative positioning so it looks like the list items get wrapped:

[talum]

Oh, I like it!!! Yeah, I was trying a similar technique in this branch. It did made the multi-line content strange, which I tried to get around by adding margin-left to any paragraph that wasn't the first child.

I'm wondering if the right side should also have some positioning so that there's symmetry. Let me see.

Thank you for your help 🙏🏼 . The ::before pseudo element is interesting. I had tried to remove the jumpiness by adding a transparent border.

[talum]

Cherry-picked @simurai's commits. 🍒 Updated description ☝🏼 .

Also added the darkened text when targeted.

I didn't change the spacing between paragraphs (that's in the mock). It seemed really tight to me and made it hard to read.

Example:

[simurai]

Tested it locally and looks great. ✨

Added a comment about using data-footnote-ref, but not sure if it's a big problem if we don't.

[simurai]

Is there a chance that a user would want to add a link inside a <sup> and not get it wrapped with []? It seems we currently use the data-footnote-ref attribute. So if we wanted to scope this a bit more, we might can instead use:

Suggested change

	sup > a::before {
	content: "[";
	}
	sup > a::after {
	content: "]";
	}
	[data-footnote-ref]::before {
	content: "[";
	}
	[data-footnote-ref]::after {
	content: "]";
	}

Not sure if data-footnote-ref will be part of, I think we use a "common mark" library and safe to use? 🤔

[talum]

Hmm...That's a good question.

Yeah, data-footnote-ref is safe to use (I added it to the library 😄 ).

I think it's a pretty low chance that a user would want that behavior.

[simurai]

Ok, we can keep it "as is" and in case we hear reports from users, switch to using [data-footnote-ref].

[vdepizzol]

Looking great!