Skip to content

Commit

Permalink
fix(chips): per spec, trailing focus rings are always circles
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 558887707
  • Loading branch information
asyncLiz authored and Copybara-Service committed Aug 21, 2023
1 parent f23fac1 commit fc9b945
Showing 1 changed file with 5 additions and 16 deletions.
21 changes: 5 additions & 16 deletions chips/internal/_trailing-icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,16 @@
padding: 0 8px;
}

.trailing.action md-focus-ring {
// Note: the trailing action's shape only follows the trailing end of the
// chip. For example, if the leading end is rounded, but the trailing is end
// squared, then the focus ring will be squared (not rounded+squared).
@include focus-ring.theme(
(
'shape-start-start': var(--_container-shape-start-end),
'shape-end-start': var(--_container-shape-end-end),
'shape-end-end': var(--_container-shape-end-end),
'shape-start-end': var(--_container-shape-start-end),
'outward-offset': -2px,
)
);
}

.trailing.action md-ripple {
.trailing.action :is(md-ripple, md-focus-ring) {
border-radius: 50%;
height: calc(4 / 3 * var(--_icon-size)); // 24px default
width: calc(4 / 3 * var(--_icon-size)); // 24px default
}

.trailing.action md-focus-ring {
inset: unset;
}

.has-trailing .primary.action {
padding-inline-end: 0;
}
Expand Down

0 comments on commit fc9b945

Please sign in to comment.