Repository: Sage/carbon (ts)

Issue:
Button Toggle Group cannot apply width adjustment
### Current behaviour

As a developer, I cannot set the width of the Buttons inside the ToggleButtonGroup component. It's also not possible to set ToggleButton Group to be full width. and set position to center if neededcentre

### Expected behaviour

As a developer, I want to be able to set the width of the ToggleButton  Inside ToggleButtonGroup and the possibility to set the position of buttons without adding extra ugly hacks 

### CodeSandbox or Storybook URL

https://codesandbox.io/s/zen-morse-4kpu2w?file=/src/index.js

### JIRA Ticket (Sage Only)

SBS-41388

### Suggested Solution

_No response_

### Carbon Version

110.1.1

### Design Tokens Version

2.40.0

### What browsers are you seeing the problem on?

Chrome, Microsoft Edge

### What Operating System are you seeing the problem on?

Windows

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
feat(button-toggle-group): surface fullWidth prop to ensure children flex to container width 
fix #5490

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes.

If applicable, add screenshots of a codesandbox to help explain your request. You can paste these directly into GitHub.

Please DO NOT share screenshots or the source code of your project.

You can create a codesandbox to show the behaviour before/after this pull request by forking this template https://codesandbox.io/s/carbon-quickstart-j5pb2

If you include a CodeSandbox link, the bot will fork it with the new built version of carbon.
If you have a commit that includes fixes #XXXX and issue #XXXX has a CodeSandbox link in the body, the bot will fork
it with the new built version of carbon.
-->

adds fullWidth prop which ensures children `ButtonToggle` components flex to full width of parent container

