search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

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

Closed macandcheese closed 1 week ago

macandcheese commented 9 months ago

Check existing issues

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. image

Acceptance Criteria

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

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 https://github.com/Esri/calcite-design-system/issues/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 team

Calcite (design)

geospatialem commented 2 months ago

For design expertise to determine support for the above.

SkyeSeitz commented 2 months ago

@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[bot] commented 3 weeks ago

Installed and assigned for verification.

DitwanP commented 3 weeks ago

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 commented 3 weeks ago

@DitwanP SGTM! 🚀

DitwanP commented 1 week ago

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