Skip to content

Commit

Permalink
fix: ensure multi-action and split button children container is not h…
Browse files Browse the repository at this point in the history
…idden 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
  • Loading branch information
edleeks87 committed Dec 17, 2024
1 parent e2c1dd9 commit 0bb8fd0
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 1 deletion.
29 changes: 28 additions & 1 deletion src/components/accordion/accordion-test.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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";
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export const MultiActionButton = ({
: /* istanbul ignore next */ "bottom-end"
}
reference={buttonNode}
popoverStrategy="fixed"
middleware={[
offset(6),
flip({
Expand Down
1 change: 1 addition & 0 deletions src/components/split-button/split-button.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ export const SplitButton = ({
? /* istanbul ignore next */ "bottom-start"
: "bottom-end"
}
popoverStrategy="fixed"
reference={buttonNode}
middleware={[
offset(6),
Expand Down

0 comments on commit 0bb8fd0

Please sign in to comment.