From e6e3168c7b988221388d480270ee058e5839a3a5 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 26 Feb 2019 10:44:19 -0500 Subject: [PATCH] Align Filter and Facet button styles (#1589) --- CHANGELOG.md | 4 + src-docs/src/views/facet/facet_example.js | 5 + .../src/views/filter_group/filter_group.js | 3 +- .../filter_group/filter_group_example.js | 6 +- src/components/avatar/_avatar.scss | 5 +- .../badge_notification.test.tsx.snap | 36 +++- .../_notification_badge.scss | 15 ++ .../badge_notification.test.tsx | 32 +++- .../notification_badge/badge_notification.tsx | 31 ++- .../__snapshots__/facet_button.test.js.snap | 28 ++- src/components/facet/_facet_button.scss | 59 ++---- src/components/facet/facet_button.js | 21 +- src/components/facet/facet_button.test.js | 12 +- src/components/facet/index.d.ts | 44 +++++ .../__snapshots__/filter_button.test.js.snap | 180 +++++++++++++++++- .../filter_group/_filter_button.scss | 57 +++--- src/components/filter_group/filter_button.js | 24 ++- .../filter_group/filter_button.test.js | 90 +++++++++ src/components/filter_group/index.d.ts | 20 +- src/components/icon/_icon.scss | 1 + src/components/index.d.ts | 1 + src/components/loading/_loading_spinner.scss | 1 + src/global_styling/mixins/_typography.scss | 19 ++ 23 files changed, 588 insertions(+), 106 deletions(-) create mode 100644 src/components/facet/index.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index d4ed5883c3b..3f259e3ecec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ - Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462)) - Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462)) +- Added `displayOnly` prop to `EuiFormRow` ([#1582](https://github.com/elastic/eui/pull/1582)) +- Added `numActiveFilters` prop to `EuiFilterButton` ([#1589](https://github.com/elastic/eui/pull/1589)) +- Updated style of `EuiFilterButton` to match `EuiFacetButton` ([#1589](https://github.com/elastic/eui/pull/1589)) +- Added `size` and `color` props to `EuiNotificationBadge` ([#1589](https://github.com/elastic/eui/pull/1589)) **Bug fixes** diff --git a/src-docs/src/views/facet/facet_example.js b/src-docs/src/views/facet/facet_example.js index aff17211a68..514d2d049ad 100644 --- a/src-docs/src/views/facet/facet_example.js +++ b/src-docs/src/views/facet/facet_example.js @@ -69,6 +69,11 @@ export const FacetExample = { ), props: { EuiFacetGroup }, demo: , + snippet: `// Restrict the width of default (vertical) if not restricted by parent +{facets} + +// Horizontal +{facets}`, }, ], }; diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js index 8901e84d607..4e7acbdad4a 100644 --- a/src-docs/src/views/filter_group/filter_group.js +++ b/src-docs/src/views/filter_group/filter_group.js @@ -88,8 +88,9 @@ export default class extends Component { iconType="arrowDown" onClick={this.onButtonClick.bind(this)} isSelected={this.state.isPopoverOpen} + numFilters={items.length} hasActiveFilters={true} - numFilters={2} + numActiveFilters={2} grow={true} > Composers diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js index c9593f0d234..cdd25361847 100644 --- a/src-docs/src/views/filter_group/filter_group_example.js +++ b/src-docs/src/views/filter_group/filter_group_example.js @@ -1,5 +1,9 @@ import React, { Fragment } from 'react'; +import { + Link, +} from 'react-router'; + import { renderToHtml } from '../../services'; import { @@ -31,7 +35,7 @@ export const FilterGroupExample = { This documents a visual pattern used for filtering (usually page heads next to search). The individual components themselves are very simple and do not have much functionality on their own. If you are looking for expanded usage - examples please check out the Table of Records component which uses this more fully and + examples please check out the Search Bar component which uses this more fully and can give you a better example of its usage when applied to filtering.

diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss index 7590180480a..0414e4534e1 100644 --- a/src/components/avatar/_avatar.scss +++ b/src/components/avatar/_avatar.scss @@ -1,10 +1,11 @@ .euiAvatar { + flex-shrink: 0; // Ensures it never scales down below it's intended size display: inline-block; background-size: cover; text-align: center; vertical-align: middle; overflow-x: hidden; - font-weight: $euiFontWeightRegular; // Explicitly state so it doesn't get overridden by inheritence + font-weight: $euiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritence } .euiAvatar--user { @@ -21,7 +22,7 @@ $avatarSizing: ( s: ( size: $euiSizeL, - font-size: $euiSizeM*.9 + font-size: $euiSizeM ), m: ( size: $euiSizeXL, diff --git a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap index 45529816764..1e7152aca1b 100644 --- a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap +++ b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap @@ -5,5 +5,39 @@ exports[`EuiNotificationBadge is rendered 1`] = ` aria-label="aria-label" class="euiNotificationBadge testClass1 testClass2" data-test-subj="test subject string" -/> +> + 5 + +`; + +exports[`EuiNotificationBadge props color accent is rendered 1`] = ` + + 5 + +`; + +exports[`EuiNotificationBadge props color subdued is rendered 1`] = ` + + 5 + +`; + +exports[`EuiNotificationBadge props size m is rendered 1`] = ` + + 5 + +`; + +exports[`EuiNotificationBadge props size s is rendered 1`] = ` + + 5 + `; diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss index a5960cebd0d..598ac182b64 100644 --- a/src/components/badge/notification_badge/_notification_badge.scss +++ b/src/components/badge/notification_badge/_notification_badge.scss @@ -1,4 +1,5 @@ .euiNotificationBadge { + flex-shrink: 0; // Ensures it never scales down below it's intended size display: inline-block; border-radius: $euiBorderRadius; background: $euiColorAccent; @@ -12,4 +13,18 @@ padding-right: $euiSizeXS; vertical-align: middle; text-align: center; + transition: all $euiAnimSpeedFast ease-in; +} + +.euiNotificationBadge--medium { + // Increase the default size a bit + $size: $euiSize + $euiSizeXS; + line-height: $size; + height: $size; + min-width: $euiSizeL; +} + +.euiNotificationBadge--subdued { + background-color: tint($euiColorLightShade, 30%); + color: $euiColorFullShade; } diff --git a/src/components/badge/notification_badge/badge_notification.test.tsx b/src/components/badge/notification_badge/badge_notification.test.tsx index b48e588c0fb..76062005f4b 100644 --- a/src/components/badge/notification_badge/badge_notification.test.tsx +++ b/src/components/badge/notification_badge/badge_notification.test.tsx @@ -2,12 +2,40 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test/required_props'; -import { EuiNotificationBadge } from './badge_notification'; +import { EuiNotificationBadge, COLORS, SIZES } from './badge_notification'; describe('EuiNotificationBadge', () => { test('is rendered', () => { - const component = render(); + const component = render( + 5 + ); expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('color', () => { + COLORS.forEach(color => { + test(`${color} is rendered`, () => { + const component = render( + 5 + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('size', () => { + SIZES.forEach(size => { + test(`${size} is rendered`, () => { + const component = render( + 5 + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx index eb8a99b4c24..107973a2deb 100644 --- a/src/components/badge/notification_badge/badge_notification.tsx +++ b/src/components/badge/notification_badge/badge_notification.tsx @@ -1,17 +1,40 @@ import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../../common'; +import { CommonProps, keysOf } from '../../common'; + +const colorToClassMap: { [color: string]: string | null } = { + accent: null, + subdued: 'euiNotificationBadge--subdued', +}; + +export const COLORS: BadgeNotificationColor[] = keysOf(colorToClassMap); +export type BadgeNotificationColor = keyof typeof colorToClassMap; + +const sizeToClassNameMap = { + s: null, + m: 'euiNotificationBadge--medium', +}; + +export const SIZES: BadgeNotificationSize[] = keysOf(sizeToClassNameMap); +export type BadgeNotificationSize = keyof typeof sizeToClassNameMap; export interface EuiNotificationBadgeProps extends CommonProps, HTMLAttributes { - children?: ReactNode; + children: ReactNode; + size?: BadgeNotificationSize; + color?: BadgeNotificationColor; } export const EuiNotificationBadge: FunctionComponent< EuiNotificationBadgeProps -> = ({ children, className, ...rest }) => { - const classes = classNames('euiNotificationBadge', className); +> = ({ children, className, size = 's', color = 'accent', ...rest }) => { + const classes = classNames( + 'euiNotificationBadge', + sizeToClassNameMap[size], + colorToClassMap[color], + className + ); return ( diff --git a/src/components/facet/__snapshots__/facet_button.test.js.snap b/src/components/facet/__snapshots__/facet_button.test.js.snap index 909c2d66cd2..f2f77e2e805 100644 --- a/src/components/facet/__snapshots__/facet_button.test.js.snap +++ b/src/components/facet/__snapshots__/facet_button.test.js.snap @@ -12,6 +12,7 @@ exports[`EuiFacetButton is rendered 1`] = ` > Content @@ -50,7 +51,10 @@ exports[`EuiFacetButton props icon is rendered 1`] = ` + data-text="Content" + > + Content + `; @@ -66,7 +70,10 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = ` > + data-text="Content" + > + Content + `; @@ -82,7 +89,10 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = ` > + data-text="Content" + > + Content +