From e215c21fd12069a68878134d018d76c674a47a0e Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Tue, 17 Dec 2024 16:01:18 +0000 Subject: [PATCH] fix: ensure multi-action and split button children container is not hidden by parent overflow Ensures that the child container has fixed position so that it isn't hidden when rendered inside a parent with overflow hidden fix #7134 --- .../accordion/accordion-test.stories.tsx | 29 ++++++++++++++++++- src/components/accordion/accordion.pw.tsx | 18 ++++++++++++ .../accordion/components.test-pw.tsx | 15 ++++++++++ .../multi-action-button.component.tsx | 1 + .../multi-action-button.pw.tsx | 6 ++-- .../split-button/split-button.component.tsx | 1 + .../split-button/split-button.pw.tsx | 6 ++-- 7 files changed, 69 insertions(+), 7 deletions(-) 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 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(); + + 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 beab48c96c..d08fa73c54 100644 --- a/src/components/multi-action-button/multi-action-button.pw.tsx +++ b/src/components/multi-action-button/multi-action-button.pw.tsx @@ -107,8 +107,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 ({ @@ -120,7 +120,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 d28fe2814e..f1d521815b 100644 --- a/src/components/split-button/split-button.pw.tsx +++ b/src/components/split-button/split-button.pw.tsx @@ -264,8 +264,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 ({ @@ -276,7 +276,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); });