[Enhancement] Controls for labels in widgets to align the widgets in forms and other places

[RakshaKShetty]

Description

[What happened] When there are multiple input widgets with different label lengths then the input box looks miss aligned

Steps to reproduce the behaviour:

1. Go to 'canvas
2. Drag and drop 2 to 3 input widget
3. Now change the label name of all 3 input box
4. Give the first input box label as name and second as age and third as address
5. Now the Label value area looks misaligned

Important Details

• Version: [Cloud ]
• OS: [MacOS]
• Browser [chrome]
• Environment [release]

[areyabhishek]

Good catch. We need to improve the way this widget resizes to allow for perfect alignment of input fields. Else our forms will look terrible. @momcilo-appsmith check this out

[momcilo-appsmith]

I suggest we split the width of the widget 50/50 between the label and input box when the label is on the side and not on the top.

[areyabhishek]

I got a few questions. How would resizing work then? Would the split always be 50/50 between the label and input field? Wouldn't this be wasted space if the label is too small? How would this work if the label is too big?

Is this experience possible to prototype in Figma using autolayout?

Alternatively I was wondering if we can treat the input+label as a compound widget with two widgets side by side.

[somangshu]

@areyabhishek @momcilo-appsmith another way should be to have the label on top of the input with increased default height, Hence I wanted to consider the use case while thinking about the reflow feature.

50/50 will work fine until all the fields are of the same width, Other wise the above mentioned will be repeated.

If there is a need to develop a composite widget with input and label we need to create a new widget all together.

[ramsaptami]

Second @somangshu here for label placement above/below the input box since it takes up less of that valuable real estate on the canvas.

Edit: Looks neat too

[somangshu]

@ramsaptami that ideally is a solution which is proposed multiple times but has an implementation challenge. To do this we will have to allow dynamic height inside of widgets which will be picked up as a stretch goal from the Reflow widgets epic.

[areyabhishek]

Can reflow widgets and dynamic height be different issues? Dynamic height is really important, because it's impairing the quality of widgets. Meanwhile for horizontal labels, can we do something to help alignment of the labels? The label text styling is also off in comparison to our text widget, so it looks out of place.

[momcilo-appsmith]

"50/50 will work fine until all the fields are of the same width, otherwise the above mentioned will be repeated." @somangshu I think this is where the user has to worry about the design.

@areyabhishek Yes, 50/50 is possible to prototype with auto layout.

I think 50/50 or 40/60 is definitely the solution here. It will resize with the widget + it will give the user the ability to make all the inputs in the form the same size and aligned.

[somangshu]

@momcilo-appsmith @areyabhishek should we solve for the above with a 40/60 width approach?

[areyabhishek]

@momcilo-appsmith could you prototype this interaction before we build it?

[momcilo-appsmith]

Here: I can only do 50/50, but we can try 40/60 or 30/70

[somangshu]

@sbalaji1192 the design team has worked on a solution for the challenge above and we might be ready to go in a few days, Check out the design and discussion here. If things look good, we could take this up with the widget enhancements.

[somangshu]

Designs here.

Dev Note:

• What is the current approach here? The label is left aligned on a single row element, and takes width as required by the content hence-fourth pushing the input component on different alignments. this looks really off.
• What is the solution? For inputs of equal length (on ui), we will fix a predetermined space between label and input component, any label that is longer than the available space will truncate (ellipses on the same line) and on hover show all the content on a tooltip.

cc @dilippitchika @wmdev0808

[dilippitchika]

@somangshu reviewed the figma, have some doubts I have added to figma, just adding the comment screenshot here.

@momcilo-appsmith need some help with these if these are already discussed. If not, let's close this on a priority.

[dilippitchika]

Items discussed - Users can control the following properties

1. Label position - Top, left and auto
2. Label alignment - Left or Right
3. Label width (only applicable when label position is left) - No. of columns only for now All current instances of widgets will use the label position auto field, which will persist the current behaviour as-is.

[dilippitchika]

Adding the PRD here -

Objective

Today the users have to manually align labels for the input fields they are working on. With the default settings we provide it’s hard for a user to keep aligning them manually. We wish to improve this experience by providing the user will controls for editing the label’s position, alignment and width.

Success Metrics *

Goal	Metric
Build forms which are visually great	User feedback on the label controls

Requirements

The following widgets need label fields:

1. Date picker
2. Rich text editor
3. Checkbox group
4. Switch group
5. Radio group

After labels are added, Labels controls are needed for the following widgets (Type 1)

1. Input
   1. Regular input
   2. Currency
   3. Phone number
