Polaris-react: Add links to annotated layout descriptions

[paulisloud]

Issue summary

Would like to add documentation links to annotated layout descriptions. I've tried anchor links, markdown links and React Links. Is this a possibility? If not, can it be added?

Expected behavior

Including a link in annotated layout descriptions using one of a number of common link styles generates a clickable link which opens a new window.

Actual behavior

The anchor link code is just directly outputted to the view.

[chloerice]

Hi @paulisloud, thanks for raising this. I've added this to our feature request backlog, so I’ll close this issue for now.

We encourage other folks who want this feature to add a 👍to the issue description. Collective need weighs into what we enhance next 😊.

[nickdrewe]

Hi @paulisloud, After spending some time trying to achieve the same thing, I dove into the AnnotatedSection component and discovered that the description prop accepts a ReactNode type. This means that you can use JSX to add a link to your AnnotatedLayout description.

Here's my solution:

render(){
  const AnnotationDescription = (
    <p>An annotated section description including a <Link url="https://example.com/">link</Link>.</p>
  )

  return (
    <Layout.AnnotatedSection
      title="Cart - Payment buttons"
      description={AnnotationDescription}>
      <Card>...</Card>
    </Layout.AnnotatedSection>
  )
}

cc: @chloerice