Merge pull request #10 from cchaos/am/updating-buttons

Figuring out a better way to override
elastic · Feb 20, 2020 · c4aadaf · c4aadaf
2 parents b6bdf50 + d4d215a
commit c4aadaf
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 216 deletions.
diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js
@@ -148,6 +148,42 @@ export default () => (
       </EuiFlexItem>
     </EuiFlexGroup>
 
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" onClick={() => window.alert('Button clicked')}>
+          Text
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          fill
+          onClick={() => window.alert('Button clicked')}>
+          Filled
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          size="s"
+          onClick={() => window.alert('Button clicked')}>
+          Small
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          size="s"
+          fill
+          onClick={() => window.alert('Button clicked')}>
+          Small and filled
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButton isDisabled onClick={() => window.alert('Button clicked')}>

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -33,7 +33,7 @@ export default class extends Component {
           <EuiButton
             color="ghost"
             onClick={() => window.alert('Button clicked')}>
-            Primary
+            Ghost
           </EuiButton>
         </EuiFlexItem>
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -54,7 +54,7 @@
     }
 
     &.euiButton--fill {
-      color: $euiColorGhost;
+      color: lightOrDarkTheme($euiColorGhost, $euiColorLightShade);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
 
@@ -85,7 +85,7 @@
       color: $euiTextColor;
     } @else {
       // Other colors need to check their contrast against the page background color.
-      color: makeHighContrastColor($color, $euiColorEmptyShade);
+      color: makeHighContrastColor($color, $euiPageBackgroundColor);
     }
 
     border-color: $color;
@@ -133,13 +133,31 @@
         }
       }
     }
+  }
+}
 
-    &:disabled,
-    &:disabled:hover,
-    &:disabled:focus {
-      @if ($name == 'ghost') {
-        @include euiSlightShadow($euiColorInk);
-      }
+// Fix ghost/disabled look specifically
+.euiButton:disabled.euiButton--ghost {
+  @include euiSlightShadow($euiColorInk);
+
+  &,
+  &:hover,
+  &:focus {
+    @include euiSlightShadow($euiColorInk);
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
+  }
+
+  .euiButton__spinner {
+    border-color: euiLoadingSpinnerBorderColors(transparentize($euiButtonColorGhostDisabled, .3));
+  }
+
+  &.euiButton--fill {
+    background-color: $euiButtonColorGhostDisabled;
+    color: $euiColorInk;
+
+    .euiButton__spinner {
+      border-color: euiLoadingSpinnerBorderColors(transparentize($euiColorInk, .3));
     }
   }
 }

diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
@@ -1,29 +1,22 @@
-@mixin euiButton {
-  @include euiFont;
-  @include euiFontSize;
-
+@mixin euiButtonBase {
   display: inline-block;
   appearance: none;
   cursor: pointer;
   height: $euiButtonHeight;
   line-height: $euiButtonHeight; // prevents descenders from getting cut off
-  text-decoration: none;
-  border: solid 1px transparent;
   text-align: center;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
+}
+
+@mixin euiButtonFocus {
+  transition: all $euiAnimSpeedNormal ease-in-out;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
   }
 
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: underline;
-  }
-
   &:focus {
     animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
   }
@@ -33,6 +26,24 @@
   }
 }
 
+@mixin euiButton {
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
+
+  text-decoration: none;
+  border: solid 1px transparent;
+
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
+
+  &:hover:not(:disabled),
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
 // 1. Apply margin to all but last item in the flex.
 // 2. Margin gets flipped because of the row-reverse.
 

diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
@@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade);
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.

diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss
@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/theme_amsterdam_light.scss b/src/theme_amsterdam_light.scss
@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss
@@ -16,9 +16,3 @@
 
 // The reset file makes use of variables and mixins
 @import '../../../global_styling/reset/index';
-
-// TEMP OPVERRIDES FOR COMPONENT STYLES
-// THESE FILES SHOULD REPLACE COMPONENT
-// STYLES ONCE AMSTERDAM IS THE DEFAULT THEME
-
-@import 'overrides/index';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
@@ -1,69 +1,18 @@
 @mixin euiButton {
+  @include euiButtonBase;
   @include euiFont;
   @include euiFontSize;
 
-  display: inline-block;
-  appearance: none;
-  cursor: pointer;
-  height: $euiButtonHeight;
-  line-height: $euiButtonHeight; // prevents descenders from getting cut off
+  font-weight: $euiFontWeightMedium;
   text-decoration: none;
-  border: none;
-  text-align: center;
   transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
-  white-space: nowrap;
-  max-width: 100%;
-  vertical-align: middle;
-  font-weight: $euiFontWeightMedium;
 
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
 
   &:hover:not(:disabled),
   &:focus {
     text-decoration: underline;
   }
-
-  &:focus {
-    animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-}
-
-// 1. Apply margin to all but last item in the flex.
-// 2. Margin gets flipped because of the row-reverse.
-
-@mixin euiButtonContent($isReverse: false) {
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
-
-  .euiButton__icon,
-  .euiButton__spinner {
-    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
-  }
-
-  @if ($isReverse) {
-    flex-direction: row-reverse;
-
-    > * + * {
-      margin-left: 0; // 1, 2
-      margin-right: $euiSizeS; // 1, 2
-    }
-  } @else {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > * + * {
-      margin-left: $euiSizeS; // 1
-    }
-  }
 }
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss