Skip to content

Popper: remove findRefWrapper #7807

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

Merged
tlabaj merged 15 commits into from
Sep 7, 2022
Merged

Popper: remove findRefWrapper #7807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
013aee4
popper take 2
kmcfaul Aug 16, 2022
c56fb0f
update drawer integration to account for new wrapping div
kmcfaul Aug 17, 2022
6577179
update more integration tests with new popper structure
kmcfaul Aug 17, 2022
c98ab0f
popper take 3, opt in edition
kmcfaul Aug 19, 2022
0d1d9e3
pipe opt in through components that use Popper, remove callbacks from…
kmcfaul Aug 19, 2022
24128cf
fix trigger function
kmcfaul Aug 19, 2022
4291025
update typing, add demo, add beta flag
kmcfaul Aug 22, 2022
7654772
fix merge conflict error
kmcfaul Aug 22, 2022
4854f7a
add unit tests to components for new prop
kmcfaul Aug 22, 2022
8a2b3c7
snap
kmcfaul Aug 23, 2022
471833b
remove snap
kmcfaul Aug 23, 2022
dfd4169
add popperRef method, remove function method, add comments & remove s…
kmcfaul Sep 1, 2022
c8732f7
update types
kmcfaul Sep 1, 2022
c86e3eb
update tests, fix merge issues
kmcfaul Sep 6, 2022
9302737
fix integration
kmcfaul Sep 6, 2022
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
7 changes: 6 additions & 1 deletion packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ export interface ApplicationLauncherProps
favoritesLabel?: string;
/** ID of toggle */
toggleId?: string;
/** @beta Opt-in for updated popper that does not use findDOMNode. */
removeFindDomNode?: boolean;
}

export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
Expand All @@ -83,7 +85,8 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
searchPlaceholderText: 'Filter by name...',
searchNoResultsText: 'No results found',
favoritesLabel: 'Favorites',
menuAppendTo: 'inline'
menuAppendTo: 'inline',
removeFindDomNode: false
};

