Skip to content

feat(chips): add assist chips #29207

Open
@MikaStark

Description

@MikaStark

Feature Description

Hello ! First of all, thank you for your hardwork on Angular Material and especially m3 theming.

Today, I want to highlight that current Angular Material Chips implemenation lack of assist chips which are part of the Material spec.

As mat-chip is not interactive, we cannot use it. we can tweak mat-chip-listbox and mat-chip-option by using group and button aria roles and a selectable="false" attribute. But it's actually not enough as inside mat-chip-option template we can see that matChipAction has an hardcoded role="option".

For me, there is two options :

  • Change mat-chip-set and mat-chip to become more generic
  • Add a new set of mat-assist-chip-set and mat-assist-chip components

Use Case

Assist chips are great for triggering additional actions.

<mat-card>
  <mat-card-title>Yummy Pizza</mat-card-title>
  <!-- ... -->
  <mat-assist-chip-set>
    <button mat-assist-chip>
       <mat-icon>skillet</mat-icon>
       View recipe
    </button>
    <button mat-assist-chip>
       <mat-icon>phone</mat-icon>
       Order now
    </button>
  </mat-assist-chip-set>
</mat-card>

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material/chipsfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions