feat: disabled chip

[simonhaenisch]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Make it possible to disable chips.

Describe Preferred Solution

Add a disabled prop that disables the :hover styles (background-color, cursor, ...) and ripple.

Related Code

https://codepen.io/simonhaenisch/pen/bGbPzOm

Additional Context

https://material.io/components/chips/ has examples for disabled chips in various categories.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[br1ghtt]

Working on a pull request.
In my opinion a chip in disabled state should have the following behavior:
A disbaled chip is not activatable, has a different alpha channel for the background, text and outline. It also has no hover effect and cursor.

[simonhaenisch]

@br1ghtt did you see the https://material.io/components/chips/ link? There's examples of the disabled chips and what they should look/behave like.

[Yohandah]

I am in need of this as well.

I am putting a "remove" icon into a chip and I want just the icon to have a button behavior, not the whole chip (ripple, cursor).

<ion-chip>
  <ion-label>text</ion-label>
  <!-- I just want this icon to be "clickable", not the whole chip -->
  <ion-icon name="close" (click)="someFunction()"></ion-icon>
</ion-chip>

Something I don't understand as well is that in the Ionic example when clicking a chip there is no ripple effect (https://ionicframework.com/docs/api/chip), but creating a new fresh project and adding a default ion-chip will have the behavior.

[liamdebeasi]

Thanks for the issue. This has been resolved via #20658, and the feature will be available in an upcoming release of Ionic Framework.

[ionitron-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.