Add "Required" property and inline action slot calcite input labels

[mitc7862]

Description

We need a better way to indicate to users when fields are required in order to run an analysis tool.
We also need the ability to let users show parameter-specific help. Both of these needs could be met by enhancing the calcite label component to have the following:

1. A boolean property that allows developers to indicate if a form field is required. If the property is set to true, there would be a red indicator that trails the label text (See the image below for my design proposal).
2. A generic slot at the end of the label component that allows developers to include a link or an action. In the case of analysis, we would use this to trigger a popover.

Acceptance Criteria

Required property:

• When a property is set to "True" the required field is clearly indicated
• When the user hovers over a required indicator, there is a tooltip that says "Required"
• If a required field is focused using a screen reader, the word "required" is read following the name of the input.

Action slot:

• A developer is able to include interactive content (i.e. a link or link icon) within the label component.

Relevant Info

This enhancement is needed for the Analysis "min ship", which is slated for the 10.3 online release.

Which Component

Calcite Label for

• Input
• Select
• Combobox
• Text area (future)
• Any other component wrapping calcite label

Example Use Case

No response

[macandcheese]

@benelan @jcfranco - noted as high priority. Mitch has available cycles to help with design if needed.

From design standpoint - would need to figure out how to display this / position the slot amongst other unnamed content slotted in label - the inline / inline-space-between layouts would need to be considered.

It is achievable currently: https://codepen.io/mac_and_cheese/pen/LYddREp?editors=1000

But the label's click handler focuses the child control when clicking on the slotted actions - maybe an opt-out class consumers could use to exclude slotted elements like actions as shown above could be an interim fix / helper?

[subgan82]

Hi All

Any update on this issue , we are looking to use this for showing analysis help for parameters. Can we have it for Online release 10.3?

[geospatialem]

Adding the slot will require a major refactor, and will be prioritized after next month's release. cc: @ashetland, @Elijbet

Once prioritized the effort should be coupled with #2793 and #4155.

[macandcheese]

Design consideration here must include the inline and inline space between layout types of label.

[ashetland]

Is there a need for a slot at both start and end positions as noted in issue #4155 (pictured below), or are we looking for just an end slot shown in the above examples?

[geospatialem]

Follow-up includes:

• Gathering use case feedback from teams, and
• Determine requirements of Create generic item layout component #6743 for inclusion/next steps on the above.

[github-actions]

cc @geospatialem, @brittneytewks

[geospatialem]

Blocked by the efforts of a built-in label across form components via #8572, targeted in the January milestone.