Fix EuiFilterGroupButton bolding with notification and... (#1455)

elastic · Jan 18, 2019 · e075939 · e075939
1 parent 9d45a22
commit e075939
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 25 deletions.
diff --git 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
@@ -61,14 +61,18 @@ export const EuiBadge = ({
     optionalCustomStyles = { backgroundColor: color, color: textColor };
   }
 
-
   const classes = classNames(
     'euiBadge',
     iconSideToClassNameMap[iconSide],
     optionalColorClass,
     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}
           />
         </EuiKeyboardAccessible>
       );

diff --git 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
@@ -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 = (
+    <span {...contentProps} className={contentClassNames}>
+      {buttonIcon}
+      <span {...textProps} className={textClassNames}>{children}</span>
+    </span>
+  );
+
   // <a> 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}
       >
-        <span className="euiButton__content" {...contentProps}>
-          {buttonIcon}
-          <span className="euiButton__text" {...textProps}>{children}</span>
-        </span>
+        {innerNode}
       </a>
     );
   } else {
@@ -122,10 +136,7 @@ export const EuiButton = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButton__content" {...contentProps}>
-          {buttonIcon}
-          <span className="euiButton__text" {...textProps}>{children}</span>
-        </span>
+        {innerNode}
       </button>
     );
   }

diff --git 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 = (
+    <span {...contentProps} className={contentClassNames}>
+      {buttonIcon}
+      <span {...textProps} className={textClassNames}>{children}</span>
+    </span>
+  );
+
   // <a> 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}
       >
-        <span className="euiButtonEmpty__content" {...contentProps}>
-          {buttonIcon}
-          <span className="euiButtonEmpty__text" {...textProps}>{children}</span>
-        </span>
+        {innerNode}
       </a>
     );
   } else {
@@ -127,10 +141,7 @@ export const EuiButtonEmpty = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButtonEmpty__content" {...contentProps}>
-          {buttonIcon}
-          <span className="euiButtonEmpty__text"{...textProps}>{children}</span>
-        </span>
+        {innerNode}
       </button>
     );
   }
@@ -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
@@ -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
@@ -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 = (
-    <span className="euiFilterButton__textShift" data-text={children}>
-      {children}
+    <Fragment>
+      <span className="euiFilterButton__textShift" data-text={children}>
+        {children}
+      </span>
       {numFilters &&
         <EuiNotificationBadge className="euiFilterButton__notification">{numFilters}</EuiNotificationBadge>
       }
-    </span>
+    </Fragment>
   );
 
   return (
@@ -58,6 +66,7 @@ export const EuiFilterButton = ({
       iconSide={iconSide}
       iconType={iconType}
       type={type}
+      textProps={{ ...textProps, className: buttonTextClassNames }}
       {...rest}
     >
       {buttonContents}