Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit d3b515e

Browse files
authored
fix(chips): Reset touch target when chip density mixin is applied. (#5116)
1 parent bdf3430 commit d3b515e

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

packages/mdc-chips/_mixins.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -638,4 +638,32 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
638638
);
639639

640640
@include mdc-chip-height($height, $query: $query);
641+
642+
@if $density-scale != 0 {
643+
@include mdc-chip-touch-target-reset_;
644+
}
645+
}
646+
647+
///
648+
/// Resets touch target-related styles. This is called from the density mixin to
649+
/// automatically remove the increased touch target, since dense components
650+
/// don't have the same default a11y requirements.
651+
/// @access private
652+
///
653+
@mixin mdc-chip-touch-target-reset_($query: mdc-feature-all()) {
654+
$feat-structure: mdc-feature-create-target($query, structure);
655+
656+
// Selector is necessary here to override original specificity.
657+
&.mdc-chip--touch {
658+
@include mdc-feature-targets($feat-structure) {
659+
margin-top: 0;
660+
margin-bottom: 0;
661+
}
662+
}
663+
664+
.mdc-chip__touch {
665+
@include mdc-feature-targets($feat-structure) {
666+
display: none;
667+
}
668+
}
641669
}

0 commit comments

Comments
 (0)