all: migrate chips to mdc spec (connects #9166) #9540
Conversation
There was a problem hiding this comment.
Pull request overview
This PR migrates the chips component from the legacy Angular Material implementation to the MDC (Material Design Components) specification. The migration involves replacing deprecated mat-chip-list components with the newer mat-chip-set components and updating related properties and styles.
Changes:
- Replaced
mat-chip-listwithmat-chip-setand updated theselectedattribute tohighlightedacross all components - Added accessibility attributes (
aria-labelandi18n-aria-label) to all chip sets - Updated Material module imports to use the non-legacy
MatChipsModule - Removed deprecated CSS selectors and styles related to the legacy chip implementation
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles.scss | Removed legacy chip-specific responsive styles for the members page roles column |
| src/app/users/users-table.component.html | Migrated chips to mat-chip-set with accessibility labels for planet types and user roles |
| src/app/teams/teams-view.scss | Removed legacy chip-list display styles from toolbar |
| src/app/teams/teams-view.component.html | Updated request status chip to use mat-chip-set with highlighted state |
| src/app/submissions/submissions.component.html | Migrated submission status chips to mat-chip-set with accessibility labels |
| src/app/shared/material.module.ts | Updated import from legacy MatChipsModule to the MDC version |
| src/app/resources/resources.component.html | Migrated resource tags chips to mat-chip-set with highlighted state for main tags |
| src/app/news/news-list-item.scss | Updated CSS selectors to target MDC chip classes |
| src/app/news/news-list-item.component.html | Migrated news item label chips to mat-chip-set and converted remove icon to button element |
| src/app/feedback/feedback.component.html | Migrated priority and status chips to mat-chip-set with accessibility labels |
| src/app/courses/courses.component.html | Migrated course tags chips to mat-chip-set with highlighted state for main tags |
| src/app/courses/add-courses/courses-step.scss | Updated CSS selectors to target mat-chip-set and mat-chip elements |
| src/app/courses/add-courses/courses-step.component.html | Migrated attached resources chips to mat-chip-set and converted remove icon to button element |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3a2b8459da
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Connects #9166
Migrate the chips component to mdc spec
opted to use the
mat-chip-setsince themat-chip-listboxincludes a default selected click that doesn't align with our usecaseChips to test:
request pendingtag on joining a team