catalog icon indicating copy to clipboard operation
catalog copied to clipboard

CodeSpecimen component expects only string children

Open oliverjam opened this issue 7 years ago • 0 comments

It looks like <CodeSpecimen /> is expecting children to only be a string. If you end up with multiple children (easily done if you're escaping special characters etc) then it gets passed an array and throws console errors. Also the lang prop wouldn't work as long as I had array children (it rendered fine though).

For example:

<CodeSpecimen>
  import {"{"} Button {"}"} from 'components/button';
</CodeSpecimen>

results in

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Code`, expected `string`.

and

Warning: Failed prop type: Invalid prop `code` of type `array` supplied to `HighlightedCode`, expected `string`.

I've worked around this for now by ensuring everything ends up as a single string:

<CodeSpecimen lang="javascript">
  {"import { Button } from '@ticketmaster/mosaic';"}
</CodeSpecimen>

I assume that <HighlightedCode /> needs a string to pass to Prism, but could we allow strings and arrays in <CodeSpecimen />'s prop types and then ensure arrays get turned back into strings before they reach Prism?

Happy to try a PR if you're open to it.

oliverjam avatar Feb 28 '18 15:02 oliverjam