feat(split-button): update component with fusion design system - FE-7244

[DipperTheDan]

Proposed behaviour

Current behaviour

Component is currently out of sync with Fusion DS

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

N/A

Testing instructions

Designs and specs should match that of the designs on the ticket.

[Copilot]

Warning

• Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Updates Carbon’s SplitButton implementation to align with the Fusion design system by migrating it onto the __next__ Button + PopoverMenu stack, simplifying supported variants, and updating docs/stories/tests to reflect the new behavior.

Changes:

• Migrates SplitButton to PopoverMenu + button/__next__, adds menuWidth, and drops legacy secondary/white styling support (with related styling and behavior updates).
• Refreshes Storybook MDX + stories and adjusts Jest + Playwright coverage to match the new interaction model (focus behavior, overflow container behavior, positioning, custom width).
• Extends shared internals (PopoverMenu) and related components (__next__/Button, MultiActionButton) to support the updated menu/button interaction patterns.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/split-button/split-button.component.tsx	Core migration to PopoverMenu, adds menuWidth, deprecates legacy props, and updates open/close + focus behavior.
src/components/split-button/split-button.style.ts	Aligns styling with Fusion tokens and adds wrappers/backdrop styling used by the new implementation.
src/components/split-button/split-button-toggle.style.ts	Updates toggle styling to work with __next__ button styling/tokens and the new displayed/disabled states.
src/components/split-button/split-button.config.ts	Restricts supported themes to primary only.
src/components/split-button/split-button.test.tsx	Updates unit tests for new behavior; adds coverage for container anchoring and custom menu width; removes legacy variant/style assertions.
src/components/split-button/split-button.pw.tsx	Adds/updates Playwright coverage for overflow container behavior and adjusts a11y assertions to target the open menu.
src/components/split-button/split-button.stories.tsx	Updates stories to use __next__ Button API and removes legacy variant/align/position/subtext stories in favor of current behavior.
src/components/split-button/split-button-test.stories.tsx	Updates test stories/controls for the new API and adds an overflow-container scenario story.
src/components/split-button/split-button-interaction.stories.tsx	Updates interaction stories to match the new defaults and adds an overflow-container interaction case.
src/components/split-button/split-button.mdx	Updates docs to state primary-only support, removes legacy sections, and documents custom menu width usage.
src/components/split-button/split-button-children.style.ts	Removes the legacy children container styling (replaced by PopoverMenu approach).
src/components/button/next/button.component.tsx	Adds SplitButton-specific context handling so child buttons can close the menu and restore focus consistently.
src/internal/popover-menu/popover-menu.component.tsx	Adds matchReferenceWidth and popoverStrategy to support SplitButton sizing/positioning needs.
src/components/multi-action-button/multi-action-button.test.tsx	Adds regression coverage around focus movement and open/close behavior while already open.
src/components/multi-action-button/multi-action-button.style.ts	Inlines borderRadiusStyling previously sourced from SplitButton’s removed styles.
skills/carbon-react/components/split-button.md	Skills documentation updated (content excluded by policy).
skills/carbon-react/components/multi-action-button.md	Skills documentation updated (content excluded by policy).

Files excluded by content exclusion policy (2)

• skills/carbon-react/components/multi-action-button.md
• skills/carbon-react/components/split-button.md

Suppressed comments (1)

src/components/split-button/split-button.component.tsx:63

• issue: The JSDoc for position says it "Sets the alignment of the rendered content", but the prop actually controls menu placement (left/right) via Floating UI placement. Please update the comment to match the behavior to avoid misleading consumers.

  /**
   * @deprecated This prop is deprecated and will be removed in a future release.
   * Sets the alignment of the rendered content */
  position?: "left" | "right";

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[ibutakova]

Looks this description is for 'align' prop, whether placement controls the menu placement. Could you check and fix?