Repository: Sage/carbon (ts)

Issue:
Adding margin support to FlexTileCell to ensure Button focus isn't cut off at smallest screen size
### Description

When nesting a `<Button>` inside of a `<FlexTileCell>` with a  `<FlexTileDivider>` at a smaller screen size (320px) the focus indicator on the `<Button>` element is being cut off.
This feature request is to be able to align the Button including it's focus inside of the Tile content, without using additional padding. 

![Screenshot 2024-10-23 at 10 25 46](https://github.com/user-attachments/assets/09b6cad0-0a36-4bc9-a90c-a9fcde38088c)


### Suggested solution

Desired output: 
![Screenshot 2024-10-23 at 10 31 14](https://github.com/user-attachments/assets/cdc1f3e2-764e-4bca-b9c7-7a2bd97cf458)


### Demo URL

https://stackblitz.com/edit/parsium-carbon-starter-udg9rc?file=src%2FApp.tsx

### Alternatives

_No response_

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
docs(flex-tile-cell): add missing props to FlexTileCell prop table
fix #7031

### 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.
-->

Add margin, spacing, grid, layout and position props to FlexTileCell prop table. 

### 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.
-->

Missing margin, spacing, grid, layout and position props in FlexTileCell prop table. 

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] 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

<!-- 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>
-->


Patch:
diff --git a/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx b/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
index 65b551344..497fda5f9 100644
--- a/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
+++ b/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
@@ -9,8 +9,13 @@ import FlexTileCell from "./flex-tile-cell.component";
 
 const styledSystemProps = generateStyledSystemProps(
   {
+    margin: true,
     padding: true,
     flexBox: true,
+    spacing: true,
+    grid: true,
+    layout: true,
+    position: true,
   },
   { flexGrow: 1, flexShrink: 0, flexBasis: "160px" },
 );
diff --git a/src/components/tile/tile.mdx b/src/components/tile/tile.mdx
index 571851024..bc1597068 100644
--- a/src/components/tile/tile.mdx
+++ b/src/components/tile/tile.mdx
@@ -223,6 +223,8 @@ Setting the `highlightVariant` prop will add a highlight to the Tile on the left
 
 <Canvas of={TileStories.HighlightVariantInfoStory} />
 
+## Props
+
 ### Tile
 
 <ArgTypes of={TileStories} />


Test patch:
diff --git a/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx b/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
index 995d2bcef..3bbad9a75 100644
--- a/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
+++ b/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
@@ -4,10 +4,15 @@ import FlexTileCell from "./flex-tile-cell.component";
 import {
   testStyledSystemFlexBox,
   testStyledSystemPaddingRTL,
+  testStyledSystemMarginRTL,
 } from "../../../__spec_helper__/__internal__/test-utils";
 import FlexTileDivider from "../flex-tile-divider";
 
 describe("FlexTileCell", () => {
+  testStyledSystemMarginRTL(
+    (props) => <FlexTileCell {...props}>Test</FlexTileCell>,
+    () => screen.getByText("Test"),
+  );
   testStyledSystemPaddingRTL(
     (props) => <FlexTileCell {...props}>Test</FlexTileCell>,
     () => screen.getByText("Test"),