createSearchBox = () => {
Expand Down Expand Up @@ -129,6 +132,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
favoritesLabel,
searchNoResultsText,
menuAppendTo,
removeFindDomNode,
...props
} = this.props;
let renderableItems: React.ReactNode[] = [];
Expand Down Expand Up @@ -189,6 +193,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
className={className}
aria-label={ariaLabel}
menuAppendTo={menuAppendTo}
removeFindDomNode={removeFindDomNode}
toggle={
<DropdownToggle
id={toggleId}
Expand Down
11 changes: 10 additions & 1 deletion ...ages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,17 @@ describe('ApplicationLauncher', () => {

test('custom icon', () => {
const { asFragment } = render(
<ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
<React.StrictMode>
<ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
</React.StrictMode>
);
expect(asFragment()).toMatchSnapshot();
});

test('Renders in strict mode', () => {
const consoleError = jest.spyOn(console, 'error');
const { asFragment } = render(<ApplicationLauncher removeFindDomNode isOpen items={dropdownItems} />);
Comment thread
kmcfaul marked this conversation as resolved.
expect(consoleError).not.toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
});
160 changes: 153 additions & 7 deletions .../components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,151 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ApplicationLauncher Renders in strict mode 1`] = `
<DocumentFragment>
<nav
aria-label="Application launcher"
class="pf-c-app-launcher pf-m-expanded"
data-ouia-component-type="PF4/ApplicationLauncher"
data-ouia-safe="true"
>
<button
aria-expanded="true"
aria-haspopup="true"
aria-label="Application launcher"
class="pf-c-app-launcher__toggle"
data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
data-ouia-component-type="PF4/DropdownToggle"
data-ouia-safe="true"
id="pf-dropdown-toggle-id-7"
type="button"
>
<span>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
/>
</svg>
</span>
</button>
<ul
aria-labelledby="pf-dropdown-toggle-id-7"
class="pf-c-app-launcher__menu"
role="menu"
>
<li
role="none"
>
<a
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-19"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
>
Link
</a>
</li>
<li
role="none"
>
<button
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-20"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
type="button"
>
Action
</button>
</li>
<li
role="none"
>
<a
aria-disabled="true"
class="pf-m-disabled pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-21"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
>
Disabled Link
</a>
</li>
<li
role="none"
>
<button
aria-disabled="true"
class="pf-m-disabled pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-22"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
type="button"
>
Disabled Action
</button>
</li>
<li
role="none"
>
<div
class="pf-c-divider"
role="separator"
/>
</li>
<li
role="none"
>
<a
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-23"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
>
Separated Link
</a>
</li>
<li
role="none"
>
<button
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-24"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
tabindex="-1"
type="button"
>
Separated Action
</button>
</li>
</ul>
</nav>
</DocumentFragment>
`;

exports[`ApplicationLauncher custom icon 1`] = `
<DocumentFragment>
<nav
Expand All @@ -13,7 +159,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
aria-haspopup="true"
aria-label="Application launcher"
class="pf-c-app-launcher__toggle"
data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
data-ouia-component-type="PF4/DropdownToggle"
data-ouia-safe="true"
id="pf-dropdown-toggle-id-5"
Expand Down Expand Up @@ -47,7 +193,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<a
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-7"
data-ouia-component-id="OUIA-Generated-DropdownItem-8"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand All @@ -62,7 +208,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<button
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-8"
data-ouia-component-id="OUIA-Generated-DropdownItem-10"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand All @@ -78,7 +224,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<a
aria-disabled="true"
class="pf-m-disabled pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-9"
data-ouia-component-id="OUIA-Generated-DropdownItem-12"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand All @@ -93,7 +239,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<button
aria-disabled="true"
class="pf-m-disabled pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-10"
data-ouia-component-id="OUIA-Generated-DropdownItem-14"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand All @@ -117,7 +263,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<a
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-11"
data-ouia-component-id="OUIA-Generated-DropdownItem-16"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand All @@ -132,7 +278,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
<button
aria-disabled="false"
class="pf-c-app-launcher__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-12"
data-ouia-component-id="OUIA-Generated-DropdownItem-18"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
role="menuitem"
Expand Down
7 changes: 6 additions & 1 deletion packages/react-core/src/components/ContextSelector/ContextSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
isFlipEnabled?: boolean;
/** Id of the context selector */
id?: string;
/** @beta Opt-in for updated popper that does not use findDOMNode. */
removeFindDomNode?: boolean;
}

export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
Expand All @@ -89,7 +91,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
footer: null as React.ReactNode,
isPlain: false,
isText: false,
isFlipEnabled: false
isFlipEnabled: false,
removeFindDomNode: false
};
constructor(props: ContextSelectorProps) {
super(props);
Expand Down Expand Up @@ -131,6 +134,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
disableFocusTrap,
isFlipEnabled,
id,
removeFindDomNode,
...props
} = this.props;

Expand Down Expand Up @@ -231,6 +235,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
popper={popperContainer}
appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
isVisible={isOpen}
removeFindDomNode={removeFindDomNode}
/>
);
}
Expand Down
19 changes: 18 additions & 1 deletion packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,24 @@ describe('ContextSelector', () => {
});

test('Renders ContextSelector open', () => {
const { asFragment } = render(<ContextSelector isOpen id="render-open">{items}</ContextSelector>);
const { asFragment } = render(
<ContextSelector isOpen id="render-open">
{items}
</ContextSelector>
);
expect(asFragment()).toMatchSnapshot();
});

test('Renders in strict mode', () => {
const consoleError = jest.spyOn(console, 'error');
const { asFragment } = render(
<React.StrictMode>
<ContextSelector removeFindDomNode isOpen id="render">
{items}
</ContextSelector>
</React.StrictMode>
);
expect(consoleError).not.toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});

Expand Down
Loading