powerhome/playbook

Select Kit Upgrade - shift chevron to end of content instead of end of field

kevinschlabach opened this issue · 6 comments

kevinschlabach commented

Is your feature request related to a problem? Please describe.
Eva asked Birds of Prey to update the kit for select and due date in Runway's inline edit form to have the chevron appear at the end of the selected text, instead of at the end of the form field row. Unfortunately, our research found that this was a heavy lift due to how it's currently absolute-positioned. Also, we don't seem to know how long the currently selected text is, only how long the field is (making this hard to implement)

After some discussion with Eva at refinement (Dec 2, 2021), it was decided with her that the cost of this did not meet the current value, and we punted on the work. This issue is being created in case someone in UX, PCA, or another team decides to pursue this instead.

Describe the solution you'd like
Refer to BOP-1145 for prior proposal

Describe alternatives you've considered
Leave as is (which we are doing)... chevron appears at end of field, absolute positioned regardless of contained text selections

Additional context
Refer to BOP-1145

derricklannaman commented

Positioning the icon elements for the inline Datepicker was relatively straight forward.
Since we knew the length of the date string returned from inline Datepicker, we could position the icons with something like...

#date-picker-inline-angle-down,
#date-picker-inline-icon-plus {
    position: relative;
    float: left;
    top: -50px;
    left: 9%;
}

in pb_date_picker/sass_partials/_inline_styles.scss.

Unfortunately, the Select Kit's icon positioning was more problematic because the Select kit's options
could contain text of any length. Our approach would have been attempting to use Flex and FlexItems for dynamic positioning.

stevelandwehr commented

@jasoncypret In your code sandbox, the width of the <select> is being changed to the width of the selected option's tempSelect. However, the Playbook Select kit has a width of 100%. How would you recommend having the width of the select being relative to the selected option and still having the look of a 100%-width select and triggering the onChange event if the user clicks outside of the select?

jasoncypret commented

@stevelandwehr I'm not sure you can have both. ...or perhaps I'm miss understanding the whole ask

kevinschlabach commented

@evalouderback - maybe you can review this with Jason as you've been part of our team discussions.

From a BOP perspective, we aren't chasing this or making it a priority as it doesn't affect functionality... it's an request based on the UX designs only, and I was under the impression it was triggered by a discussion between the two of you.

jasoncypret commented

This has been added to the someday backlog. Closing issue for now