[Emotion] Convert EuiFacetButton and EuiFacetGroup

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

@@ -5,8 +5,6 @@ import {
   EuiFacetGroup,
   EuiIcon,
   EuiAvatar,
-  EuiTitle,
-  EuiSpacer,
 } from '../../../../src/components';
 
 import { euiPaletteColorBlind } from '../../../../src/services';
@@ -146,22 +144,8 @@ export default () => {
   };
 
   return (
-    <div>
-      <EuiTitle size="s">
-        <h3>Vertical</h3>
-      </EuiTitle>
-      <EuiFacetGroup style={{ maxWidth: 200 }}>
-        {facets('Vertical')}
-      </EuiFacetGroup>
-
-      <EuiSpacer />
-
-      <EuiTitle size="s">
-        <h3>Horizontal and large gutter</h3>
-      </EuiTitle>
-      <EuiFacetGroup layout="horizontal" gutterSize="l">
-        {facets('Horizontal')}
-      </EuiFacetGroup>
-    </div>
+    <EuiFacetGroup style={{ maxWidth: 200 }}>
+      {facets('Vertical')}
+    </EuiFacetGroup>
   );
 };

src/components/accessibility/skip_link/skip_link.tsx

@@ -9,15 +9,16 @@
 import React, { FunctionComponent, Ref } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
-import { EuiButton, EuiButtonProps } from '../../button/button';
+import { EuiButton } from '../../button/button';
+import { EuiButtonDisplayCommonProps_Deprecated } from '../../button/_button_display_deprecated';
 import { PropsForAnchor, PropsForButton, ExclusiveUnion } from '../../common';
 import { EuiScreenReaderOnly } from '../screen_reader_only';
 import { euiSkipLinkStyles } from './skip_link.styles';
 
 export const POSITIONS = ['static', 'fixed', 'absolute'] as const;
 type Positions = typeof POSITIONS[number];
 
