Merge branch 'master' into rk/side-nav-kibana

elastic · Jan 22, 2019 · 5c0e385 · 5c0e385
2 parents 658e75c + 2786ce5
commit 5c0e385
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Adds `displayType` prop that enables `EuiListGroupItem` text to wrap ([#1458](https://github.com/elastic/eui/pull/1458))
+- Adds `displayType` prop to `EuiListGroup` enabling list item text to wrap ([#1459](https://github.com/elastic/eui/pull/1459))
+- Added `inputRef` prop to `EuiFieldNumber` and updated `EuiFieldText`'s to a Ref type ([#1434](https://github.com/elastic/eui/pull/1434))
+- Added `snowflake` icon ([#1445](https://github.com/elastic/eui/pull/1445))
+
+**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)
 
@@ -21,7 +29,6 @@
 
 - Added `legend` for accessibility of `EuiButtonGroup` and fixed opacity of disabled input ([#1444](https://github.com/elastic/eui/pull/1444))
 
-
 ## [`6.4.0`](https://github.com/elastic/eui/tree/v6.4.0)
 
 - Added `EuiNavDrawer` side nav component ([#1427](https://github.com/elastic/eui/pull/1427))

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -128,6 +128,7 @@ const iconTypes = [
   'shard',
   'share',
   'sortable',
+  'snowflake',
   'sortDown',
   'sortLeft',
   'sortRight',

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}

diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js
@@ -25,6 +25,7 @@ export const EuiFieldNumber = ({
   compressed,
   prepend,
   append,
+  inputRef,
   ...rest
 }) => {
   const classes = classNames('euiFieldNumber', className, {
@@ -54,6 +55,7 @@ export const EuiFieldNumber = ({
           value={value}
           placeholder={placeholder}
           className={classes}
+          ref={inputRef}
           {...rest}
         />
       </EuiValidatableControl>

diff --git a/src/components/form/field_number/index.d.ts b/src/components/form/field_number/index.d.ts
@@ -1,7 +1,7 @@
 import { CommonProps } from '../../common';
-import { IconType } from '../../icon'
+import { IconType } from '../../icon';
 
-import { ReactNode, SFC, InputHTMLAttributes } from 'react';
+import { ReactNode, SFC, InputHTMLAttributes, Ref } from 'react';
 
 declare module '@elastic/eui' {
 
@@ -18,6 +18,7 @@ declare module '@elastic/eui' {
     compressed?: boolean;
     prepend?: ReactNode | ReactNode[];
     append?: ReactNode | ReactNode[];
+    inputRef?: Ref<HTMLInputElement>;
   }
 
   export const EuiFieldNumber: SFC<

diff --git a/src/components/form/field_text/index.d.ts b/src/components/form/field_text/index.d.ts
@@ -1,6 +1,6 @@
 import { CommonProps } from '../../common';
 
-import { SFC, InputHTMLAttributes } from 'react';
+import { SFC, InputHTMLAttributes, Ref } from 'react';
 
 declare module '@elastic/eui' {
 
@@ -12,7 +12,7 @@ declare module '@elastic/eui' {
   export interface EuiFieldTextProps {
     icon?: string;
     isInvalid?: boolean;
-    inputRef?: (ref: HTMLInputElement) => void;
+    inputRef?: Ref<HTMLInputElement>;
     fullWidth?: boolean;
     isLoading?: boolean;
     prepend?: React.ReactNode;

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -5136,6 +5136,22 @@ exports[`EuiIcon props type share is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type snowflake is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.007.5a.5.5 0 0 1 1 0v2.024a.999.999 0 0 0 .268-.227l1.027-1.233a.5.5 0 0 1 .769.64L8.275 3.86a.999.999 0 0 1-.268.227v2.548l2.207-1.274c0-.114.02-.231.062-.346l.968-2.632a.5.5 0 1 1 .938.345l-.554 1.506a.998.998 0 0 0-.062.346l1.753-1.012a.5.5 0 1 1 .5.866l-1.753 1.012c.1.057.21.098.33.119l1.582.273a.5.5 0 1 1-.17.986l-2.764-.478a1 1 0 0 1-.33-.12L8.506 7.5l2.207 1.274a1 1 0 0 1 .33-.119l2.764-.478a.5.5 0 1 1 .17.986l-1.582.273a.999.999 0 0 0-.33.12l1.753 1.011a.5.5 0 1 1-.5.866l-1.753-1.012c0 .115.02.231.062.346l.554 1.506a.5.5 0 0 1-.938.345l-.968-2.632a.999.999 0 0 1-.062-.346L8.007 8.366v2.548c.098.058.19.133.268.227l1.796 2.155a.5.5 0 0 1-.769.64l-1.027-1.233a.999.999 0 0 0-.268-.226V14.5a.5.5 0 0 1-1 0v-2.024a.999.999 0 0 0-.269.227l-1.027 1.233a.5.5 0 0 1-.768-.64l1.795-2.155a.999.999 0 0 1 .269-.227V8.366L4.8 9.64c0 .114-.02.231-.062.346l-.969 2.632a.5.5 0 1 1-.938-.345l.554-1.506a1 1 0 0 0 .062-.346l-1.753 1.012a.5.5 0 0 1-.5-.866l1.753-1.012a.999.999 0 0 0-.33-.119l-1.582-.273a.5.5 0 0 1 .17-.986l2.764.478c.12.02.232.062.33.12L6.508 7.5 4.3 6.226a.999.999 0 0 1-.33.119l-2.765.478a.5.5 0 1 1-.17-.986l1.582-.273a.999.999 0 0 0 .33-.12L1.194 4.434a.5.5 0 1 1 .5-.866l1.753 1.012c0-.114-.02-.231-.062-.346L2.83 2.727a.5.5 0 1 1 .938-.345l.969 2.632a.999.999 0 0 1 .062.346l2.207 1.274V4.086a1 1 0 0 1-.269-.227L4.943 1.704a.5.5 0 0 1 .768-.64l1.027 1.233c.079.094.17.17.269.227V.5z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type sortDown is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium"

diff --git a/src/components/icon/assets/snowflake.svg b/src/components/icon/assets/snowflake.svg
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -209,6 +209,7 @@ import securityAnalyticsApp from './assets/app_security_analytics.svg';
 import securityApp from './assets/app_security.svg';
 import shard from './assets/shard.svg';
 import share from './assets/share.svg';
+import snowflake from './assets/snowflake.svg';
 import sortable from './assets/sortable.svg';
 import sortDown from './assets/sort_down.svg';
 import sortLeft from './assets/sortLeft.svg';
@@ -499,6 +500,7 @@ const typeToIconMap = {
   securityApp,
   shard,
   share,
+  snowflake,
   sortable,
   sortDown,
   sortLeft,