Ionic-framework: chips: UI is messed up

[brandyscarney]

Need to fix the UI for this, add them to e2e tests and then get them documented when we feel comfortable with them.

[brandyscarney]

We could probably make this into a component.

[cesar-oyarzun-m]

@brandyscarney hey do you know if there is other way of doing chips in ionic? I need chips in my app but I'm using 1.3.1, I don't want to update just for this. Do you know where I can find documentation about how to use chips in ionic also?

[faraazc]

@brandyscarney hey I am expecting this in beta.11.hope I will get this.thanks

[brandyscarney]

@cesar-oyarzun-m Right now the chip component is purely css. All of the Sass is here: https://github.com/driftyco/ionic/blob/master/src/components/chip/chip.scss

And the different ways to write it are in each of these folders: https://github.com/driftyco/ionic/tree/master/src/components/chip/test

It probably depends some on other component styling but it can be added with css.

[leetheguy]

I would like to try my hand at fixing this, turning it into a component, and helping with the documentation for it.

I've read the contributing guide and forked the repo. Should I create a pull request now or after the work is done?

[jgw96]

Hello @leetheguy ! Awesome to hear that you're interested in contributing to Ionic! I would recommend getting it good and solid on your local machine before submitting a pr. Also, here are a few tips for contributing:

1. git status will help you keep track of your changes
2. Try to keep the number of commits to a minimum if possible
3. Try to make sure your commit messages are concise if possible
4. Make sure you have a ton of fun and feel free to reach out and ask questions if needed!

Thanks!

[leetheguy]

Cleaned this up. Fixed the CSS. Made it into a component. X button works. Added whitelist control for elements so only those in the spec (avatar, image, text) can be added. The e2e looks good. No documentation yet. Creating pr.

[devarg]

Hi All!

Chip with icon is messed up in RC

And if you try to add padding-left

    <ion-chip>
        <ion-icon padding-left name="cart"></ion-icon>
        <ion-label>Default</ion-label>
    </ion-chip>

worked it around this way

.mainStyles {
    ion-chip{
        ion-icon{
            padding-top: 1px;
            padding-left: 8px;
        }
    }
}

Are you seeing all seeing it ok?

Thanks!

[brandyscarney]

@devarg I'm not seeing any issues with the icon alignment. Is there a repository where I can reproduce this?

[nakulgulati]

@brandyscarney After further inspection the chips work fine alone, but when used inside <ion-item> they have UI issues. Here is a repo demonstrating the issue.

https://github.com/nakulgulati/ionic-chips

Also here is a screenshot

[brandyscarney]

Ah okay thank you!

[miraj92]

Can anyone tell when chips will be available for use in prod.?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.