From 242d29c9a5f49b1979547d57a20f3ddb117ffce0 Mon Sep 17 00:00:00 2001
From: Robin Zigmond <robin.zigmond@sage.com>
Date: Tue, 6 Dec 2022 14:29:23 +0000
Subject: [PATCH] fix(pager): fix bottom margin of number input when inside a
 form

Ensure the "current page" input field of Pager always has margin-bottom 0, even when inside a form.

fix #5650
---
 cypress/locators/pager/index.js     |  2 ++
 cypress/locators/pager/locators.js  |  1 +
 src/components/pager/pager.spec.js  |  2 +-
 src/components/pager/pager.style.js |  2 +-
 src/components/pager/pager.test.js  | 18 ++++++++++++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/cypress/locators/pager/index.js b/cypress/locators/pager/index.js
index 6174883737..6d2f208123 100644
--- a/cypress/locators/pager/index.js
+++ b/cypress/locators/pager/index.js
@@ -9,6 +9,7 @@ import {
   PAGER_LAST_ARROW,
   SHOW_LABEL_BEFORE,
   PAGE_SIZE_LABEL_AFTER,
+  CURRENT_PAGE,
 } from "./locators";
 import { COMMMON_DATA_ELEMENT_INPUT } from "../locators";
 import { getDataElementByValue } from "..";
@@ -19,6 +20,7 @@ export const pageSelect = () =>
   cy.get(PAGE_SELECT).find(COMMMON_DATA_ELEMENT_INPUT);
 export const pageSelectElement = () => cy.get(PAGE_SELECT);
 export const maxPages = () => cy.get(MAX_PAGES);
+export const currentPageWrapper = () => cy.get(CURRENT_PAGE);
 export const currentPageInput = () => cy.get(PAGER_SUMMARY).find("input");
 export const previousArrow = () =>
   getDataElementByValue(`${COMMON_PART_OF_PAGER_LINK}${PAGER_PREVIOUS_ARROW}`);
diff --git a/cypress/locators/pager/locators.js b/cypress/locators/pager/locators.js
index 8958ca4a7f..20568ddf15 100644
--- a/cypress/locators/pager/locators.js
+++ b/cypress/locators/pager/locators.js
@@ -10,3 +10,4 @@ export const PAGER_LAST_ARROW = "last";
 export const COMMON_PART_OF_PAGER_LINK = "pager-link-";
 export const SHOW_LABEL_BEFORE = "Show";
 export const PAGE_SIZE_LABEL_AFTER = "items";
+export const CURRENT_PAGE = '[data-element="current-page"]';
diff --git a/src/components/pager/pager.spec.js b/src/components/pager/pager.spec.js
index a39c8ec8d4..abf42756ef 100644
--- a/src/components/pager/pager.spec.js
+++ b/src/components/pager/pager.spec.js
@@ -572,7 +572,7 @@ describe("Pager", () => {
       assertStyleMatch(
         { marginBottom: "0" },
         wrapper.find(StyledPagerNavInner),
-        { modifier: `${StyledFormField}` }
+        { modifier: `&& ${StyledFormField}` }
       );
     });
   });
diff --git a/src/components/pager/pager.style.js b/src/components/pager/pager.style.js
index 260b2658ba..d228915ea9 100644
--- a/src/components/pager/pager.style.js
+++ b/src/components/pager/pager.style.js
@@ -97,7 +97,7 @@ const StyledPagerNavInner = styled.div`
   align-items: center;
   padding: 0 12px;
 
-  & ${StyledFormField} {
+  && ${StyledFormField} {
     margin-bottom: 0;
   }
 `;
diff --git a/src/components/pager/pager.test.js b/src/components/pager/pager.test.js
index 1ab4a1b5c6..a8b752a822 100644
--- a/src/components/pager/pager.test.js
+++ b/src/components/pager/pager.test.js
@@ -8,6 +8,7 @@ import {
   nextArrow,
   firstArrow,
   lastArrow,
+  currentPageWrapper,
   currentPageInput,
   pagerSummary,
   pageSelectElement,
@@ -22,6 +23,7 @@ import { keyCode } from "../../../cypress/support/helper";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import { checkGoldenOutline } from "../../../cypress/support/component-helper/common-steps";
 import { CHARACTERS } from "../../../cypress/support/component-helper/constants";
+import Form from "../form";
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const records = [
@@ -139,6 +141,14 @@ const PagerComponentResponsive = () => {
   );
 };
 
+const PagerInForm = () => {
+  return (
+    <Form>
+      <PagerComponent />
+    </Form>
+  );
+};
+
 context("Test for Pager component", () => {
   describe("check props for Pager component", () => {
     it.each([[2], [5], [7]])(
@@ -532,4 +542,12 @@ context("Test for Pager component", () => {
       }
     );
   });
+
+  describe("when inside a form component", () => {
+    it("should have no bottom margin", () => {
+      CypressMountWithProviders(<PagerInForm />);
+
+      currentPageWrapper().should("have.css", "margin-bottom", "0px");
+    });
+  });
 });