[EuiCard & friends] Convert to Emotion (#6110)

* [EuiCheckableCard] Converted

Todo: Investigate why `shouldRenderCustomStyles` doesn’t work

* [EuiCardSelect] Converted and using basic EuiButton and styles

… to match proposed design from Figma

* WIP: Most text-based content converted

and cleaning up some outdated styles

* WIP: Refactored how `betaBadge` is presented

- Added `anchorProps` to EuiToolTip and EuiBetaBadge to allow passing through more options like `css`
- Added truncation to EuiBetaBadge and white background for `hollow`

* WIP: Styles for image and icon converted

- Passes through `paddingSize` and `display` for some generated styles
- Explicitely sets default padding to `m` and keeps `m` when `betaBadge` exists

* WIP: Final styles for `layout`

- Added progressive enhancement for `:has()` to propograte the outline to the whole card
- Deleted the Sass files

* Cleanup

- Logicals
- Converted docs to TSX
- Fixed top padding for badge

* Added bordered example

* [EuiToolTip] Allowing `anchorProps.className` and tests

* Fixes, tests, and CL

* update CL

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

src-docs/src/views/card/card_beta.tsx

@@ -15,6 +15,11 @@ export default () => (
         title="Dashboards"
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => {}}
+        betaBadgeProps={{
+          label: 'Beta',
+          tooltipContent:
+            'This module is not GA. Please help us by reporting any bugs.',
+        }}
       />
     </EuiFlexItem>
     <EuiFlexItem>
@@ -23,9 +28,10 @@ export default () => (
         title="Monitoring"
         description="Example of a card's description. Stick to one or two sentences."
         betaBadgeProps={{
-          label: 'Beta',
+          label: 'Accent',
+          color: 'accent',
           tooltipContent:
-            'This module is not GA. Please help us by reporting any bugs.',
+            'You can change the badge color using betaBadgeProps.color.',
         }}
         onClick={() => {}}
       />
@@ -40,7 +46,8 @@ export default () => (
           href: 'http://www.elastic.co/subscriptions',
           target: '_blank',
           label: 'Basic',
-          tooltipContent: 'This feature requires a Basic License',
+          tooltipContent:
+            'Disabled cards with still clickable badges will stay hollow.',
         }}
         onClick={() => {}}
       />

src-docs/src/views/card/card_checkable.js → src-docs/src/views/card/card_checkable.tsx

@@ -6,9 +6,8 @@ import {
   EuiRadioGroup,
   EuiTitle,
   EuiFormFieldset,
-} from '../../../../src/components';
-
-import { useGeneratedHtmlId } from '../../../../src/services';
+  useGeneratedHtmlId,
+} from '../../../../src';
 
 export default () => {
   const radioGroupId = useGeneratedHtmlId({ prefix: 'radioGroup' });

src-docs/src/views/card/card_checkable_checkbox.js → src-docs/src/views/card/card_checkable_checkbox.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiCheckableCard } from '../../../../src/components';
-
-import { useGeneratedHtmlId } from '../../../../src/services';
+import { EuiCheckableCard, useGeneratedHtmlId } from '../../../../src';
 
 export default () => {
   const [checkbox, setCheckbox] = useState(false);

src-docs/src/views/card/card_children.js → src-docs/src/views/card/card_children.tsx

@@ -9,7 +9,7 @@ import {
   EuiText,
   EuiButton,
   EuiCode,
-} from '../../../../src/components';
+} from '../../../../src';
 
 const radios = [
   {

src-docs/src/views/card/card_display.tsx

@@ -6,12 +6,12 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => (
   <div>
     <EuiSpacer size="s" />
-    <EuiFlexGroup gutterSize="l">
+    <EuiFlexGroup gutterSize="l" wrap>
       <EuiFlexItem>
         <EuiCard
           layout="horizontal"
@@ -46,6 +46,16 @@ export default () => (
           onClick={() => {}}
         />
       </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCard
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          title="Bordered"
+          display="plain"
+          hasBorder
+          description="This one has a plain background color and border."
+          onClick={() => {}}
+        />
+      </EuiFlexItem>
     </EuiFlexGroup>
   </div>
 );

src-docs/src/views/card/card_footer.js → src-docs/src/views/card/card_footer.tsx

@@ -9,7 +9,7 @@ import {
   EuiLink,
   EuiSpacer,
   EuiText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">

src-docs/src/views/card/card_image.js → src-docs/src/views/card/card_image.tsx

@@ -6,15 +6,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-} from '../../../../src/components';
-
-const cardFooterContent = (
-  <EuiFlexGroup justifyContent="flexEnd">
-    <EuiFlexItem grow={false}>
-      <EuiButton>Go for it</EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+} from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">
@@ -31,7 +23,13 @@ export default () => (
         }
         title="Elastic in Nature"
         description="Example of a card's description. Stick to one or two sentences."
-        footer={cardFooterContent}
+        footer={
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButton>Go for it</EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
       />
     </EuiFlexItem>
     <EuiFlexItem>
@@ -40,7 +38,7 @@ export default () => (
         image="https://source.unsplash.com/400x200/?Water"
         title="Elastic in Water"
         description="Example of a card's description. Stick to one or two sentences."
-        footer={cardFooterContent}
+        isDisabled
       />
     </EuiFlexItem>
     <EuiFlexItem>

src-docs/src/views/card/card_layout.js → src-docs/src/views/card/card_layout.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import {
-  EuiCard,
-  EuiIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiCard, EuiIcon, EuiFlexGroup, EuiFlexItem } from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">

src-docs/src/views/card/card_selectable.js → src-docs/src/views/card/card_selectable.tsx

@@ -6,7 +6,7 @@ import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [card1Selected, setCard1] = useState(true);
@@ -20,7 +20,7 @@ export default () => {
     setCard2(!card2Selected);
   };
 
-  const detailsClicked = (e) => {
+  const detailsClicked = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();
   };
 

src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap

@@ -55,3 +55,18 @@ exports[`EuiBetaBadge props size s is rendered 1`] = `
   Beta
 </span>
 `;
+
+exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
+<span
+  class="euiToolTipAnchor customAnchorClass"
+  data-test-subj="DTS"
+>
+  <span
+    class="euiBetaBadge euiBetaBadge--hollow"
+    role="button"
+    tabindex="0"
+  >
+    Beta
+  </span>
+</span>
+`;

src/components/badge/beta_badge/_beta_badge.scss

@@ -13,6 +13,8 @@
   text-align: center;
   white-space: nowrap;
   cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:focus {
     @include euiFocusRing;
@@ -70,9 +72,11 @@
 }
 
 .euiBetaBadge--hollow {
+  background-color: $euiColorEmptyShade;
+
   &.euiBetaBadge-isClickable {
     $backgroundColor: tint($euiColorLightShade, 30%);
-    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+    color: chooseLightOrDarkText($euiColorEmptyShade, $euiColorGhost, $euiColorInk);
   }
 }
 

src/components/badge/beta_badge/beta_badge.test.tsx

@@ -39,5 +39,20 @@ describe('EuiBetaBadge', () => {
         });
       });
     });
+
+    test('tooltip and anchorProps are rendered', () => {
+      const component = render(
+        <EuiBetaBadge
+          label="Beta"
+          tooltipContent="Tooltip"
+          anchorProps={{
+            className: 'customAnchorClass',
+            'data-test-subj': 'DTS',
+          }}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });

src/components/badge/beta_badge/beta_badge.tsx

@@ -19,7 +19,7 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../../common';
 
 import { getSecureRelForTarget } from '../../../services';
 
-import { EuiToolTip, ToolTipPositions } from '../../tool_tip';
+import { EuiToolTip, EuiToolTipProps, ToolTipPositions } from '../../tool_tip';
 
 import { EuiIcon, IconType } from '../../icon';
 
@@ -108,6 +108,11 @@ type BadgeProps = {
    */
   tooltipPosition?: ToolTipPositions;
 
+  /**
+   * Passes onto the span wrapping the badge
+   */
+  anchorProps?: EuiToolTipProps['anchorProps'];
+
   /**
    * Optional title will be supplied as tooltip title or title attribute
    * otherwise the label will be used
@@ -133,6 +138,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   color = 'hollow',
   tooltipContent,
   tooltipPosition = 'top',
+  anchorProps,
   title,
   iconType,
   onClick,
@@ -211,6 +217,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
           position={tooltipPosition}
           content={tooltipContent}
           title={title || label}
+          anchorProps={anchorProps}
         >
           {content}
         </EuiToolTip>
@@ -225,6 +232,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
           position={tooltipPosition}
           content={tooltipContent}
           title={title || label}
+          anchorProps={anchorProps}
         >
           <span tabIndex={0} className={classes} role="button" {...rest}>
             {icon || label}