feat(Forms): add inline HelpButton to all Field.* components as default (with option to open in Dialog)

[tujoworker]

This PR changes the existing behavior of the help prop for Fields that previously supported it. The content now opens inline instead of in a Dialog.

The help prop has now all of these optional props:

<Field.String
  label="Label text"
  help={{
    title: 'Help is available',
    content:
      'Take the time to help other people without expecting a reward or gratitude is definitely important in living an optimistic life.',
    open: false,// only for the inline variant
    renderAs: 'dialog'
  }}
/>

Examples with inline "HelpButton":

• FieldBlock (several examples)
• Form.MainHeading
• Form.SubHeading
• Field.String
• Field.Number
• Field.Upload
• ... many other fields do have an example as well.

NB: We do not document the internals of the inline version at this time. This can be included in another PR. The reason is that it would require additional tests, examples, and documentation. It is also an "isolated" feature specific to the HelpButton. However, as of this writing, I am unsure if we will ever document it, as integration is not straightforward. There are several considerations to address when implementing it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 7:26pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[langz]

trim.CD1E5E30-B40D-4CBF-8836-6DD8B22274B4.MOV

When closing, the title/header of the message jumps/shifts upwards a bit. Not very important, but it's noticeable.

[langz]

Looks very good.
I've not read it all yet.

• Have we added some docs/changelog presenting that the default behavior of the help text/property is now inline(previously a dialog).
• And if some users still want to use the dialog variant, we could add what they need to do.
• some docs about when we suggest using the dialog variant. You mentioned something in the lines of long texts, etc.
• Is it only strings that can be provided to the help property? Or React.node's as well?

[langz]

trim.CD1E5E30-B40D-4CBF-8836-6DD8B22274B4.MOV

When closing, the title/header of the message jumps/shifts upwards a bit. Not very important, but it's noticeable.

Also, when pressing the help button the input Field gets focus/active state/styling. Is that intentional and desired? Not sure myself.

[tujoworker]

the title/header of the message jumps/shifts upwards a bit

This is on purpose. But badly executed. Added a 40ms delay, and now I think it fells perfect.

[tujoworker]

when pressing the help button the input Field gets focus/active state/styling. Is that intentional and desired?

This is a side effect. It's the "hover effect". First I have tried to have the HelpButton outside the label, but that creates other/larger layout/placement issues. I fear we have no choice. But I will take another look if there is way to avoid that.

[tujoworker]

Have we added some docs/changelog presenting that the default behavior of the help text/property is now inline(previously a dialog).

Not yet. I think we should add that in #4279

And if some users still want to use the dialog variant, we could add what they need to do.

<Field.String
  help={{
    title: 'Title',
    content: 'Content.',
+   renderAs: 'dialog'
  }}
/>

some docs about when we suggest using the dialog variant. You mentioned something in the lines of long texts, etc.
Is it only strings that can be provided to the help property? Or React.node's as well?

React.Node

[tujoworker]

I'm not sure what happened here 🤷 and because it can't be repoened (why?) I create a new one #4282