fix: improved collapsable examples #1874
Conversation
burakukula
requested review from
a team,
m10l,
mshaaban0,
denkristoffer and
Lelith
as code owners
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/contentful-apps/forma-36/E5Vt7FL1VH3f7m9PLJuWehZBzASg |
| @@ -17,7 +17,7 @@ import { Card, Button, CopyButton } from '@contentful/f36-components'; | |||
| import * as f36icons from '@contentful/f36-icons'; | |||
| import { ExternalLinkIcon } from '@contentful/f36-icons'; | |||
| import { Flex } from '@contentful/f36-core'; | |||
| import theme from 'prism-react-renderer/themes/github'; | |||
| import github from 'prism-react-renderer/themes/github'; | |||
There was a problem hiding this comment.
I would rename this "githubTheme" just to avoid confusion
| size="small" | ||
| /> | ||
| {isExampleFromFile && ( | ||
| <Flex marginLeft="spacing2Xs"> |
There was a problem hiding this comment.
we don't need this Flex I think
we can use gap in the Flex containing these buttons
| @@ -3,7 +3,7 @@ import React from 'react'; | |||
| import Highlight, { | |||
| defaultProps as HighlightDefaultProps, | |||
| } from 'prism-react-renderer'; | |||
| import theme from 'prism-react-renderer/themes/github'; | |||
| import github from 'prism-react-renderer/themes/github'; | |||
| font-size: ${tokens.fontSizeM}; | ||
| line-height: ${tokens.lineHeightM}; |
There was a problem hiding this comment.
Do we really want to have code in the code blocks smaller? For me, it's a bit inconvenient right now to read it.
There was a problem hiding this comment.
Yeah, that was the requirement from design.
In the next PR we will provide a custom template for examples, it will be a bit darker.