Remove global h2 css rule in favour of heading styles/components (#32969)

* Remove global h2 css rule in favour of heading styles/components

* Use Compound Heading in shared-components

and forbid hX elements

* Use Compound Heading in settings

add back margin to some legacy headings

* Tweak some headings

* Update screenshots

* Update screenshots

* Update snapshots

* Tweak .gitignore

* Update snapshots

* Iterate

* Update screenshots

* Update screenshots

* Update screenshot

packages/shared-components/.eslintrc.cjs

@@ -66,13 +66,28 @@ module.exports = {
             },
         ],
         "storybook/meta-satisfies-type": "error",
+
+        "react/forbid-elements": [
+            "error",
+            {
+                forbid: [
+                    { element: "h1", message: "Use Compound <Heading> instead" },
+                    { element: "h2", message: "Use Compound <Heading> instead" },
+                    { element: "h3", message: "Use Compound <Heading> instead" },
+                    { element: "h4", message: "Use Compound <Heading> instead" },
+                    { element: "h5", message: "Use Compound <Heading> instead" },
+                    { element: "h6", message: "Use Compound <Heading> instead" },
+                ],
+            },
+        ],
     },
     overrides: [
         {
-            files: ["src/**/*.test.{ts,tsx}"],
+            files: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.tsx"],
             rules: {
                 "@typescript-eslint/unbound-method": "off",
                 "@typescript-eslint/no-explicit-any": "off",
+                "react/forbid-elements": "off",
             },
         },
     ],

packages/shared-components/.gitignore

@@ -2,9 +2,8 @@
 /src/**/__screenshots__/
 
 # Ignore vis diffs & local baseline
-/__vis__/**/__diffs__
-/__vis__/**/__results__
-/__vis__/local
+/__vis__/**
+!/__vis__/linux/__baselines__
 
 # Ignore coverage report
 /coverage/

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { Tooltip } from "@vector-im/compound-web";
+import { Heading, Tooltip } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 
 import { Flex } from "../../../core/utils/Flex";
@@ -53,7 +53,9 @@ export function DateSeparatorButton({
                 tabIndex={0}
                 {...props}
             >
-                <h2 aria-hidden="true">{label}</h2>
+                <Heading as="h2" size="lg" aria-hidden="true">
+                    {label}
+                </Heading>
                 <ChevronDownIcon />
             </Flex>
         </Tooltip>

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.module.css

@@ -13,8 +13,6 @@
         flex: 0 0 auto;
         margin: 0;
         font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
         text-transform: capitalize;
     }
 

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.tsx

@@ -7,6 +7,7 @@
 
 import classNames from "classnames";
 import React, { type JSX, useState } from "react";
+import { Heading } from "@vector-im/compound-web";
 
 import { type ViewModel } from "../../../core/viewmodel/ViewModel";
 import { useViewModel } from "../../../core/viewmodel/useViewModel";
@@ -107,7 +108,9 @@ export function DateSeparatorView({ vm, className }: Readonly<DateSeparatorViewP
     return (
         <TimelineSeparator label={label} className={classNames(className)}>
             <Flex className={styles.content}>
-                <h2 aria-hidden="true">{label}</h2>
+                <Heading as="h2" size="lg" aria-hidden="true">
+                    {label}
+                </Heading>
             </Flex>
         </TimelineSeparator>
     );

packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`DateSeparatorView > renders default story 1`] = `
     >
       <h2
         aria-hidden="true"
+        class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
       >
         Today
       </h2>
@@ -45,6 +46,7 @@ exports[`DateSeparatorView > renders long localized label story 1`] = `
     >
       <h2
         aria-hidden="true"
+        class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
       >
         Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time
       </h2>
@@ -73,6 +75,7 @@ exports[`DateSeparatorView > renders with extra class names 1`] = `
     >
       <h2
         aria-hidden="true"
+        class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
       >
         Today
       </h2>
@@ -113,6 +116,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
     >
       <h2
         aria-hidden="true"
+        class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
       >
         Today
       </h2>