feat: Detailed code component for longer code examples#3236
feat: Detailed code component for longer code examples#3236
Conversation
|
View your CI Pipeline Execution ↗ for commit b7cff3f ☁️ Nx Cloud last updated this comment at |
LinKCoding
left a comment
LinKCoding
left a comment
There was a problem hiding this comment.
I really like what you've done!
I've added some notes to polish up the PR, but would love to hear your thoughts :)
Thanks for taking this on!
| export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({ | ||
| heading, | ||
| isExpanded, | ||
| language, |
There was a problem hiding this comment.
consider defaulting to tsx
| '& > div': { | ||
| borderRadius: 'none', | ||
| padding: 0, | ||
| }, |
There was a problem hiding this comment.
It seems like this could be omitted and the .docblock-source could get a borderRadius: 'none'
packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/codeExample.ts
Outdated
Show resolved
Hide resolved
| <Rotation height={16} rotated={isExpanded} width={16}> | ||
| <MiniChevronDownIcon aria-hidden size={16} /> | ||
| </Rotation> |
There was a problem hiding this comment.
It feels like we should have something more overt to indicate that this button will "show more code"
Or that there is more code to display.
My first thought is to have something shown right under the code snippet that is a TextButton that has ... show more code" that also has the same handleClick`
but would want to hear your thoughts
| borderRadius: 'none', | ||
| padding: 0, | ||
| }, | ||
| '& .docblock-source': { |
There was a problem hiding this comment.
I also did some styling testing and it seems like targeting the .docblock-source is the most consistent want to apply the styling :\ so that seems to be just the way to do it.
but I think it warrants adding a note for why it has to be done this way.
|
|
📬 Published Alpha Packages: |
|
🚀 Styleguide deploy preview ready! Preview URL: https://6997ab66eaea9031467b8fe9--gamut-preview.netlify.app |
3 participants
Overview
Adds an internal detailed code component for code examples that run longer.
PR Checklist
Testing Instructions
Don't make me tap the sign.
/?path=/docs/organisms-connectedform-connectedform--docs#example-codePR Links and Envs