Potential side note / aside design

[tylersticka]

Overview

A little prototype with some controls to experiment with a potential floating sidebar design, which @Paul-Hebert suggested in #2148.

This isn't intended to be merged, just to share a deploy preview for reference and discussion.

Screenshots

On small screens, the side does not look much different from a paragraph with a silver background:

I set its font-size to be one step down in our modular scale, but it felt really small to me, so I used a max function to only do so up to a minimum of 16px. I'm open to feedback on this.

I wondered if it might feel less intrusive sometimes to use <details> and <summary>, so I added a control for specifying a summary:

Is that too boring looking? I'm not sure.

At very wide sizes, I use some absolute positioning and a lot of calc to nestle the side note into the margins. I also use a radial gradient to fake an inverted rounded corner, because I thought it felt a bit disconnected from its point in the article. (I mean, it's still a lot more disconnected from the original footnote, but this way I think it's clear that it comes between two paragraphs.)

Like @Paul-Hebert's site, I added a modifier to allow the aside to align the opposite way:

The <details> version would work the same way at large sizes:

Gosh, that version is missing something. Does it need a rule between the summary and details? Should the summary be a medium weight? I'm not sure.

I'm also wondering now if the container is too confining on large screens. Maybe a border to the left or right would work? Might be worth trying and comparing.

Testing

Try it out for yourself. I've not tested it outside of Arc (Chromium).

[changeset-bot]

⚠️ No Changeset found

Latest commit: a6cfc65

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	a6cfc65
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/642efc5436c02c000885c828
😎 Deploy Preview	https://deploy-preview-2158--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Paul-Hebert]

Yay, this is great! I didn't review the code but in terms of functionality I think this is great (and honestly would be fine adding this as a feature as-is while we fine-tune it.)

Is that too boring looking? I'm not sure.

I do wonder if there's an opportunity to add some character to the <summary> while still having its meaning clear. Could something small like using a different arrow/icon or giving the arrow a color help?

Gosh, that version is missing something. Does it need a rule between the summary and details? Should the summary be a medium weight? I'm not sure.

I wondered the same things. I think both options are worth exploring.

I'm also wondering now if the container is too confining on large screens. Maybe a border to the left or right would work? Might be worth trying and comparing.

I wondered about this as well. I think the container is fun but I'm not sure I'd always want it. Maybe it should be an optional style on large screens? Or maybe we do a different treatment all the time like you mentioned.

---

Other random thoughts:

1. Should summary have cursor: pointer? I know some folks are pretty passionate that only links should get that style but in practice it seems like most users expect all/most interactive content to get that cursor?
2. I assume this can include non-paragraph content? e.g. could I put a list of links? Or a testimonial quote with an avatar?
3. On large screens, the current design makes it clear the side not sits between paragraphs, but I wonder if that matches the intent of our usual use case. When I've used side notes in the past they've contained auxiliary info about a specific paragraph. I wonder if it should instead sit to the side of the paragraph above? (Obviously we can't do this on small screens. I'm also not sure how feasible it is on large screens with the way the DOM flows but I figured I'd mention it.)

Thanks for working on this Tyler!