Skip to content

feat(material/chips): add (optional) edit icon to input chips #31041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

adolgachev
Copy link
Contributor

@adolgachev adolgachev commented May 7, 2025

Adds an optional edit icon to input chips to allow for better discoverability of editable chips over existing double-click and focus-enter to edit behavior.

The edit icon introduces concept of a leading action with an icon button similar to trailing action used for delete icon button. This can be combined with the existing avatar icon for a chip. The editable flag is preserved but is independent of the edit icon, allowing for both existing and new behavior or either one.

Updated chip demo to add option to show avatar and/or edit icon.

chip-row-edit

chip-row-edit-avatar

@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: material/chips labels May 7, 2025
@adolgachev adolgachev changed the title Chip edit icon feat(material/chips): add (optional) edit icon to input chips May 7, 2025
@adolgachev adolgachev requested a review from crisbeto May 7, 2025 21:42
@adolgachev adolgachev added Accessibility This issue is related to accessibility (a11y) dev-app preview When applied, previews of the dev-app are deployed to Firebase requires: TGP This PR requires a passing TGP before merging is allowed labels May 7, 2025
Copy link

github-actions bot commented May 7, 2025

Deployed dev-app for fe5ea55 to: https://ng-dev-previews-comp--pr-angular-components-31041-dev-jgj91wpx.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@adolgachev adolgachev force-pushed the chip-edit-icon branch 2 times, most recently from c0b7505 to 0dfcea0 Compare May 17, 2025 15:09
@adolgachev adolgachev marked this pull request as ready for review May 17, 2025 15:10
@adolgachev adolgachev requested a review from a team as a code owner May 17, 2025 15:10
@adolgachev adolgachev requested review from wagnermaciel and removed request for a team May 17, 2025 15:10
@adolgachev adolgachev added action: review The PR is still awaiting reviews from at least one requested reviewer action: global presubmit The PR is in need of a google3 global presubmit labels May 17, 2025
@adolgachev adolgachev force-pushed the chip-edit-icon branch 2 times, most recently from 4960510 to 809e1e8 Compare May 17, 2025 21:59
@adolgachev adolgachev removed the action: global presubmit The PR is in need of a google3 global presubmit label May 17, 2025
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I also realized that we should add a live example for the docs site. The examples live under components-examples.

@adolgachev adolgachev added the docs: preview When applied, a preview of the documentation site is deployed to Firebase label May 29, 2025
Copy link

github-actions bot commented May 29, 2025

Deployed docs-preview for fe5ea55 to: https://ng-dev-previews-comp--pr-angular-components-31041-docs-h4ff3yly.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@adolgachev adolgachev force-pushed the chip-edit-icon branch 4 times, most recently from 651cfd6 to 696752b Compare May 29, 2025 16:49
@adolgachev adolgachev added the target: minor This PR is targeted for the next minor release label May 29, 2025
@adolgachev adolgachev force-pushed the chip-edit-icon branch 2 times, most recently from ea342eb to c779d8e Compare May 29, 2025 23:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility This issue is related to accessibility (a11y) action: review The PR is still awaiting reviews from at least one requested reviewer area: material/chips detected: feature PR contains a feature commit dev-app preview When applied, previews of the dev-app are deployed to Firebase docs: preview When applied, a preview of the documentation site is deployed to Firebase requires: TGP This PR requires a passing TGP before merging is allowed target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants