Merge pull request #7174 from Sage/FE-7054_time-colon-out-of-position

fix(form): ensure that additional margin-bottom is not applied to Time component - FE-7054

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 (

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);
   }