From 4fb21f729fe3d2e4964f99d582cf0e31d132b787 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 17 Jan 2019 18:00:02 -0500 Subject: [PATCH 1/4] Fix `textProps` and `contentProps` of buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit … so they don’t override classes --- src/components/button/button.js | 27 +++++++++++----- .../button/button_empty/button_empty.js | 32 +++++++++++++------ 2 files changed, 41 insertions(+), 18 deletions(-) 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..2533fca5528 100644 --- a/src/components/button/button_empty/button_empty.js +++ b/src/components/button/button_empty/button_empty.js @@ -77,6 +77,17 @@ 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 +109,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 +130,7 @@ export const EuiButtonEmpty = ({ ref={buttonRef} {...rest} > - - {buttonIcon} - {children} - + {innerNode} ); } else { @@ -127,10 +142,7 @@ export const EuiButtonEmpty = ({ ref={buttonRef} {...rest} > - - {buttonIcon} - {children} - + {innerNode} ); } @@ -159,12 +171,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, }; From 2aa22da1b5c5276b208ad4e6ef7162cb509587f3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 17 Jan 2019 18:01:35 -0500 Subject: [PATCH 2/4] Moved notification out of `. euiFilterButton__textShift` So that the bold weight shift works properly --- .../notification_badge/_notification_badge.scss | 1 + src/components/filter_group/_filter_button.scss | 16 ++++++++++++++++ src/components/filter_group/filter_button.js | 17 +++++++++++++---- 3 files changed, 30 insertions(+), 4 deletions(-) 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/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} From a4b2e2d1537c8eaf9f0a80635b9ab69beeab6ab4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 17 Jan 2019 18:15:42 -0500 Subject: [PATCH 3/4] On EuiBadge as well --- src/components/badge/badge.js | 8 ++++++-- src/components/button/button_empty/button_empty.js | 1 - 2 files changed, 6 insertions(+), 3 deletions(-) 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/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js index 2533fca5528..19e8bc30fe3 100644 --- a/src/components/button/button_empty/button_empty.js +++ b/src/components/button/button_empty/button_empty.js @@ -87,7 +87,6 @@ export const EuiButtonEmpty = ({ textProps && textProps.className, ); - // Add an icon to the button if one exists. let buttonIcon; From c109928c084cbf0ac9269afb5affdba54c90a7a9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 17 Jan 2019 18:18:47 -0500 Subject: [PATCH 4/4] cl --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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)