Add `info` icon to tooltips for disabled phase fields

[maxceem]

Task

There are disabled fields at phase form, like duration and progress with a help tooltip.

We have to add a help icon indicating there is a tooltip with help.

Note

The whole component for displaying label + input = <TCFormFields.TextInput> comes from appirio-tech-react-components:

As you can see above if we just try to add an icon directly, it can only be placed on the edges of the whole component <TCFormFields.TextInput> which looks not good.

So to implement it, most likely I'll need to update <TCFormFields.TextInput> in appirio-tech-react-components OR partially reimplent it in connect-app.

Question

To choose the best way to implement it, please advise where you woud like the help icon to be placed?

@vikasrohit
Continues #2248 (comment)

Aha! Link: https://topcoder.aha.io/features/TCCONNECT-318

[vikasrohit]

I think 3 is better. But I would wait for @vic-topcoder to suggest the best way.

From technical point of view, I think we should add tooltip feature to form components in react-components repo. We should show tooltip if tooltip content is provided and should give option to place it at two places, one is after label (which option 2 in above image) and another would be after value (option 3).

Anyway, we would take care of it later, for now adding it to the list of 2.4.5.

[vic-georgiev]

Option 4 is the best - it does provide help target, but not associate the explanation with the days themselves. On 3 I assume the user would understand the question mark to explain why there are exactly 17 days, not what controls the duration.

Let's go with option 4. I'll attach some design guidelines for helper icon - this was always a tertiary option/feature and it never had the chance to leave the drawing board (but I have ideas about it!).

[vikasrohit]

On 3 I assume the user would understand the question mark to explain why there are exactly 17 days, not what controls the duration.

@vic-topcoder That is exactly, why we want tooltip there when the field is disabled to convey that why this field is disabled now and from where its value is coming.

[vikasrohit]

@vic-topcoder do we have any design for this?

[maxceem]

@vikasrohit Should I just follow 4th case advised by @vic-topcoder or any new design will be provided?

[vikasrohit]

@maxceem I think we need capability of having tooltip like option 3 as well because in this case, we are showing tooltip only when the field is disabled and its value is controlled by timeline, so essentially we are showing tooltip to let user know from where the value is coming, we are not describing the the duration field itself where we need option 4.
And last thing, for option 4 we don't need change in the react-components because we can achieve that by adding tooltip component after the formsy component, right?

@vic-topcoder we need the tooltip icon from your side and any other updated design for this.

[vikasrohit]

To be more specific about the scope @maxceem I think following needs to be closed in this scope:

1. Update react-components repo to support tooltips(with configuration for placement of the tooltip) in formsy components (wherever possible)
2. Use the capability developed in 1 to show tooltip for duration field OR
3. if we still have strong argument in favour option 4 for this particular use case, show the tooltip after the formsy component.
   In nutshell, whether we go with task 2 or 3, it would be better to have 1 done so that in future we can get tooltip support just we like.

[maxceem]

@vikasrohit correct, for option 4 we don't need to updated react-components.

[vic-georgiev]

round help icon
round-e-help.svg.zip