Skip to content

Commit 1464341

Browse files
sandhosesandhose
committed
Use our own implementation of the Separator component
The one in compound-web is weirdly implemented and doesn't use the right semantic tokens
1 parent 1f03d6d commit 1464341

File tree

11 files changed

+128
-86
lines changed

11 files changed

+128
-86
lines changed

‎frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,12 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
2121
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
2222
>
2323
Client info
24-
<div
25-
class="_separator_7ckbw_8"
26-
data-kind="section"
27-
data-orientation="horizontal"
28-
role="separator"
29-
/>
3024
</h4>
25+
<div
26+
aria-orientation="horizontal"
27+
class="_separator_162edc _section_162edc -mt-4"
28+
role="separator"
29+
/>
3130
<ul
3231
class="flex flex-wrap gap-x-10 gap-y-6"
3332
>

‎frontend/src/components/Separator/Separator.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* Copyright 2025 New Vector Ltd.
2+
*
3+
* SPDX-License-Identifier: AGPL-3.0-only
4+
* Please see LICENSE in the repository root for full details.
5+
*/
6+
7+
.separator {
8+
border-block-start: 1px solid var(--cpd-color-bg-subtle-primary);
9+
}
10+
11+
.section {
12+
border-block-start-width: 2px;
13+
}

‎frontend/src/components/Separator/Separator.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Copyright 2025 New Vector Ltd.
2+
//
3+
// SPDX-License-Identifier: AGPL-3.0-only
4+
// Please see LICENSE in the repository root for full details.
5+
6+
import cx from "classnames";
7+
import { forwardRef } from "react";
8+
9+
import styles from "./Separator.module.css";
10+
11+
type Props = {
12+
kind?: "section";
13+
} & React.HTMLAttributes<HTMLDivElement>;
14+
15+
const Separator = forwardRef<HTMLDivElement, Props>(
16+
({ kind, className, ...props }: Props, ref) => (
17+
// biome-ignore lint/a11y/useFocusableInteractive: this is a false positive
18+
<div
19+
aria-orientation="horizontal"
20+
role="separator"
21+
className={cx(
22+
styles.separator,
23+
kind === "section" && styles.section,
24+
className,
25+
)}
26+
{...props}
27+
ref={ref}
28+
/>
29+
),
30+
);
31+
32+
export default Separator;

‎frontend/src/components/Separator/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Copyright 2025 New Vector Ltd.
2+
//
3+
// SPDX-License-Identifier: AGPL-3.0-only
4+
// Please see LICENSE in the repository root for full details.
5+
6+
export { default } from "./Separator";

‎frontend/src/components/SessionDetail/SessionInfo.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import IconSend from "@vector-im/compound-design-tokens/assets/web/icons/send";
1111
import IconUserProfile from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
1212
import {
1313
Heading,
14-
Separator,
1514
Text,
1615
VisualList,
1716
VisualListItem,
1817
} from "@vector-im/compound-web";
1918
import cx from "classnames";
2019
import type * as React from "react";
2120
import { useTranslation } from "react-i18next";
21+
import Separator from "../Separator/Separator";
2222

