feat: Detailed code component for longer code examples #3236
Conversation
|
View your CI Pipeline Execution ↗ for commit 2711ba7 ☁️ Nx Cloud last updated this comment at |
|
📬 Published Alpha Packages: |
|
🚀 Styleguide deploy preview ready! Preview URL: https://696ff64ac8e223cfaaa1dab5--gamut-preview.netlify.app |
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!
| language, | ||
| }) => { | ||
| return ( | ||
| <DetailedCodeBodyWrapper column> |
There was a problem hiding this comment.
Given that this Wrapper is already using CSS on a FlexBox, I think you can instead add a flexDirection: 'column' to the object passed into the css() function.
| }; | ||
|
|
||
| return ( | ||
| <FlexBox> |
There was a problem hiding this comment.
Is this parent FlexBox needed?
| width="100%" | ||
| > | ||
| <FlexBox alignItems="center" columnGap={12}> | ||
| {heading && ( |
There was a problem hiding this comment.
Q: when would a heading be provided? i.e. what is a heading used for?
| export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({ | ||
| heading, | ||
| isExpanded, | ||
| language, |
There was a problem hiding this comment.
consider defaulting to tsx
| import { FlexBox } from '../Box'; | ||
|
|
||
| export const DetailedCodeWrapper = styled(FlexBox)( | ||
| css({ |
There was a problem hiding this comment.
Note: here's where FlexDirection could be added
| '& > 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'
| ? getPreviewCode(code, normalizedPreviewLines) | ||
| : code; | ||
|
|
||
| // Show the button to expand the code if there is more code than the preview lines, and hide the button if there is no more code |
There was a problem hiding this comment.
very much a nit, but I don't think you need this comment
| @@ -0,0 +1,67 @@ | |||
| export const codeExample = `import { | |||
There was a problem hiding this comment.
this file could be renamed to examples.ts to follow the naming convention of other examples in this repo
| <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.
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