Skip to content

Commit fea07a7

Browse files
authored
fix(material/button): incorrect outlined focus overlay shape when border radius is customized (angular#30513)
Fixes that the focus overlay on outlined buttons wasn't covering the outlined button fully when its border radius is customized. Fixes angular#30484.
1 parent 22e5c24 commit fea07a7

File tree

2 files changed

+2
-11
lines changed

2 files changed

+2
-11
lines changed

src/material/button/button-high-contrast.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@use '@angular/cdk';
22

3-
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
4-
// don't need a special look in high-contrast mode, because those already have an outline.
53
.mat-mdc-button:not(.mdc-button--outlined),
64
.mat-mdc-unelevated-button:not(.mdc-button--outlined),
75
.mat-mdc-raised-button:not(.mdc-button--outlined),
86
.mat-mdc-outlined-button:not(.mdc-button--outlined),
9-
.mat-mdc-icon-button.mat-mdc-icon-button {
7+
.mat-mdc-icon-button.mat-mdc-icon-button,
8+
.mat-mdc-outlined-button .mdc-button__ripple {
109
@include cdk.high-contrast {
1110
outline: solid 1px;
1211
}

src/material/button/button.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -264,14 +264,6 @@
264264
@include token-utils.create-token-slot(color, disabled-label-text-color);
265265
@include token-utils.create-token-slot(border-color, disabled-outline-color);
266266
}
267-
268-
// TODO(crisbeto): this causes a weird gap between the ripple and the
269-
// outline. We should remove it and update the screenshot tests.
270-
.mdc-button__ripple {
271-
@include token-utils.create-token-slot(border-width, outline-width);
272-
border-style: solid;
273-
border-color: transparent;
274-
}
275267
}
276268
}
277269

0 commit comments

Comments
 (0)