From 55f2927fe74d3321ffa24b6c1f0aeb758cbdba3a Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 20 Oct 2020 11:43:06 -0400 Subject: [PATCH] [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 --- CHANGELOG.md | 3 + src-docs/src/views/datagrid/datagrid.js | 1 + .../views/filter_group/filter_group_multi.js | 4 +- src-docs/src/views/header/header.js | 6 +- src-docs/src/views/header/header_alert.js | 4 +- src-docs/src/views/popover/input_popover.js | 2 - src-docs/src/views/popover/popover.js | 8 +- src-docs/src/views/popover/popover_example.js | 215 ++++++------- src-docs/src/views/popover/popover_fixed.js | 4 +- .../views/popover/popover_panel_class_name.js | 11 +- .../src/views/popover/popover_with_title.js | 6 +- .../popover/popover_with_title_padding.js | 283 ++++++++++++------ .../views/selectable/selectable_popover.js | 4 +- .../views/suggest/global_filter_options.js | 2 +- src-docs/src/views/suggest/hashtag_popover.js | 8 +- .../__snapshots__/context_menu.test.tsx.snap | 6 +- .../context_menu_panel.test.tsx.snap | 8 +- .../context_menu/_context_menu_panel.scss | 5 +- .../context_menu/context_menu_panel.tsx | 5 +- .../markdown_editor_footer.tsx | 5 +- .../panel/__snapshots__/panel.test.tsx.snap | 24 ++ src/components/panel/panel.test.tsx | 14 +- src/components/panel/panel.tsx | 4 +- .../popover_footer.test.tsx.snap | 24 ++ .../__snapshots__/popover_title.test.tsx.snap | 24 ++ src/components/popover/_popover_footer.scss | 27 +- src/components/popover/_popover_title.scss | 26 +- src/components/popover/popover.tsx | 100 ++++--- .../popover/popover_footer.test.tsx | 14 +- src/components/popover/popover_footer.tsx | 28 +- src/components/popover/popover_title.test.tsx | 14 +- src/components/popover/popover_title.tsx | 28 +- .../filters/field_value_selection_filter.tsx | 3 +- .../selectable_template_sitewide.tsx | 6 +- .../overrides/_context_menu.scss | 3 + .../eui-amsterdam/overrides/_index.scss | 1 + .../eui-amsterdam/overrides/_popover.scss | 39 +++ 37 files changed, 671 insertions(+), 298 deletions(-) create mode 100644 src/themes/eui-amsterdam/overrides/_context_menu.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c6b0448d66..7fde32fef49 100644 --- 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 index 7479019ac57..7024a855e75 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -169,6 +169,7 @@ const trailingControlColumns = [
{ isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none"> - - + +
{items.map((item, index) => ( diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js index 0ca78b09618..5ef03b12cb7 100644 --- a/src-docs/src/views/header/header.js +++ b/src-docs/src/views/header/header.js @@ -308,9 +308,11 @@ const HeaderSpacesMenu = () => { }}> {(list, search) => ( <> - {search || 'Your spaces'} + + {search || 'Your spaces'} + {list} - + { isOpen={isFlyoutVisible} closePopover={() => closeFlyout()} panelPaddingSize="none"> - What's new + What's new
{alerts.map((alert, i) => ( @@ -239,7 +239,7 @@ const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => { /> ))}
- +

Version 7.0

 diff --git a/src-docs/src/views/popover/input_popover.js b/src-docs/src/views/popover/input_popover.js index 36fed5226ae..58f85688e93 100644 --- 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 - - ); }; diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js index c84819e0980..ba69af62976 100644 --- 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}> -
- Popover content that’s wider than the default width -
+ +

Popover content that’s wider than the default width

+ ); }; diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js index 1211336be6c..7d6fef277f2 100644 --- a/src-docs/src/views/popover/popover_example.js +++ b/src-docs/src/views/popover/popover_example.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { renderToHtml } from '../../services'; @@ -87,7 +88,7 @@ const popoverWithTitleSnippet = ` -
+ `; @@ -106,9 +107,10 @@ const popoverWithTitlePaddingSnippet = ` - - + panelPaddingSize="none"> + + + `; const popoverContainerSnippet = ` - Use the EuiPopover component to hide controls or - options behind a clickable element. -

+ <> +

+ Use the EuiPopover component to hide controls or + options behind a clickable element. A popover is temporary so keep + tasks simple and narrowly focused. +

+

+ While the visibility of the popover is maintained by the consuming + application, popovers will automatically close when clicking outside + of the popover bounds. Therefore all work done in a popover should + automatically be saved. +

+

+ Avoid popover inception (popover triggering another popover), and + instead use a{' '} + + EuiContextMenu + {' '} + to swap the popover panel content. +

+ ), props: { EuiPopover }, snippet: popOverSnippet, @@ -182,13 +201,11 @@ export const PopoverExample = { }, ], text: ( -
+ <>

The alignment and arrow on your popover can be set with the{' '} - anchorPosition prop. These positions will not - update based upon screen real estate and will stick to the positions - you declare. Because of this,{' '} - be careful when using left or right positioning. + anchorPosition prop. These positions will update + based upon screen real estate.

Some tips: @@ -204,13 +221,14 @@ export const PopoverExample = { popover. -

+ ), + props: { EuiPopover }, snippet: popoverAnchorSnippet, demo: , }, { - title: 'Popover with title and/or footer', + title: 'Popover titles and footers', source: [ { type: GuideSectionTypes.JS, @@ -222,117 +240,93 @@ export const PopoverExample = { }, ], text: ( -
+ <>

- Popovers often need titling. This can be applied through a prop or - used separately as its own component{' '} - EuiPopoverTitle nested somewhere in the child prop. + Popovers often need titling. Use the + EuiPopoverTitle component nested somewhere inside + the popover contents.

- You can also add a similiarly styled{' '} + You can also add a similarly styled{' '} EuiPopoverFooter for smaller captions or call to action buttons.

-
+ ), props: { EuiPopoverTitle, EuiPopoverFooter }, demo: , snippet: popoverWithTitleSnippet, }, { - title: 'Panel class name and padding size', + title: 'Popover padding sizes', source: [ { type: GuideSectionTypes.JS, - code: popoverPanelClassNameSource, + code: popoverWithTitlePaddingSource, }, { type: GuideSectionTypes.HTML, - code: popoverPanelClassNameHtml, + code: popoverWithTitlePaddingHtml, }, ], text: (

Use the panelPaddingSize prop to adjust the padding - on the panel within the panel. Use the{' '} - panelClassName prop to pass a custom class to the - panel inside a popover. + of the panel content. When using popover titles and footers, this + setting will propogate to them. Or you can supply a custom{' '} + paddingSize to either the{' '} + EuiPopoverTitle of EuiPopoverFooter.

), - demo: , - snippet: popoverPanelClassNameSnippet, - }, - { - title: 'Popover with title and padding size', - source: [ - { - type: GuideSectionTypes.JS, - code: popoverWithTitlePaddingSource, - }, - { - type: GuideSectionTypes.HTML, - code: popoverWithTitlePaddingHtml, - }, - ], - text: ( -
-

- When using popover titles, you can still propogate the padding size - by using panelPaddingSize. This will only affect - the horizontal padding of the title and the overall padding of the - content. -

-
- ), + props: { EuiPopover, EuiPopoverTitle, EuiPopoverFooter }, snippet: popoverWithTitlePaddingSnippet, demo: , }, { - title: 'Constraining a popover inside a container', + title: 'Panel class name', source: [ { type: GuideSectionTypes.JS, - code: popoverContainerSource, + code: popoverPanelClassNameSource, }, { type: GuideSectionTypes.HTML, - code: popoverContainerHtml, + code: popoverPanelClassNameHtml, }, ], text: ( -
-

- EuiPopover can accept a React or DOM element as a{' '} - container prop and restrict the popover from - overflowing that container. -

-
+

+ Use the panelClassName prop to pass a custom class + to the panel containing the popover contents. +

), - snippet: popoverContainerSnippet, - demo: , + props: { EuiPopover }, + demo: , + snippet: popoverPanelClassNameSnippet, }, { - title: 'Popover using an HTMLElement as the anchor', + title: 'Popover with block level display', source: [ { type: GuideSectionTypes.JS, - code: popoverHTMLElementAnchorSource, + code: popoverBlockSource, }, { type: GuideSectionTypes.HTML, - code: popoverHTMLElementAnchorHtml, + code: popoverBlockHtml, }, ], text: ( -
-

- EuiWrappingPopover is an extra popover component - that allows any existing DOM element to be passed as the{' '} - button prop. -

-
+

+ Popover anchors default to{' '} + display: inline-block; so they do + not force a display on inline triggers. If you do need to change this, + just add display="block" +

), - demo: , + props: { EuiPopover }, + snippet: popoverBlockSnippet, + demo: , }, { title: 'Popover on a fixed element', @@ -347,41 +341,39 @@ export const PopoverExample = { }, ], text: ( -
-

- Popover content even works on position: fixed;{' '} - elements. -

-
+

+ Popover content even works on{' '} + position: fixed; elements. Add the{' '} + repositionOnScroll boolean prop to ensure the + popover realigns to the fixed button on scroll. +

), + props: { EuiPopover }, snippet: popoverFixedSnippet, demo: , }, { - title: 'Popover with block level display', + title: 'Constraining a popover inside a container', source: [ { type: GuideSectionTypes.JS, - code: popoverBlockSource, + code: popoverContainerSource, }, { type: GuideSectionTypes.HTML, - code: popoverBlockHtml, + code: popoverContainerHtml, }, ], text: ( -
-

- Popover anchors default to{' '} - display: inline-block so they do - not force block display on inline triggers. If you do need to change - this to block display, just add{' '} - display="block" -

-
+

+ EuiPopover can accept a React or DOM element as a{' '} + container prop and restrict the popover from + overflowing that container. +

), - snippet: popoverBlockSnippet, - demo: , + props: { EuiPopover }, + snippet: popoverContainerSnippet, + demo: , }, { title: 'Popover attached to input element', @@ -396,7 +388,7 @@ export const PopoverExample = { }, ], text: ( -
+ <>

EuiInputPopover is a specialized popover component intended to be used with form elements. Stylistically, the popover @@ -414,14 +406,14 @@ export const PopoverExample = { type=number inputs as they natively bind to the down key.

-
+ ), props: { EuiInputPopover }, snippet: inputPopoverSnippet, demo: , }, { - title: 'Removing the focus focus', + title: 'Removing the focus trap', source: [ { type: GuideSectionTypes.JS, @@ -435,8 +427,9 @@ export const PopoverExample = { text: ( <>

- If the popover cannot trap focus within itself, then you can remove{' '} - ownFocus. + If the popover should not trap focus within itself, then you can + remove it with {'ownFocus={false}'} + .

), + props: { EuiPopover }, snippet: trapFocusSnippet, demo: , }, + { + title: 'Popover using an HTMLElement as the anchor', + source: [ + { + type: GuideSectionTypes.JS, + code: popoverHTMLElementAnchorSource, + }, + { + type: GuideSectionTypes.HTML, + code: popoverHTMLElementAnchorHtml, + }, + ], + text: ( +

+ EuiWrappingPopover is an extra popover component that + allows any existing DOM element to be passed as the{' '} + button prop. +

+ ), + demo: , + }, ], }; diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js index f247467cfba..a4c69f16b3b 100644 --- a/src-docs/src/views/popover/popover_fixed.js +++ b/src-docs/src/views/popover/popover_fixed.js @@ -18,14 +18,14 @@ export default () => { iconType="arrowDown" iconSide="right" onClick={onButtonClick} - style={{ background: 'white' }}> + fill> Show fixed popover ); return ( - Toggle Example + Toggle example {isExampleShown && ( { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -17,14 +17,15 @@ export default () => { iconType="arrowDown" iconSide="right" onClick={onButtonClick}> - Turn padding off and apply a custom class + Text scaling } isOpen={isPopoverOpen} closePopover={closePopover} - panelClassName="yourClassNameHere" - panelPaddingSize="none"> - This should have no padding, and if you inspect, also a custom class. + panelClassName="guideDemo__textLines"> + +

This has a custom class that applies some grid lines.

+ ); }; diff --git a/src-docs/src/views/popover/popover_with_title.js b/src-docs/src/views/popover/popover_with_title.js index 259611ad02d..9a0d17b6884 100644 --- a/src-docs/src/views/popover/popover_with_title.js +++ b/src-docs/src/views/popover/popover_with_title.js @@ -46,7 +46,7 @@ export default () => { anchorPosition="downCenter"> Hello, I’m a popover title
- +

Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi. @@ -71,7 +71,7 @@ export default () => { closePopover={closePopover2} anchorPosition="upCenter">

- +

Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi. @@ -102,7 +102,7 @@ export default () => { anchorPosition="upCenter"> Hello, I’m a popover title

- +

Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi. diff --git a/src-docs/src/views/popover/popover_with_title_padding.js b/src-docs/src/views/popover/popover_with_title_padding.js index 2a4465e09f1..9d137cc1757 100644 --- a/src-docs/src/views/popover/popover_with_title_padding.js +++ b/src-docs/src/views/popover/popover_with_title_padding.js @@ -3,10 +3,12 @@ import React, { useState } from 'react'; import { EuiPopover, EuiPopoverTitle, + EuiPopoverFooter, EuiButton, EuiFlexGroup, EuiFlexItem, EuiText, + EuiCode, } from '../../../../src/components'; export default () => { @@ -14,6 +16,8 @@ export default () => { const [isPopoverOpen2, setIsPopoverOpen2] = useState(false); const [isPopoverOpen3, setIsPopoverOpen3] = useState(false); const [isPopoverOpen4, setIsPopoverOpen4] = useState(false); + const [isPopoverOpen5, setIsPopoverOpen5] = useState(false); + const [isPopoverOpen6, setIsPopoverOpen6] = useState(false); const onButtonClick1 = () => setIsPopoverOpen1((isPopoverOpen1) => !isPopoverOpen1); @@ -31,102 +35,203 @@ export default () => { setIsPopoverOpen4((isPopoverOpen4) => !isPopoverOpen4); const closePopover4 = () => setIsPopoverOpen4(false); + const onButtonClick5 = () => + setIsPopoverOpen5((isPopoverOpen5) => !isPopoverOpen5); + const closePopover5 = () => setIsPopoverOpen5(false); + + const onButtonClick6 = () => + setIsPopoverOpen6((isPopoverOpen6) => !isPopoverOpen6); + const closePopover6 = () => setIsPopoverOpen6(false); + return ( - - - - Title and small padding - - } - isOpen={isPopoverOpen2} - closePopover={closePopover2} - anchorPosition="upCenter" - panelPaddingSize="s"> - Hello, I’m a popover title -

- -

Popover content

+ <> + + + + Small panel padding + + } + isOpen={isPopoverOpen2} + closePopover={closePopover2}> + Hello, I’m a popover title + +

+ Only changing the panelPaddingSize will get + inherited by the title. +

+ + + + Footer button + + + + + + + + No panel padding (none) + + } + isOpen={isPopoverOpen1} + closePopover={closePopover1}> + Hello, I’m a popover title + +

+ Removing the panelPaddingSize completely is + good for lists that should extend to the edges. +

+ + + + Footer button + + + + + + + + + + No title padding (none) + + } + isOpen={isPopoverOpen4} + closePopover={closePopover4}> + + Hello, I’m a popover title + + +

+ Removing the padding from titles only with{' '} + paddingSize on{' '} + EuiPopoverTitle. +

-
- - + + + Footer button + + + + - - - Title and default padding (m) - - } - isOpen={isPopoverOpen1} - closePopover={closePopover1} - anchorPosition="upCenter"> - Hello, I’m a popover title -
- -

Popover content

+ + + No panel padding with small title padding + + } + isOpen={isPopoverOpen3} + closePopover={closePopover3}> + + Hello, I’m a popover title + + +

+ You can adjust both the panelPaddingSize and + the paddingSize at the same time. +

-
- - + + + Footer button + + + + + - - - Title and large padding - - } - isOpen={isPopoverOpen4} - closePopover={closePopover4} - anchorPosition="upCenter" - panelPaddingSize="l"> - Hello, I’m a popover title -
- -

Popover content

+ + + + No footer padding (none) + + } + isOpen={isPopoverOpen5} + closePopover={closePopover5}> + Hello, I’m a popover title + +

+ Removing the padding from footers only with{' '} + paddingSize on{' '} + EuiPopoverFooter. +

-
- - + + + Footer button + + + + - - - Title and no padding - - } - isOpen={isPopoverOpen3} - closePopover={closePopover3} - anchorPosition="upCenter" - panelPaddingSize="none"> - As the title, I keep my padding -
- -

Popover content

+ + + Set each padding individually + + } + isOpen={isPopoverOpen6} + closePopover={closePopover6}> + + Hello, I’m a popover title + + +

+ For the most reliable padding display, set the{' '} + panelPaddingSize and the{' '} + paddingSize props for each component + individually. +

-
- - - + + + Footer button + + + + + + ); }; diff --git a/src-docs/src/views/selectable/selectable_popover.js b/src-docs/src/views/selectable/selectable_popover.js index ad5b1ccaa2c..87b21db24b0 100644 --- a/src-docs/src/views/selectable/selectable_popover.js +++ b/src-docs/src/views/selectable/selectable_popover.js @@ -80,9 +80,9 @@ export default () => { onChange={onChange}> {(list, search) => (
- {search} + {search} {list} - + Manage this list diff --git a/src-docs/src/views/suggest/global_filter_options.js b/src-docs/src/views/suggest/global_filter_options.js index 13a41329b10..e36b95cbfa5 100644 --- a/src-docs/src/views/suggest/global_filter_options.js +++ b/src-docs/src/views/suggest/global_filter_options.js @@ -103,7 +103,7 @@ export default () => { } anchorPosition="downCenter" panelPaddingSize="none"> - Change all filters + Change all filters ); diff --git a/src-docs/src/views/suggest/hashtag_popover.js b/src-docs/src/views/suggest/hashtag_popover.js index 9cbc7b00600..32de44a205b 100644 --- a/src-docs/src/views/suggest/hashtag_popover.js +++ b/src-docs/src/views/suggest/hashtag_popover.js @@ -43,7 +43,7 @@ export default (props) => { anchorPosition="downLeft" panelPaddingSize="none" closePopover={closePopover}> - SAVED QUERIES + SAVED QUERIES
{
{props.value !== '' ? ( - + - Save + + Save + diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap index 7ac48c9edfc..de113dc8e1c 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap @@ -9,7 +9,7 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = ` tabindex="0" >
{ ); } else { panelTitle = ( - +
{title} - +
); } } diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx index 26efcc897fe..5d2e5b0e7ca 100644 --- a/src/components/markdown_editor/markdown_editor_footer.tsx +++ b/src/components/markdown_editor/markdown_editor_footer.tsx @@ -157,6 +157,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent
@@ -166,7 +167,9 @@ export const EuiMarkdownEditorFooter: FunctionComponent {errors.map((message, idx) => ( - {message.toString()} + + {message.toString()} + ))}
diff --git a/src/components/panel/__snapshots__/panel.test.tsx.snap b/src/components/panel/__snapshots__/panel.test.tsx.snap index 4859d621649..6b8854e56fa 100644 --- a/src/components/panel/__snapshots__/panel.test.tsx.snap +++ b/src/components/panel/__snapshots__/panel.test.tsx.snap @@ -7,3 +7,27 @@ exports[`EuiPanel is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiPanel props paddingSize l is rendered 1`] = ` +
+`; + +exports[`EuiPanel props paddingSize m is rendered 1`] = ` +
+`; + +exports[`EuiPanel props paddingSize none is rendered 1`] = ` +
+`; + +exports[`EuiPanel props paddingSize s is rendered 1`] = ` +
+`; diff --git a/src/components/panel/panel.test.tsx b/src/components/panel/panel.test.tsx index 48e2fbe7a62..9206fde65fa 100644 --- a/src/components/panel/panel.test.tsx +++ b/src/components/panel/panel.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiPanel } from './panel'; +import { EuiPanel, SIZES } from './panel'; describe('EuiPanel', () => { test('is rendered', () => { @@ -29,4 +29,16 @@ describe('EuiPanel', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('paddingSize', () => { + SIZES.forEach((size) => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 00830300d78..81668867341 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -26,7 +26,7 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { CommonProps, ExclusiveUnion } from '../common'; +import { CommonProps, keysOf, ExclusiveUnion } from '../common'; import { EuiBetaBadge } from '../badge/beta_badge'; export type PanelPaddingSize = 'none' | 's' | 'm' | 'l'; @@ -78,7 +78,7 @@ const paddingSizeToClassNameMap = { l: 'euiPanel--paddingLarge', }; -export const SIZES = Object.keys(paddingSizeToClassNameMap); +export const SIZES = keysOf(paddingSizeToClassNameMap); export const EuiPanel: FunctionComponent = ({ children, diff --git a/src/components/popover/__snapshots__/popover_footer.test.tsx.snap b/src/components/popover/__snapshots__/popover_footer.test.tsx.snap index 3ab98565af4..25ccdae36c2 100644 --- a/src/components/popover/__snapshots__/popover_footer.test.tsx.snap +++ b/src/components/popover/__snapshots__/popover_footer.test.tsx.snap @@ -7,3 +7,27 @@ exports[`EuiPopoverFooter is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiPopoverFooter props paddingSize l is rendered 1`] = ` +
+`; + +exports[`EuiPopoverFooter props paddingSize m is rendered 1`] = ` +
+`; + +exports[`EuiPopoverFooter props paddingSize none is rendered 1`] = ` +
+`; + +exports[`EuiPopoverFooter props paddingSize s is rendered 1`] = ` +
+`; diff --git a/src/components/popover/__snapshots__/popover_title.test.tsx.snap b/src/components/popover/__snapshots__/popover_title.test.tsx.snap index 37a02b91c76..84f97ccc005 100644 --- a/src/components/popover/__snapshots__/popover_title.test.tsx.snap +++ b/src/components/popover/__snapshots__/popover_title.test.tsx.snap @@ -7,3 +7,27 @@ exports[`EuiPopoverTitle is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiPopoverTitle props paddingSize l is rendered 1`] = ` +
+`; + +exports[`EuiPopoverTitle props paddingSize m is rendered 1`] = ` +
+`; + +exports[`EuiPopoverTitle props paddingSize none is rendered 1`] = ` +
+`; + +exports[`EuiPopoverTitle props paddingSize s is rendered 1`] = ` +
+`; diff --git a/src/components/popover/_popover_footer.scss b/src/components/popover/_popover_footer.scss index 6038dcd9333..b1cc74913d0 100644 --- a/src/components/popover/_popover_footer.scss +++ b/src/components/popover/_popover_footer.scss @@ -1,14 +1,27 @@ .euiPopoverFooter { @include euiPopoverFooter; +} + +.euiPopoverFooter--paddingNone { + padding: 0; +} + +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPopoverFooter--#{$modifier} { + padding: $amount; + } +} + +// If the popover's containing panel has padding applied, +// ensure the title expands to cover that padding and +// take on the same amount of padding horizontally - // 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} .euiPopoverFooter { + margin: $amount ($amount * -1) ($amount * -1); - @each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopover__panel.euiPanel--#{$modifier} & { - padding: $amount; - margin: $amount ($amount * -1) ($amount * -1); + &:not([class*='euiPopoverFooter--padding']) { + padding: $euiSizeM $amount; } } } diff --git a/src/components/popover/_popover_title.scss b/src/components/popover/_popover_title.scss index 8786dca2700..9958ae7d890 100644 --- a/src/components/popover/_popover_title.scss +++ b/src/components/popover/_popover_title.scss @@ -1,15 +1,27 @@ .euiPopoverTitle { @include euiPopoverTitle; +} + +.euiPopoverTitle--paddingNone { + padding: 0; +} + +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPopoverTitle--#{$modifier} { + padding: $amount; + } +} - // If the popover's containing panel has padding applied, - // ensure the title expands to cover that padding and - // take on the same amount of padding horizontally +// If the popover's containing panel has padding applied, +// ensure the title expands to cover that padding and +// take on the same amount of padding horizontally - @each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopover__panel.euiPanel--#{$modifier} & { +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle { + margin: ($amount * -1) ($amount * -1) $amount; + + &:not([class*='euiPopoverTitle--padding']) { padding: $euiSizeM $amount; - margin: ($amount * -1) ($amount * -1) $amount; } } - } diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index a1aa8c6ab4d..bfcfb9daab6 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -75,84 +75,104 @@ export type PopoverAnchorPosition = const generateId = htmlIdGenerator(); export interface EuiPopoverProps { + /** + * Class name passed to the direct parent of the button + */ anchorClassName?: string; - + /** + * Alignment of the popover and arrow relative to the button + */ anchorPosition?: PopoverAnchorPosition; - - /** Style and position alteration for arrow-less, left-aligned - * attachment. Intended for use with inputs as anchors, à la - * EuiColorPicker */ + /** + * Style and position alteration for arrow-less, left-aligned + * attachment. Intended for use with inputs as anchors, e.g. + * EuiInputPopover + */ attachToAnchor?: boolean; - + /** + * Triggering element for which to align the popover to + */ button: NonNullable; - buttonRef?: RefCallback; - + /** + * Callback to handle hiding of the popover + */ closePopover: NoArgCallback; - + /** + * Restrict the popover's position within this element + */ container?: HTMLElement; - - /** CSS display type for both the popover and anchor */ + /** + * CSS display type for both the popover and anchor + */ display?: keyof typeof displayToClassNameMap; - + /** + * Show arrow indicating to originating button + */ hasArrow?: boolean; - - /** specifies what element should initially have focus; Can be a DOM + /** + * Specifies what element should initially have focus; Can be a DOM * node, or a selector string (which will be passed to * document.querySelector() to find the DOM node), or a function that - * returns a DOM node. */ + * returns a DOM node + */ initialFocus?: FocusTarget; - - /** Passed directly to EuiPortal for DOM positioning. Both properties are - * required if prop is specified **/ + /** + * Passed directly to EuiPortal for DOM positioning. Both properties are + * required if prop is specified + */ insert?: { sibling: HTMLElement; position: 'before' | 'after'; }; - + /** + * Visibility state of the popover + */ isOpen?: boolean; - + /** + * Traps tab focus within the popover contents + */ ownFocus?: boolean; - + /** + * Custom class added to the EuiPanel containing the popover contents + */ panelClassName?: string; - + /** + * EuiPanel padding on all sides + */ panelPaddingSize?: PanelPaddingSize; - - panelRef?: RefCallback; - /** - * Optional, standard DOM `style` attribute. Passed to the EuiPanel. + * Standard DOM `style` attribute. Passed to the EuiPanel */ panelStyle?: CSSProperties; - + panelRef?: RefCallback; popoverRef?: Ref; - - /** When `true`, the popover's position is re-calculated when the user - * scrolls, this supports having fixed-position popover anchors. */ + /** + * When `true`, the popover's position is re-calculated when the user + * scrolls, this supports having fixed-position popover anchors + */ repositionOnScroll?: boolean; - - /** By default, popover content inherits the z-index of the anchor - * component; pass zIndex to override */ + /** + * By default, popover content inherits the z-index of the anchor + * component; pass `zIndex` to override + */ zIndex?: number; - /** * Function callback for when the focus trap is deactivated */ onTrapDeactivation?: ReactFocusOnProps['onDeactivation']; - /** - * Distance away from the anchor that the popover will render. + * Distance away from the anchor that the popover will render */ offset?: number; - /** - * Minimum distance between the popover and the bounding container. + * Minimum distance between the popover and the bounding container; * Default is 16 */ buffer?: number; - /** - * Element to pass as the child element of the arrow. Use case is typically limited to an accompanying `EuiBeacon` + * Element to pass as the child element of the arrow; + * Use case is typically limited to an accompanying `EuiBeacon` */ arrowChildren?: ReactNode; } diff --git a/src/components/popover/popover_footer.test.tsx b/src/components/popover/popover_footer.test.tsx index 201ca26e874..f5691edf207 100644 --- a/src/components/popover/popover_footer.test.tsx +++ b/src/components/popover/popover_footer.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiPopoverFooter } from './popover_footer'; +import { EuiPopoverFooter, PADDING_SIZES } from './popover_footer'; describe('EuiPopoverFooter', () => { test('is rendered', () => { @@ -29,4 +29,16 @@ describe('EuiPopoverFooter', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('paddingSize', () => { + PADDING_SIZES.forEach((size) => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/popover/popover_footer.tsx b/src/components/popover/popover_footer.tsx index 7851cd6c19b..1846c95ce46 100644 --- a/src/components/popover/popover_footer.tsx +++ b/src/components/popover/popover_footer.tsx @@ -19,18 +19,40 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; +import { PanelPaddingSize } from '../panel'; export type EuiPopoverFooterProps = FunctionComponent< - HTMLAttributes & CommonProps + HTMLAttributes & + CommonProps & { + /** + * Customize the all around padding of the popover footer. + * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover + */ + paddingSize?: PanelPaddingSize; + } >; +const paddingSizeToClassNameMap = { + none: 'euiPopoverFooter--paddingNone', + s: 'euiPopoverFooter--paddingSmall', + m: 'euiPopoverFooter--paddingMedium', + l: 'euiPopoverFooter--paddingLarge', +}; + +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); + export const EuiPopoverFooter: EuiPopoverFooterProps = ({ children, className, + paddingSize, ...rest }) => { - const classes = classNames('euiPopoverFooter', className); + const classes = classNames( + 'euiPopoverFooter', + paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, + className + ); return (
diff --git a/src/components/popover/popover_title.test.tsx b/src/components/popover/popover_title.test.tsx index 92ea927ac90..ffdff2f6db8 100644 --- a/src/components/popover/popover_title.test.tsx +++ b/src/components/popover/popover_title.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiPopoverTitle } from './popover_title'; +import { EuiPopoverTitle, PADDING_SIZES } from './popover_title'; describe('EuiPopoverTitle', () => { test('is rendered', () => { @@ -29,4 +29,16 @@ describe('EuiPopoverTitle', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('paddingSize', () => { + PADDING_SIZES.forEach((size) => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/popover/popover_title.tsx b/src/components/popover/popover_title.tsx index 36dbbdc849c..06af6a66a49 100644 --- a/src/components/popover/popover_title.tsx +++ b/src/components/popover/popover_title.tsx @@ -19,18 +19,40 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; +import { PanelPaddingSize } from '../panel'; export type EuiPopoverTitleProps = FunctionComponent< - HTMLAttributes & CommonProps + HTMLAttributes & + CommonProps & { + /** + * Customize the all around padding of the popover title. + * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover + */ + paddingSize?: PanelPaddingSize; + } >; +const paddingSizeToClassNameMap = { + none: 'euiPopoverTitle--paddingNone', + s: 'euiPopoverTitle--paddingSmall', + m: 'euiPopoverTitle--paddingMedium', + l: 'euiPopoverTitle--paddingLarge', +}; + +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); + export const EuiPopoverTitle: EuiPopoverTitleProps = ({ children, className, + paddingSize, ...rest }) => { - const classes = classNames('euiPopoverTitle', className); + const classes = classNames( + 'euiPopoverTitle', + paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, + className + ); return (
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx index 8c863547473..ea1926be987 100644 --- a/src/components/search_bar/filters/field_value_selection_filter.tsx +++ b/src/components/search_bar/filters/field_value_selection_filter.tsx @@ -382,13 +382,14 @@ export class FieldValueSelectionFilter extends Component< if (this.state.options && this.state.options.all.length >= threshold) { const disabled = this.state.error != null; return ( - + (this.searchInput = ref)} disabled={disabled} incremental={true} onSearch={(query) => this.filterOptions(query)} onKeyDown={this.onKeyDown.bind(this, -1)} + compressed /> ); diff --git a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx index 3b6e27eb06f..2a8e244178a 100644 --- a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx +++ b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx @@ -281,7 +281,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent
{popoverTitle || popoverTrigger ? ( - + {popoverTitle} {popoverTitle && search && } {search} @@ -289,7 +289,9 @@ export const EuiSelectableTemplateSitewide: FunctionComponent{popoverFooter} + + {popoverFooter} + )}
diff --git a/src/themes/eui-amsterdam/overrides/_context_menu.scss b/src/themes/eui-amsterdam/overrides/_context_menu.scss new file mode 100644 index 00000000000..64b24704dc9 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_context_menu.scss @@ -0,0 +1,3 @@ +.euiContextMenuPanelTitle { + text-transform: none; +} diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index 0290dad29f9..d57ca21a6dd 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -3,6 +3,7 @@ @import 'button_group'; @import 'call_out'; @import 'code'; +@import 'context_menu'; @import 'filter_group'; @import 'header'; @import 'image'; diff --git a/src/themes/eui-amsterdam/overrides/_popover.scss b/src/themes/eui-amsterdam/overrides/_popover.scss index c8825cdaf70..1057cd35c03 100644 --- a/src/themes/eui-amsterdam/overrides/_popover.scss +++ b/src/themes/eui-amsterdam/overrides/_popover.scss @@ -54,3 +54,42 @@ } } } + +/** + * Title specific overrides + */ + +.euiPopoverTitle { + text-transform: none; +} + +// Mainly for specificity, but don't add padding to the title if +// neither the the panel nor the title has a padding modifier (aka NONE) +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 0; +} + +// Allow the panel padding to actually modify the all side of the title +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: $amount; + } +} + +/** + * Footer specific overrides + */ + +// Mainly for specificity, but don't add padding to the footer if +// neither the the panel nor the footer has a padding modifier (aka NONE) +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 0; +} + +// Allow the panel padding to actually modify the all side of the footer +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: $amount; + } +} +