@elastic/eui 59.0.0 → 59.1.0

package/eui.d.ts

@@ -2340,7 +2340,8 @@ declare module '@elastic/eui/src/components/loading/loading_content' {
 }
 declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiLoadingSpinnerStyles: ({ euiTheme }: UseEuiTheme) => {
+	import { EuiLoadingSpinnerProps } from '@elastic/eui/src/components/loading/loading_spinner';
+	export const euiLoadingSpinnerStyles: ({ euiTheme }: UseEuiTheme, color?: EuiLoadingSpinnerProps['color']) => {
 	    euiLoadingSpinner: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
@@ -2351,12 +2352,22 @@ declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_spinner' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
+	import { HTMLAttributes, FunctionComponent, CSSProperties } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export const SIZES: readonly ["s", "m", "l", "xl", "xxl"];
 	export type EuiLoadingSpinnerSize = typeof SIZES[number];
-	export type EuiLoadingSpinnerProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	export type EuiLoadingSpinnerColor = {
+	    border?: CSSProperties['color'];
+	    highlight?: CSSProperties['color'];
+	};
+	export type EuiLoadingSpinnerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
 	    size?: EuiLoadingSpinnerSize;
+	    /**
+	     * Sets the color of the border and highlight.
+	     * Each key accepts any valid CSS color value as a `string`
+	     * See #EuiLoadingSpinnerColor
+	     */
+	    color?: EuiLoadingSpinnerColor;
 	};
 	export const EuiLoadingSpinner: FunctionComponent<EuiLoadingSpinnerProps>;
 
@@ -2407,7 +2418,7 @@ declare module '@elastic/eui/src/components/loading' {
 	export { EuiLoadingLogo } from '@elastic/eui/src/components/loading/loading_logo';
 
 }
-declare module '@elastic/eui/src/components/button/button_content' {
+declare module '@elastic/eui/src/components/button/_button_content_deprecated' {
 	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
@@ -2415,8 +2426,10 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	export const ICON_SIDES: ButtonContentIconSide[];
 	export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
 	/**
-	 * *INTERNAL ONLY*
+	 * *INTERNAL ONLY / DEPRECATED*
 	 * This component is simply a helper component for reuse within other button components
+	 * This component has been deprecated in favor of the new EuiButtonDisplayContent
+	 * that can be found in `src/components/button/button_display/_button_display_content.tsx`.
 	 */
 	export interface EuiButtonContentProps extends CommonProps {
 	    /**
@@ -2429,7 +2442,8 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	    iconSide?: ButtonContentIconSide;
 	    isLoading?: boolean;
 	    /**
-	     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+	     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+	     * It doesn't apply to the icon.
 	     */
 	    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps & {
 	        ref?: Ref<HTMLSpanElement>;
@@ -2437,7 +2451,7 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	    };
 	    iconSize?: 's' | 'm';
 	}
-	export const EuiButtonContent: FunctionComponent<EuiButtonContentType & EuiButtonContentProps>;
+	export const EuiButtonContentDeprecated: FunctionComponent<EuiButtonContentType & EuiButtonContentProps>;
 
 }
 declare module '@elastic/eui/src/services/security/href_validator' {
@@ -2447,7 +2461,7 @@ declare module '@elastic/eui/src/services/security/href_validator' {
 declare module '@elastic/eui/src/components/button/button' {
 	import React, { FunctionComponent, Ref, CSSProperties, HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
-	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/button_content';
+	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/_button_content_deprecated';
 	export type ButtonColor = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'ghost' | 'text';
 	export type ButtonSize = 's' | 'm';
 	export const colorToClassNameMap: {
@@ -2526,13 +2540,16 @@ declare module '@elastic/eui/src/components/button/button' {
 	    baseClassName: string;
 	};
 	/**
+	 * *DEPRECATED*
 	 * EuiButtonDisplay is an internal-only component used for displaying
 	 * any element as a button.
 	 * NOTE: This component *must* be below EuiButton in the file and
 	 * EuiButton must also set a displayName for react-docgen-typescript
 	 * to correctly set EuiButton's docgenInfo and display a props table.
+	 * This component has been deprecated in favor of the new EuiButtonDisplay
+	 * that can be found in `src/components/button/button_display/_button_display.tsx`
 	 */
-	export const EuiButtonDisplay: React.ForwardRefExoticComponent<EuiButtonProps & React.HTMLAttributes<HTMLElement> & {
+	export const EuiButtonDisplayDeprecated: React.ForwardRefExoticComponent<EuiButtonProps & React.HTMLAttributes<HTMLElement> & {
 	    /**
 	     * Provide a valid element to render the element as
 	     */
@@ -2547,7 +2564,7 @@ declare module '@elastic/eui/src/components/button/button' {
 declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	import { FunctionComponent, Ref } from 'react';
 	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
-	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/button_content';
+	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/_button_content_deprecated';
 	export type EuiButtonEmptyColor = 'primary' | 'danger' | 'text' | 'ghost' | 'success' | 'warning';
 	export const COLORS: EuiButtonEmptyColor[]; const sizeToClassNameMap: {
 	    xs: string;
@@ -2749,7 +2766,7 @@ declare module '@elastic/eui/src/components/button/button_group/button_group_but
 declare module '@elastic/eui/src/components/button/button_group/button_group' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 	import { ButtonColor } from '@elastic/eui/src/components/button/button';
-	import { EuiButtonContentProps } from '@elastic/eui/src/components/button/button_content';
+	import { EuiButtonContentProps } from '@elastic/eui/src/components/button/_button_content_deprecated';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiButtonGroupOptionProps extends EuiButtonContentProps, CommonProps {
 	    /**
@@ -6913,6 +6930,12 @@ declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link' {
 	     * will be prepended with a hash `#` and used as the link `href`
 	     */
 	    destinationId: string;
+	    /**
+	     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+	     * setting this flag to true will manually scroll to and focus the destination element
+	     * without changing the browser URL's hash
+	     */
+	    overrideLinkBehavior?: boolean;
 	    /**
 	     * When position is fixed, this is forced to `0`
 	     */
@@ -12744,6 +12767,146 @@ declare module '@elastic/eui/src/components/expression' {
 	export type { EuiExpressionProps } from '@elastic/eui/src/components/expression/expression';
 	export { EuiExpression } from '@elastic/eui/src/components/expression/expression';
 
+}
+declare module '@elastic/eui/src/components/facet/facet_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFacetButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiFacetButton: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonTextStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiFacetButton__text: import("@emotion/utils").SerializedStyles;
+	    isSelected: import("@emotion/utils").SerializedStyles;
+	    unSelected: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonIconStyles: () => {
+	    euiFacetButton__icon: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonLoadingSpinnerStyles: () => {
+	    euiFacetButton__loadingSpinner: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonQuantityStyles: () => {
+	    euiFacetButton__quantity: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiButtonBaseCSS: () => string;
+	export const euiButtonDisplayStyles: (euiThemeContext: UseEuiTheme, minWidth: string) => {
+	    euiButtonDisplay: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display_content.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiButtonDisplayContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiButtonDisplayContent: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    euiButtonDisplayContent__spinner: import("@emotion/utils").SerializedStyles;
+	    euiButtonDisplayContent__icon: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display_content' {
+	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { IconType } from '@elastic/eui/src/components/icon';
+	export type ButtonContentIconSide = 'left' | 'right' | undefined;
+	export type EuiButtonDisplayContentType = HTMLAttributes<HTMLSpanElement>;
+	/**
+	 * *INTERNAL ONLY*
+	 * This component is simply a helper component for reuse within other button components.
+	 */
+	export interface EuiButtonDisplayContentProps extends CommonProps {
+	    /**
+	     * Any `type` accepted by EuiIcon
+	     */
+	    iconType?: IconType;
+	    /**
+	     * Can only be one side `left` or `right`
+	     */
+	    iconSide?: ButtonContentIconSide;
+	    isLoading?: boolean;
+	    /**
+	     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+	     */
+	    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps & {
+	        ref?: Ref<HTMLSpanElement>;
+	        'data-text'?: string;
+	    };
+	    iconSize?: 's' | 'm';
+	    isDisabled: boolean;
+	}
+	export const EuiButtonDisplayContent: FunctionComponent<EuiButtonDisplayContentType & EuiButtonDisplayContentProps>;
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display' {
+	import React, { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
+	import { EuiButtonDisplayContentProps, EuiButtonDisplayContentType } from '@elastic/eui/src/components/button/button_display/_button_display_content';
+	/**
+	 * Extends EuiButtonDisplayContentProps which provides
+	 * `iconType`, `iconSide`, and `textProps`
+	 */
+	export interface EuiButtonDisplayCommonProps extends EuiButtonDisplayContentProps, CommonProps {
+	    children?: ReactNode;
+	    size?: 'xs' | 's' | 'm';
+	    /**
+	     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+	     * *Only use when the readable text does not change between states.*
+	     */
+	    isSelected?: boolean;
+	    /**
+	     * Extends the button to 100% width
+	     */
+	    fullWidth?: boolean;
+	    /**
+	     * Override the default minimum width
+	     */
+	    minWidth?: CSSProperties['minWidth'];
+	    /**
+	     * Force disables the button and changes the icon to a loading spinner
+	     */
+	    isLoading?: boolean;
+	    /**
+	     * Object of props passed to the <span/> wrapping the button's content
+	     */
+	    contentProps?: EuiButtonDisplayContentType;
+	    style?: CSSProperties;
+	}
+	export type EuiButtonDisplayPropsForAnchor = PropsForAnchor<EuiButtonDisplayCommonProps, {
+	    buttonRef?: Ref<HTMLAnchorElement>;
+	}>;
+	export type EuiButtonDisplayPropsForButton = PropsForButton<EuiButtonDisplayCommonProps, {
+	    buttonRef?: Ref<HTMLButtonElement>;
+	}>;
+	export type Props = ExclusiveUnion<EuiButtonDisplayPropsForAnchor, EuiButtonDisplayPropsForButton>;
+	export type EuiButtonDisplayProps = EuiButtonDisplayCommonProps & HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element?: 'a' | 'button' | 'span' | 'label';
+	};
+	/**
+	 * EuiButtonDisplay is an internal-only component used for displaying
+	 * any element as a button.
+	 */
+	export const EuiButtonDisplay: React.ForwardRefExoticComponent<EuiButtonDisplayCommonProps & React.HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element?: "a" | "button" | "label" | "span" | undefined;
+	} & React.RefAttributes<HTMLElement>>;
+
 }
 declare module '@elastic/eui/src/components/facet/facet_button' {
 	import { FunctionComponent, HTMLAttributes, MouseEventHandler, ReactNode, RefCallback } from 'react';
@@ -12775,25 +12938,40 @@ declare module '@elastic/eui/src/components/facet/facet_button' {
 	}
 	export const EuiFacetButton: FunctionComponent<EuiFacetButtonProps>;
 
+}
+declare module '@elastic/eui/src/components/facet/facet_group.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { EuiFacetGroupLayout } from '@elastic/eui/src/components/facet/facet_group';
+	export const euiFacetGroupStyles: ({ euiTheme }: UseEuiTheme, layout: EuiFacetGroupLayout) => {
+	    euiFacetGroup: import("@emotion/utils").SerializedStyles;
+	    none: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    horizontal: import("@emotion/utils").SerializedStyles;
+	    vertical: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/facet/facet_group' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; type FacetGroupLayout = 'vertical' | 'horizontal';
-	export const LAYOUTS: FacetGroupLayout[]; type FacetGroupGutterSize = 'none' | 's' | 'm' | 'l';
-	export const GUTTER_SIZES: FacetGroupGutterSize[];
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const LAYOUTS: readonly ["vertical", "horizontal"];
+	export type EuiFacetGroupLayout = typeof LAYOUTS[number];
+	export const GUTTER_SIZES: readonly ["none", "s", "m", "l"];
+	export type EuiFacetGroupGutterSizes = typeof GUTTER_SIZES[number];
 	export type EuiFacetGroupProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
 	     * Vertically in a column, or horizontally in one wrapping line
 	     */
-	    layout?: FacetGroupLayout;
+	    layout?: EuiFacetGroupLayout;
 	    /**
 	     * Distance between facet buttons.
 	     * Horizontal layout always adds more distance horizontally between buttons.
 	     */
-	    gutterSize?: FacetGroupGutterSize;
+	    gutterSize?: EuiFacetGroupGutterSizes;
 	};
 	export const EuiFacetGroup: FunctionComponent<EuiFacetGroupProps>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/facet' {
@@ -14450,11 +14628,16 @@ declare module '@elastic/eui/src/themes/themes' {
 	export const EUI_THEMES: EUI_THEME[];
 	export const isDefaultTheme: (name: string) => boolean;
 
+}
+declare module '@elastic/eui/src/themes/amsterdam' {
+	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';
+
 }
 declare module '@elastic/eui/src/themes' {
 	export type { EUI_THEME } from '@elastic/eui/src/themes/themes';
 	export { EUI_THEMES, isDefaultTheme } from '@elastic/eui/src/themes/themes';
 	export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from '@elastic/eui/src/themes/amsterdam/theme';
+	export * from '@elastic/eui/src/themes/amsterdam';
 
 }
 declare module '@elastic/eui/src/components/provider/provider' {

package/lib/components/accessibility/skip_link/skip_link.js

@@ -21,12 +21,18 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36,6 +42,7 @@ exports.POSITIONS = POSITIONS;
 
 var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
@@ -56,6 +63,22 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     };
   }
 
+  if (overrideLinkBehavior) {
+    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        var destinationEl = document.getElementById(destinationId);
+        if (!destinationEl) return;
+        destinationEl.scrollIntoView();
+        destinationEl.tabIndex = -1; // Ensure the destination content is focusable
+
+        destinationEl.focus({
+          preventScroll: true
+        }); // Scrolling is already handled above, and focus's autoscroll behaves oddly around fixed headers
+      }
+    });
+  }
+
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, _extends({
@@ -94,6 +117,19 @@ EuiSkipLink.propTypes = {
      */
   destinationId: _propTypes.default.string.isRequired,
 
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+  overrideLinkBehavior: _propTypes.default.bool,
+
   /**
      * When position is fixed, this is forced to `0`
      */
@@ -162,7 +198,8 @@ EuiSkipLink.propTypes = {
   iconSide: _propTypes.default.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+     * It doesn't apply to the icon.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,

package/lib/components/accessibility/skip_link/skip_link.styles.js

@@ -35,7 +35,7 @@ var euiSkipLinkStyles = function euiSkipLinkStyles(_ref3) {
     // Set positions on focus only as to not override screenReaderOnly position
     // When positioned absolutely, consumers still need to tell it WHERE (top,left,etc...)
     absolute: _ref,
-    fixed: /*#__PURE__*/(0, _react.css)("&:focus{position:fixed;inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
+    fixed: /*#__PURE__*/(0, _react.css)("position:fixed!important;&:focus{inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
   };
 };
 

package/lib/components/button/{button_content.js → _button_content_deprecated.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ICON_SIDES = exports.EuiButtonContent = void 0;
+exports.ICON_SIDES = exports.EuiButtonContentDeprecated = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -36,7 +36,7 @@ var iconSideToClassNameMap = {
 var ICON_SIDES = (0, _common.keysOf)(iconSideToClassNameMap);
 exports.ICON_SIDES = ICON_SIDES;
 
-var EuiButtonContent = function EuiButtonContent(_ref) {
+var EuiButtonContentDeprecated = function EuiButtonContentDeprecated(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
       _ref$isLoading = _ref.isLoading,
@@ -72,8 +72,8 @@ var EuiButtonContent = function EuiButtonContent(_ref) {
   }), buttonIcon, (0, _react2.jsx)("span", textProps, children));
 };
 
-exports.EuiButtonContent = EuiButtonContent;
-EuiButtonContent.propTypes = {
+exports.EuiButtonContentDeprecated = EuiButtonContentDeprecated;
+EuiButtonContentDeprecated.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
@@ -86,7 +86,8 @@ EuiButtonContent.propTypes = {
   isLoading: _propTypes.default.bool,
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+     * It doesn't apply to the icon.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,

package/lib/components/button/button.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToClassNameMap = exports.colorToClassNameMap = exports.SIZES = exports.EuiButtonDisplay = exports.EuiButton = exports.COLORS = void 0;
+exports.sizeToClassNameMap = exports.colorToClassNameMap = exports.SIZES = exports.EuiButtonDisplayDeprecated = exports.EuiButton = exports.COLORS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,7 +17,7 @@ var _common = require("../common");
 
 var _services = require("../../services");
 
-var _button_content = require("./button_content");
+var _button_content_deprecated = require("./_button_content_deprecated");
 
 var _href_validator = require("../../services/security/href_validator");
 
@@ -115,11 +115,13 @@ var EuiButton = function EuiButton(_ref) {
     relObj.type = type;
   }
 
-  return (0, _react2.jsx)(EuiButtonDisplay, _extends({
-    element: element,
-    baseClassName: "euiButton",
-    ref: buttonRef
-  }, elementProps, relObj, rest));
+  return (// eslint-disable-next-line react/jsx-pascal-case
+    (0, _react2.jsx)(EuiButtonDisplayDeprecated, _extends({
+      element: element,
+      baseClassName: "euiButton",
+      ref: buttonRef
+    }, elementProps, relObj, rest))
+  );
 };
 
 exports.EuiButton = EuiButton;
@@ -219,7 +221,8 @@ EuiButton.propTypes = {
   iconSide: _propTypes.default.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+     * It doesn't apply to the icon.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,
@@ -237,13 +240,16 @@ EuiButton.propTypes = {
 EuiButton.displayName = 'EuiButton';
 
 /**
+ * *DEPRECATED*
  * EuiButtonDisplay is an internal-only component used for displaying
  * any element as a button.
  * NOTE: This component *must* be below EuiButton in the file and
  * EuiButton must also set a displayName for react-docgen-typescript
  * to correctly set EuiButton's docgenInfo and display a props table.
+ * This component has been deprecated in favor of the new EuiButtonDisplay
+ * that can be found in `src/components/button/button_display/_button_display.tsx`
  */
-var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var _ref2$element = _ref2.element,
       element = _ref2$element === void 0 ? 'button' : _ref2$element,
       baseClassName = _ref2.baseClassName,
@@ -277,7 +283,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   var contentClassNames = (0, _classnames.default)('euiButton__content', contentProps && contentProps.className);
   var textClassNames = (0, _classnames.default)('euiButton__text', textProps && textProps.className);
-  var innerNode = (0, _react2.jsx)(_button_content.EuiButtonContent, _extends({
+  var innerNode = (0, _react2.jsx)(_button_content_deprecated.EuiButtonContentDeprecated, _extends({
     isLoading: isLoading,
     iconType: iconType,
     iconSide: iconSide,
@@ -304,8 +310,8 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     ref: ref
   }, rest), innerNode);
 });
-exports.EuiButtonDisplay = EuiButtonDisplay;
-EuiButtonDisplay.propTypes = {
+exports.EuiButtonDisplayDeprecated = EuiButtonDisplayDeprecated;
+EuiButtonDisplayDeprecated.propTypes = {
   children: _propTypes.default.node,
 
   /**
@@ -378,4 +384,4 @@ EuiButtonDisplay.propTypes = {
        */
   baseClassName: _propTypes.default.string.isRequired
 };
-EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';