Align Filter and Facet button styles (#1589)

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**
 

src-docs/src/views/facet/facet_example.js

@@ -69,6 +69,11 @@ export const FacetExample = {
       ),
       props: { EuiFacetGroup },
       demo: <FacetLayout />,
+      snippet: `// Restrict the width of default (vertical) if not restricted by parent
+<EuiFacetGroup style={{ maxWidth: 200 }}>{facets}</EuiFacetGroup>
+
+// Horizontal
+<EuiFacetGroup layout="horizontal">{facets}</EuiFacetGroup>`,
     },
   ],
 };

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

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 <Link to="/forms/search-bar">Search Bar</Link> component which uses this more fully and
           can give you a better example of its usage when applied to filtering.
         </p>
       </EuiCallOut>

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,

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
+</span>
+`;
+
+exports[`EuiNotificationBadge props color accent is rendered 1`] = `
+<span
+  class="euiNotificationBadge"
+>
+  5
+</span>
+`;
+
+exports[`EuiNotificationBadge props color subdued is rendered 1`] = `
+<span
+  class="euiNotificationBadge euiNotificationBadge--subdued"
+>
+  5
+</span>
+`;
+
+exports[`EuiNotificationBadge props size m is rendered 1`] = `
+<span
+  class="euiNotificationBadge euiNotificationBadge--medium"
+>
+  5
+</span>
+`;
+
+exports[`EuiNotificationBadge props size s is rendered 1`] = `
+<span
+  class="euiNotificationBadge"
+>
+  5
+</span>
 `;

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;
 }

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(<EuiNotificationBadge {...requiredProps} />);
+    const component = render(
+      <EuiNotificationBadge {...requiredProps}>5</EuiNotificationBadge>
+    );
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('props', () => {
+    describe('color', () => {
+      COLORS.forEach(color => {
+        test(`${color} is rendered`, () => {
+          const component = render(
+            <EuiNotificationBadge color={color}>5</EuiNotificationBadge>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('size', () => {
+      SIZES.forEach(size => {
+        test(`${size} is rendered`, () => {
+          const component = render(
+            <EuiNotificationBadge size={size}>5</EuiNotificationBadge>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
 });

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<HTMLSpanElement> {
-  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 (
     <span className={classes} {...rest}>

src/components/facet/__snapshots__/facet_button.test.js.snap

@@ -12,6 +12,7 @@ exports[`EuiFacetButton is rendered 1`] = `
   >
     <span
       class="euiFacetButton__text"
+      data-text="Content"
     >
       Content
     </span>
@@ -50,7 +51,10 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
     </svg>
     <span
       class="euiFacetButton__text"
-    />
+      data-text="Content"
+    >
+      Content
+    </span>
   </span>
 </button>
 `;
@@ -66,7 +70,10 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = `
   >
     <span
       class="euiFacetButton__text"
-    />
+      data-text="Content"
+    >
+      Content
+    </span>
   </span>
 </button>
 `;
@@ -82,7 +89,10 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
   >
     <span
       class="euiFacetButton__text"
-    />
+      data-text="Content"
+    >
+      Content
+    </span>
     <div
       class="euiLoadingSpinner euiLoadingSpinner--medium euiFacetButton__spinner"
     />
@@ -100,7 +110,10 @@ exports[`EuiFacetButton props isSelected is rendered 1`] = `
   >
     <span
       class="euiFacetButton__text"
-    />
+      data-text="Content"
+    >
+      Content
+    </span>
   </span>
 </button>
 `;
@@ -115,9 +128,12 @@ exports[`EuiFacetButton props quantity is rendered 1`] = `
   >
     <span
       class="euiFacetButton__text"
-    />
+      data-text="Content"
+    >
+      Content
+    </span>
     <span
-      class="euiNotificationBadge euiFacetButton__quantity"
+      class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFacetButton__quantity"
     >
       60
     </span>

src/components/facet/_facet_button.scss

@@ -12,45 +12,7 @@
   border: none;
   transform: none !important; /* 1 */
   animation: none !important; /* 1 */
-  transition-timing-function: ease-in; /* 2 */
-  transition-duration: $euiAnimSpeedFast; /* 2 */
-
-  .euiFacetButton__content {
-    @include euiButtonContent;
-  }
-
-  .euiFacetButton__text {
-    flex-grow: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: $euiButtonHeight; // For better alignment with icon/quantity
-  }
-
-  .euiFacetButton__spinner,
-  .euiFacetButton__quantity,
-  .euiFacetButton__icon {
-    flex-shrink: 0; // Ensures they don't scale down below their intended size
-  }
-
-  .euiFacetButton__quantity,
-  .euiFacetButton__icon {
-    transition: all $euiAnimSpeedFast ease-in;
-  }
-
-  .euiFacetButton__quantity {
-    // Increase the default size a bit
-    $size: $euiSize + $euiSizeXS;
-    line-height: $size;
-    height: $size;
-    min-width: $euiSizeL;
-  }
-
-  &.euiFacetButton--unSelected .euiFacetButton__quantity,
-  &:disabled .euiFacetButton__quantity {
-    // Change the default coloring when it's not selected
-    background-color: tint($euiColorLightShade, 30%);
-    color: $euiColorFullShade;
-  }
+  transition: all $euiAnimSpeedFast ease-in; /* 2 */
 
   &:hover,
   &:focus {
@@ -91,6 +53,21 @@
   }
 }
 
-.euiFacetButton--isSelected .euiFacetButton__text {
-  font-weight: $euiFontWeightBold;
+.euiFacetButton__content {
+  @include euiButtonContent;
+}
+
+.euiFacetButton__text {
+  @include euiTextShift;
+  @include euiTextTruncate;
+  flex-grow: 1;
+  vertical-align: middle;
+
+  .euiFacetButton--isSelected & {
+    font-weight: $euiFontWeightBold;
+  }
+}
+
+.euiFacetButton__icon {
+  transition: all $euiAnimSpeedFast ease-in;
 }