Option to Right align the text inside input text field.

[ppurumala]

Is your feature request related to a problem? Please describe.
Option to Right align the text inside input text field. We have a requirement to show amount field on the screen, and business team wants that to be right aligned inside the text field.
We request this change to happen in this component: https://developer.dxc.com/tools/react/3/#/components/input

Describe the solution you'd like
There should be a attribute called 'align' when value given as 'right', the text should be on the right side inside the text field.

Describe alternatives you've considered
There is no alternative for this requirement.

Please revert if this is a not a valid request or location to raise this issue.

[jsardid]

@ppurumala can you elaborate about the use case when you need to right-align the content?

[ppurumala]

Attached is just an example, in our application we wanted that all amount fields be right aligned within input Text field.

[aweell]

Thank you @ppurumala, that's a perfect example, we'll investigate the possibility to justify content for the current review of the input component.

[Anubhav122]

Hi,
For the alignment issue reported we found that it can be fixed by doing the following.

1. Open file InputText.jsx [DxcInputText component]
2. Introduce a new prop for DxcInputText => textAlign = [ "left" | "right" ]
3. include new inputprop={{style : {textAlign: textAlign}}} inside component.

Please let us know if this can be taken ahead.

[aweell]

Hi @Anubhav122,

Some considerations about the proposal:

1. Let's assume we add the prop and we align the value of the input-text to the right:

Figure 01. Right align value

The label will still be left-aligned.

• When working with a different set of numerical data we will face the case when we have large and small numbers, we need to make the width of the input-text long enough to cover the largest value in the set (if we know it beforehand) in order to avoid the gap between the label and the value shown in figure 01.

Figure 02. Eye movement schema using right align values

2. The objective of the right alignment is to improve scannability between values vertically stacked, so the label element of the input-text is wrongly positioned in order to achieve this task. Right-align the value does not solve the issue since there is still an element between the values the user wants to compare.
3. The problem of point 2 can be solved by changing the position of the label element in relation to the input-text container, in this scenario we have two possibilities:

• Right-align the label
• Left-align the label

Figure 03. Label alignment. Extracted from the article "Top, Right or Left Aligned Form Labels" by Luke Wroblewski

From where we need to decide if we are going to open the possibility to align also the label when facing this particular scenario.

In conclusion, the alignment of the value and the use case presented has some implications that cannot be solved just by adding a text-align property to the value of the input-text component.

• Probably the alignment of the value should change the position of the label and a prop called textAlign is not the best semantical representation of that change in the anatomy.
• Should be a clear understanding and guidelines of when we can do this change:
  • Only used with amounts when they need to be compared vertically
  • Avoid mixing different data types when using this property (e.g. a string that should be left-aligned with three inputs with numerical values right-aligned)
  • etc...
• How the helper text/error message will be displayed?
• What happens when the label is longer than the available space? Breaks in two lines, can be three lines or there's a maximum? Does it overflow?

Another important consideration about the change is that this component will be deprecated soon, replaced by a new input-text where we have already included the consideration of this issue in our discussions.

I understand the value and improvement that having this functionality in the input-text can bring, but the proposal of the right alignment seems to have implications far away from the value alignment itself that need to be considered.

[mjayaraj2]

Had a discussion with CDK team and team will look on this

[raquelarrojo]

Right align of the NumberInput will be discussed in next release.

[mjayaraj2]

@raquelarrojo Could you please let us know if there is plan for this feature in this release?