Repository: Sage/carbon (ts)

Issue:
ButtonToggleGroup: button toggles with different text sizes do not wrap uniformly
### Description

Have 3 ButtonToggles with different text sizes and reduce the screen size resulting in the ButtonToggleGroup wrapping. It will be seen the button don't align uniformly as would be expected.

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-4fgmqg?file=src%2FApp.tsx,package.json

### Steps to reproduce

Reduce the screen width so the button toggles start wrapping

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

134.0.4

### Design tokens version

_No response_

### Relevant browsers

Microsoft Edge

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(button-toggle): long text overflows button and update large icon padding
fix #6799

### 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.
-->

- Padding of `ButtonToggle` with a large icon is aligned with designs. 
- Small con size is 20px.
- When a `ButtonToggle` with long text content wraps in smaller screens, the button's height is adjusted to fit the wrapped text and is centre aligned. 
<img width="159" alt="Screenshot 2024-07-15 at 10 40 04" src="https://github.com/user-attachments/assets/4a6a816d-8129-4e56-806e-502c238bedf7">

### 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.
-->

- Padding of `ButtonToggle` with a large icon is not aligned with designs. 
- Small icon size is 24px. 
- When a `ButtonToggle` with long text content wraps in smaller screens, the text overflows the button and is not centre aligned. 
<img width="159" alt="Screenshot 2024-07-15 at 10 42 29" src="https://github.com/user-attachments/assets/4521e68f-6be4-4e07-bc09-3ef90c5d0866">


### 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
- [x] Unit tests added or updated if required
- [x] 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. -->

- "Wrapped Buttons" story is intended to have more wrapped buttons in the Chromatic snapshot, this done to capture this specific behaviour. 

### 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 added "Large Icon With Long Text" test story for bug fix. 

