Add helper text for experimental variable input

[KochTobi]

Solves #738

[Shraddha0903]

@KochTobi The helper text looks good although can we adjust the text to 3 lines only?
I cannot see the placeholder text in this screenshot. We provide placeholder text for examples of the values and how they should be written. Font colour for placeholder text is lighter than body text (Secondary text)
Each time the user adds an extra variable in the dialog, it should show the same example as placeholder text in the text fields.

[KochTobi]

@KochTobi The helper text looks good although can we adjust the text to 3 lines only?

It is quite some effort to do this and increases complexity. To do this the input field would need to be wider which in turn makes the dialog wider.

I cannot see the placeholder text in this screenshot. We provide placeholder text for examples of the values and how they should be written. Font colour for placeholder text is lighter than body text (Secondary text) Each time the user adds an extra variable in the dialog, it should show the same example as placeholder text in the text fields.

I did not notice them in the draft. They are added now.

[Shraddha0903]

@KochTobi Awesome!
It's just that it takes up a lot of space for a single property, was trying to reduce that.

Just one other thing the blue cross at the end of the variable row is not aligned with the text fields, seems to be a little down (maybe coz its blue? 😛) Can we align it with the fields?

[KochTobi]

@KochTobi Awesome! It's just that it takes up a lot of space for a single property, was trying to reduce that.

Just one other thing the blue cross at the end of the variable row is not aligned with the text fields, seems to be a little down (maybe coz its blue? 😛) Can we align it with the fields?

Not easy no :/ The image is perfectly aligned. There is some transparent background inside the icon but changing that would be a lot of effort / I don't know how to easily do that with shipped icons.

[KochTobi]

@KochTobi Awesome! It's just that it takes up a lot of space for a single property, was trying to reduce that.
Just one other thing the blue cross at the end of the variable row is not aligned with the text fields, seems to be a little down (maybe coz its blue? 😛) Can we align it with the fields?

Not easy no :/ The image is perfectly aligned. There is some transparent background inside the icon but changing that would be a lot of effort / I don't know how to easily do that with shipped icons.

Ah wait. I understand what you mean. Let me check

EDIT: No not possible. Possible alignments: next to the label Levels or at the bottom.

[Shraddha0903]

@KochTobi I feel we can wait for @Steffengreiner to have a look if it's possible, i.e. to top align the icon with respect to the text box only. If it's not possible or takes a lot of effort then we can move to another solution (for e.g. displaying the option to delete the row on the bottom of each row)

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[Shraddha0903]

@KochTobi Nicee job! I think it looks good now. 👍