Fix: Docs for Blankslate Component #3623
Conversation
- Currently the import statement on the docs site is incorrect. - Also the storybook stories is link correctly. - Added stories in Blankslate.docs.json to fix the issue and also fixed the docs by adding Blankslate.mdx
|
electron97
temporarily deployed
to
github-pages
GitHub Actions
Inactive
src/Blankslate/Blankslate.docs.json
Outdated
| "stories": [], | ||
| "stories": [ | ||
| { | ||
| "id": "components-blankslate--default", |
There was a problem hiding this comment.
| "id": "components-blankslate--default", | |
| "id": "drafts-components-blankslate--default", |
Blankslate is currently a draft component, so in order to ensure the Storybook embed is pulled in accurately I think this may need to be adjusted.
There was a problem hiding this comment.
Hey @lesliecdubs ,
Thanks for your review I have addressed your review feedback and updated the PR accordingly.
I have one question as I am new to this repo and wanted to understand how things are working.
Is this metadata being imported by some other repo to render it on the docs site because when I am running the primer/react repo locally I can only see the storybook of all the components and I was not able to test my changes which I made in Blankslate.docs.json locally.
Could you please let know whenever you get a chance?
Thanks!
There was a problem hiding this comment.
Thanks @electron97!
@broccolinisoup (FR) do you have the context to help answer this question about how the docs are rendered? If not I can try to do some digging.
There was a problem hiding this comment.
Thanks @lesliecdubs for the ping, I think I can help. I don't have a deep knowledge on all details yet but I can provide some context.
Is this metadata being imported by some other repo to render it on the docs site
@electron97 Yes! We export the component metadata and render the docs in https://github.com/primer/design repo, specifically this line fetches the react components data. When you render the docs in react, what you will access to is only the react docs https://primer.style/react
If you can look at the Blankslate component's data on the unpkg url, the story id is components-blankslate--default and it is because we generate a default story id for each component (reference)
Adding "id": "drafts-components-blankslate--default", to the docs.json, I believe the story will be available on https://primer.style/design/components/blankslate/react - I am just not sure if the current broken story will go away 🤔 We will see!
Regardless, I think your changes looks great ~ I only have a comment about the changeset. We usually don't publish any changeset for docs work. If this is okay with you, would you remove the changeset file and I can add skip changeset label? Let me know if you have any concern though or if you need any more clarification around how the docs are rendered. I hope it was helpful! Thank you so much for your contribution 🙏🏻
There was a problem hiding this comment.
Hey @broccolinisoup,
Thanks for the detailed explanation it was really helpful and it would definitely help me in the future working with component metadata. I have removed the changeset and updated the PR accordingly feel free to add a skip changeset label.
I have one question initially I had created a Blankslate.mdx file which I thing is missing currently and for that reason we are not seeing any Blankslate docs here in https://primer.style/react. I didn't wanted to blocked this PR because this is fixing docs for Blankslate component. So do you think we should create a new issue for missing Blankslate docs in https://primer.style/react or do you think it was not added due to some other reasons?
Could you please let me know?
Thanks!
There was a problem hiding this comment.
So do you think we should create a new issue for missing Blankslate docs in https://primer.style/react or do you think it was not added due to some other reasons?
We are in the process of consolidating our docs in https://primer.style/design and React related docs will be on the the component's React tab. So, at this stage we are not looking into adding docs to https://primer.style/react.
Thanks so much for your contribution to fix the story id 🙏🏻
electron97
temporarily deployed
to
github-pages
GitHub Actions
Inactive
|
Just cross posting the comments from this PR #3670 - We will probably want to solve them in the same way |
|
#3670 fixes the default story id for components that are not in the main bundle (i.e. drafts, deprecated etc) With the fix is out, BlankSlate docs are now rendered correctly 🎉 I'm closing this PR but please let me know if there is any concern 🙌🏻 |
Closes #3620
Summary
Blankslate.docs.jsonso that it appears correctly on the docs site.Blankslate.mdxfile to fix incorrect import.Screenshots
Please provide before/after screenshots for any visual changes
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.