[Emotion] Convert EuiFacetButton and EuiFacetGroup (#5878)

* Convert `EuiFacetButton` and `EuiFacetGroup` to emotion * Deleting `.scss` files * Moving buttons mixins to functions * Removed unused mixin. Adding CL. Improving gutter size func. * Improving example * Better code for calling `euiTheme` * Renaming `contentElementStyles` to `contentElementsStyles` * Fix typo. CL. * Better gap styles * Adding `euiCanAnimate` for transitions * Moving button functions and using `euiLinkFocusCSS` * Typo * Adding `logicalCSS` * Adding new EuiButtonDisplay * Adding `logicalTextAlignCSS` * Removing `EuiFlexGroup` * Better styles * Better `isDisabled` styles * Text`isSelected` style * Identantion * CL * Improving regex in render_custom_styles * Deprecating EuiButtonDisplay and EuiButtonContent components * Adding `euiLoadingSpinnerBorderColorsCSS` mixin * Adding `_buttonSize()` and renaming files to contain `_deprecated` * Keeping `EuiButtonDisplay_Deprecated` in button file * Improving text * Fixing error due to `euiFontSize` being updated in main * Preventing test to get `EuiButtonDisplay_Deprecated` * Renaming deprecated components * Addressing PR review * Added new `color` prop to `EuiLoadingSpinner` * Removing unnecessary prop comment * Making `EuiLoadingSpinnerProps['color']` show in props table * Better props table for `EuiLoadingSpinnerColor` * Update src/components/loading/loading_spinner.tsx Co-authored-by: Caroline Horn <[email protected]> * Update src/components/loading/loading_spinner.tsx Co-authored-by: Caroline Horn <[email protected]> * Update upcoming_changelogs/5878.md Co-authored-by: Caroline Horn <[email protected]> * Update src/components/button/button_display/_button_display.tsx Co-authored-by: Caroline Horn <[email protected]> * Moving CL entry out of `CSS-in-JS` Co-authored-by: Caroline Horn <[email protected]>
elastic · Jun 8, 2022 · 2e836f6 · 2e836f6
1 parent fcd96f3
commit 2e836f6
Show file tree

Hide file tree

Showing 49 changed files with 768 additions and 304 deletions.
diff --git a/src-docs/src/views/facet/facet_layout.js b/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>
   );
 };
diff --git a/...docs/src/views/loading/loading_example.js → ...ocs/src/views/loading/loading_example.tsx b/...docs/src/views/loading/loading_example.js → ...ocs/src/views/loading/loading_example.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
-
+// @ts-ignore Importing from JS
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -12,14 +12,22 @@ import {
   EuiLoadingChart,
   EuiLoadingContent,
 } from '../../../../src/components';
+
 import {
   loadingElasticConfig,
   loadingChartConfig,
   loadingLogoConfig,
   loadingSpinnerConfig,
   loadingContentConfig,
+  // @ts-ignore Importing from JS
 } from './playground';
 
+import { EuiLoadingSpinnerColor as EuiLoadingSpinnerColorProps } from '../../../../src/components/loading/loading_spinner';
+
+export const EuiLoadingSpinnerColor: FunctionComponent<EuiLoadingSpinnerColorProps> = () => (
+  <div />
+);
+
 import LoadingLogo from './loading_kibana';
 const loadingLogoSource = require('!!raw-loader!./loading_kibana');
 
@@ -129,7 +137,7 @@ export const LoadingExample = {
           loading contexts.
         </p>
       ),
-      props: { EuiLoadingSpinner },
+      props: { EuiLoadingSpinner, EuiLoadingSpinnerColor },
       demo: <LoadingSpinner />,
       snippet: '<EuiLoadingSpinner size="m" />',
       playground: loadingSpinnerConfig,

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -862,7 +862,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     >
       <span
         aria-label="Loading"
-        class="euiLoadingSpinner css-155ohbx-euiLoadingSpinner-m"
+        class="euiLoadingSpinner css-192zz00-euiLoadingSpinner-m"
         role="progressbar"
       />
     </div>
@@ -921,7 +921,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     >
       <span
         aria-label="Loading"
-        class="euiLoadingSpinner css-155ohbx-euiLoadingSpinner-m"
+        class="euiLoadingSpinner css-192zz00-euiLoadingSpinner-m"
         role="progressbar"
       />
     </div>
@@ -939,7 +939,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
       >
         <span
           aria-label="Loading"
-          class="euiLoadingSpinner euiAccordion__spinner css-1v1n0rh-euiLoadingSpinner-m-euiAccordion__spinner"
+          class="euiLoadingSpinner euiAccordion__spinner css-1fekohn-euiLoadingSpinner-m-euiAccordion__spinner"
           role="progressbar"
         />
         <div

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -313,7 +313,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
   >
     <span
       aria-label="Loading"
