fix(chips): cursor on remove button and box-shadow transition #6019
Conversation
googlebot
added
the
cla: yes
| @@ -82,6 +85,7 @@ $mat-chips-chip-margin: 8px; | |||
| .mat-chip-remove { | |||
| margin-right: $mat-chip-remove-margin-after; | |||
| margin-left: $mat-chip-remove-margin-before; | |||
| cursor: pointer; | |||
There was a problem hiding this comment.
I had previously removed it because of this animation https://material.io/guidelines/components/chips.html#chips-behavior, but I certainly understand how pointer helps show purpose
There was a problem hiding this comment.
I think that example is mostly to show the color change, rather than the cursor.
src/lib/chips/chips.scss
Outdated
| border-radius: $mat-chip-horizontal-padding * 2; | ||
| align-items: center; | ||
| cursor: default; | ||
| transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function; |
There was a problem hiding this comment.
How about mat-elevation-transition()?
There was a problem hiding this comment.
Ah nice, I had forgotten we had that.
crisbeto
force-pushed
the
chip-remove-cursor
branch
from
e17b6c2
to
599a148
Compare
src/lib/chips/chips.scss
Outdated
| display: inline-flex; | ||
| padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding; | ||
| padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding |
There was a problem hiding this comment.
here can use padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding instead of 4 values?
* Adds a `pointer-cursor` to the chip remove button to indicate that it's clickable. * Adds a transition to the focused chip `box-shadow` to make it less harsh. * Breaks up a long line that was exceeding our character limit.
crisbeto
force-pushed
the
chip-remove-cursor
branch
from
599a148
to
197d12b
Compare
|
LGTM |
|
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. |
pointer: cursorto the chip remove button to indicate that it's clickable.box-shadowto make it less harsh.