diff --git a/components-e2e/cypress/integration/components/DropdownMenu.spec.js b/components-e2e/cypress/integration/components/DropdownMenu.spec.js index f8c781010..8e5fded39 100644 --- a/components-e2e/cypress/integration/components/DropdownMenu.spec.js +++ b/components-e2e/cypress/integration/components/DropdownMenu.spec.js @@ -1,7 +1,7 @@ describe("DropdownMenu", () => { const getOpenButton = () => cy.get("button[aria-label='Open']"); const getCloseButton = () => cy.get("button[aria-label='Close']"); - const getTrigger = () => cy.get("button[class*='IconicButton'"); + const getTrigger = () => cy.get("button[class*='IconicButton']"); const getDropdownLink = () => cy.contains("Dropdown Link"); const getCustomTrigger = () => cy.contains("Custom Trigger"); const getDropdownContainer = () => cy.get(".nds-popper-pop-up"); @@ -12,7 +12,7 @@ describe("DropdownMenu", () => { }; const assertDropdownIsClosed = () => { getOpenButton().should("exist"); - cy.isNotInViewport(".nds-popper-pop-up"); + cy.get(".nds-popper-pop-up").should("not.exist"); }; describe("default", () => { @@ -46,9 +46,10 @@ describe("DropdownMenu", () => { }); it("scrolls through the list on tabpress", () => { - getTrigger() - .click() - .tab(); + getTrigger().click(); + // Add wait for dropdown to render + cy.wait(500); + getTrigger().tab(); getDropdownLink().should("be.focused"); }); diff --git a/components-e2e/cypress/integration/components/Tooltip.spec.js b/components-e2e/cypress/integration/components/Tooltip.spec.js index 57c257215..49a928026 100644 --- a/components-e2e/cypress/integration/components/Tooltip.spec.js +++ b/components-e2e/cypress/integration/components/Tooltip.spec.js @@ -25,7 +25,7 @@ describe("Tooltip", () => { cy.get('[aria-haspopup="true"]').trigger("mouseover"); cy.get('[aria-haspopup="true"]').trigger("mouseout"); cy.wait(2000); - cy.isNotInViewport('[role="tooltip"]'); + cy.get('[role="tooltip"]').should("not.exist"); }); }); }); diff --git a/components/src/Card/__snapshots__/Card.story.storyshot b/components/src/Card/__snapshots__/Card.story.storyshot index e0c160d64..eab69a573 100644 --- a/components/src/Card/__snapshots__/Card.story.storyshot +++ b/components/src/Card/__snapshots__/Card.story.storyshot @@ -820,165 +820,7 @@ exports[`Storyshots Card Capacity Planing Cardset 1`] = ` } - > - -
- - - - - - - -
- -
- - + /> @@ -1790,165 +1632,7 @@ exports[`Storyshots Card Capacity Planing Cardset 1`] = ` } - > - -
- - - - - - - -
- -
- - + /> diff --git a/components/src/DropdownMenu/DropdownMenu.story.js b/components/src/DropdownMenu/DropdownMenu.story.js index 1014b576e..14bf4b562 100644 --- a/components/src/DropdownMenu/DropdownMenu.story.js +++ b/components/src/DropdownMenu/DropdownMenu.story.js @@ -1,12 +1,13 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, Button } from "../index"; +import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, Button, Card, Text } from "../index"; const customColors = { color: "white", hoverColor: "white", bgHoverColor: "black" }; +const cards = Array.from({ length: 100 }, (v, k) => k + 1); storiesOf("DropdownMenu", module) .add("DropdownMenu", () => ( @@ -59,4 +60,17 @@ storiesOf("DropdownMenu", module) Dropdown Link {}}>Dropdown Button + )) + .add("Many dropdowns", () => ( + <> + {cards.map(i => ( + + Card {i} + + Dropdown Link + {}}>Dropdown Button + + + ))} + )); diff --git a/components/src/DropdownMenu/DropdownMenuContainer.js b/components/src/DropdownMenu/DropdownMenuContainer.js index 368028e94..9a19c2422 100644 --- a/components/src/DropdownMenu/DropdownMenuContainer.js +++ b/components/src/DropdownMenu/DropdownMenuContainer.js @@ -30,9 +30,7 @@ const getMenuMargin = (placement, showArrow) => { } }; -const DropdownMenuContainer = styled(Box)(({ open, position, placement, showArrow, backgroundColor }) => ({ - ...position, - top: open ? 0 : "-9999px", +const DropdownMenuContainer = styled(Box)(({ dataPlacement, showArrow, backgroundColor }) => ({ backgroundColor: getThemeColor(backgroundColor), borderRadius: theme.radii.medium, borderTop: `1px solid ${getThemeColor(backgroundColor)}`, @@ -40,7 +38,7 @@ const DropdownMenuContainer = styled(Box)(({ open, position, placement, showArro boxShadow: theme.shadows.small, padding: "7px 0", zIndex: "100", - ...getMenuMargin(placement, showArrow) + ...getMenuMargin(dataPlacement, showArrow) })); DropdownMenuContainer.propTypes = { diff --git a/components/src/DropdownMenu/__snapshots__/DropdownMenu.story.storyshot b/components/src/DropdownMenu/__snapshots__/DropdownMenu.story.storyshot index 9ace4a007..ba49d3420 100644 --- a/components/src/DropdownMenu/__snapshots__/DropdownMenu.story.storyshot +++ b/components/src/DropdownMenu/__snapshots__/DropdownMenu.story.storyshot @@ -521,171 +521,37094 @@ exports[`Storyshots DropdownMenu DropdownMenu 1`] = ` } - > - + + + + + +
+ + +
+`; + +exports[`Storyshots DropdownMenu Many dropdowns 1`] = ` +
+ + + +
+ + +
+ +

+ Card + 1 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 2 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 3 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 4 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 5 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 6 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 7 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 8 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 9 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 10 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 11 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 12 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 13 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 14 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 15 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 16 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 17 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 18 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 19 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 20 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 21 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 22 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 23 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 24 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 25 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 26 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 27 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 28 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 29 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 30 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 31 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 32 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 33 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 34 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 35 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 36 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 37 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 38 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 39 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 40 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 41 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 42 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 43 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 44 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 45 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 46 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 47 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 48 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 49 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 50 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 51 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 52 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 53 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 54 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 55 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 56 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 57 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 58 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 59 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 60 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 61 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 62 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 63 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 64 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 65 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 66 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 67 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 68 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 69 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 70 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 71 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 72 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 73 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 74 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 75 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 76 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 77 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 78 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 79 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 80 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 81 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 82 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 83 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 84 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 85 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 86 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 87 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 88 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 89 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 90 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 91 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 92 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 93 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 94 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 95 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 96 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 97 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 98 +

+ + + + } + > + + + + + + + + + + + + + + + + + +
+ + +
+ +

+ Card + 99 +

+ + + + } + > + + + + + + + + + + + + + -
+
+ + +
+ +

+ Card + 100 +

+ + + + } + > + + + - - - Dropdown Link - - - + + + + + + + + + - - - - + } + /> + + + + +
+
@@ -1181,201 +38104,41 @@ exports[`Storyshots DropdownMenu Set to disabled 1`] = ` "boundariesElement": "viewport", "preventOverflow": Object { "boundariesElement": "viewport", - "enabled": true, - "padding": 8, - }, - } - } - placement="bottom-start" - positionFixed={false} - referenceElement={ - - } - > - -