Repository: Sage/carbon (ts)

Issue:
Progress tracker oversized by 2px when using 100% width
### Description

I'm trying to set the progress tracker length property to '100%' so it dynamically sized to the box I'm adding it to, I expect this to look fine however the bar overruns by 2px when I do this:
![image](https://github.com/Sage/carbon/assets/155455220/a0f2c0f9-b27e-48c8-92aa-ce7e6919a746)

Looking at the carbon code it looks like the 1px border isn't being factored in when width is 100%.

### Reproduction

https://carbon.sage.com/?path=/story/progress-tracker--size-small

### Steps to reproduce

Inspect element on the progress bar, and toggle the width: 100% css property to see the length slightly change (2px difference)

### JIRA ticket numbers (Sage only)

SBS-89576

### Suggested solution

Adding box-sizing: border-box would make the border be included in the total width, this will affect the height of the bar however so that may need to be readjusted to correct for this

### Carbon version

135.1.1 but works on latest storybook

### Design tokens version

4.29.0

### 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(progress-tracker): apply box sizing of border box to the inner styled bar - FE-6672
Currently the progress tracker's border is being cut off when contained inside a FlexTile component. This applies a `box-sizing` of `border-box` to the inner styled bar. The height has also had to be re-calculated due to a 2px reduction in height because of the `box-sizing` styling. To solve this we have used a `min-height` of `fit-content`

fixes #6779

### Proposed behaviour

![Screenshot 2024-06-26 at 15 32 36](https://github.com/Sage/carbon/assets/56251247/496e6b41-7669-4339-a204-38b336b55852)

### Current behaviour

![Screenshot 2024-06-26 at 15 33 08](https://github.com/Sage/carbon/assets/56251247/9a08b96f-d42b-4166-b3b8-480b31f910bb)

### 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
- [x] All themes are supported if required
- [x] 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

N/A

### Testing instructions

- Check for any regressions on `Progress Tracker`
- Added a new story in the test folder called `inside flex tile` which demonstrates this fixed inside of a flex tile. 


Patch:
diff --git a/src/components/progress-tracker/progress-tracker.spec.tsx b/src/components/progress-tracker/progress-tracker.spec.tsx
index a5436df7d..03eb350b9 100644
--- a/src/components/progress-tracker/progress-tracker.spec.tsx
+++ b/src/components/progress-tracker/progress-tracker.spec.tsx
@@ -207,11 +207,11 @@ describe("ProgressTracker", () => {
       );
     });
 
-    it("applies proper width and height to outer bar", () => {
+    it("applies proper width and min-height to outer bar", () => {
       assertStyleMatch(
         {
           width: "100%",
-          height: "var(--sizing200)",
+          minHeight: "fit-content",
         },
         wrapper.find(StyledProgressBar)
       );
diff --git a/src/components/progress-tracker/progress-tracker.style.ts b/src/components/progress-tracker/progress-tracker.style.ts
index a04411ba1..cb37896e8 100644
--- a/src/components/progress-tracker/progress-tracker.style.ts
+++ b/src/components/progress-tracker/progress-tracker.style.ts
@@ -59,12 +59,13 @@ const StyledProgressBar = styled.span<
     position: relative;
     background-color: var(--colorsSemanticNeutral200);
     border: 1px solid ${getBorderColour({ progress, error })};
-    border-radius: ${theme.roundedCornersOptOut
-      ? "25px"
-      : "var(--borderRadius400)"};
+    border-radius: ${
+      theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"
+    };
     overflow-x: hidden;
-    height: ${getHeight(size)};
-    width: 100%;
+    width: 100%
+    min-height: fit-content;
+    box-sizing: border-box;
   `}
 `;
 


Test patch:
diff --git a/src/components/progress-tracker/progress-tracker-test.stories.tsx b/src/components/progress-tracker/progress-tracker-test.stories.tsx
index ccbbff096..45475917a 100644
--- a/src/components/progress-tracker/progress-tracker-test.stories.tsx
+++ b/src/components/progress-tracker/progress-tracker-test.stories.tsx
@@ -1,11 +1,17 @@
 import React from "react";
 import ProgressTracker, { ProgressTrackerProps } from ".";
 import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+import {
+  FlexTileCell,
+  FlexTileContainer,
+  FlexTileDivider,
+  Tile,
+} from "../tile";
 
 export default {
   component: ProgressTracker,
   title: "Progress Tracker/Test",
-  includeStories: ["Default", "LeftLabelWithLabelWidth"],
+  includeStories: ["Default", "LeftLabelWithLabelWidth", "InsideFlexTile"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -91,3 +97,26 @@ LeftLabelWithLabelWidth.parameters = {
 export const ProgressTrackerComponent = (props: ProgressTrackerProps) => {
   return <ProgressTracker progress={50} showDefaultLabels {...props} />;
 };
+
+export const InsideFlexTile = () => {
+  return (
+    <Tile m={0} py={0}>
+      <FlexTileContainer>
+        <FlexTileCell py={2}>
+          <FlexTileDivider />
+          <ProgressTracker
+            length="100%"
+            progress={50}
+            currentProgressLabel="Step 3"
+            maxProgressLabel="5"
+          />
+        </FlexTileCell>
+      </FlexTileContainer>
+    </Tile>
+  );
+};
+
+InsideFlexTile.storyName = "inside flex tile";
+InsideFlexTile.parameters = {
+  themeProvider: { chromatic: { disableSnapshot: false } },
+};