From 98cdaae86e47bd44d00a202cefe22cc53f31aa98 Mon Sep 17 00:00:00 2001
From: Daniel Dipper <daniel.dipper@sage.com>
Date: Wed, 22 Jan 2025 15:15:52 +0000
Subject: [PATCH] fix(form): ensure that additional margin-bottom is not
 applied to Time component

When using a Time component within a Form, the separator is not positioned correctly. This fix
ensures that the height of the Time component is calculated correctly, that margin-bottom is not
applied twice thus ensuring the seperator is rendered correctly in the centre position.

fixes #7164
---
 src/components/form/form-test.stories.tsx | 29 ++++++++++++++++++++++-
 src/components/form/form.style.ts         |  2 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
index 1a12dcc4a4..23b8251222 100644
--- a/src/components/form/form-test.stories.tsx
+++ b/src/components/form/form-test.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from "react";
 
+import { StoryObj } from "@storybook/react/*";
 import TextEditor, { EditorState } from "../text-editor";
 import Form from ".";
 import Button from "../button";
@@ -25,6 +26,7 @@ import InlineInputs from "../inline-inputs";
 import Pager from "../pager";
 import Password from "../password";
 import Search, { SearchProps } from "../search";
+import { Time } from "../time";
 
 export default {
   title: "Form/Test",
@@ -37,7 +39,9 @@ export default {
   },
 };
 
-export const DefaultWithStickyFooter = ({ ...props }) => (
+type StoryType = StoryObj<typeof Form>;
+
+export const DefaultWithStickyFooter: StoryType = ({ ...props }) => (
   <Form
     onSubmit={() => console.log("submit")}
     leftSideButtons={
@@ -63,6 +67,14 @@ export const DefaultWithStickyFooter = ({ ...props }) => (
     </Tabs>
     <Textbox label="Textbox" />
     <Textbox label="Textbox" />
+    <Time
+      value={{
+        hours: "",
+        minutes: "",
+      }}
+      onChange={() => {}}
+      label="Time"
+    />
     <Textbox label="Textbox" />
     <Textbox label="Textbox" />
     <Textbox label="Textbox" />
@@ -78,6 +90,21 @@ DefaultWithStickyFooter.args = {
   warningCount: 0,
   buttonAlignment: "right",
 };
+DefaultWithStickyFooter.parameters = {
+  themeProvider: {
+    chromatic: { theme: "sage" },
+  },
+  chromatic: {
+    disableSnapshot: false,
+  },
+};
+DefaultWithStickyFooter.decorators = [
+  (Story) => (
+    <div style={{ height: "100vh", width: "97vw" }}>
+      <Story />
+    </div>
+  ),
+];
 
 export const FormAlignmentCustomMarginsTextInputs = () => {
   return (
diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts
index 91d95e2419..a0c084509c 100644
--- a/src/components/form/form.style.ts
+++ b/src/components/form/form.style.ts
@@ -89,7 +89,7 @@ export const StyledForm = styled.form<StyledFormProps>`
     `}
 
   // field spacing is also applied to form field here so we need to override
-  ${StyledSearch} ${StyledFormField}, ${StyledTextarea} ${StyledFormField} {
+  ${StyledSearch} ${StyledFormField}, ${StyledTextarea} ${StyledFormField}, [data-component="time"] ${StyledFormField} {
     margin-bottom: var(--spacing000);
   }