Open schenglooi opened 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.
Is there a downside to just fixing the style issues via slots?
I don't think we should really do component specific overrides that way if we can help it. The problem isn't unique to Picker - the same padding also affects table cells and lots of other things. e.g. #2629
๐ Feature Request
The ability to use the
StatusLight
component as anItem
in aPicker
component๐ค Expected Behavior
StatusLight
component should be shown in thePicker
as styled in theItem
when the list is collapsedStatusLight
component should be rendered correctly as anItem
in the list when the list is opened, i.e. the dot and text should be aligned properly.Picker
width should be resizable without causing the text part of theStatusLight
to wrapStatusLight
text is too long, should have the option to truncate with an ellipsis.๐ฏ Current Behavior
size-1400
"size-1400
" does not seem to have an effect on the size of the Picker.Item
is incorrect when the list is openWorkaround for selection highlight:
๐ 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)