feat: add styles for tooltip headings

philippfromme commented 3 months ago

Proposed Changes

Adds styles for headings in tooltips.

Example

Checklist

To ensure you provided everything we need to look at your PR:

[x] Brief textual description of the changes present
[x] Visual demo attached
[ ] Steps to try out present, i.e. using the @bpmn-io/sr tool
[x] Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

nikku commented 3 months ago

Looks good. Off topic: I'm not sure if we want to give Recommendations here, or in the documentation.

nikku commented 3 months ago

Consider: Should this be h1, asking for i18n reasons.

philippfromme commented 3 months ago

Looks good. Off topic: I'm not sure if we want to give Recommendations here, or in the documentation.

This reflects the designs: https://www.figma.com/design/rBrtBbzaC8zIhcuG8JsLct/Resource-binding?node-id=1-4&t=hpVpOZAoz73S42Dx-0. We can dicuss the contents of the tooltop in the respective pull request.

Consider: Should this be h1, asking for i18n reasons.

Markup for tooltip looks like this:

<div>
  <p>
    <h1>{ translate('Latest binding') }</h1>
    <i>{ translate('Best suited for development environments.') }</i>
    <br />
    { translate('Always uses the most recent version available, incorporating the latest updates.') }
  </p>
  <p>
    <h1>{ translate('Deployment binding') }</h1>
    <i>{ translate('For process applications or deployment via API.') }</i>
    <br />
    { translate('Ties to the exact version deployed with the current deployment for stability.') }
  </p>
  <a href="https://docs.camunda.io" target="_blank" rel="noopener">{ translate('Learn more.') }</a>
</div>

It is indeed not good for i18n but we have other tooltips with the same problem of many translate() calls.

nikku commented 3 months ago

Cf. https://github.com/bpmn-io/bpmn-js-properties-panel/pull/1067#issuecomment-2250199944.

bpmn-io / properties-panel