Display link to element template documentation

[nikku]

Is your feature request related to a problem? Please describe

As a user I want to be able to read documentation related to a specific task type ("element template"), if provided (#614):

Describe the solution you'd like

• If provided, display a link to the element (template) documentation in the properties panel header.
• update element template docs

Describe alternatives you've considered

None.

---

Depends on #614.

[pinussilvestrus]

This also depends on how much the panel header is aware of element templates: #610 (comment) + #610 (comment)

[pinussilvestrus]

@currandwyer is the icon already available to use?

[nikku]

<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.064 10.0646V5.66793H11.3333V10.0653C11.3333 10.3998 11.2055 10.6949 10.9499 10.9505C10.6943 11.2061 10.3992 11.334 10.0646 11.334H1.26933C0.915062 11.334 0.614938 11.211 0.368963 10.965C0.122988 10.719 0 10.4189 0 10.0646V1.26933C0 0.915062 0.122988 0.614938 0.368963 0.368963C0.614938 0.122988 0.915062 0 1.26933 0H5.66667V1.26933H1.26933V10.0646H10.064ZM11.3338 0.00160619H6.93648L6.93585 0.000976562V1.27031H9.17922L3.01074 7.43879L3.896 8.32405L10.0645 2.15557V4.39894H11.3338V0.00160619Z" fill="#818698"/>
</svg>

This is the icon. @currandwyer Please share design resources with @pinussilvestrus where approprate, too.

[pinussilvestrus]

This is kind of related to make it possible to display URLs in descriptions: #626

However, as I understand it, the goal here should be to make documentation URLs easier discoverable, without having to open the template section.

[pinussilvestrus]

The basic implementation is done via

• https://github.com/bpmn-io/properties-panel/tree/documentation-links-header
• https://github.com/bpmn-io/bpmn-js-properties-panel/tree/616-documentation-header

I will conduct a chat with @currandwyer to clarify the design of the link. We have other places where we have action icons (e.g. add, collapse) and I believe we should make sure they behave similarly.

[nikku]

Looks great already. The icon does not seem to be aligned vertically on the header though. Is this intentional? Looks a bit disturbing I think.

[pinussilvestrus]

Looks great already. The icon does not seem to be aligned vertically on the header though. Is this intentional? Looks a bit disturbing I think.

I didn't style it at all so far, only dropped the icon and aligned it to the right 🙂

[nikku]

Interestingly I'm using a slightly different icon (this one). @currandwyer please point to source of truth.