This repository was archived by the owner on Sep 5, 2024. It is now read-only.
chips: are not aligned with updated Material Design specs #9883
Assignees
Labels
has: Pull Request
A PR has been created to address this issue
P3: important
Important issues that really should be fixed when possible.
type: bug
type: spec alignment
For issues related to aligning with the Material Design Spec
ui: CSS
Milestone
Comments
|
Indeed; it looks like the spec changed since we launched the chips. Talking to team now about how to prioritize and what milestone this should be in. |
ThomasBurleson
added
type: enhancement
P4: minor
|
Adding high density tag since the delete icon is only for desktop and isn't meant for mobile/tablet (they should be using a popup). It might seem useful to try out adding mdPanel as the popup. |
Splaktar
added
the
P3: important
Splaktar
removed
the
P4: minor
This was referenced Jan 21, 2018
Splaktar
added
the
type: spec alignment
Splaktar
changed the title
Splaktar
added a commit
that referenced
this issue
Jul 31, 2020
- use the `md-cancel` button instead of the `md-close` button - `$chip-font-size` reduced to `13px` from `16px` - `$chip-remove-padding-right` increased to `28px` from `22px` - in light mode, remove chip icon should be black w/ 87% opacity - update custom remove chip template demo - show remove icon on hover/focus only - remove unnecessary CSS - update to new size guidelines and remove color on hover/focus - fix remove chip icon color when chip is focused Fixes #9883
3 tasks
|
PR #11989 addresses the spec updates other than the remove button isn't shown on mobile part. If that is of interest to anyone, please file a new enhancement request. |
Splaktar
added a commit
that referenced
this issue
Jul 31, 2020
- use the `md-cancel` button instead of the `md-close` button - `$chip-font-size` reduced to `13px` from `16px` - `$chip-remove-padding-right` increased to `28px` from `22px` - in light mode, remove chip icon should be black w/ 87% opacity - update custom remove chip template demo - show remove icon on hover/focus only - remove unnecessary CSS - update to new size guidelines and remove color on hover/focus - fix remove chip icon color when chip is focused Fixes #9883 BREAKING CHANGE: Chips have been updated to latest Material Design spec (2017). `$chip-font-size` was reduced to `13px` from `16px`. `$chip-remove-padding-right` was increased to `28px` from `22px`. These changes may cause your chips to have a smaller, denser layout now. In certain scenarios, this may require minor changes to your app's layout. You can change these variables back to their old values if your app consumes Sass. Additionally, the remove chip icon has been changed, but you can use the custom chip template demo as a guide to changing back to the old icon, if desired.
Splaktar
added a commit
that referenced
this issue
Jul 31, 2020
- use the `md-cancel` button instead of the `md-close` button - `$chip-font-size` reduced to `13px` from `16px` - `$chip-remove-padding-right` increased to `28px` from `22px` - in light mode, remove chip icon should be black w/ 87% opacity - update custom remove chip template demo - show remove icon on hover/focus only - remove unnecessary CSS - update to new size guidelines and remove color on hover/focus - fix remove chip icon color when chip is focused Fixes #9883 BREAKING CHANGE: Chips have been updated to latest Material Design spec (2017). `$chip-font-size` was reduced to `13px` from `16px`. `$chip-remove-padding-right` was increased to `28px` from `22px`. These changes may cause your chips to have a smaller, denser layout now. In certain scenarios, this may require minor changes to your app's layout. You can change these variables back to their old values if your app consumes Sass. Additionally, the remove chip icon has been changed, but you can use the custom chip template demo as a guide to changing back to the old icon, if desired.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
It seems that the chips that are shown in the demos are not following the actual spec of Material Design
Angular Material:
Material Design Spec:
The text was updated successfully, but these errors were encountered: