-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(material/chip): Add focus indicator #18019
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
Conversation
…the ripple target
Can I accept the new api golden? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
|
||
// Ensures that the ripple effect doesn't overflow the ripple target. | ||
overflow: hidden; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If only all CSS was commented this well.
You can go ahead and make the public API gold update and I can merge the PR |
* Add focus indicators to mat-chip. Use a dynamically added element as the ripple target * _document should be an optional param to avoid breaking change. * Updated chips API golden.
* Add focus indicators to mat-chip. Use a dynamically added element as the ripple target * _document should be an optional param to avoid breaking change. * Updated chips API golden.
* Add focus indicators to mat-chip. Use a dynamically added element as the ripple target * _document should be an optional param to avoid breaking change. * Updated chips API golden.
* Add focus indicators to mat-chip. Use a dynamically added element as the ripple target * _document should be an optional param to avoid breaking change. * Updated chips API golden.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Background: The chip's focus indicator needs to be offset from the chip itself in order to be sufficiently contrastive because the chip can have a primary/accent fill. However, given
mat-chip
hasoverflow: hidden
, any offset focus indicator will be hidden. The reasonmat-chip
has its overflow hidden is because it also acts as a ripple target. Thus, in order to add a focus indicator to chip, this PR does the following:mat-chip
as the ripple target, dynamically create an element and add it as a child node of themat-chip
. This element will be the chip's new ripple target. This element will have its overflow hidden, and themat-chip
will have that style removed..mat-focus-indicator
class to themat-chip
.