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 ( + <Accordion title="Accordion"> + <MultiActionButton text="Multi Action Button"> + <Button>Button 1</Button> + <Button>Button 2</Button> + <Button>Button 3</Button> + <Button>Button 4</Button> + <Button>Button 5</Button> + </MultiActionButton> + <SplitButton text="Split Button"> + <Button>Button 1</Button> + <Button>Button 2</Button> + <Button>Button 3</Button> + <Button>Button 4</Button> + <Button>Button 5</Button> + </SplitButton> + </Accordion> + ); +}; + +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 31525eb7ba..09883c149f 100644 --- a/src/components/accordion/accordion.pw.tsx +++ b/src/components/accordion/accordion.pw.tsx @@ -38,8 +38,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]; test.describe("when focused", () => { @@ -455,6 +458,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(<AccordionWithSplit />); + + 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 = () => { </Accordion> ); }; + +export const AccordionWithSplit = () => { + return ( + <Accordion expanded title="Accordion"> + <SplitButton text="Split Button"> + <Button>Button 1</Button> + <Button>Button 2</Button> + <Button>Button 3</Button> + <Button>Button 4</Button> + <Button>Button 5</Button> + </SplitButton> + </Accordion> + ); +}; 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/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),