Repository: Sage/carbon (ts)

Issue:
Badge appears under MultiActionButton
### Description

Hello,

The Badge component interacts differently with a MultiActionButton than it does with a regular Button

With a Button the Badge appears correctly **over** it
With a MultiActionButton the Badge appears **under** it

![image](https://github.com/Sage/carbon/assets/109949759/186097d8-7727-444b-ba30-95bab5c9b3e5)

I think it should always appear over the component

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-2zetxs?file=src%2FApp.tsx

### Steps to reproduce

Use a Badge component with a MultiActionButton

### JIRA ticket numbers (Sage only)

SBS-99460

### Suggested solution

I have not found any workaround

### Carbon version

136.0.3

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
fix(badge): ensure badge does not appear under child components
fix #6765

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

Badge appears over child components. 

![Screenshot 2024-10-10 at 13 21 39](https://github.com/user-attachments/assets/932b00aa-d863-47c7-8e94-a1d92cce4799)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

Badge appears underneath child components. 

![Screenshot 2024-10-10 at 13 21 28](https://github.com/user-attachments/assets/ab7a8666-12b1-4ab3-8318-2cf0a571c08f)

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] 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
- [x] 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

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->

- See [Stackblitz demo](https://stackblitz.com/edit/parsium-carbon-starter-48nazj?file=src%2FApp.tsx) for issues. 
- See new "With Other Buttons" test story. 


Patch:
diff --git a/src/components/badge/badge.component.tsx b/src/components/badge/badge.component.tsx
index f05acc722..0ef222997 100644
--- a/src/components/badge/badge.component.tsx
+++ b/src/components/badge/badge.component.tsx
@@ -78,8 +78,8 @@ export const Badge = ({
 
   return (
     <StyledBadgeWrapper>
-      {renderCorrectBadge()}
       {children}
+      {renderCorrectBadge()}
     </StyledBadgeWrapper>
   );
 };
diff --git a/src/components/badge/badge.style.ts b/src/components/badge/badge.style.ts
index 069b3e20a..b5cc5fb6a 100644
--- a/src/components/badge/badge.style.ts
+++ b/src/components/badge/badge.style.ts
@@ -44,6 +44,7 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
   width: 22px;
   min-height: 22px;
   border: solid 2px transparent;
+  z-index: 2;
 
   ${({ color, theme }) => css`
     border-color: ${toColor(theme, color)};


Test patch:
diff --git a/src/components/badge/badge-test.stories.tsx b/src/components/badge/badge-test.stories.tsx
index b5447e3cf..ea69a8372 100644
--- a/src/components/badge/badge-test.stories.tsx
+++ b/src/components/badge/badge-test.stories.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import Badge, { BadgeProps } from "./badge.component";
+import Badge from ".";
 import Box from "../box";
 import Button from "../button";
+import MultiActionButton from "../multi-action-button";
+import SplitButton from "../split-button";
 
 export default {
   title: "Badge/Test",
@@ -31,6 +33,8 @@ export const DefaultStory = ({ counter, ...args }: BadgeStoryProps) => {
     </div>
   );
 };
+DefaultStory.storyName = "default";
+DefaultStory.args = { counter: 1, color: "--colorsActionMajor500" };
 
 export const DisplayOnlyStory = ({ counter, ...args }: BadgeStoryProps) => {
   return (
@@ -43,21 +47,29 @@ export const DisplayOnlyStory = ({ counter, ...args }: BadgeStoryProps) => {
     </Box>
   );
 };
-
-DefaultStory.storyName = "default";
-DefaultStory.args = { counter: 1, color: "--colorsActionMajor500" };
-
 DisplayOnlyStory.storyName = "display only";
 DisplayOnlyStory.args = { counter: 1, color: "--colorsActionMajor500" };
 
-export const BadgeComponent = (props: Partial<BadgeProps>) => {
+export const WithOtherButtons = () => {
   return (
-    <Box margin="40px">
-      <Badge {...props}>
-        <Button mr={0} buttonType="tertiary">
-          Filter
-        </Button>
+    <>
+      <Badge counter={2} onClick={() => {}}>
+        <MultiActionButton text="Multi action">
+          <Button onClick={() => {}}>Action</Button>
+          <Button onClick={() => {}}>Action</Button>
+        </MultiActionButton>
       </Badge>
-    </Box>
+
+      <Badge counter={2} onClick={() => {}}>
+        <SplitButton text="Split button">
+          <Button href="#">Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </SplitButton>
+      </Badge>
+    </>
   );
 };
+WithOtherButtons.parameters = {
+  chromatic: { disableSnapshot: false },
+};