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
Sage · Dec 6, 2022 · 242d29c · 242d29c
1 parent 625ebff
commit 242d29c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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");
+    });
+  });
 });