Open petesfrench opened 3 months ago
WG: @petesfrench @juanruitina to provide a couple of examples of how this has been implemented in other DSs and we could look into commissioning a design for the icon.
I've had a look at a handful of websites that have heading anchor links:
Discourse: icon to the left, shows on hover, only icon is linked, points to anchor
Carbon design system: same as Discourse
Apple Developer: same as Discourse (but icon to the right)
React documentation: same as Discourse (but icon to the right)
MDN Docs: hash to the left on hover, both heading and icon point to anchor
GitHub documentation: icon to the right, always visible, both heading and icon point to anchor
:
Material: icon to the left shows on hover, copies link
Google Cloud documentation: same as Material (unsurprisingly), icon to the right
Gov.uk doesn't seem to use anchor links on headings. Headings have ids (so can be linked to), but anchor is only accessible via table of contents, not the heading itself.
https://www.gov.uk/government/news/bird-flu-avian-influenza-latest-situation-in-england#cases
@bartaz The request to have the headings clickable comes from the documentation team
@bartaz The request to have the headings clickable comes from the documentation team
Yes, I know. We are just gathering examples of how others are doing something similar.
Hold on, we do have a link icon in the Figma library! It just doesn't seem to be implemented. Could we just add it to Vanilla? @lyubomir-popov @bartaz
Hmm… we have the icon of that name, but it's a chevron… I can try to track down if that was a deliberate decision or just some mistake:
We have the icon in code snippet component, it looks like a bug that it got replaced to chevon. We can bring it back.
WG: Link icon is a good fit.
@bartaz What do we have to do to get this upstreamed to vanilla?
@petesfrench Create a PR and we can take it from there in review.
It may be good to verify it first by some local implementation on one of the docs websites, to see if that works as intended in the context of the docs.
@petesfrench What's the status of this? You had some PR for that on one of docs websites, but I don't know where it was and has it landed?
Visual
Normal:
Hover:
![image](https://github.com/canonical/vanilla-framework/assets/58276363/5b890f1e-6e7a-4d03-b8b0-44943cd0c059)
Context
All docs
SCSS example