Add component status page #282
Conversation
Co-authored-by: Charlotte Dann <pouretrebelle@github.com>
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-style/D2ZtLcDVTGQkKGcA36C6tYbrqRmV |
| <th align="left">Component</th> | ||
| {/* TODO: How would we add a Figma column? Where would that data come from ? */} | ||
| <th>ViewComponent</th> | ||
| <th>React</th> |
There was a problem hiding this comment.
There's a slot in the component-metadata schema for Figma but it's just the URL and not the status; we could change the schema to add that in there? Or is there a different way that we could magically pull the data for straight from Figma? 🤔
I don't think it should be a blocker for this PR though because when we update/add to the component-metadata package we'll have to bump the version in this repo, and we can make any additional changes then.
There was a problem hiding this comment.
Adding status to Figma in the schema sounds good to me, but I'd like us to wait a few hours to see what @ashygee suggests. I think it would be great with ship with Figma as we treat is an implementation too and it's useful for our designer audience, if it doesn't involve a lot of work.
There was a problem hiding this comment.
Where would be a good place for the Figma status labels to link to?
There was a problem hiding this comment.
For Figma status I think that would be a little difficult. I have made a consideration for adding the status to a component in the new layout I've started to use in Primer Web but I've been relating it more to the status of the component in code, which is tricky now that we have a divergence of status between PRC and PVC.
Another thing to note is that we don't have actual status criteria for Figma. I think on this table, instead of a status, it would be better to state, possibly with the use of simple ✅ and ❌ emojis if the component exists in Figma. Maybe in the metadata there could be a key that passes a boolean for inFigma: true/false and then we can link to the page in Figma. I'd love to see more tooling to automate this so there would be less manual work but for now I think just having stock of the inventory would be more valuable in Figma than it's status since, ideally, the Figma component would be the most complete compared to code. (Although this is not the case everywhere, I'm looking at you buttons.)
|
@yaili gave me the 👍 to merge |
Co-authored-by: Charlotte Dann pouretrebelle@github.com
Summary
Implements a cross-implementation component status page at
primer.style/status.👀 Preview: https://primer-style-git-status-page-primer.vercel.app/status
A few implementation details:
@primer/component-metadataNext steps
primer.style/statusin the Primer header. We may need to rethink the information architecture of the links in the header.componentIdfrontmatter to all the markdown pages in the Primer React docs(Nice to have) Make table header sticky so column headers stay visible as you scroll down the pageAdd component status page #282 (comment)Part of https://github.com/github/primer/issues/114