2323
export const ScopeViewProfile: React.FC = () => {
2424
const { t } = useTranslation();
@@ -178,8 +178,10 @@ export const DataSection: React.FC<
178178
export const DataSectionHeader: React.FC<
179179
React.PropsWithChildren<{ className?: string }>
180180
> = ({ children, className }) => (
181-
<Heading as="h4" size="sm" weight="semibold" className={className}>
182-
{children}
183-
<Separator kind="section" />
184-
</Heading>
181+
<>
182+
<Heading as="h4" size="sm" weight="semibold" className={className}>
183+
{children}
184+
</Heading>
185+
<Separator className="-mt-4" kind="section" />
186+
</>
185187
);

‎frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,12 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
3939
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
4040
>
4141
Device details
42-
<div
43-
class="_separator_7ckbw_8"
44-
data-kind="section"
45-
data-orientation="horizontal"
46-
role="separator"
47-
/>
4842
</h4>
43+
<div
44+
aria-orientation="horizontal"
45+
class="_separator_162edc _section_162edc -mt-4"
46+
role="separator"
47+
/>
4948
<ul
5049
class="flex flex-wrap gap-x-10 gap-y-6"
5150
>
@@ -199,13 +198,12 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
199198
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
200199
>
201200
Client info
202-
<div
203-
class="_separator_7ckbw_8"
204-
data-kind="section"
205-
data-orientation="horizontal"
206-
role="separator"
207-
/>
208201
</h4>
202+
<div
203+
aria-orientation="horizontal"
204+
class="_separator_162edc _section_162edc -mt-4"
205+
role="separator"
206+
/>
209207
<ul
210208
class="flex flex-wrap gap-x-10 gap-y-6"
211209
>
@@ -308,13 +306,12 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
308306
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
309307
>
310308
Device details
311-
<div
312-
class="_separator_7ckbw_8"
313-
data-kind="section"
314-
data-orientation="horizontal"
315-
role="separator"
316-
/>
317309
</h4>
310+
<div
311+
aria-orientation="horizontal"
312+
class="_separator_162edc _section_162edc -mt-4"
313+
role="separator"
314+
/>
318315
<ul
319316
class="flex flex-wrap gap-x-10 gap-y-6"
320317
>
@@ -468,13 +465,12 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
468465
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
469466
>
470467
Client info
471-
<div
472-
class="_separator_7ckbw_8"
473-
data-kind="section"
474-
data-orientation="horizontal"
475-
role="separator"
476-
/>
477468
</h4>
469+
<div
470+
aria-orientation="horizontal"
471+
class="_separator_162edc _section_162edc -mt-4"
472+
role="separator"
473+
/>
478474
<ul
479475
class="flex flex-wrap gap-x-10 gap-y-6"
480476
>
@@ -575,13 +571,12 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
575571
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
576572
>
577573
Device details
578-
<div
579-
class="_separator_7ckbw_8"
580-
data-kind="section"
581-
data-orientation="horizontal"
582-
role="separator"
583-
/>
584574
</h4>
575+
<div
576+
aria-orientation="horizontal"
577+
class="_separator_162edc _section_162edc -mt-4"
578+
role="separator"
579+
/>
585580
<ul
586581
class="flex flex-wrap gap-x-10 gap-y-6"
587582
>
@@ -753,13 +748,12 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
753748
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
754749
>
755750
Client info
756-
<div
757-
class="_separator_7ckbw_8"
758-
data-kind="section"
759-
data-orientation="horizontal"
760-
role="separator"
761-
/>
762751
</h4>
752+
<div
753+
aria-orientation="horizontal"
754+
class="_separator_162edc _section_162edc -mt-4"
755+
role="separator"
756+
/>
763757
<ul
764758
class="flex flex-wrap gap-x-10 gap-y-6"
765759
>

‎frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,12 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
3737
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
3838
>
3939
Device details
40-
<div
41-
class="_separator_7ckbw_8"
42-
data-kind="section"
43-
data-orientation="horizontal"
44-
role="separator"
45-
/>
4640
</h4>
41+
<div
42+
aria-orientation="horizontal"
43+
class="_separator_162edc _section_162edc -mt-4"
44+
role="separator"
45+
/>
4746
<ul
4847
class="flex flex-wrap gap-x-10 gap-y-6"
4948
>
@@ -215,13 +214,12 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
215214
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
216215
>
217216
Client info
218-
<div
219-
class="_separator_7ckbw_8"
220-
data-kind="section"
221-
data-orientation="horizontal"
222-
role="separator"
223-
/>
224217
</h4>
218+
<div
219+
aria-orientation="horizontal"
220+
class="_separator_162edc _section_162edc -mt-4"
221+
role="separator"
222+
/>
225223
<ul
226224
class="flex flex-wrap gap-x-10 gap-y-6"
227225
>
@@ -318,13 +316,12 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
318316
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
319317
>
320318
Device details
321-
<div
322-
class="_separator_7ckbw_8"
323-
data-kind="section"
324-
data-orientation="horizontal"
325-
role="separator"
326-
/>
327319
</h4>
320+
<div
321+
aria-orientation="horizontal"
322+
class="_separator_162edc _section_162edc -mt-4"
323+
role="separator"
324+
/>
328325
<ul
329326
class="flex flex-wrap gap-x-10 gap-y-6"
330327
>
@@ -478,13 +475,12 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
478475
class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
479476
>
480477
Client info
481-
<div
482-
class="_separator_7ckbw_8"
483-
data-kind="section"
484-
data-orientation="horizontal"
485-
role="separator"
486-
/>
487478
</h4>
479+
<div
480+
aria-orientation="horizontal"
481+
class="_separator_162edc _section_162edc -mt-4"
482+
role="separator"
483+
/>
488484
<ul
489485
class="flex flex-wrap gap-x-10 gap-y-6"
490486
>

‎frontend/src/routes/_account.index.lazy.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import {
1111
useNavigate,
1212
} from "@tanstack/react-router";
1313
import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
14-
import { Button, Separator, Text } from "@vector-im/compound-web";
14+
import { Button, Text } from "@vector-im/compound-web";
1515
import { useTranslation } from "react-i18next";
1616
import AccountManagementPasswordPreview from "../components/AccountManagementPasswordPreview";
1717
import { ButtonLink } from "../components/ButtonLink";
1818
import * as Collapsible from "../components/Collapsible";
1919
import * as Dialog from "../components/Dialog";
2020
import LoadingSpinner from "../components/LoadingSpinner";
21+
import Separator from "../components/Separator";
2122
import { useEndBrowserSession } from "../components/Session/EndBrowserSessionButton";
2223
import AddEmailForm from "../components/UserProfile/AddEmailForm";
2324
import UserEmailList from "../components/UserProfile/UserEmailList";
@@ -75,7 +76,7 @@ function Index(): React.ReactElement {
7576

7677
return (
7778
<>
78-
<div className="flex flex-col gap-4">
79+
<div className="flex flex-col gap-6">
7980
{/* Only display this section if the user can add email addresses to their
8081
account *or* if they have any existing email addresses */}
8182
{(siteConfig.emailChangeAllowed ||

‎frontend/src/routes/_account.sessions.index.lazy.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
// Please see LICENSE in the repository root for full details.
66

77
import { createLazyFileRoute, notFound } from "@tanstack/react-router";
8-
import { H3, Separator } from "@vector-im/compound-web";
8+
import { H3 } from "@vector-im/compound-web";
99
import { useTranslation } from "react-i18next";
1010

1111
import { ButtonLink } from "../components/ButtonLink";
@@ -17,6 +17,7 @@ import BrowserSessionsOverview from "../components/UserSessionsOverview/BrowserS
1717
import { usePages } from "../pagination";
1818

1919
import { useSuspenseQuery } from "@tanstack/react-query";
20+
import Separator from "../components/Separator";
2021
import { listQuery, query } from "./_account.sessions.index";
2122

2223
const PAGE_SIZE = 6;
@@ -55,7 +56,7 @@ function Sessions(): React.ReactElement {
5556
<div className="flex flex-col gap-6">
5657
<H3>{t("frontend.user_sessions_overview.heading")}</H3>
5758
<BrowserSessionsOverview user={viewer} />
58-
<Separator />
59+
<Separator kind="section" />
5960
<div className="flex gap-2 justify-start items-center">
6061
<Filter
6162
to="/sessions"

‎frontend/src/routes/password.change.index.lazy.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
useRouter,
1212
} from "@tanstack/react-router";
1313
import IconLockSolid from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
14-
import { Alert, Form, Separator } from "@vector-im/compound-web";
14+
import { Alert, Form } from "@vector-im/compound-web";
1515
import { type FormEvent, useRef } from "react";
1616
import { useTranslation } from "react-i18next";
1717

@@ -20,6 +20,7 @@ import Layout from "../components/Layout";
2020
import LoadingSpinner from "../components/LoadingSpinner";
2121
import PageHeading from "../components/PageHeading";
2222
import PasswordCreationDoubleInput from "../components/PasswordCreationDoubleInput";
23+
import Separator from "../components/Separator";
2324
import { graphql } from "../gql";
2425
import { graphqlRequest } from "../graphql";
2526
import { translateSetPasswordError } from "../i18n/password_changes";

0 commit comments

Comments
 (0)