[EuiCard & friends] Convert to Emotion

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/_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.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}