search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

Selectfield component #368

Closed HriBB closed 8 years ago

HriBB commented 8 years ago

https://hribb.github.io/react-mdl-selectfield/

I created a simple SelectField, MultiSelectField and Option components for use with react-mdl.

Internally they use Textfield, Menu, MenuItem and Icon from the react-mdl package. You will also need Material Icons for the dropdown arrow.

This is my first ever node package, so there could be problems with. Feedback welcome ;)

@tleunen let me know what you think about this. I would really like to know how to improve it.

HriBB commented 8 years ago

I also use react-storybook for testing and will use this repo as a playground to figure out how to style the storybook interface.

tleunen commented 8 years ago

hey @HriBB, great work! I haven't had the time to really take a look at it yet, but if you want to add a mention to your component in the readme and/or website, feel free to send a PR ;)

HriBB commented 8 years ago

@tleunen sure why not. First I would like to get some feedback on this, don't want to promote something that does not work as expected.

tleunen commented 8 years ago

hey @HriBB, this is very interesting. From a first use, this doesn't match the exact MD guidelines but I guess it wasn't your objective.

For the multiselect, I believe using the new "Chip" component would be best, also having them inside the input instead of outside.

Very good job.

Closing because it's not an issue initially ;)

HriBB commented 8 years ago

From a first use, this doesn't match the exact MD guidelines but I guess it wasn't your objective.

Exactly. It's easy to override the styles though, just put a negative margin to mdl-selectfield mdl-menu__container. Maybe I will add followSpec prop for that. Also I am thinking about creating a new AutoCompleteField component for this.

For the multiselect, I believe using the new "Chip" component would be best, also having them inside the input instead of outside.

I will definitely use the new Chip component, but rendering them inside the input is not so easy, it does not allow children. I will have to position Chips absolutely, but then comes a world of problems. Any ideas?

tleunen commented 8 years ago

Yep I agree :/

Maybe you would need to build something custom, just for the chips. Something like this demo: https://material.angularjs.org/latest/demo/chips

HriBB commented 8 years ago

Ohh maybe it's not so hard. Simply render an input field after all the chips. Thanks for the link ;)