Added EuiPopoverFooter (TS) (#1666)

And converted `EuiPopoverTitle` to TS

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added missing `anchorClassName` prop to `EuiToolTip` definition ([#1657](https://github.com/elastic/eui/pull/1657))
 - Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665))
 - Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665))
+- Added `EuiPopoverFooter` and converted `EuiPopoverTitle` to TS ([#1666](https://github.com/elastic/eui/pull/1666))
 
 ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1)
 

src-docs/src/views/popover/popover_example.js

@@ -10,6 +10,7 @@ import {
   EuiCode,
   EuiPopover,
   EuiPopoverTitle,
+  EuiPopoverFooter,
 } from '../../../../src/components';
 
 import Popover from './popover';
@@ -113,7 +114,7 @@ export const PopoverExample = {
     ),
     demo: <PopoverAnchorPosition />,
   }, {
-    title: 'Popover with title',
+    title: 'Popover with title and/or footer',
     source: [{
       type: GuideSectionTypes.JS,
       code: popoverWithTitleSource,
@@ -125,14 +126,24 @@ export const PopoverExample = {
       <div>
         <p>
           Popovers often have need for titling. This can be applied through
-          a prop or used separately as its own component
-          <EuiCode>EuiPopoverTitle</EuiCode> nested somwhere in the child
+          a prop or used separately as its own component{' '}
+          <EuiCode>EuiPopoverTitle</EuiCode> nested somewhere in the child
           prop.
         </p>
+        <p>
+          You can also add a similiarly styled{' '}
+          <EuiCode>EuiPopoverFooter</EuiCode> for smaller captions or
+          call to action buttons.
+        </p>
       </div>
     ),
-    props: { EuiPopoverTitle },
+    props: { EuiPopoverTitle, EuiPopoverFooter },
     demo: <PopoverWithTitle />,
+    snippet: `<EuiPopover>
+  <EuiPopoverTitle></EuiPopoverTitle>
+  <div></div>
+  <EuiPopoverFooter></EuiPopoverFooter>
+</EuiPopover>`,
   }, {
     title: 'Panel class name and padding size',
     source: [{

src-docs/src/views/popover/popover_with_title.js

@@ -5,10 +5,12 @@ import React, {
 import {
   EuiPopover,
   EuiPopoverTitle,
+  EuiPopoverFooter,
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText
+  EuiText,
+  EuiTextColor,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -61,23 +63,23 @@ export default class extends Component {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="downCenterWithTitle"
+            id="withTitle"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick1.bind(this)}>
-                downCenter with title
+                With title
               </EuiButton>
             )}
             isOpen={this.state.isPopoverOpen1}
             closePopover={this.closePopover1.bind(this)}
             anchorPosition="downCenter"
-            withTitle
           >
             <EuiPopoverTitle>Hello, I&rsquo;m a popover title</EuiPopoverTitle>
             <div style={{ width: '300px' }}>
               <EuiText>
                 <p>
-                  Popover content with default padding
+                  Selfies migas stumptown hot chicken quinoa wolf green juice,
+                  mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
                 </p>
               </EuiText>
             </div>
@@ -86,51 +88,58 @@ export default class extends Component {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="upCenterWithTitle"
+            id="withFooter"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick2.bind(this)}>
-                upCenter with title
+                With footer
               </EuiButton>
             )}
             isOpen={this.state.isPopoverOpen2}
             closePopover={this.closePopover2.bind(this)}
             anchorPosition="upCenter"
-            withTitle
           >
-            <EuiPopoverTitle>Hello, I&rsquo;m a popover title</EuiPopoverTitle>
             <div style={{ width: '300px' }}>
               <EuiText>
                 <p>
-                  Popover content with large padding
+                Selfies migas stumptown hot chicken quinoa wolf green juice,
+                mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
                 </p>
               </EuiText>
             </div>
+            <EuiPopoverFooter>
+              <EuiTextColor color="subdued">
+                Hello, I&rsquo;m a small popover footer caption
+              </EuiTextColor>
+            </EuiPopoverFooter>
           </EuiPopover>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="rightUpWithTitle"
+            id="withTitleAndFooter"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick3.bind(this)}>
-                rightUp with title
+                With title and footer button
               </EuiButton>
             )}
             isOpen={this.state.isPopoverOpen3}
             closePopover={this.closePopover3.bind(this)}
-            anchorPosition="rightUp"
-            withTitle
+            anchorPosition="upCenter"
           >
             <EuiPopoverTitle>Hello, I&rsquo;m a popover title</EuiPopoverTitle>
             <div style={{ width: '300px' }}>
               <EuiText>
                 <p>
