feat(multi-action-button): add position prop

Adds position prop to allow consumers to specify on which side the menu is aligned to when opened.

fix #6705

src/components/multi-action-button/multi-action-button-test.stories.tsx

@@ -8,6 +8,7 @@ import {
   MULTI_ACTION_BUTTON_ALIGNMENTS,
   MULTI_ACTION_BUTTON_SIZES,
   MULTI_ACTION_BUTTON_THEMES,
+  MULTI_ACTION_BUTTON_POSITIONS,
 } from "./multi-action-button.config";
 
 export default {
@@ -38,6 +39,12 @@ export default {
         type: "select",
       },
     },
+    position: {
+      options: MULTI_ACTION_BUTTON_POSITIONS,
+      control: {
+        type: "select",
+      },
+    },
   },
 };
 

src/components/multi-action-button/multi-action-button.component.tsx

@@ -28,6 +28,7 @@ export interface MultiActionButtonProps
 
 export const MultiActionButton = ({
   align = "left",
+  position = "left",
   disabled,
   buttonType,
   size,
@@ -78,7 +79,11 @@ export const MultiActionButton = ({
 
   const renderAdditionalButtons = () => (
     <Popover
-      placement="bottom-end"
+      placement={
+        position === "left"
+          ? "bottom-start"
+          : /* istanbul ignore next */ "bottom-end"
+      }
       reference={buttonNode}
       middleware={[
         offset(6),

src/components/multi-action-button/multi-action-button.config.ts

@@ -1,3 +1,4 @@
 export const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 export const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
 export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
+export const MULTI_ACTION_BUTTON_POSITIONS = ["left", "right"];

src/components/multi-action-button/multi-action-button.mdx

@@ -59,10 +59,20 @@ Buttons used as a content of `MultiActionButton` can be of any type.
 
 <Canvas of={MultiActionButtonStories.Sizes} />
 
-### Alignment
+### Button text alignment
+
+Use the `align` prop to change the alignment of the text in the menu Buttons.
 
 <Canvas of={MultiActionButtonStories.Alignment} />
 
+### Menu position
+
+By default, the menu will open aligned to the "left" of the main button, but you can use the `position` prop to change this to the "right". 
+
+Note: The position of the menu will also be automatically adjusted to fit within the viewport.
+
+<Canvas of={MultiActionButtonStories.Position} />
+
 ### Subtext
 
 Subtext only works when `size` is `large`

src/components/multi-action-button/multi-action-button.pw.tsx

@@ -87,7 +87,7 @@ test.describe("Prop tests", () => {
 
   (["left", "right"] as MultiActionButtonProps["align"][]).forEach(
     (alignment) => {
-      test(`should render with button aligned to the ${alignment}`, async ({
+      test(`should render with button text aligned to the ${alignment}`, async ({
         mount,
         page,
       }) => {
@@ -104,6 +104,27 @@ test.describe("Prop tests", () => {
     }
   );
 
+  ([
+    ["left", 200],
+    ["right", 153],
+  ] as [MultiActionButtonProps["position"], number][]).forEach(
+    ([position, value]) => {
+      test(`should render with menu position to the ${position}`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(<MultiActionButtonList ml="200px" position={position} />);
+
+        const actionButton = getComponent(page, "multi-action-button");
+        await actionButton.click();
+        const listContainer = getDataElementByValue(page, "additional-buttons");
+        await expect(listContainer).toHaveCSS("position", "absolute");
+        await assertCssValueIsApproximately(listContainer, "top", 45);
+        await assertCssValueIsApproximately(listContainer, "left", value);
+      });
+    }
+  );
+
   test(`should render with button disabled`, async ({ mount, page }) => {
     await mount(<MultiActionButtonList disabled />);
 

src/components/multi-action-button/multi-action-button.stories.tsx

@@ -137,6 +137,26 @@ export const Alignment: Story = () => {
 Alignment.storyName = "Alignment";
 Alignment.parameters = { chromatic: { disableSnapshot: true } };
 
+export const Position: Story = () => {
+  return (
+    <Box display="flex" justifyContent="space-around">
+      <MultiActionButton position="left" text="Left position">
+        <Button href="#">Button 1 with longer text</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </MultiActionButton>
+
+      <MultiActionButton position="right" text="Right position">
+        <Button href="#">Button 1 with longer text</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </MultiActionButton>
+    </Box>
+  );
+};
+Position.storyName = "Position";
+Position.parameters = { chromatic: { disableSnapshot: true } };
+
 export const Subtext: Story = {
   ...DefaultStory,
   args: {