Improve <calcite-input> suffixes and prefixes

[hcampos-professional]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

When using a <calcite-input> or <calcite-input-number> with a prefix-text or suffix-text, users are finding it difficult to understand that the suffix and prefix are not clickable. Matters complicate further if the clearable property/attribute is set, since the button looks so similar to the suffix and prefix:

Another issue is that, when multiple inputs are placed next to each other, the suffixes and prefixes won't necessarily have the same with, which doesn't look great.

After some internal discussions, a proposal was floated: placing the suffix and/or prefix inside of the input itself. Here is a mockup of the proposal:

Acceptance Criteria

• When prefix-text and/or suffix-text are specified, they should appear inside of the input instead of inside a bordered container.

Relevant Info

No response

Which Component

• <calcite-input>
• <calcite-input-*>

Example Use Case

The use case we're exploring at the moment is displaying multiple numerical values of a tool stacked vertically, each value with its unit displayed as a suffix-text. In this scenario, having all the suffixes with different widths and having the units appear clickable is not desirable.

Priority impact

p3 - want for upcoming milestone

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[macandcheese]

We may need to explore ways of making the prefix visually distinct from the input content. Suffix doesn’t suffer from the same issue in default alignment but will if alignment is set to end.

It may still be nice to offer way to set the width of these via css property to ensure consistent widths, either when prefix/suffix or both are used. You might still end up with the “width stagger” depending on set up.

Could you add some mockups of these other states to add to the proposed design, and possibly some explorations of focus area? Would clicks on the inert suffix / prefix focus the input ?

[Anastasiia-Boleiko]

The proposal looks great, +1 from the ArcGIS Urban team.
The current number input with a unit looks like:

In our case it's fine if a unit is close enough to the input value.

[macandcheese]

The proposal looks great, +1 from the ArcGIS Urban team. The current number input with a unit looks like: In our case it's fine if a unit is close enough to the input value.

I think a persistent "trailing suffix" like shown here (but visible during entry) could be nice to explore.

[Anastasiia-Boleiko]

The current number input with a unit looks like:
In our case it's fine if a unit is close enough to the input value.

I think a persistent "trailing suffix" like shown here (but visible during entry) could be nice to explore.

Hi there! 👋

Could you please clarify when we can expect the input component such an update? It's important for ArcGIS Urban app for proper planning and prioritization.

[geospatialem]

Hi there! 👋

Could you please clarify when we can expect the input component such an update? It's important for ArcGIS Urban app for proper planning and prioritization.

@Anastasiia-Boleiko Thanks for reaching out, relayed on your note to the design team. Designers will be prioritizing efforts for a future milestone late next week (dev work would be in a separate milestone). Stay tuned for additional updates in the future.

[github-actions]

cc @geospatialem, @brittneytewks

[hcampos-professional]

Another related pattern that appeared in some internal proposals is to have the suffix be a "dropdown" (or at least clickable) to allow users to select units, for example. If the suffix needs to be clickable or an actual select/dropdown, it may speak in favor of the current design where it already looks clickable.

That being said, the UI could be achievable by using the action slot of the <calcite-input>, except that slot is currently meant for a <calcite-button> and not a <calcite-select> or <calcite-dropdown>: https://codepen.io/hccampos/pen/mdZXXbP?editors=1000

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.13.0-next.9
https://codepen.io/Ditwan-Price/pen/abgxyNW?editors=1100