diff --git a/.changeset/wild-oranges-unite.md b/.changeset/wild-oranges-unite.md new file mode 100644 index 0000000000..4b5c53fe6d --- /dev/null +++ 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 index 71c4496e10..0aaa440d63 100644 --- 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 index a985d56445..1b1c740484 100644 --- 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",