diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9eaa2d20601..1799de2ee9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `6.5.1`.
+**Bug fixes**
+
+- Fixed `textProps` and `contentProps` of `EuiButton` and `EuiButtonEmpty` so they don’t override classes ([#1455](https://github.com/elastic/eui/pull/1455))
+- Fixed `closeButtonProps` of `EuiBadge` so it doesn't override classes ([#1455](https://github.com/elastic/eui/pull/1455))
+- Fixed font weight shift of `EuiFilterButton` when notification is present ([#1455](https://github.com/elastic/eui/pull/1455))
## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1)
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
index 6e497602136..8ef412a03f2 100644
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.js
@@ -61,7 +61,6 @@ export const EuiBadge = ({
optionalCustomStyles = { backgroundColor: color, color: textColor };
}
-
const classes = classNames(
'euiBadge',
iconSideToClassNameMap[iconSide],
@@ -69,6 +68,11 @@ export const EuiBadge = ({
className
);
+ const closeClassNames = classNames(
+ 'euiBadge__icon',
+ closeButtonProps && closeButtonProps.className,
+ );
+
let optionalIcon = null;
if (iconType) {
if (iconOnClick) {
@@ -78,9 +82,9 @@ export const EuiBadge = ({
onClick={iconOnClick}
type={iconType}
size="s"
- className="euiBadge__icon"
aria-label={iconOnClickAriaLabel}
{...closeButtonProps}
+ className={closeClassNames}
/>
);
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index b7701386b5a..a5960cebd0d 100644
--- a/src/components/badge/notification_badge/_notification_badge.scss
+++ b/src/components/badge/notification_badge/_notification_badge.scss
@@ -4,6 +4,7 @@
background: $euiColorAccent;
color: lightOrDarkTheme($euiColorEmptyShade, $euiColorFullShade);
font-size: $euiFontSizeXS;
+ font-weight: $euiFontWeightMedium;
line-height: $euiSize;
height: $euiSize;
min-width: $euiSize;
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 9d5fbf68b56..a95d609c74c 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -72,6 +72,16 @@ export const EuiButton = ({
},
);
+ const contentClassNames = classNames(
+ 'euiButton__content',
+ contentProps && contentProps.className,
+ );
+
+ const textClassNames = classNames(
+ 'euiButton__text',
+ textProps && textProps.className,
+ );
+
// Add an icon to the button if one exists.
let buttonIcon;
@@ -93,6 +103,13 @@ export const EuiButton = ({
);
}
+ const innerNode = (
+
+ {buttonIcon}
+ {children}
+
+ );
+
// elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
// this is a button and piggyback off its disabled styles.
if (href && !isDisabled) {
@@ -107,10 +124,7 @@ export const EuiButton = ({
ref={buttonRef}
{...rest}
>
-
- {buttonIcon}
- {children}
-
+ {innerNode}
);
} else {
@@ -122,10 +136,7 @@ export const EuiButton = ({
ref={buttonRef}
{...rest}
>
-
- {buttonIcon}
- {children}
-
+ {innerNode}
);
}
diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
index 20c57e60f06..19e8bc30fe3 100644
--- a/src/components/button/button_empty/button_empty.js
+++ b/src/components/button/button_empty/button_empty.js
@@ -77,6 +77,16 @@ export const EuiButtonEmpty = ({
className,
);
+ const contentClassNames = classNames(
+ 'euiButtonEmpty__content',
+ contentProps && contentProps.className,
+ );
+
+ const textClassNames = classNames(
+ 'euiButtonEmpty__text',
+ textProps && textProps.className,
+ );
+
// Add an icon to the button if one exists.
let buttonIcon;
@@ -98,6 +108,13 @@ export const EuiButtonEmpty = ({
);
}
+ const innerNode = (
+
+ {buttonIcon}
+ {children}
+
+ );
+
// elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
// this is a button and piggyback off its disabled styles.
if (href && !isDisabled) {
@@ -112,10 +129,7 @@ export const EuiButtonEmpty = ({
ref={buttonRef}
{...rest}
>
-
- {buttonIcon}
- {children}
-
+ {innerNode}
);
} else {
@@ -127,10 +141,7 @@ export const EuiButtonEmpty = ({
ref={buttonRef}
{...rest}
>
-
- {buttonIcon}
- {children}
-
+ {innerNode}
);
}
@@ -159,12 +170,12 @@ EuiButtonEmpty.propTypes = {
buttonRef: PropTypes.func,
/**
- * Passes props to `euiButton__content` span
+ * Passes props to `euiButtonEmpty__content` span
*/
contentProps: PropTypes.object,
/**
- * Passes props to `euiButton__text` span
+ * Passes props to `euiButtonEmpty__text` span
*/
textProps: PropTypes.object,
};
diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss
index 9f8d7267e2e..d774d0fd8e3 100644
--- a/src/components/filter_group/_filter_button.scss
+++ b/src/components/filter_group/_filter_button.scss
@@ -19,6 +19,17 @@
font-style: italic;
}
+ &:hover:not(:disabled),
+ &:focus {
+ // Remove underline from whole button so notifications don't get the underline
+ text-decoration: none;
+
+ .euiFilterButton__textShift {
+ // Add put it only on the actual text part
+ text-decoration: underline;
+ }
+ }
+
&.euiFilterButton--grow {
flex-grow: 1;
width: 100%;
@@ -40,6 +51,11 @@
}
}
+.euiFilterButton__text-hasNotification {
+ display: flex;
+ align-items: center;
+}
+
.euiFilterButton__textShift {
vertical-align: middle;
diff --git a/src/components/filter_group/filter_button.js b/src/components/filter_group/filter_button.js
index 433099ccaf2..d9675bda387 100644
--- a/src/components/filter_group/filter_button.js
+++ b/src/components/filter_group/filter_button.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@@ -27,6 +27,7 @@ export const EuiFilterButton = ({
type,
grow,
noDivider,
+ textProps,
...rest
}) => {
@@ -41,13 +42,20 @@ export const EuiFilterButton = ({
className,
);
+ const buttonTextClassNames = classNames(
+ { 'euiFilterButton__text-hasNotification': numFilters, },
+ textProps && textProps.className,
+ );
+
const buttonContents = (
-
- {children}
+
+
+ {children}
+
{numFilters &&
{numFilters}
}
-
+
);
return (
@@ -58,6 +66,7 @@ export const EuiFilterButton = ({
iconSide={iconSide}
iconType={iconType}
type={type}
+ textProps={{ ...textProps, className: buttonTextClassNames }}
{...rest}
>
{buttonContents}