Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiPopover] Added panelProps prop #4573

Merged
merged 13 commits into from
Mar 3, 2021
Merged

[EuiPopover] Added panelProps prop #4573

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
36ccb55
Added panelProps
akashgp09 Feb 24, 2021
2a94b59
Added tests for panelProps
akashgp09 Feb 24, 2021
acf09b1
Added Cl
akashgp09 Feb 24, 2021
bcac269
changes
akashgp09 Feb 25, 2021
803a25b
Merge branch 'master' into panelProps
akashgp09 Feb 25, 2021
bacd5c9
updated cl
akashgp09 Feb 25, 2021
a75a26a
added panelProps at the top
akashgp09 Feb 25, 2021
94fbbae
fixes
akashgp09 Feb 25, 2021
361f969
Omitting `style` from `panelProps` because `panelStyle` already exists
cchaos Feb 25, 2021
2eba1da
changes
akashgp09 Mar 1, 2021
1655f5d
Merge branch 'panelProps' of https://github.com/akashgp09/eui into pa…
akashgp09 Mar 1, 2021
986bc10
Merge branch 'master' into panelProps
cchaos Mar 2, 2021
4be929d
Merge branch 'master' into panelProps
akashgp09 Mar 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added `panelProps` to `EuiPopover` ([#4573](https://github.com/elastic/eui/pull/4573))
- Allowed dynamically changing the `direction` prop on `EuiResizableContainer` ([#4557](https://github.com/elastic/eui/pull/4557))
- Exported `useIsWithinBreakpoints` hook ([#4557](https://github.com/elastic/eui/pull/4557))

Expand Down
58 changes: 53 additions & 5 deletions src/components/popover/__snapshots__/popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="17"
id="18"
>
<div
class="euiPopover__anchor"
Expand Down Expand Up @@ -132,7 +132,7 @@ exports[`EuiPopover props buffer 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="18"
id="19"
>
<div
class="euiPopover__anchor"
Expand Down Expand Up @@ -179,7 +179,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="19"
id="20"
>
<div
class="euiPopover__anchor"
Expand Down Expand Up @@ -299,7 +299,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="15"
id="16"
offset="10"
>
<div
Expand Down Expand Up @@ -347,7 +347,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="16"
id="17"
offset="10"
>
<div
Expand Down Expand Up @@ -586,3 +586,51 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
</div>
</div>
`;

exports[`EuiPopover props panelProps is rendered 1`] = `
<div>
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
id="15"
>
<div
class="euiPopover__anchor"
>
<button />
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="-1"
/>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="-1"
/>
<div
data-focus-lock-disabled="disabled"
>
<div
aria-live="assertive"
aria-modal="true"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen testClass1 testClass2"
data-test-subj="test subject string"
role="dialog"
style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
>
<div
class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
style="left: 10px; top: 0px;"
/>
<div />
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="-1"
/>
</div>
</div>
`;
18 changes: 18 additions & 0 deletions src/components/popover/popover.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,24 @@ describe('EuiPopover', () => {
});
});

describe('panelProps', () => {
test('is rendered', () => {
const component = mount(
<div>
<EuiPopover
id={getId()}
button={<button />}
closePopover={() => {}}
panelProps={requiredProps}
isOpen
/>
</div>
);

expect(component.render()).toMatchSnapshot();
});
});

describe('offset', () => {
test('with arrow', () => {
const component = mount(
Expand Down
11 changes: 9 additions & 2 deletions src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import {

import { EuiScreenReaderOnly } from '../accessibility';

import { EuiPanel, PanelPaddingSize } from '../panel';
import { EuiPanel, PanelPaddingSize, EuiPanelProps } from '../panel';

import { EuiPortal } from '../portal';

Expand Down Expand Up @@ -145,6 +145,10 @@ export interface EuiPopoverProps {
* Standard DOM `style` attribute. Passed to the EuiPanel
*/
panelStyle?: CSSProperties;
/**
* Object of props passed to EuiPanel
*/
panelProps?: Omit<EuiPanelProps, 'style'>;
panelRef?: RefCallback<HTMLElement | null>;
popoverRef?: Ref<HTMLDivElement>;
/**
Expand Down Expand Up @@ -663,6 +667,7 @@ export class EuiPopover extends Component<Props, State> {
closePopover,
panelClassName,
panelPaddingSize,
panelProps,
panelRef,
panelStyle,
popoverRef,
Expand Down Expand Up @@ -701,7 +706,8 @@ export class EuiPopover extends Component<Props, State> {
{ 'euiPopover__panel-isOpen': this.state.isOpening },
{ 'euiPopover__panel-noArrow': !hasArrow || attachToAnchor },
{ 'euiPopover__panel-isAttached': attachToAnchor },
panelClassName
panelClassName,
panelProps?.className
chandlerprall marked this conversation as resolved.
Show resolved Hide resolved
);

let panel;
Expand Down Expand Up @@ -756,6 +762,7 @@ export class EuiPopover extends Component<Props, State> {
!ownFocus || !this.state.isOpenStable || this.state.isClosing
}>
<EuiPanel
{...panelProps}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passing {...(panelProps as EuiPanelProps)} here will resolve the TypeScript issue mentioned in #4573 (comment) - somewhere between accepting panelProps and forwarding it here TS forgets the value has been validated and appears to intersect the div & button props.

panelRef={this.panelRef}
className={panelClasses}
hasShadow={false}
Expand Down