Comments (13)
@bartaz The request to have the headings clickable comes from the documentation team
from vanilla-framework.
We have the icon in code snippet component, it looks like a bug that it got replaced to chevon. We can bring it back.
from vanilla-framework.
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.
from vanilla-framework.
I've had a look at a handful of websites that have heading anchor links:
- All websites except MDN use the link icon (🔗). I suggest that we go ahead and commission that icon.
- Most just link to the heading as we do. Only Google's copy the link to the clipboard. ✅
- Only MDN and GitHub make the whole heading clickable as we do, most just make the icon clickable. But I don't think our approach does any harm.
- Most show the icon on hover as we do ✅
- Some show the icon to the left of the heading, some to the right. I'm not sure which approach is best, but it seems to the right is simpler, even if it can potentially result in wrapping. But maybe this requires some testing with real content.
Benchmarking
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
from vanilla-framework.
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
from vanilla-framework.
@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.
from vanilla-framework.
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
from vanilla-framework.
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:
from vanilla-framework.
WG: Link icon is a good fit.
from vanilla-framework.
@bartaz What do we have to do to get this upstreamed to vanilla?
from vanilla-framework.
@petesfrench Create a PR and we can take it from there in review.
from vanilla-framework.
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.
from vanilla-framework.
@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?
from vanilla-framework.
Related Issues (20)
- Collapsable side panel HOT 5
- (Firefox) Holding shift while clicking a checkbox causes the click to not be registered HOT 7
- Sliding navigation: "Back" button chevron points to right instead of left
- Make dark theme hrs consistent with light theme HOT 1
- Dividers in equal heights component don't work well when items are hidden on smaller screens HOT 1
- p-equal-height-row: remove padding-bottom, make separators muted HOT 3
- Add left and right chevrons to vanilla icon set HOT 5
- Implement Expand and Copy functionality for Code snippets HOT 1
- Parent background highlights when clicking on child button in navigation dropdown item HOT 1
- Examples theme picker does not reflect selected theme HOT 2
- grid bug - default span of elements without col-* class inside row is hard-coded to 12 for desktop HOT 1
- The tabs component is being used with a single tab. AFAIK, this is not intended usage. Should the documentation disallow it? HOT 2
- The keyword 'searchfield-cancel-button' used on the 'appearance' property was deprecated and has now been removed. It will no longer have any effect. HOT 1
- Misleading icon import documentation HOT 1
- Remove distinction between horizontal rules with and without margin HOT 4
- Filter bots from contributors list
- extend navigation separators in the application layout navigation
- Change icon alignment to `middle` when next to paragraph text
- p-modal__header need overflow:auto to prevent margin collapse HOT 1
- Intermittent color theme variation in Percy builds HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vanilla-framework.