feat(Heading): update bottom margin for H2 and H4 (#3576)

* feat(Heading): update bottom margin for H2 and H4 to sit on 8px scale * chore: add changeset * chore: update heading tests --------- Co-authored-by: “nora <[email protected]>
twilio-labs · Oct 24, 2023 · 26577a2 · 26577a2
1 parent d1f89ea
commit 26577a2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/wild-oranges-unite.md b/.changeset/wild-oranges-unite.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/heading": patch
+"@twilio-paste/core": patch
+---
+
+Update bottom margin on H2 and H4 by one spacing token step
diff --git a/packages/paste-core/components/heading/__tests__/heading.test.tsx b/packages/paste-core/components/heading/__tests__/heading.test.tsx
@@ -33,7 +33,7 @@ describe("Heading", () => {
       );
       const renderedHeading = screen.getByRole("heading", { level: 2 });
       expect(renderedHeading).not.toBeNull();
-      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.25rem");
+      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-size", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-weight", "600");
       expect(renderedHeading).toHaveStyleRule("line-height", "2rem");
@@ -65,7 +65,7 @@ describe("Heading", () => {
       );
       const renderedHeading = screen.getByRole("heading", { level: 4 });
       expect(renderedHeading).not.toBeNull();
-      expect(renderedHeading).toHaveStyleRule("margin-bottom", "0.75rem");
+      expect(renderedHeading).toHaveStyleRule("margin-bottom", "0.5rem");
       expect(renderedHeading).toHaveStyleRule("font-size", "1rem");
       expect(renderedHeading).toHaveStyleRule("font-weight", "600");
       expect(renderedHeading).toHaveStyleRule("line-height", "1.5rem");
@@ -115,7 +115,7 @@ describe("Heading", () => {
       const renderedHeadingIdiomatic = screen.getByText("This is an italic H2").closest("i");
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeadingIdiomatic).not.toBeNull();
-      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.25rem");
+      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-size", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-weight", "600");
       expect(renderedHeading).toHaveStyleRule("line-height", "2rem");

diff --git a/packages/paste-core/components/heading/src/Heading.tsx b/packages/paste-core/components/heading/src/Heading.tsx
@@ -24,7 +24,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
       };
     case "heading40":
       return {
-        marginBottom: marginBottom || "space40",
+        marginBottom: marginBottom || "space30",
         fontSize: "fontSize40",
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight40",
@@ -53,7 +53,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
     case "heading20":
     default:
       return {
-        marginBottom: marginBottom || "space60",
+        marginBottom: marginBottom || "space70",
         fontSize: "fontSize70",
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight70",