From e075939e6ba2f69df6aed3da2a5dd7b59ad1239d Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 18 Jan 2019 14:51:56 -0500 Subject: [PATCH] Fix EuiFilterGroupButton bolding with notification and... (#1455) --- CHANGELOG.md | 6 +++- src/components/badge/badge.js | 8 +++-- .../_notification_badge.scss | 1 + src/components/button/button.js | 27 +++++++++++----- .../button/button_empty/button_empty.js | 31 +++++++++++++------ .../filter_group/_filter_button.scss | 16 ++++++++++ src/components/filter_group/filter_button.js | 17 +++++++--- 7 files changed, 81 insertions(+), 25 deletions(-) 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}