Enhancement: InputMessage - reduce prominence of the font and spacing between text and icon

[asangma]

Description

Suggest making the font less prominent and tightening up the space between the icon and the text.

Side note: perhaps we have some distinction between instructional/helper text and JIT messages.

Right now, more prominence might be good for error or warning messages, but for instructional text, it messes with the visual hierarchy.

It also seems like we could reduce the space between the icon and the text. Had a chat with @bstifle about this, and he had some concerns about it in relation to our scaling system.

Proposed updates

What it currently looks like in situ:

This could be us:

Acceptance Criteria

Relevant Info

Which Component

InputMessage

Example Use Case

[macandcheese]

Yeah I'd agree this is more of a "hint / tip" or "description" (which we've always talked about adding as a prop so we could provide some built-in styling, perhaps between the label and the top of control, or below in regards to description).

As displayed, how would a resultant error or message be shown - as a replacement? I see these as mutually exclusive. I think the styling updates above look better (maybe bump the icon up 1px to vertically center it?) and should be added, but maybe we need to go ahead and add the hint / description display fields somehow.

Keep in mind it can also be shown without an icon if the horizontal stagger or repetitiveness of the info icon isn't needed (and, to your point - would be better placed as helper text so the input-message is still available to display a resultant message)!

[macandcheese]

Related : input message styling- https://github.com/Esri/calcite-components/issues/1592 old "hint" issue - https://github.com/Esri/calcite-components/issues/538 (plus add description here cc @TheBlueDog ?)

[asangma]

Thanks @macandcheese!

[asangma]

@macandcheese

how would a resultant error or message be shown - as a replacement? I see these as mutually exclusive.

That makes sense to me. This was the case that made me wonder if it still an input-message so that as a dev, one would update the prop and the string.

Perhaps when the status prop is e.g. default or idle or something, and we only apply more prominent styling if it's something more urgent like warning or danger.

The icon prop would remain independent as it is now.

[TheBlueDog]

The tailwind-ified version of the current input in small. The margin below the label is mb-1 (4px) and the margin above the description is mt-2 (8px)

The preference would be for these to both be 4px. The lower slot is too far away from the input otherwise.

When you start putting many inputs in a long form, the spacing gets really out of ballance.

[TheBlueDog]

If we want these to adhere to the web form spec, hint is what is used for placeholder text.

The description is the helper text that appears below the input. When there is a validation message, it replaces the description.

The design specs are documented here: http://apps.esri.com/design/web/#/fieldmaps/design/input-types-textbox

[macandcheese]

@asangma @ashetland can we close this as outdated? Much of this could be addressed in upcoming form / validation / control work.

[ashetland]

I think that makes sense. It does point to a need for a "hint/description" slot/prop noted in #538 and #2793. This could be a valid reason to support that option along with an inline slot like defined in #5079. But yes, I think this is covered elsewhere.

[macandcheese]

Closing as these components will be evaluated for appearance in above issues.