schenglooi commented 1 year ago

🙋 Feature Request

The ability to use the StatusLight component as an Item in a Picker component

🤔 Expected Behavior

Selected StatusLight component should be shown in the Picker as styled in the Item when the list is collapsed
The StatusLight component should be rendered correctly as an Item in the list when the list is opened, i.e. the dot and text should be aligned properly.
The Picker width should be resizable without causing the text part of the StatusLight to wrap
If the StatusLight text is too long, should have the option to truncate with an ellipsis.

😯 Current Behavior

The text part of the StatusLight wraps if the size is set to anything less than "size-1400"
Picker width greater than "size-1400" does not seem to have an effect on the size of the Picker.
The selection highlight for non-selected Item is incorrect when the list is open

Workaround for selection highlight:

<Text>
   <View>
        <StatusLight ... />
   <View>
<Text>

💁 Possible Solution

🔦 Context

This Picker component is intended to show progress. Our list has two items, "In Progress" and "Approved". The user chooses "Approved" to move something forward. The StatusLight was also used in a different view to indicate the "progress" for that item.

I ended up spending some time trying to implement workarounds using other components to duplicate StatusLight. All of which did not work out.

The result of the current implementation: Note that the width of the Picker is too wide compared to the design.

💻 Examples

mockup in dark mode;

🧢 Your Company/Team

Adobe/3D&I

3D&I, WF

🎁 Tracking Ticket (optional)

devongovett commented 1 year ago

I think the solution to this should be an option for StatusLight rather than something specific to Picker. I think if StatusLight was inline-flex rather than flex, and removed its builtin padding (which is problematic in many scenarios), the issue would be solved. The question at this point is how to make those changes in a non-breaking way. We'll either need a new prop, a new component, or a new major version for this package.

reidbarber commented 1 year ago

Is there a downside to just fixing the style issues via slots?