sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Michael Telatynski
2026-04-02 16:13:17 +00:00
committed by GitHub
parent 7bbd86ca10
commit 2d3e2fcb70
89 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx
+4 -2
View File
@@ -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
-2
View File
@@ -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
+4 -1
View File
@@ -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
+4
View File
@@ -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>