Skip to content

fix(material/chips): remove button is too small #29351

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.

Sign up for GitHub

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

Merged
merged 12 commits into from
Jul 17, 2024
Merged

fix(material/chips): remove button is too small #29351

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0b13dba
fix(material/chip): remove button is too small
essjay05 Jun 28, 2024
0df5a24
refactor(material/chips): remove button is too small
essjay05 Jun 28, 2024
570264a
fix(material/chips): increase chip remove button touch target size
essjay05 Jul 1, 2024
56e6c18
refactor(material/chips): chip remove touch target size is insufficient
essjay05 Jul 2, 2024
81159aa
fix(material/chip): remove button is too small
essjay05 Jun 28, 2024
6d85c21
refactor(material/chips): remove button is too small
essjay05 Jun 28, 2024
ede061c
fix(material/chips): increase chip remove button touch target size
essjay05 Jul 1, 2024
3b4202f
fix(material/chips): chips remove touch target is too small to be acc…
essjay05 Jul 8, 2024
899b16f
refactor(material/chips): fix lint errors
essjay05 Jul 8, 2024
a0ea481
refactor(material/chips): replace px with _trailing-icon-size variable
essjay05 Jul 8, 2024
6e5a590
refactor(material/chips): updates touch target centering method
essjay05 Jul 10, 2024
1442854
refactor(material/chips): updates ::after styles and fix lint errors
essjay05 Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/material/chips/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@ $_avatar-trailing-padding: 8px;
}

&::after {
@include token-utils.create-token-slot(background, trailing-action-state-layer-color);
@include token-utils.create-token-slot(background-color, trailing-action-state-layer-color);
}

&:hover::after {
Expand All @@ -552,7 +552,8 @@ $_avatar-trailing-padding: 8px;

.mat-mdc-chip-selected .mat-mdc-chip-remove::after,
.mat-mdc-chip-highlighted .mat-mdc-chip-remove::after {
@include token-utils.create-token-slot(background, selected-trailing-action-state-layer-color);
@include token-utils.create-token-slot(background-color,
selected-trailing-action-state-layer-color);
}
}

Expand Down Expand Up @@ -695,7 +696,9 @@ $_avatar-trailing-padding: 8px;

// Used as a state overlay.
&::after {
$offset: 2px;
$_touch-target-size: 48px;
$_ripple-size: 24px;
$offset: 3px;
content: '';
display: block;
opacity: 0;
Expand All @@ -705,6 +708,11 @@ $_avatar-trailing-padding: 8px;
left: 8px - $offset;
right: 8px - $offset;
border-radius: 50%;
box-sizing: border-box;
padding: calc(($_touch-target-size - $_ripple-size)/2);
margin: calc((($_touch-target-size - $_ripple-size)/2) * -1);
// stylelint-disable material/no-prefixes
background-clip: content-box;
}

.mat-icon {
Expand Down
Loading