Merge pull request #5660 from Sage/FE-5565-pager-form-margin

fix(pager): ensure there is no margin-bottom on page number input

src/components/pager/pager.spec.js

@@ -9,12 +9,15 @@ import Select from "../select/simple-select/simple-select.component";
 import SelectList from "../select/select-list/select-list.component";
 import {
   StyledPagerLinkStyles,
+  StyledPagerNavInner,
   StyledPagerSizeOptionsInner,
   StyledPagerSummary,
   StyledSelectContainer,
 } from "./pager.style";
 import NumberInput from "../number";
 import StyledOption from "../select/option/option.style";
+import Form from "../form";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
 import I18nProvider from "../i18n-provider";
 
 jest.mock("../../__internal__/utils/helpers/guid");
@@ -558,4 +561,19 @@ describe("Pager", () => {
       });
     });
   });
+
+  describe("when inside a form", () => {
+    it("the current page field has the correct styles", () => {
+      const wrapper = mount(
+        <Form>
+          <Pager totalRecords={25} currentPage={1} pageSize={5} showPageCount />
+        </Form>
+      );
+      assertStyleMatch(
+        { marginBottom: "0" },
+        wrapper.find(StyledPagerNavInner),
+        { modifier: `${StyledFormField}` }
+      );
+    });
+  });
 });

src/components/pager/pager.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledSelectText from "../select/__internal__/select-text/select-text.style";
 import Link from "../link";
@@ -95,6 +96,10 @@ const StyledPagerNavInner = styled.div`
   display: flex;
   align-items: center;
   padding: 0 12px;
+
+  & ${StyledFormField} {
+    margin-bottom: 0;
+  }
 `;
 
 const StyledPagerLinkStyles = styled(Link)`