-interface EuiSkipLinkInterface extends EuiButtonProps {
+interface EuiSkipLinkInterface extends EuiButtonDisplayCommonProps_Deprecated {
   /**
    * Change the display position of the element when focused.
    * If 'fixed', the link will be fixed to the top left of the viewport

src/components/button/button_content.tsx → src/components/button/_button_content_deprecated.tsx

@@ -12,32 +12,34 @@ import { CommonProps, keysOf } from '../common';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiIcon, IconType } from '../icon';
 
-export type ButtonContentIconSide = 'left' | 'right';
+export type ButtonContentIconSide_Deprecated = 'left' | 'right';
 
 const iconSideToClassNameMap: {
-  [side in ButtonContentIconSide]: string | null;
+  [side in ButtonContentIconSide_Deprecated]: string | null;
 } = {
   left: null,
   right: 'euiButtonContent--iconRight',
 };
 
 export const ICON_SIDES = keysOf(iconSideToClassNameMap);
 
-export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
+export type EuiButtonContentType_Deprecated = 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 {
+export interface EuiButtonContentProps_Deprecated extends CommonProps {
   /**
    * Any `type` accepted by EuiIcon
    */
   iconType?: IconType;
   /**
    * Can only be one side `left` or `right`
    */
-  iconSide?: ButtonContentIconSide;
+  iconSide?: ButtonContentIconSide_Deprecated;
   isLoading?: boolean;
   /**
    * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
@@ -50,8 +52,8 @@ export interface EuiButtonContentProps extends CommonProps {
   iconSize?: 's' | 'm';
 }
 
-export const EuiButtonContent: FunctionComponent<
-  EuiButtonContentType & EuiButtonContentProps
+export const EuiButtonContent_Deprecated: FunctionComponent<
+  EuiButtonContentType_Deprecated & EuiButtonContentProps_Deprecated
 > = ({
   children,
   textProps,

src/components/button/_button_display_deprecated.tsx

@@ -0,0 +1,245 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, {
+  forwardRef,
+  CSSProperties,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from 'react';
+import classNames from 'classnames';
+
+import {
+  EuiButtonContent_Deprecated as EuiButtonContent,
+  EuiButtonContentProps_Deprecated as EuiButtonContentDisplayProps,
+  EuiButtonContentType_Deprecated as EuiButtonContentType,
+} from './_button_content_deprecated';
+
+import {
+  CommonProps,
+  ExclusiveUnion,
+  PropsForAnchor,
+  PropsForButton,
+  keysOf,
+} from '../common';
+
+export type ButtonDisplayColor_Deprecated =
+  | 'primary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'ghost'
+  | 'text';
+
+export type ButtonDisplaySize_Deprecated = 's' | 'm';
+
+export const colorToClassNameMap: {
+  [color in ButtonDisplayColor_Deprecated]: string;
+} = {
+  primary: '--primary',
+  accent: '--accent',
+  success: '--success',
+  warning: '--warning',
+  danger: '--danger',
+  ghost: '--ghost',
+  text: '--text',
+};
+
+export const COLORS = keysOf(colorToClassNameMap);
+
+export const sizeToClassNameMap: {
+  [size in ButtonDisplaySize_Deprecated]: string | null;
+} = {
+  s: '--small',
+  m: null,
+};
+
+export const SIZES = keysOf(sizeToClassNameMap);
+
+/**
+ * Extends EuiButtonContentDisplayProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+export interface EuiButtonDisplayCommonProps_Deprecated
+  extends EuiButtonContentDisplayProps,
+    CommonProps {
+  children?: ReactNode;
+  /**
+   * Make button a solid color for prominence
+   */
+  fill?: boolean;
+  /**
+   * Any of our named colors.
+   */
+  color?: ButtonDisplayColor_Deprecated;
+  /**
+   * Use size `s` in confined spaces
+   */
+  size?: ButtonDisplaySize_Deprecated;
+  /**
+   * `disabled` is also allowed
+   */
+  isDisabled?: boolean;
+  /**
+   * 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?: EuiButtonContentType;
+  style?: CSSProperties;
+}
+
+export type EuiButtonDisplayPropsForAnchor_Deprecated = PropsForAnchor<
+  EuiButtonDisplayCommonProps_Deprecated,
+  {
+    buttonRef?: Ref<HTMLAnchorElement>;
+  }
+>;
+
+export type EuiButtonDisplayPropsForButton_Deprecated = PropsForButton<
+  EuiButtonDisplayCommonProps_Deprecated,
+  {
+    buttonRef?: Ref<HTMLButtonElement>;
+  }
+>;
+
+export type EuiButtonDisplayUnionProps_Deprecated = ExclusiveUnion<
+  EuiButtonDisplayPropsForAnchor_Deprecated,
+  EuiButtonDisplayPropsForButton_Deprecated
+>;
+
+export type EuiButtonDisplayProps_Deprecated = EuiButtonDisplayCommonProps_Deprecated &
+  HTMLAttributes<HTMLElement> & {
+    /**
+     * Provide a valid element to render the element as
+     */
+    element: 'a' | 'button' | 'span' | 'label';
+    /**
+     * Provide the component's base class name to build the class list on
+     */
+    baseClassName: string;
+  };
+
+/**
+ * *INTERNAL ONLY / DEPRECATED*
+ * EuiButtonDisplay is an internal-only component used for displaying
+ * any element as a button.
+ * 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_Deprecated = forwardRef<
+  HTMLElement,
+  EuiButtonDisplayProps_Deprecated
+>(
+  (
+    {
+      element = 'button',
+      baseClassName,
+      children,
+      className,
+      iconType,
+      iconSide = 'left',
+      color = 'primary',
+      size = 'm',
+      fill = false,
+      isDisabled,
+      isLoading,
+      isSelected,
+      contentProps,
+      textProps,
+      fullWidth,
+      minWidth,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const buttonIsDisabled = isLoading || isDisabled;
+
+    const classes = classNames(
+      baseClassName,
+      color && colorToClassNameMap[color]
+        ? `${baseClassName}${colorToClassNameMap[color]}`
+        : `${baseClassName}${colorToClassNameMap.primary}`,
+      size && sizeToClassNameMap[size]
+        ? `${baseClassName}${sizeToClassNameMap[size]}`
+        : null,
+      fill && `${baseClassName}--fill`,
+      fullWidth && `${baseClassName}--fullWidth`,
+      buttonIsDisabled && `${baseClassName}-isDisabled`,
+      className
+    );
+
+    /**
+     * Not changing the content or text class names to match baseClassName yet,
+     * as it is a major breaking change.
+     */
+    const contentClassNames = classNames(
+      'euiButton__content',
+      contentProps && contentProps.className
+    );
+
+    const textClassNames = classNames(
+      'euiButton__text',
+      textProps && textProps.className
+    );
+
+    const innerNode = (
+      <EuiButtonContent
+        isLoading={isLoading}
+        iconType={iconType}
+        iconSide={iconSide}
+        textProps={{ ...textProps, className: textClassNames }}
+        {...contentProps}
+        // className has to come last to override contentProps.className
+        className={contentClassNames}
+      >
+        {children}
+      </EuiButtonContent>
+    );
+
+    let calculatedStyle: CSSProperties | undefined = style;
+    if (minWidth !== undefined || minWidth !== null) {
+      calculatedStyle = {
+        ...calculatedStyle,
+        minWidth,
+      };
+    }
+
+    return React.createElement(
+      element,
+      {
+        className: classes,
+        style: calculatedStyle,
+        disabled: element === 'button' && buttonIsDisabled,
+        'aria-pressed': element === 'button' ? isSelected : undefined,
+        ref,
+        ...rest,
+      },
+      innerNode
+    );
+  }
+);
+EuiButtonDisplay_Deprecated.displayName = 'EuiButtonDisplay_Deprecated';

src/components/button/button.test.tsx

@@ -10,8 +10,9 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiButton, COLORS, SIZES } from './button';
-import { ICON_SIDES } from './button_content';
+import { EuiButton } from './button';
+import { COLORS, SIZES } from './_button_display_deprecated';
+import { ICON_SIDES } from './_button_content_deprecated';
 
 describe('EuiButton', () => {
   test('is rendered', () => {