diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx index a2f4a69e20..b85d2759d9 100644 --- a/src/components/accordion/accordion-test.stories.tsx +++ b/src/components/accordion/accordion-test.stories.tsx @@ -3,10 +3,13 @@ import { action } from "@storybook/addon-actions"; import { Accordion, AccordionGroup } from "."; import Textbox from "../textbox"; import Box from "../box"; +import MultiActionButton from "../multi-action-button"; +import SplitButton from "../split-button"; +import Button from "../button/button.component"; export default { title: "Accordion/Test", - includeStories: ["Default", "Grouped"], + includeStories: ["Default", "Grouped", "AccordionWithMultiAction"], parameters: { info: { disable: true }, chromatic: { @@ -112,3 +115,27 @@ export const Grouped = ({ ...args }) => ( ); Grouped.storyName = "grouped"; + +export const AccordionWithMultiAction = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +AccordionWithMultiAction.storyName = + "Accordion with MultiAction and Split Button"; diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx index a2162a225d..bedc191887 100644 --- a/src/components/accordion/accordion.pw.tsx +++ b/src/components/accordion/accordion.pw.tsx @@ -36,8 +36,11 @@ import { AccordionGroupDefault, AccordionGroupValidation, AccordionWithDefinitionList, + AccordionWithSplit, } from "./components.test-pw"; +import { additionalButton as splitAdditionalButtons } from "../../../playwright/components/split-button"; + const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 @@ -434,6 +437,21 @@ test.describe("should render Accordion component", () => { await expect(accordionTitleContainer(page)).toContainText("subtle"); await expect(accordionTitleContainer(page)).not.toContainText("subtitle"); }); + + test("should not hide the children container of SplitButton when it opens", async ({ + mount, + page, + }) => { + await mount(); + + await getDataElementByValue(page, "dropdown").click(); + + await expect(splitAdditionalButtons(page, 0)).toBeVisible(); + await expect(splitAdditionalButtons(page, 1)).toBeVisible(); + await expect(splitAdditionalButtons(page, 2)).toBeVisible(); + await expect(splitAdditionalButtons(page, 3)).toBeVisible(); + await expect(splitAdditionalButtons(page, 4)).toBeVisible(); + }); }); test.describe("should render Accordion Grouped component", () => { diff --git a/src/components/accordion/components.test-pw.tsx b/src/components/accordion/components.test-pw.tsx index e05b897e73..058ba569bc 100644 --- a/src/components/accordion/components.test-pw.tsx +++ b/src/components/accordion/components.test-pw.tsx @@ -6,6 +6,7 @@ import Button from "../button/button.component"; import { Checkbox } from "../checkbox"; import { Dl, Dt, Dd } from "../definition-list"; import Link from "../link/link.component"; +import SplitButton from "../split-button"; const errorVal = "error"; const warningVal = "warning"; @@ -550,3 +551,17 @@ export const AccordionWithDefinitionList = () => { ); }; + +export const AccordionWithSplit = () => { + return ( + + + + + + + + + + ); +}; diff --git a/src/components/multi-action-button/multi-action-button.component.tsx b/src/components/multi-action-button/multi-action-button.component.tsx index ea9321a4df..a708ab39dc 100644 --- a/src/components/multi-action-button/multi-action-button.component.tsx +++ b/src/components/multi-action-button/multi-action-button.component.tsx @@ -86,6 +86,7 @@ export const MultiActionButton = ({ : /* istanbul ignore next */ "bottom-end" } reference={buttonNode} + popoverStrategy="fixed" middleware={[ offset(6), flip({ diff --git a/src/components/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx index cf705d250b..44638574a2 100644 --- a/src/components/multi-action-button/multi-action-button.pw.tsx +++ b/src/components/multi-action-button/multi-action-button.pw.tsx @@ -106,8 +106,8 @@ test.describe("Prop tests", () => { ( [ - ["left", 0], - ["right", -46], + ["left", 198], + ["right", 152], ] as [MultiActionButtonProps["position"], number][] ).forEach(([position, value]) => { test(`should render with menu position to the ${position}`, async ({ @@ -119,7 +119,7 @@ test.describe("Prop tests", () => { const actionButton = getComponent(page, "multi-action-button"); await actionButton.click(); const listContainer = getDataElementByValue(page, "additional-buttons"); - await expect(listContainer).toHaveCSS("position", "absolute"); + await expect(listContainer).toHaveCSS("position", "fixed"); await assertCssValueIsApproximately(listContainer, "top", 46); await assertCssValueIsApproximately(listContainer, "left", value); }); diff --git a/src/components/split-button/split-button.component.tsx b/src/components/split-button/split-button.component.tsx index ba7828c67d..ef796c2247 100644 --- a/src/components/split-button/split-button.component.tsx +++ b/src/components/split-button/split-button.component.tsx @@ -182,6 +182,7 @@ export const SplitButton = ({ ? /* istanbul ignore next */ "bottom-start" : "bottom-end" } + popoverStrategy="fixed" reference={buttonNode} middleware={[ offset(6), diff --git a/src/components/split-button/split-button.pw.tsx b/src/components/split-button/split-button.pw.tsx index c237d1b3b3..d694506ba8 100644 --- a/src/components/split-button/split-button.pw.tsx +++ b/src/components/split-button/split-button.pw.tsx @@ -240,8 +240,8 @@ test.describe("Prop tests", () => { ( [ - ["left", 0], - ["right", 42], + ["left", 198], + ["right", 242], ] as [SplitButtonProps["position"], number][] ).forEach(([position, value]) => { test(`should render with menu position to the ${position}`, async ({ @@ -252,7 +252,7 @@ test.describe("Prop tests", () => { await getDataElementByValue(page, "dropdown").click(); const listContainer = additionalButtonsContainer(page); - await expect(listContainer).toHaveCSS("position", "absolute"); + await expect(listContainer).toHaveCSS("position", "fixed"); await assertCssValueIsApproximately(listContainer, "top", 46); await assertCssValueIsApproximately(listContainer, "left", value); });