[Input] Allow customization of prefix-text and suffix-text width

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The prefix-text and suffix-text functionalities of Input determine their width from the length of the provided string. This is expected, but in a situation where multiple Input are aligned, and the string lengths are different, it can cause visual misalignment.

Acceptance Criteria

Css properties for --calcite-input-prefix-text-width and --calcite-input-suffix-text-width are exposed to allow for this customization.

Relevant Info

@SkyeSeitz @ashetland - We'll likely want to decide if we "start-align" or "end-align" the suffix-text here. prefix-text seems safe to always "start-align". I suppose we could also decide this based on the alignment property of Input, should we want to.

We have #8154 to track general updates to this functionality, but these enhancements will be useful regardless of visual changes.

Which Component

Input and any Input-based components that accept these options.

Example Use Case

I have multiple Input stacked with varying prefix-text and suffix-text lengths. I'd like these to align.

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[geospatialem]

For design expertise to determine support for the above.

[SkyeSeitz]

@SkyeSeitz @ashetland - We'll likely want to decide if we "start-align" or "end-align" the suffix-text here. prefix-text seems safe to always "start-align". I suppose we could also decide this based on the alignment property of Input, should we want to.

Agreed "start-align" for prefix regardless of alignment. "end-align" for suffix as a default makes sense to me and "start-align" if input alignment is sent to end.

[github-actions]

Installed and assigned for verification.

[DitwanP]

Was moved to 3 - installed during design triage in order to verify that this is resolved by #8154. Could also be closed since it looks to essentially be the same thing @geospatialem thoughts?

[geospatialem]

@DitwanP SGTM! 🚀

[DitwanP]

Closing this issue out because it has been addressed in #8154