-                  Popover content with no padding
+                Selfies migas stumptown hot chicken quinoa wolf green juice,
+                mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
                 </p>
               </EuiText>
             </div>
+            <EuiPopoverFooter>
+              <EuiButton fullWidth size="s">Manage this thing</EuiButton>
+            </EuiPopoverFooter>
           </EuiPopover>
         </EuiFlexItem>
       </EuiFlexGroup>

src/components/index.js

@@ -271,6 +271,7 @@ export {
 export {
   EuiPopover,
   EuiPopoverTitle,
+  EuiPopoverFooter,
   EuiWrappingPopover,
 } from './popover';
 

src/components/popover/__snapshots__/popover_footer.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiPopoverFooter is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPopoverFooter testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/popover/_index.scss

@@ -2,3 +2,4 @@
 @import 'mixins';
 @import 'popover';
 @import 'popover_title';
+@import 'popover_footer';

src/components/popover/_mixins.scss

@@ -8,4 +8,15 @@
   // -- makes for better rounded corners
   border-top-left-radius: $euiBorderRadius - 1px;
   border-top-right-radius: $euiBorderRadius - 1px;
+
+}
+@mixin euiPopoverFooter {
+  @include euiFontSizeS;
+  padding: $euiSizeM;
+  border-top: $euiBorderThin;
+
+  // Subtract 1px from the border radius since it's inside another container that also has the border radius
+  // -- makes for better rounded corners
+  border-bottom-left-radius: $euiBorderRadius - 1px;
+  border-bottom-right-radius: $euiBorderRadius - 1px;
 }

src/components/popover/_popover_footer.scss

@@ -0,0 +1,16 @@
+@import '../panel/variables'; // grab the $euiPanelPaddingModifiers map
+
+.euiPopoverFooter {
+  @include euiPopoverFooter;
+
+  // If the popover's containing panel has padding applied,
+  // ensure the footer expands to cover that padding and
+  // take on the same amount of padding horizontally
+
+  @each $modifier, $amount in $euiPanelPaddingModifiers {
+    .euiPopover__panel.euiPanel--#{$modifier} & {
+      padding: $euiSizeM $amount;
+      margin: $amount ($amount * -1) ($amount * -1);
+    }
+  }
+}

src/components/popover/index.d.ts

@@ -3,6 +3,8 @@ import { CommonProps, NoArgCallback } from '../common';
 /// <reference path="../panel/index.d.ts" />
 
 import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import { EuiPopoverTitleProps } from './popover_title';
+import { EuiPopoverFooterProps } from './popover_footer';
 
 declare module '@elastic/eui' {
   /**
@@ -44,7 +46,17 @@ declare module '@elastic/eui' {
     CommonProps & HTMLAttributes<HTMLDivElement> & EuiPopoverProps
   >;
 
-  export const EuiPopoverTitle: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement>
-  >;
+  /**
+   * Popover title type defs
+   *
+   * @see './popover_title.js'
+   */
+  export const EuiPopoverTitle: EuiPopoverTitleProps;
+
+  /**
+   * Popover footer type defs
+   *
+   * @see './popover_footer.js'
+   */
+  export const EuiPopoverFooter: EuiPopoverFooterProps;
 }

src/components/popover/index.js

@@ -1,3 +1,4 @@
 export { EuiPopover } from './popover';
 export { EuiPopoverTitle } from './popover_title';
+export { EuiPopoverFooter } from './popover_footer';
 export { EuiWrappingPopover } from './wrapping_popover';

src/components/popover/popover_footer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiPopoverFooter } from './popover_footer';
+
+describe('EuiPopoverFooter', () => {
+  test('is rendered', () => {
+    const component = render(<EuiPopoverFooter {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/popover/popover_footer.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type EuiPopoverFooterProps = FunctionComponent<
+  HTMLAttributes<HTMLDivElement> & CommonProps
+>;
+
+export const EuiPopoverFooter: EuiPopoverFooterProps = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiPopoverFooter', className);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};

src/components/popover/popover_title.test.js → src/components/popover/popover_title.test.tsx

@@ -6,11 +6,8 @@ import { EuiPopoverTitle } from './popover_title';
 
 describe('EuiPopoverTitle', () => {
   test('is rendered', () => {
-    const component = render(
-      <EuiPopoverTitle {...requiredProps} />
-    );
+    const component = render(<EuiPopoverTitle {...requiredProps} />);
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/popover/popover_title.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type EuiPopoverTitleProps = FunctionComponent<
+  HTMLAttributes<HTMLDivElement> & CommonProps
+>;
+
+export const EuiPopoverTitle: EuiPopoverTitleProps = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiPopoverTitle', className);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};