[EuiPopover] Adjustments for more padding options and Amsterdam (#4146)

* [EuiPopoverTitle] Remove uppercase * [EuiPopover] Allowing panelPadding to adjust title as well - And fixing some instances, including removing it from EuiContextMenu for a custom element * Added `paddingSize` to EuiPopoverTitle/Footer - And updated instances and tests
elastic · Oct 20, 2020 · 55f2927 · 55f2927
1 parent 5226ddb
commit 55f2927
Show file tree

Hide file tree

Showing 37 changed files with 671 additions and 298 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,11 +5,13 @@
 - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056))
 - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056))
 - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056))
+- Added `paddingSize` prop to `EuiPopoverTitle` and `EuiPopoverFooter` ([4133](https://github.com/elastic/eui/pull/4133))
 - Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125))
 - Updated types associated with `EuiMarkdownEditor` plugin dependencies ([4124](https://github.com/elastic/eui/pull/4124))
 - Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124))
 
 **Bug fixes**
+
 - Fixed focus management bug in `EuiSelectable` ([4152](https://github.com/elastic/eui/pull/4152))
 
 **Breaking changes**
@@ -25,6 +27,7 @@
 **Theme: Amsterdam**
 
 - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133))
+- Removed uppercase from `EuiPopoverTitle` and fixed inherited padding from `EuiPopover` ([4133](https://github.com/elastic/eui/pull/4133))
 - Fixed `EuiFilterGroup` and `EuiFilterButton` styles ([4151](https://github.com/elastic/eui/pull/4151))
 
 ## [`29.5.0`](https://github.com/elastic/eui/tree/v29.5.0)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -169,6 +169,7 @@ const trailingControlColumns = [
         <div>
           <EuiPopover
             isOpen={isPopoverOpen}
+            panelPaddingSize="s"
             anchorPosition="upCenter"
             button={
               <EuiButtonIcon

diff --git a/src-docs/src/views/filter_group/filter_group_multi.js b/src-docs/src/views/filter_group/filter_group_multi.js
@@ -66,8 +66,8 @@ export default () => {
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none">
-        <EuiPopoverTitle>
-          <EuiFieldSearch />
+        <EuiPopoverTitle paddingSize="s">
+          <EuiFieldSearch compressed />
         </EuiPopoverTitle>
         <div className="euiFilterSelect__items">
           {items.map((item, index) => (

diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
@@ -308,9 +308,11 @@ const HeaderSpacesMenu = () => {
         }}>
         {(list, search) => (
           <>
-            <EuiPopoverTitle>{search || 'Your spaces'}</EuiPopoverTitle>
+            <EuiPopoverTitle paddingSize="s">
+              {search || 'Your spaces'}
+            </EuiPopoverTitle>
             {list}
-            <EuiPopoverFooter>
+            <EuiPopoverFooter paddingSize="s">
               <EuiButton
                 size="s"
                 fullWidth

diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
@@ -225,7 +225,7 @@ const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => {
         isOpen={isFlyoutVisible}
         closePopover={() => closeFlyout()}
         panelPaddingSize="none">
-        <EuiPopoverTitle>What&apos;s new</EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="s">What&apos;s new</EuiPopoverTitle>
         <div style={{ maxHeight: '40vh', overflowY: 'auto', padding: 4 }}>
           <EuiSpacer size="s" />
           {alerts.map((alert, i) => (
@@ -239,7 +239,7 @@ const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => {
             />
           ))}
         </div>
-        <EuiPopoverFooter>
+        <EuiPopoverFooter paddingSize="s">
           <EuiText color="subdued" size="s">
             <p>Version 7.0</p>
           </EuiText>

diff --git a/src-docs/src/views/popover/input_popover.js b/src-docs/src/views/popover/input_popover.js
@@ -57,8 +57,6 @@ export default () => {
         }}>
         Popover will adjust in size as the input does
       </EuiInputPopover>
-
-      <EuiSpacer size="xxl" />
     </React.Fragment>
   );
 };
diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiPopover, EuiButton } from '../../../../src/components';
+import { EuiPopover, EuiButton, EuiText } from '../../../../src/components';
 
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -21,9 +21,9 @@ export default () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}>
-      <div style={{ width: '300px' }}>
-        Popover content that&rsquo;s wider than the default width
-      </div>
+      <EuiText style={{ width: 300 }}>
+        <p>Popover content that&rsquo;s wider than the default width</p>
+      </EuiText>
     </EuiPopover>
   );
 };