2. Date picker - (Label)
3. Select type inputs
   1. Select
   2. Multi-select
   3. Tree-select
   4. Multi-tree-select
4. Rich text editor
5. Checkbox group
6. Switch group
7. Radio group

Label controls are different for checkbox and radio widgets (Type 2) will be covered in a different issue.

Requirements

Requirement	User story
Devs can configure the position of the label to be left, top or auto.	As a developer in appsmith, I want to control the position of the label to align my forms accordingly.
Devs can configure the alignment of the label to be left or right	As a developer in appsmith, I want to control the alignment of the label to align my forms accordingly.
Devs can configure the width of the label in grid columns.	As a developer in appsmith, I want to control the width of the label to perfectly align forms with labels on the left.

Positions

• Left - Devs can select this to show the label to left of the input
• Top - Devs can select this to show the label to top of the input. For all new widgets being dragged on to the canvas, the position should be set to top.
• Auto - Current behaviour, where the label changes position based on resize. For all existing instances of widgets, label position should be set to auto with a migration.

Alignment

• Left - Devs can select this to align the label to the left side of the box.
• Right
  • When the position is top- Devs can select this to align the label to right side of the box
  • When position is left - Devs can select this to align the label closer to the input box.

Width in grid columns

• Only visible when the position is set to left.
• Devs can set a number for the no. of columns the label can occupy.
  • If the number exceeds the max columns label can occupy - We detect the max width a label can occupy. Assuming this to be 70% of total width for now and set it to that width. However, we will not be showing any error to the user.
  • If the text exceeds the width configured - We truncate the text and show ... (ellipsis) in the same line. On hover, user can see the full label. (Con with this approach - Will not work in mobiles)

Documentation

• Updates to documentation to add these new fields for all the following widgets

Out of Scope

• RTL alignment of the labels

Developer Handoff Document in Figma

Figma Link here

Property pane design - https://www.figma.com/file/hlOcM5LasxcRqEwHPXe5lm/UI-|-Content-Property-Pane?node-id=2777%3A64824

Widget design - https://www.figma.com/file/w9CaXHF5iYcrLtiEbAHcFu?node-id=1580:9841#126493257

RACI Matrix

Responsible
Accountable
Consulted
Informed

[wmdev0808]

@somangshu , According to your suggestion, I've put my estimation for this issue 15.

[momcilo-appsmith]

@somangshu Why am I assigned to this again?

[somangshu]

@momcilo-appsmith I was tagging you for the design audit I believe, @wmdev0808 can you tell us if there is a design requirement here. Apologies for the confusion

[wmdev0808]

@somangshu, The basic functionality is working as expected. The point is that almost all relevant widgets also have Label styling section named by "Styles" which includes label text color, label text size and label font style(actually label relevant style props). As far as we are adding new Label section(position, alignment, width), will we merge these properties or leave them as they are? Note: This is just my guess, @dilippitchika will finally confirm

[dilippitchika]

Change - We want to support our developers adding the label width using a slider interaction than simply having to type out a number and trying to approximate. This slider type interaction will be how developers interact with the width property.

Design is pending for this and is being worked on.

[momcilo-appsmith]

@dilippitchika Just asked Emy for the component, will be updated soon.

[somangshu]

@momcilo-appsmith @emysmth any updates here?

[momcilo-appsmith]

@somangshu We are proceeding with the input for now, as this is blocking us and we believe that the users will understand the designs.

[dilippitchika]

Since we are not able to get a slider property type yet, the current suggestion is to implement arrows to increase or decrease the number.

Additional requirements In the "width" field in the label group

1. Support arrows to increase or decrease the "width" using clicks, similar to the number type input where the developer can only add numbers.

2. Support JS switch for the "width" field, which when clicked shows the input field for adding JS or number.

[wmdev0808]

@somangshu , For the above additional requirements, my time estimation is 2

[wmdev0808]

Hi @somangshu As we've already discussed, Having JSONForm in the release is breaking the current PR.

What should be done:

• Label tooltip feature should be reimplemented so it no longer depends on width and height props
• Some additional code refactoring because all the fields from JSONForm are using the same underlying components as ones in this PR

For this, I am increasing the estimate by 2

[wmdev0808]

Hi @somangshu , For this requirement at here, my estimation is 0.5

[wmdev0808]

@somangshu , I am increasing the estimate by 0.5 for fixing the failed test cases that is introduced by implementing this request at https://github.com/appsmithorg/appsmith/pull/10600#issuecomment-1081814439

[wmdev0808]

@somangshu , I am adding more 2 for the estimate. It covers the work taken for fixing scrollbar issue between Release vs DP