PolymerElements / paper-dropdown-menu

A Material Design browser select element
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu
61 stars 107 forks source link

Adds prefix slot that gets passed to paper-input. #256

Closed aarondrabeck closed 1 year ago

aarondrabeck commented 6 years ago

Allows you to prefix stuff such as icons or emoji 😉 in the same way you can with a paper-input. Now your forms can have a consistent look with prefix icons.

googlebot commented 6 years ago

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.


aarondrabeck commented 6 years ago

I signed it!

googlebot commented 6 years ago

CLAs look good, thanks!

valdrinkoshi commented 6 years ago

@aarondrabeck thanks for the contribution! Mind adding this to paper-dropdown-menu-light as well, and add 1 example in the demo/index.html?

aarondrabeck commented 6 years ago

@valdrinkoshi So it turns out putting this into paper-dropdown-menu-light is a bit of a rewrite. The issue is the label is currently using absolute position so when adding a variable width prefix the padding-left is indeterminate upfront. I would have to modify the component to conditionally use flow for the prefix, label, input and icon. This would significantly change the styles and animations that would closer resemble paper-input-container.

While I could do this, would this be something that should be done or should the light component simply not support prefix?

valdrinkoshi commented 6 years ago

Yeah, I realized that too :/ Another way to achieve the same is to use the mixin --paper-dropdown-menu-input if using paper-dropdown-menu-light, or --paper-dropdown-menu-input if using paper-dropdown-menu, to style the internal <input> to let space to the prefix element, e.g. http://jsbin.com/bidoyac/1/edit?html,output

Invoking @cdata @notwaldorf for opinions on this: would it be fine if paper-dropdown-menu supports setting a prefix element for the input, but paper-dropdown-menu-light doesn't?

dnson commented 6 years ago

@valdrinkoshi Do we have ETA when this PR can merge?