Patch:
diff --git a/src/components/button-toggle/button-toggle.mdx b/src/components/button-toggle/button-toggle.mdx
index 5af6828de..8dab5fd58 100644
--- a/src/components/button-toggle/button-toggle.mdx
+++ b/src/components/button-toggle/button-toggle.mdx
@@ -49,14 +49,14 @@ import {
 
 ### With aria-label
 
-If you do not want a visible label to appear above the group, you should use the aria-label prop to give it a non-visible
-accessible name to be used by screen readers. Failure to do this will result in accessibility violations.
+If you do not want a visible label to appear above the group, you should pass the `aria-label` prop to `ButtonToggleGroup` to give it an
+accessible name to be announced by screen readers. Failure to do this will result in accessibility violations.
 
 <Canvas of={ButtonToggleStories.AriaLabel} />
 
 ### With fullWidth
 
-When the `fullWidth` prop is `true`, the buttons will expand in size to take up the full width of the container.
+When the `fullWidth` prop is `true`, the buttons will expand in size to evenly take up the full width of the container. 
 
 <Canvas of={ButtonToggleStories.FullWidth} />
 
@@ -79,7 +79,8 @@ If you use this, you should include text in the `inputHint` prop which makes cle
 
 ### Icon only
 
-While we do not advocate the use of icon-only buttons for accessibility reasons, the `aria-label` or `aria-labelledby` props can be used with `buttonIcon` so assistive techniques are aware of the action that will be taken when the component pressed.
+While we do not advocate the use of icon-only buttons for accessibility reasons, the `aria-label` or `aria-labelledby` props can be passed to  
+an icon-only `ButtonToggle` so that assistive technology users are aware of the action that will be taken when the button is pressed.
 
 <Canvas of={ButtonToggleStories.IconOnly} />
 
@@ -117,7 +118,8 @@ While we do not advocate the use of icon-only buttons for accessibility reasons,
 
 ### Wrapped Group
 
-Buttons will wrap onto the next line in smaller screens.
+When buttons can no longer fit in a single row, they will wrap onto the next line.
+The `fullWidth` prop can provide a more consistent layout across different screen sizes, so we recommend using it if buttons are likely to wrap in smaller screens. 
 
 <Canvas of={ButtonToggleStories.WrappedButtons} />
 
diff --git a/src/components/button-toggle/button-toggle.pw.tsx b/src/components/button-toggle/button-toggle.pw.tsx
index 0628d3062..2bc042e02 100644
--- a/src/components/button-toggle/button-toggle.pw.tsx
+++ b/src/components/button-toggle/button-toggle.pw.tsx
@@ -227,22 +227,25 @@ test.describe("Prop tests", () => {
   });
 
   ([
-    [SIZE.SMALL, 24],
-    [SIZE.MEDIUM, 32],
-    [SIZE.LARGE, 40],
-  ] as [ButtonToggleProps["size"], number][]).forEach(([size, height]) => {
-    test(`should render with height ${height} when size prop is ${size}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <ButtonToggleComponent size={size}> {size}</ButtonToggleComponent>
-      );
+    [SIZE.SMALL, 24, 8],
+    [SIZE.MEDIUM, 32, 8],
+    [SIZE.LARGE, 40, 12],
+  ] as [ButtonToggleProps["size"], number, number][]).forEach(
+    ([size, height, padding]) => {
+      test(`should render button with height ${height} and padding ${padding} when size is ${size}`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <ButtonToggleComponent size={size}>{size}</ButtonToggleComponent>
+        );
 
-      const buttonPreview = buttonTogglePreview(page).nth(0);
-      await assertCssValueIsApproximately(buttonPreview, "height", height);
-    });
-  });
+        const firstButton = buttonToggleButton(page).nth(0);
+        await expect(firstButton).toHaveCSS("min-height", `${height}px`);
+        await expect(firstButton).toHaveCSS("padding", `0px ${padding}px`);
+      });
+    }
+  );
 
   (["add", "share", "tick"] as const).forEach((type) => {
     test(`should render with ${type} icon`, async ({ mount, page }) => {
@@ -258,24 +261,53 @@ test.describe("Prop tests", () => {
   });
 
   ([
-    [SIZE.SMALL, "small"],
-    [SIZE.LARGE, "large"],
-  ] as [ButtonToggleProps["buttonIconSize"], string][]).forEach(
-    ([iconSize, actualSize]) => {
-      test(`should render with icon size ${iconSize}`, async ({
+    [SIZE.SMALL, 72, "8px"],
+    [SIZE.MEDIUM, 88, "8px 12px 0px"],
+    [SIZE.LARGE, 120, "8px 24px"],
+  ] as [ButtonToggleProps["size"], number, string][]).forEach(
+    ([size, height, padding]) => {
+      test(`should render button with height ${height} and padding ${padding} when size is ${size} and buttonIconSize is large`, async ({
         mount,
         page,
       }) => {
         await mount(
-          <ButtonToggleComponent buttonIcon="tick" buttonIconSize={iconSize}>
-            {" "}
-            {iconSize}
+          <ButtonToggleComponent
+            buttonIcon="tick"
+            buttonIconSize="large"
+            size={size}
+          >
+            {size}
+          </ButtonToggleComponent>
+        );
+
+        const firstButton = buttonToggleButton(page).nth(0);
+        await expect(firstButton).toHaveCSS("min-height", `${height}px`);
+        await expect(firstButton).toHaveCSS("padding", `${padding}`);
+      });
+    }
+  );
+
+  ([
+    [SIZE.SMALL, 20],
+    [SIZE.LARGE, 32],
+  ] as [ButtonToggleProps["buttonIconSize"], number][]).forEach(
+    ([buttonIconSize, value]) => {
+      test(`should render icon with height and width ${value} when buttonIconSize is ${buttonIconSize}`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <ButtonToggleComponent
+            buttonIcon="tick"
+            buttonIconSize={buttonIconSize}
+          >
+            {buttonIconSize}
           </ButtonToggleComponent>
         );
 
-        const buttonIcon = icon(page).nth(0);
-        await expect(buttonIcon).toHaveAttribute("font-size", actualSize);
-        await expect(buttonIcon).toHaveAttribute("type", "tick");
+        const firstIcon = icon(page).nth(0);
+        await expect(firstIcon).toHaveCSS("height", `${value}px`);
+        await expect(firstIcon).toHaveCSS("width", `${value}px`);
       });
     }
   );
diff --git a/src/components/button-toggle/button-toggle.stories.tsx b/src/components/button-toggle/button-toggle.stories.tsx
index 86ddc5d7e..e491b06c2 100644
--- a/src/components/button-toggle/button-toggle.stories.tsx
+++ b/src/components/button-toggle/button-toggle.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react";
-
+import isChromatic from "../../../.storybook/isChromatic";
 import { ButtonToggle, ButtonToggleGroup } from ".";
 import Box from "../box";
 
@@ -13,6 +13,8 @@ const meta: Meta<typeof ButtonToggle> = {
 export default meta;
 type Story = StoryObj<typeof ButtonToggle>;
 
+const inChromatic = isChromatic();
+
 export const Default: Story = () => {
   return (
     <Box margin={4} width="250px" display="flex" flexWrap="nowrap">
@@ -378,11 +380,12 @@ export const DisabledGroup: Story = () => (
 DisabledGroup.storyName = "Disabled Group";
 
 export const WrappedButtons: Story = () => (
-  <Box width="350px" display="flex" flexWrap="nowrap">
+  <Box width={inChromatic ? "175px" : "375px"} display="flex" flexWrap="nowrap">
     <ButtonToggleGroup
       m={4}
       id="button-toggle-group-wrapped-id"
       label="Wrapped Group"
+      fullWidth
     >
       <ButtonToggle value="add" buttonIcon="add">
         Add
diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts
index 01879fde7..61563a1b9 100644
--- a/src/components/button-toggle/button-toggle.style.ts
+++ b/src/components/button-toggle/button-toggle.style.ts
@@ -31,9 +31,9 @@ const heightLargeIconConfig = {
 };
 
 const paddingLargeIconConfig = {
-  small: 24,
-  medium: 40,
-  large: 48,
+  small: "var(--spacing100)",
+  medium: "var(--spacing100) var(--spacing150) var(--spacing000)",
+  large: "var(--spacing100) var(--spacing300)",
 };
 
 const StyledButtonToggleContentWrapper = styled.div`
@@ -74,16 +74,18 @@ const StyledButtonToggle = styled.button<StyledButtonToggleProps>`
   font-weight: 700;
   background-color: transparent;
   cursor: pointer;
-  text-align: start;
+  text-align: center;
   color: var(--colorsActionMinor500);
   border: none;
 
   ${StyledIcon} {
     color: var(--colorsActionMinor500);
+    height: var(--sizing250);
+    width: var(--sizing250);
   }
 
   ${({ size }) => css`
-    height: ${heightConfig[size]}px;
+    min-height: ${heightConfig[size]}px;
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
   `}
@@ -92,8 +94,8 @@ const StyledButtonToggle = styled.button<StyledButtonToggleProps>`
     buttonIcon &&
     buttonIconSize === "large" &&
     css`
-      height: ${heightLargeIconConfig[size]}px;
-      padding: 0 ${paddingLargeIconConfig[size]}px;
+      min-height: ${heightLargeIconConfig[size]}px;
+      padding: ${paddingLargeIconConfig[size]};
       flex-direction: column;
     `}  
     
@@ -149,11 +151,6 @@ const StyledButtonToggle = styled.button<StyledButtonToggleProps>`
     `}
 `;
 
-const iconFontSizes = {
-  smallIcon: 20,
-  largeIcon: 32,
-};
-
 export interface StyledButtonToggleIconProps {
   /** Sets the size of the buttonIcon (eg. large) */
   buttonIconSize?: ButtonToggleIconSizes;
@@ -166,17 +163,20 @@ const StyledButtonToggleIcon = styled.div<StyledButtonToggleIconProps>`
     buttonIconSize === "large" &&
     css`
       margin-right: 0;
+
       ${StyledIcon} {
         margin-left: 0;
         margin-right: 0;
         margin-bottom: 8px;
-        height: ${`${iconFontSizes.largeIcon}px`};
-        width: ${`${iconFontSizes.largeIcon}px`};
+        height: var(--sizing400);
+        width: var(--sizing400);
       }
+
       ${StyledIcon}::before {
-        font-size: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
-        line-height: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
+        font-size: var(--sizing400);
+        line-height: var(--sizing400);
       }
+
       .carbon-icon__svg--credit-card-slash {
         margin-left: 6px;
       }
diff --git a/src/components/time/time.pw.tsx b/src/components/time/time.pw.tsx
index 6759c8604..ea8aa9f42 100644
--- a/src/components/time/time.pw.tsx
+++ b/src/components/time/time.pw.tsx
@@ -90,7 +90,7 @@ test.describe("Time component", () => {
     });
   });
 
-  test("should render with required attribute set on inputs and `*` after legened element", async ({
+  test("should render with required attribute set on inputs and `*` after legend element", async ({
     mount,
     page,
   }) => {


Test patch:
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
index bac68c618..850b38292 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
@@ -40,90 +40,3 @@ export const DefaultStory = () => {
 };
 
 DefaultStory.storyName = "default";
-
-export const ButtonToggleGroupComponent = ({ ...props }) => {
-  return (
-    <div>
-      <ButtonToggleGroup
-        id="button-toggle-group-default-id"
-        label="Default example"
-        labelHelp="help message"
-        helpAriaLabel="Help"
-        fieldHelp="field help message"
-        onChange={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        <ButtonToggle key="foo" value="foo">
-          Foo
-        </ButtonToggle>
-        <ButtonToggle key="bar" value="bar">
-          Bar
-        </ButtonToggle>
-        <ButtonToggle key="baz" value="baz">
-          Baz
-        </ButtonToggle>
-      </ButtonToggleGroup>
-    </div>
-  );
-};
-
-export const WithOutsideButtons = () => {
-  const [value, setValue] = useState<string>();
-  function onChangeHandler(
-    event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
-  ) {
-    setValue(selectedValue);
-    action("value set")(selectedValue);
-  }
-  return (
-    <>
-      <button type="button" id="button-before">
-        button before
-      </button>
-      <ButtonToggleGroup
-        id="button-toggle-group"
-        label="Button Toggle Group test"
-        onChange={onChangeHandler}
-        value={value}
-      >
-        <ButtonToggle value="foo">Foo</ButtonToggle>
-        <ButtonToggle value="bar">Bar</ButtonToggle>
-        <ButtonToggle value="baz">Baz</ButtonToggle>
-      </ButtonToggleGroup>
-      <button type="button" id="button-after">
-        button after
-      </button>
-    </>
-  );
-};
-
-export const ButtonToggleGroupComponentGroupedChildren = ({ ...props }) => {
-  return (
-    <div>
-      <ButtonToggleGroup
-        id="button-toggle-group-default-id"
-        label="Default example"
-        labelHelp="help message"
-        helpAriaLabel="Help"
-        fieldHelp="field help message"
-        onChange={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        <ButtonToggle key="foo" value="foo" grouped>
-          Foo
-        </ButtonToggle>
-        <ButtonToggle key="bar" value="bar" grouped>
-          Bar
-        </ButtonToggle>
-        <ButtonToggle key="baz" value="baz" grouped>
-          Baz
-        </ButtonToggle>
-      </ButtonToggleGroup>
-    </div>
-  );
-};
diff --git a/src/components/button-toggle/button-toggle-test.stories.tsx b/src/components/button-toggle/button-toggle-test.stories.tsx
index abcbaec86..a0252f7db 100644
--- a/src/components/button-toggle/button-toggle-test.stories.tsx
+++ b/src/components/button-toggle/button-toggle-test.stories.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { ButtonToggle, ButtonToggleGroup, ButtonToggleProps } from ".";
+import Box from "../box";
 
 export default {
   title: "Button Toggle/Test",
-  includeStories: ["DefaultStory", "WithoutGroup"],
+  includeStories: ["DefaultStory", "WithoutGroup", "LargeIconWithLongText"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -32,10 +33,34 @@ export default {
         type: "boolean",
       },
     },
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select",
+      },
+    },
+    buttonIcon: {
+      options: ["", "add", "edit", "delete"],
+      control: {
+        type: "select",
+      },
+    },
+    buttonIconSize: {
+      options: ["small", "large"],
+      control: {
+        type: "select",
+      },
+    },
   },
 };
 
-export const DefaultStory = ({ ...args }) => {
+export const DefaultStory = ({
+  children,
+  size,
+  buttonIcon,
+  buttonIconSize,
+  ...args
+}: Partial<ButtonToggleProps>) => {
   const [value, setValue] = useState<string | undefined>("");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
@@ -53,13 +78,43 @@ export const DefaultStory = ({ ...args }) => {
       value={value}
       {...args}
     >
-      <ButtonToggle value="foo">Foo</ButtonToggle>
-      <ButtonToggle value="bar">Bar</ButtonToggle>
-      <ButtonToggle value="baz">Baz</ButtonToggle>
+      <ButtonToggle
+        value="foo"
+        size={size}
+        buttonIcon={buttonIcon}
+        buttonIconSize={buttonIconSize}
+      >
+        {children}
+      </ButtonToggle>
+      <ButtonToggle
+        value="bar"
+        size={size}
+        buttonIcon={buttonIcon}
+        buttonIconSize={buttonIconSize}
+      >
+        Bar
+      </ButtonToggle>
+      <ButtonToggle
+        value="baz"
+        size={size}
+        buttonIcon={buttonIcon}
+        buttonIconSize={buttonIconSize}
+      >
+        Baz
+      </ButtonToggle>
     </ButtonToggleGroup>
   );
 };
 
+DefaultStory.story = {
+  args: {
+    children: "Foo",
+    size: "medium",
+    buttonIcon: "",
+    buttonIconSize: "",
+  },
+};
+
 export const WithoutGroup = (args: Partial<ButtonToggleProps>) => (
   <div>
     <ButtonToggle
@@ -105,74 +160,38 @@ WithoutGroup.argTypes = {
   },
 };
 
-export const ButtonToggleGroupComponent = ({ ...props }) => {
+export const LargeIconWithLongText = () => {
   return (
-    <div>
-      <ButtonToggleGroup
-        id="button-toggle-group-default-id"
-        label="Default example"
-        labelHelp="help message"
-        helpAriaLabel="Help"
-        fieldHelp="field help message"
-        onChange={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        <ButtonToggle key="foo" value="foo">
-          Foo
+    <Box width="135px">
+      <ButtonToggleGroup id="button-toggle-group" fullWidth>
+        <ButtonToggle
+          value="foo"
+          size="large"
+          buttonIcon="add"
+          buttonIconSize="large"
+        >
+          First button with long text
         </ButtonToggle>
-        <ButtonToggle key="bar" value="bar">
+        <ButtonToggle
+          value="bar"
+          size="large"
+          buttonIcon="add"
+          buttonIconSize="large"
+        >
           Bar
         </ButtonToggle>
-        <ButtonToggle key="baz" value="baz">
+        <ButtonToggle
+          value="baz"
+          size="large"
+          buttonIcon="add"
+          buttonIconSize="large"
+        >
           Baz
         </ButtonToggle>
       </ButtonToggleGroup>
-    </div>
+    </Box>
   );
 };
-
-export const ButtonToggleComponent = ({
-  // eslint-disable-next-line react/prop-types
-  children = "This is an example of an alert",
-  ...props
-}: ButtonToggleProps) => {
-  return (
-    <div>
-      <ButtonToggle
-        onBlur={function noRefCheck() {
-          ("");
-        }}
-        onFocus={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        {children}
-      </ButtonToggle>
-      <ButtonToggle
-        onBlur={function noRefCheck() {
-          ("");
-        }}
-        onFocus={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        Second
-      </ButtonToggle>
-      <ButtonToggle
-        onBlur={function noRefCheck() {
-          ("");
-        }}
-        onFocus={function noRefCheck() {
-          ("");
-        }}
-        {...props}
-      >
-        Third
-      </ButtonToggle>
-    </div>
-  );
+LargeIconWithLongText.parameters = {
+  chromatic: { disableSnapshot: false },
 };
diff --git a/src/components/button-toggle/button-toggle.test.tsx b/src/components/button-toggle/button-toggle.test.tsx
index 6aedfeaac..c64dd0997 100644
--- a/src/components/button-toggle/button-toggle.test.tsx
+++ b/src/components/button-toggle/button-toggle.test.tsx
@@ -148,7 +148,7 @@ test("should render with expected styles when buttonIcon is set", () => {
   });
 });
 
-test("should render with expected styles when buttonIcon is set and buttonIconSize ia large'", () => {
+test("should render with expected styles when buttonIcon is set and buttonIconSize is large'", () => {
   render(
     <ButtonToggle buttonIcon="add" buttonIconSize="large">
       Button
@@ -159,13 +159,12 @@ test("should render with expected styles when buttonIcon is set and buttonIconSi
     marginRight: "0",
   });
   expect(screen.getByTestId("icon")).toHaveStyle({
+    marginLeft: "0",
+    marginRight: "0",
     marginBottom: "8px",
-    height: "32px",
-    width: "32px",
   });
   expect(screen.getByRole("button")).toHaveStyle({
-    height: "88px",
-    padding: "0 40px",
+    minHeight: "88px",
     flexDirection: "column",
   });
 });
diff --git a/src/components/time/time.test.tsx b/src/components/time/time.test.tsx
index 1fa0f4980..d4dd5793e 100644
--- a/src/components/time/time.test.tsx
+++ b/src/components/time/time.test.tsx
@@ -217,12 +217,12 @@ describe("Time component", () => {
       padding: horizontalPadding,
     });
     expect(amToggle).toHaveStyle({
-      height: `${heightConfig.medium}px`,
+      minHeight: `${heightConfig.medium}px`,
       padding: `0 ${paddingConfig.medium}px`,
       "font-size": `${fontSizeConfig.medium}px`,
     });
     expect(pmToggle).toHaveStyle({
-      height: `${heightConfig.medium}px`,
+      minHeight: `${heightConfig.medium}px`,
       padding: `0 ${paddingConfig.medium}px`,
       "font-size": `${fontSizeConfig.medium}px`,
     });
@@ -255,12 +255,12 @@ describe("Time component", () => {
         padding: horizontalPadding,
       });
       expect(amToggle).toHaveStyle({
-        height: `${heightConfig[size]}px`,
+        minHeight: `${heightConfig[size]}px`,
         padding: `0 ${paddingConfig[size]}px`,
         "font-size": `${fontSizeConfig[size]}px`,
       });
       expect(pmToggle).toHaveStyle({
-        height: `${heightConfig[size]}px`,
+        minHeight: `${heightConfig[size]}px`,
         padding: `0 ${paddingConfig[size]}px`,
         "font-size": `${fontSizeConfig[size]}px`,
       });