![image](https://user-images.githubusercontent.com/114918852/204576949-6228f82e-c642-4921-a335-bb1da1644f47.png)


### Current behaviour

<!--
A clear and concise description of the behaviour before this change.

If applicable, add screenshots. You can paste these directly into GitHub.
-->

no support for flexing `ButtonToggle` children

### 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
- [x] Cypress 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
- [x] Typescript `d.ts` file added or updated if required

#### QA

- [x] Tested in CodeSandbox/storybook
- [x] Add new Cypress test coverage if required
- [x] Carbon implementation matches Design System/designs
- [x] 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? -->

See new stories added

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by `codesandbox[bot]`.

<!-- Add CodeSandbox here -->


Patch:
diff --git a/src/components/button-toggle-group/button-toggle-group.component.tsx b/src/components/button-toggle-group/button-toggle-group.component.tsx
index c156ae4cd..f1ecb989d 100644
--- a/src/components/button-toggle-group/button-toggle-group.component.tsx
+++ b/src/components/button-toggle-group/button-toggle-group.component.tsx
@@ -41,6 +41,8 @@ export interface ButtonToggleGroupProps
   labelInline?: boolean;
   /** The percentage width of the label. */
   labelWidth?: number;
+  /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+  fullWidth?: boolean;
   /** The alignment for the text in the label. */
   labelAlign?: "left" | "right";
   /** Callback triggered by blur event on the input. */
@@ -64,6 +66,7 @@ const ButtonToggleGroup = ({
   labelHelp,
   labelSpacing,
   inputWidth,
+  fullWidth,
   fieldHelp,
   fieldHelpInline,
   labelInline,
@@ -127,6 +130,7 @@ const ButtonToggleGroup = ({
             aria-label={label}
             role="radiogroup"
             inputWidth={inputWidth}
+            fullWidth={fullWidth}
             {...validationProps}
           >
             <RadioButtonMapper
diff --git a/src/components/button-toggle-group/button-toggle-group.spec.tsx b/src/components/button-toggle-group/button-toggle-group.spec.tsx
index 28bc64f25..a3fb0758f 100644
--- a/src/components/button-toggle-group/button-toggle-group.spec.tsx
+++ b/src/components/button-toggle-group/button-toggle-group.spec.tsx
@@ -5,7 +5,10 @@ import {
   assertStyleMatch,
   testStyledSystemMargin,
 } from "../../__spec_helper__/test-utils";
-import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
+import {
+  StyledButtonToggleLabel,
+  StyledButtonToggle,
+} from "../button-toggle/button-toggle.style";
 import Label from "../../__internal__/label";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import ValidationIcon, {
@@ -70,6 +73,30 @@ describe("ButtonToggleGroup", () => {
     );
   });
 
+  describe("when fullWidth is true", () => {
+    it("renders container with flex: auto", () => {
+      const wrapper = render({ fullWidth: true });
+      assertStyleMatch(
+        {
+          flex: "auto",
+        },
+        wrapper.find(StyledButtonToggleGroup),
+        { modifier: `${StyledButtonToggle}` }
+      );
+    });
+  });
+
+  it("renders label with width: 100%", () => {
+    const wrapper = render({ fullWidth: true });
+    assertStyleMatch(
+      {
+        width: "100%",
+      },
+      wrapper.find(StyledButtonToggleGroup),
+      { modifier: `${StyledButtonToggleLabel}` }
+    );
+  });
+
   describe("children", () => {
     it("when component has an incorrect child, an error should be raised", () => {
       const consoleSpy = jest
diff --git a/src/components/button-toggle-group/button-toggle-group.stories.mdx b/src/components/button-toggle-group/button-toggle-group.stories.mdx
index fc83e3be0..3b21d2656 100644
--- a/src/components/button-toggle-group/button-toggle-group.stories.mdx
+++ b/src/components/button-toggle-group/button-toggle-group.stories.mdx
@@ -109,6 +109,35 @@ import ButtonToggleGroup from "carbon-react/lib/components/button-toggle-group";
   </Story>
 </Canvas>
 
+### With fullWidth
+
+When the `fullWidth` prop is `true`, the buttons will expand in size to take up the full width of the container.
+
+<Canvas>
+  <Story name="fullWidth" parameters={{ info: { disable: true } }}>
+    <ButtonToggleGroup
+      id="button-toggle-group-fullWidth-id"
+      name="button-toggle-group-fullWidth"
+      fullWidth
+      label="fullWidth example"
+      labelHelp="help message"
+      helpAriaLabel="Help"
+      fieldHelp="field help mesage"
+      onChange={() => {}}
+    >
+      <ButtonToggle value="foo" grouped>
+        Foo
+      </ButtonToggle>
+      <ButtonToggle value="bar" grouped>
+        Bar
+      </ButtonToggle>
+      <ButtonToggle value="baz" grouped>
+        Baz
+      </ButtonToggle>
+    </ButtonToggleGroup>
+  </Story>
+</Canvas>
+
 ### With field help inline
 
 <Canvas>
diff --git a/src/components/button-toggle-group/button-toggle-group.style.ts b/src/components/button-toggle-group/button-toggle-group.style.ts
index 9185c3938..907694c4f 100644
--- a/src/components/button-toggle-group/button-toggle-group.style.ts
+++ b/src/components/button-toggle-group/button-toggle-group.style.ts
@@ -1,16 +1,30 @@
 import styled, { css } from "styled-components";
-import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
+import {
+  StyledButtonToggleLabel,
+  StyledButtonToggle,
+} from "../button-toggle/button-toggle.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
 
 import { ButtonToggleGroupProps } from ".";
 import { ValidationProps } from "../../__internal__/validations";
 
 type StyledButtonToggleGroupProps = ValidationProps &
-  Pick<ButtonToggleGroupProps, "inputWidth">;
+  Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">;
 
 const StyledButtonToggleGroup = styled.div<StyledButtonToggleGroupProps>`
   display: flex;
 
+  ${({ fullWidth }) =>
+    fullWidth &&
+    css`
+      ${StyledButtonToggleLabel} {
+        width: 100%;
+      }
+      ${StyledButtonToggle} {
+        flex: auto;
+      }
+    `};
+
   ${({ inputWidth }) =>
     inputWidth &&
     css`


Test patch:
diff --git a/src/components/button-toggle-group/button-toggle-group.test.js b/src/components/button-toggle-group/button-toggle-group.test.js
index 95bcd45a7..df8c7173e 100644
--- a/src/components/button-toggle-group/button-toggle-group.test.js
+++ b/src/components/button-toggle-group/button-toggle-group.test.js
@@ -3,6 +3,7 @@ import ButtonToggle from "../button-toggle/button-toggle.component";
 import ButtonToggleGroup from "./button-toggle-group.component";
 import {
   buttonTogglePreview,
+  buttonToggleLabelPreview,
   buttonToggleInput,
 } from "../../../cypress/locators/button-toggle";
 import {
@@ -355,4 +356,20 @@ context("Testing Button-Toggle-Group component", () => {
         });
     });
   });
+
+  describe("should make css changes when fullWidth prop is passed", () => {
+    it("container div should auto flex", () => {
+      CypressMountWithProviders(<ButtonToggleGroupComponent fullWidth />);
+
+      buttonTogglePreview().should("have.css", "flex", "1 1 auto");
+    });
+
+    it("width of label should be 100% / 450px", () => {
+      CypressMountWithProviders(<ButtonToggleGroupComponent fullWidth />);
+
+      buttonToggleLabelPreview(1).then(($el) => {
+        useJQueryCssValueAndAssert($el, "width", 450);
+      });
+    });
+  });
 });