-      class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
+      class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
       role="progressbar"
     />
     <span

diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`EuiButtonContent props isLoading is rendered 1`] = `
 >
   <span
     aria-label="Loading"
-    class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
+    class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
     role="progressbar"
   />
   <span />
@@ -65,7 +65,7 @@ exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
 >
   <span
     aria-label="Loading"
-    class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
+    class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
     role="progressbar"
   />
   <span />

diff --git a/src/components/button/button_content.tsx → ...nts/button/_button_content_deprecated.tsx b/src/components/button/button_content.tsx → ...nts/button/_button_content_deprecated.tsx
@@ -26,8 +26,10 @@ export const ICON_SIDES = keysOf(iconSideToClassNameMap);
 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 {
   /**
@@ -40,7 +42,8 @@ export interface EuiButtonContentProps extends CommonProps {
   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 & {
@@ -50,7 +53,7 @@ export interface EuiButtonContentProps extends CommonProps {
   iconSize?: 's' | 'm';
 }
 
-export const EuiButtonContent: FunctionComponent<
+export const EuiButtonContentDeprecated: FunctionComponent<
   EuiButtonContentType & EuiButtonContentProps
 > = ({
   children,

diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx
@@ -11,7 +11,8 @@ import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiButton, COLORS, SIZES } from './button';
-import { ICON_SIDES } from './button_content';
+
+import { ICON_SIDES } from './_button_content_deprecated';
 
 describe('EuiButton', () => {
   test('is rendered', () => {

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -30,8 +30,8 @@ import { getSecureRelForTarget } from '../../services';
 import {
   EuiButtonContentProps,
   EuiButtonContentType,
-  EuiButtonContent,
-} from './button_content';
+  EuiButtonContentDeprecated as EuiButtonContent,
+} from './_button_content_deprecated';
 import { validateHref } from '../../services/security/href_validator';
 
 export type ButtonColor =
@@ -174,7 +174,8 @@ export const EuiButton: FunctionComponent<Props> = ({
   }
 
   return (
-    <EuiButtonDisplay
+    // eslint-disable-next-line react/jsx-pascal-case
+    <EuiButtonDisplayDeprecated
       element={element}
       baseClassName="euiButton"
       ref={buttonRef}
@@ -199,13 +200,19 @@ export type EuiButtonDisplayProps = EuiButtonProps &
   };
 
 /**
+ * *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 = forwardRef<HTMLElement, EuiButtonDisplayProps>(
+export const EuiButtonDisplayDeprecated = forwardRef<
+  HTMLElement,
+  EuiButtonDisplayProps
+>(
   (
     {
       element = 'button',
@@ -295,4 +302,4 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
     );
   }
 );
-EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';
diff --git a/src/components/button/button_content.test.tsx b/src/components/button/button_content.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiButtonContent } from './button_content';
+import { EuiButtonContentDeprecated as EuiButtonContent } from './_button_content_deprecated';
 
 describe('EuiButtonContent', () => {
   test('is rendered', () => {

diff --git a/src/components/button/button_display/_button_display.styles.ts b/src/components/button/button_display/_button_display.styles.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { UseEuiTheme } from '../../../services';
+import {
+  euiFontSize,
+  logicalCSS,
+  logicalTextAlignStyle,
+} from '../../../global_styling';
+
+// Provides a solid reset and base for handling sizing layout
+// Does not include any visual styles
+export const euiButtonBaseCSS = () => {
+  return `
+    display: inline-block;
+    appearance: none;
+    cursor: pointer;
+    ${logicalTextAlignStyle('center')};
+    white-space: nowrap;
+    ${logicalCSS('max-width', '100%')};
+    vertical-align: middle;
+  `;
+};
+
+const _buttonSize = (size: string) => {
+  return `
+    ${logicalCSS('height', size)};
+    // prevents descenders from getting cut off
+    line-height: ${size};
+  `;
+};
+
+export const euiButtonDisplayStyles = (
+  euiThemeContext: UseEuiTheme,
+  minWidth: string
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    // Base
+    euiButtonDisplay: css`
+      ${euiButtonBaseCSS()};
+      ${minWidth && logicalCSS('min-width', minWidth)};
+    `,
+    // States
+    isDisabled: css`
+      cursor: not-allowed;
+    `,
+    fullWidth: css`
+      display: block;
+      width: 100%;
+    `,
+    // Sizes
+    xs: css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs')),
+    s: css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's')),
+    m: css(_buttonSize(euiTheme.size.xxl), euiFontSize(euiThemeContext, 's')),
+  };
+};