fix(material/stepper): remove ripple and hover styling for disabled s…

…tep (#23386) (cherry picked from commit b5b262d)
angular · Aug 24, 2021 · 8103d9b · 8103d9b
1 parent e725863
commit 8103d9b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
@@ -17,10 +17,15 @@
   .mat-step-header {
     &.cdk-keyboard-focused,
     &.cdk-program-focused,
-    &:hover {
+    &:hover:not([aria-disabled]),
+    &:hover[aria-disabled='false'] {
       background-color: theming.get-color-from-palette($background, hover);
     }
 
+    &:hover[aria-disabled='true'] {
+      cursor: default;
+    }
+
     // On touch devices the :hover state will linger on the element after a tap.
     // Reset it via `@media` after the declaration, because the media query isn't
     // supported by all browsers yet.

diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html
@@ -70,6 +70,6 @@
     [optional]="step.optional"
     [errorMessage]="step.errorMessage"
     [iconOverrides]="_iconOverrides"
-    [disableRipple]="disableRipple"
+    [disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
     [color]="step.color || color"></mat-step-header>
 </ng-template>