the form label component APIs

[raoufswe]

Problem Outline

As part of my pre-refinement task for the pie-form label component, I would like to seek the team's opinion on whether we should make use of slots or props to pass different labels to the component.

The component, based on the design specs, should accept the following as string values:

• Label
• Optional label, to sit next to the main label with different styles
• trailing label / secondary label
• Help tooltip icon (out of scope for now since we don't have a tooltip yet)

and looks like this:

Proposed solutions:

1- Pass labels as slots:

<pie-form-label>
    label
   <slot name="optional">Optional</slot>
   <slot name="trailing-label">x out x</slot>
</pie-form-label>

2- Pass labels as props:

<pie-form-label 
   label="Label"
   optional="Optional"
   trailing="x out x"
/>

Considerations:

• the props approach might get verbose but it's easier to validate
• the slots approach is less verbose but will be a bit tricky to validate the content of a slot
• both options are common and will achieve the same thing :D

[ashleynolan]

I have no mega strong feelings either way.

Using the default slot for the main label text feels slightly more intuitive (mainly as that just replicates how <label> works), but other than that, I think it's whatever we prefer as a team unless anyone can see any major pros/cons.

[maledr5]

Thanks for the context, very clear to understand :D
It is a tricky one. I would follow the html style as much as I can as in passing the label itself as a the default prop.
Slots also generally give more freedom to what might be passed. We had a use case in my previous project of a team passing a 3 line paragraph and needing to use a custom icon. Do we want to enable that freedom?
Right now I would be leaning towards option 1, and validate/documenting accordingly to what teams should be able to pass.

[jamieomaguire]

Thanks for raising this @raoufswe!

If we go with the slot approach, I expect it may be difficult to style the content in a consistent way. Do you have any thoughts about how we can style the labels the way they are in the image you provided?

I am open to slots as long as we can still promote consistency and save effort for the consumers.

[raoufswe]

thank you all for your input
we will use the slots approach and reiterate if needed in the future.