Fix filled EuiButton in EuiControlBar (#2781)

elastic · Jan 22, 2020 · 02de242 · 02de242
1 parent d5f1340
commit 02de242
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 **Bug fixes**
 
 - Increased column width on `EuiTableHeaderCellCheckbox` to prevent `EuiCheckbox`'s focus ring from getting clipped in `EuiBasicTable` ([#2770](https://github.com/elastic/eui/pull/2770))
+- Fixed the display of `EuiButton` within `EuiControlBar` when `fill={true}` to be more consistent with other buttons ([#2781](https://github.com/elastic/eui/pull/2781))
 
 **Deprecations**
 

diff --git a/src-docs/src/views/control_bar/tabs.js b/src-docs/src/views/control_bar/tabs.js
@@ -72,6 +72,7 @@ export class ControlBarWithTabs extends React.Component {
  controlType: 'button',
  id: 'close_the_hatch',
  label: 'Close the Hatch',
+ fill: true,
  onClick: this.closeTheHatch,
  className: 'customClassName',
  color: 'primary',

diff --git a/src/components/control_bar/_control_bar.scss b/src/components/control_bar/_control_bar.scss
@@ -167,9 +167,12 @@
  }
 
  .euiControlBar__button.euiButton--#{$colorName}:enabled {
+ box-shadow: none;
+ }
+
+ .euiControlBar__button.euiButton--#{$colorName}:enabled:not(.euiButton--fill) {
  color: makeHighContrastColor($colorValue, $euiControlBarBackground);
  border-color: makeHighContrastColor($colorValue, $euiControlBarBackground);
- box-shadow: none;
  }
 
  .euiButtonIcon--#{$colorName} {