fixing more style things

elastic · Apr 2, 2020 · 918bebd · 918bebd
1 parent 94c78b6
commit 918bebd
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 139 deletions.
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -165,7 +165,6 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -187,7 +186,6 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -209,7 +207,6 @@ exports[`EuiButton props iconType is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -222,7 +219,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
 
 exports[`EuiButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -238,7 +235,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
 
 exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -254,7 +251,7 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
 
 exports[`EuiButton props isLoading is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -31,28 +31,22 @@
     }
   }
 
-  &:hover,
-  &:active {
-    @include euiSlightShadowHover;
-  }
+  &:not(.euiButton--disabled) {
+    &:hover,
+    &:active {
+      @include euiSlightShadowHover;
+    }
 
-  &:enabled {
     &:hover,
     &:focus {
       background-color: transparentize($euiColorPrimary, .9);
     }
   }
 
-  &:disabled,
   &.euiButton--disabled {
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
-    pointer-events: none;
-
-    .euiButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
+    cursor: not-allowed;
 
     .euiButton__spinner {
       border-color: euiLoadingSpinnerBorderColors(currentColor);
@@ -63,19 +57,6 @@
       color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
-
-      &:hover,
-      &:focus {
-        background-color: $euiButtonColorDisabled;
-        border-color: $euiButtonColorDisabled;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      @include euiSlightShadow;
-
-      text-decoration: none;
     }
   }
 }
@@ -105,7 +86,7 @@
 
       color: $fillTextColor;
 
-      &:enabled {
+      &:not(.euiButton--disabled) {
         &:hover,
         &:focus {
           background-color: darken($color, 5%);
@@ -114,7 +95,7 @@
       }
     }
 
-    &:enabled {
+    &:not(.euiButton--disabled) {
       $shadowColor: $euiShadowColor;
       @if ($name == 'ghost') {
         $shadowColor: $euiColorInk;
@@ -129,18 +110,13 @@
       &:focus {
         @include euiSlightShadowHover($shadowColor);
         background-color: transparentize($color, .9);
-
-        @if ($name == 'disabled') {
-          cursor: not-allowed;
-        }
       }
     }
   }
 }
 
 // Fix ghost/disabled look specifically
-.euiButton:disabled.euiButton--ghost,
-.euiButton--disabled.euiButton--ghost, {
+.euiButton--disabled.euiButton--ghost {
   &,
   &:hover,
   &:focus {

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -133,6 +133,7 @@ export const EuiButton: FunctionComponent<Props> = ({
     {
       'euiButton--fill': fill,
       'euiButton--fullWidth': fullWidth,
+      'euiButton--disabled': isDisabled,
     }
   );
 
@@ -153,12 +154,7 @@ export const EuiButton: FunctionComponent<Props> = ({
     buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
   } else if (iconType) {
     buttonIcon = (
-      <EuiIcon
-        className="euiButton__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
+      <EuiIcon className="euiButton__icon" type={iconType} size="m" />
     );
   }