Skip to content

fix(Popper): updated default appendTo prop for Penta styling #10675

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
merged 5 commits into from
Jul 2, 2024
Merged

fix(Popper): updated default appendTo prop for Penta styling #10675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
da95c20
fix(Popper): updated default appendTo prop for Penta styling
Jun 27, 2024
a71eaa2
Updated failing tests
Jun 28, 2024
617c8d3
Updated selectors in notifDrawer test
Jun 28, 2024
02aa4f2
Updated docs, resolved warning on build
Jul 2, 2024
ed71b78
Updated yarn lock
Jul 2, 2024
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
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface DropdownPopperProps {
maxWidth?: string | 'trigger';
/** Enable to flip the popper when it reaches the boundary */
enableFlip?: boolean;
/** The container to append the popper to. Defaults to 'inline'. */
/** The container to append the popper to. Defaults to document.body. */
appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
/** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
preventOverflow?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface SelectPopperProps {
maxWidth?: string | 'trigger';
/** Enable to flip the popper when it reaches the boundary */
enableFlip?: boolean;
/** The container to append the select to. Defaults to 'inline'.
/** The container to append the select to. Defaults to document.body.
* If your select is being cut off you can append it to an element higher up the DOM tree.
* Some examples:
* appendTo="inline"
Expand Down
1 change: 0 additions & 1 deletion ...ct-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ DualListSelectorListItem as DLSListItemDeprecated,
DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
DualListSelectorControl as DLSControlDeprecated,
DualListSelectorTree as DLSTreeDeprecated,
DualListSelectorTreeItemData as DLSTreeItemDataDeprecated,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note that this is unrelated to the PR itself, but should help remove the warning when building locally.

} from '@patternfly/react-core/deprecated';
import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/helpers/Popper/Popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
width,
minWidth = 'trigger',
maxWidth,
appendTo = 'inline',
appendTo = () => document.body,
zIndex = 9999,
isVisible = true,
positionModifiers,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-integration/cypress/integration/card.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('Card Demo Test', () => {
cy.wrap($menuToggle).click();
cy.wrap($menuToggle).should('have.class', 'pf-m-expanded');
});
cy.get('#cardWithActions .pf-v6-c-menu .pf-v6-c-menu__item').first().click();
cy.get('.cardWithActions.pf-v6-c-menu .pf-v6-c-menu__item').first().click();
cy.get('#cardWithActions .pf-v6-c-menu-toggle').should('not.have.class', 'pf-m-expanded');
});

Expand Down
8 changes: 4 additions & 4 deletions packages/react-integration/cypress/integration/notificationdrawerbasic.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,17 @@ describe('Notification Drawer Basic Demo Test', () => {
// then press Tab on toggle button, check whether the dropdown menu is closed
cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).type(' ', { waitForAnimations: true });
cy.get('#notification-0').find('.pf-v6-c-menu').should('exist');
cy.get('.notification-0.pf-v6-c-menu').should('exist');
cy.wrap(toggleButton).type('{esc}', { waitForAnimations: true });
cy.get('#notification-0').find('.pf-v6-c-menu').should('not.exist');
cy.get('.notification-0.pf-v6-c-menu').should('not.exist');
});
// Verify the list item header toggle button keyboard interactivity opens/closes dropdown menu
// the method is the same as above
cy.get('#toggle-id-1').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).type(' ', { waitForAnimations: true });
cy.get('#notification-1').find('.pf-v6-c-menu').should('exist');
cy.get('.notification-1.pf-v6-c-menu').should('exist');
cy.wrap(toggleButton).type('{esc}', { waitForAnimations: true });
cy.get('#notification-1').find('.pf-v6-c-menu').should('not.exist');
cy.get('.notification-1.pf-v6-c-menu').should('not.exist');
});
});

Expand Down
8 changes: 4 additions & 4 deletions packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ describe('Notification Drawer Groups Demo Test', () => {
// then press Tab on toggle button, check whether the dropdown menu is closed
cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).type('{enter}', { waitForAnimations: true });
cy.get('#notification-0').find('.pf-v6-c-menu').should('exist');
cy.get('.notification-0.pf-v6-c-menu').should('exist');
cy.wrap(toggleButton).type('{esc}', { waitForAnimations: true });
cy.get('#notification-0').find('.pf-v6-c-menu').should('not.exist');
cy.get('.notification-0.pf-v6-c-menu').should('not.exist');
});
// Verify the group header keyboard interactivity opens/closes the whole group
// check whether the whole group is expanded, then press Enter on the group header and check whether the whole group is closed
Expand All @@ -70,9 +70,9 @@ describe('Notification Drawer Groups Demo Test', () => {
// Verify the list item header toggle button keyboard interactivity opens/closes dropdown menu
cy.get('#toggle-id-9').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).type('{enter}', { waitForAnimations: true });
cy.get('#notification-9').find('.pf-v6-c-menu').should('exist');
cy.get('.notification-9.pf-v6-c-menu').should('exist');
cy.wrap(toggleButton).type('{esc}', { waitForAnimations: true });
cy.get('#notification-9').find('.pf-v6-c-menu').should('not.exist');
cy.get('.notification-9.pf-v6-c-menu').should('not.exist');
});
});

Expand Down
8 changes: 4 additions & 4 deletions packages/react-integration/cypress/integration/overflowmenu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('OverflowMenu Demo Test', () => {
it('Verify dropdown menu expanded', () => {
cy.get('#simple-overflow-menu button').last().click({ force: true });
cy.get('#simple-overflow-menu .pf-v6-c-menu-toggle').should('have.class', 'pf-m-expanded');
cy.get('#simple-overflow-menu .pf-v6-c-menu').should('be.visible');
cy.get('.simple-overflow-menu.pf-v6-c-menu').should('be.visible');
// close overflow menu again
cy.get('#simple-overflow-menu button').last().click({ force: true });
});
Expand Down Expand Up @@ -69,7 +69,7 @@ describe('OverflowMenu Demo Test', () => {
it('Verify dropdown menu expanded', () => {
cy.get('#additional-options-overflow-menu button').last().click({ force: true });
cy.get('#additional-options-overflow-menu .pf-v6-c-menu-toggle').should('have.class', 'pf-m-expanded');
cy.get('#additional-options-overflow-menu .pf-v6-c-menu').should('be.visible');
cy.get('.additional-options-overflow-menu.pf-v6-c-menu').should('be.visible');
});
});
});
Expand Down Expand Up @@ -107,7 +107,7 @@ describe('OverflowMenu Demo Test', () => {
it('Verify dropdown menu expanded', () => {
cy.get('#persist-overflow-menu button').last().click({ force: true });
cy.get('#persist-overflow-menu .pf-v6-c-menu-toggle').should('have.class', 'pf-m-expanded');
cy.get('#persist-overflow-menu .pf-v6-c-menu').should('be.visible');
cy.get('.persist-overflow-menu.pf-v6-c-menu').should('be.visible');
});
});
});
Expand Down Expand Up @@ -142,7 +142,7 @@ describe('OverflowMenu Demo Test', () => {
it('Verify dropdown menu expanded', () => {
cy.get('#container-breakpoint-overflow-menu button').last().click({ force: true });
cy.get('#container-breakpoint-overflow-menu .pf-v6-c-menu-toggle').should('have.class', 'pf-m-expanded');
cy.get('#container-breakpoint-overflow-menu .pf-v6-c-menu').should('be.visible');
cy.get('.container-breakpoint-overflow-menu.pf-v6-c-menu').should('be.visible');
// close overflow menu again
cy.get('#container-breakpoint-overflow-menu button').last().click({ force: true });
});
Expand Down
1 change: 1 addition & 0 deletions packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ class CardDemo extends Component {
const actions = (
<>
<Dropdown
className="cardWithActions"
onSelect={this.onSelect}
isOpen={this.state.isOpen}
onOpenChange={(isOpen) => this.setState({ isOpen })}
Expand Down
2 changes: 2 additions & 0 deletions ...n/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
<NotificationDrawer>
<NotificationDrawerHeader count={2} id="notification-0" onClose={this.onDrawerClose}>
<Dropdown
className="notification-0"
onSelect={this.onSelect}
isOpen={isOpen[0]}
onOpenChange={(_isOpen) => this.setState({ isOpen: new Array(6).fill(false) })}
Expand Down Expand Up @@ -92,6 +93,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
truncateTitle={10}
>
<Dropdown
className="notification-1"
onSelect={this.onSelect}
isOpen={isOpen[1]}
onOpenChange={(_isOpen) => this.setState({ isOpen: new Array(6).fill(false) })}
Expand Down
2 changes: 2 additions & 0 deletions .../demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
<NotificationDrawer>
<NotificationDrawerHeader count={4} id="notification-0" onClose={this.onDrawerClose}>
<Dropdown
className="notification-0"
onSelect={this.onSelect}
isOpen={isOpenMap['toggle-id-0'] || false}
onOpenChange={(_isOpen) => this.setState({ isOpenMap: {} })}
Expand Down Expand Up @@ -268,6 +269,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
srTitle="Info notification:"
>
<Dropdown
className="notification-9"
onSelect={this.onSelect}
isOpen={isOpenMap['toggle-id-9'] || false}
onOpenChange={(_isOpen) => this.setState({ isOpenMap: {} })}
Expand Down
4 changes: 4 additions & 0 deletions .../react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export class OverflowMenuDemo extends React.Component {
</OverflowMenuContent>
<OverflowMenuControl>
<Dropdown
className="simple-overflow-menu"
onSelect={this.onSimpleSelect}
toggle={(toggleRef) => (
<MenuToggle
Expand Down Expand Up @@ -173,6 +174,7 @@ export class OverflowMenuDemo extends React.Component {
</OverflowMenuContent>
<OverflowMenuControl hasAdditionalOptions>
<Dropdown
className="additional-options-overflow-menu"
onSelect={this.onAdditionalOptionsSelect}
toggle={(toggleRef) => (
<MenuToggle
Expand Down Expand Up @@ -240,6 +242,7 @@ export class OverflowMenuDemo extends React.Component {
</OverflowMenuContent>
<OverflowMenuControl hasAdditionalOptions>
<Dropdown
className="persist-overflow-menu"
onSelect={this.onPersistSelect}
toggle={(toggleRef) => (
<MenuToggle
Expand Down Expand Up @@ -315,6 +318,7 @@ export class OverflowMenuDemo extends React.Component {
</OverflowMenuContent>
<OverflowMenuControl>
<Dropdown
className="container-breakpoint-overflow-menu"
onSelect={this.onContainerBreakpointSelect}
toggle={(toggleRef) => (
<MenuToggle
Expand Down
72 changes: 0 additions & 72 deletions ...ct-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,78 +37,6 @@ exports[`Dropdown items Matches snapshot 1`] = `
</span>
</span>
</button>
<div
class="pf-v6-c-menu"
data-ouia-component-id="4"
data-ouia-component-type="PF6/Dropdown"
data-ouia-safe="true"
data-popper-escaped="true"
data-popper-placement="bottom-start"
data-popper-reference-hidden="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
>
<div
class="pf-v6-c-menu__content"
>
<ul
class="pf-v6-c-menu__list"
role="menu"
>
<li
class="pf-v6-c-menu__list-item"
data-ouia-component-id="1"
data-ouia-component-type="PF6/DropdownItem"
data-ouia-safe="true"
role="none"
>
<button
class="pf-v6-c-menu__item"
role="menuitem"
tabindex="0"
type="button"
>
<span
class="pf-v6-c-menu__item-main"
>
<span
class="pf-v6-c-menu__item-text"
>
Action
</span>
</span>
</button>
</li>
<li
class="pf-v6-c-divider"
role="separator"
/>
<li
class="pf-v6-c-menu__list-item"
data-ouia-component-id="3"
data-ouia-component-type="PF6/DropdownItem"
data-ouia-safe="true"
role="none"
>
<a
class="pf-v6-c-menu__item"
href="#"
role="menuitem"
tabindex="-1"
>
<span
class="pf-v6-c-menu__item-main"
>
<span
class="pf-v6-c-menu__item-text"
>
Link
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</DocumentFragment>
`;

Expand Down
Loading