From 660fea176910b5f5bd4b767a1caf86f509bb3317 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Wed, 12 Mar 2025 14:22:38 +0100
Subject: [PATCH] Use our own implementation of the Separator component

The one in compound-web is weirdly implemented and doesn't use the right
semantic tokens
---
 .../OAuth2ClientDetail.test.tsx.snap          | 11 ++--
 .../components/Separator/Separator.module.css | 13 ++++
 .../src/components/Separator/Separator.tsx    | 32 +++++++++
 frontend/src/components/Separator/index.tsx   |  6 ++
 .../components/SessionDetail/SessionInfo.tsx  | 12 ++--
 .../CompatSessionDetail.test.tsx.snap         | 66 +++++++++----------
 .../OAuth2SessionDetail.test.tsx.snap         | 44 ++++++-------
 frontend/src/routes/_account.index.lazy.tsx   |  5 +-
 .../routes/_account.sessions.index.lazy.tsx   |  5 +-
 .../src/routes/password.change.index.lazy.tsx |  3 +-
 .../account/__snapshots__/index.test.tsx.snap | 17 ++---
 11 files changed, 128 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/components/Separator/Separator.module.css
 create mode 100644 frontend/src/components/Separator/Separator.tsx
 create mode 100644 frontend/src/components/Separator/index.tsx

diff --git a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
index 1acf56602..2558267f6 100644
--- a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
+++ b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
@@ -21,13 +21,12 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
diff --git a/frontend/src/components/Separator/Separator.module.css b/frontend/src/components/Separator/Separator.module.css
new file mode 100644
index 000000000..cf7f0c3ff
--- /dev/null
+++ b/frontend/src/components/Separator/Separator.module.css
@@ -0,0 +1,13 @@
+/* Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+.separator {
+  border-block-start: 1px solid var(--cpd-color-bg-subtle-primary);
+}
+
+.section {
+  border-block-start-width: 2px;
+}
diff --git a/frontend/src/components/Separator/Separator.tsx b/frontend/src/components/Separator/Separator.tsx
new file mode 100644
index 000000000..97e00e13e
--- /dev/null
+++ b/frontend/src/components/Separator/Separator.tsx
@@ -0,0 +1,32 @@
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+
+import cx from "classnames";
+import { forwardRef } from "react";
+
+import styles from "./Separator.module.css";
+
+type Props = {
+  kind?: "section";
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const Separator = forwardRef<HTMLDivElement, Props>(
+  ({ kind, className, ...props }: Props, ref) => (
+    // biome-ignore lint/a11y/useFocusableInteractive: this is a false positive
+    <div
+      aria-orientation="horizontal"
+      role="separator"
+      className={cx(
+        styles.separator,
+        kind === "section" && styles.section,
+        className,
+      )}
+      {...props}
+      ref={ref}
+    />
+  ),
+);
+
+export default Separator;
diff --git a/frontend/src/components/Separator/index.tsx b/frontend/src/components/Separator/index.tsx
new file mode 100644
index 000000000..68edc7a90
--- /dev/null
+++ b/frontend/src/components/Separator/index.tsx
@@ -0,0 +1,6 @@
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+
+export { default } from "./Separator";
diff --git a/frontend/src/components/SessionDetail/SessionInfo.tsx b/frontend/src/components/SessionDetail/SessionInfo.tsx
index df211d9df..fed9a801d 100644
--- a/frontend/src/components/SessionDetail/SessionInfo.tsx
+++ b/frontend/src/components/SessionDetail/SessionInfo.tsx
@@ -11,7 +11,6 @@ import IconSend from "@vector-im/compound-design-tokens/assets/web/icons/send";
 import IconUserProfile from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import {
   Heading,
-  Separator,
   Text,
   VisualList,
   VisualListItem,
@@ -19,6 +18,7 @@ import {
 import cx from "classnames";
 import type * as React from "react";
 import { useTranslation } from "react-i18next";
+import Separator from "../Separator/Separator";
 
 export const ScopeViewProfile: React.FC = () => {
   const { t } = useTranslation();
@@ -178,8 +178,10 @@ export const DataSection: React.FC<
 export const DataSectionHeader: React.FC<
   React.PropsWithChildren<{ className?: string }>
 > = ({ children, className }) => (
-  <Heading as="h4" size="sm" weight="semibold" className={className}>
-    {children}
-    <Separator kind="section" />
-  </Heading>
+  <>
+    <Heading as="h4" size="sm" weight="semibold" className={className}>
+      {children}
+    </Heading>
+    <Separator className="-mt-4" kind="section" />
+  </>
 );
diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
index 38afa39fb..d28558632 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
@@ -39,13 +39,12 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Device details
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -199,13 +198,12 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -308,13 +306,12 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Device details
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -468,13 +465,12 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -575,13 +571,12 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Device details
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -753,13 +748,12 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
diff --git a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
index 06cba7ac5..3b493b530 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
@@ -37,13 +37,12 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Device details
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -215,13 +214,12 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -318,13 +316,12 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Device details
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
@@ -478,13 +475,12 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
-        <div
-          class="_separator_7ckbw_8"
-          data-kind="section"
-          data-orientation="horizontal"
-          role="separator"
-        />
       </h4>
+      <div
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc -mt-4"
+        role="separator"
+      />
       <ul
         class="flex flex-wrap gap-x-10 gap-y-6"
       >
diff --git a/frontend/src/routes/_account.index.lazy.tsx b/frontend/src/routes/_account.index.lazy.tsx
index 819fa2419..ce494e77c 100644
--- a/frontend/src/routes/_account.index.lazy.tsx
+++ b/frontend/src/routes/_account.index.lazy.tsx
@@ -11,13 +11,14 @@ import {
   useNavigate,
 } from "@tanstack/react-router";
 import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
-import { Button, Separator, Text } from "@vector-im/compound-web";
+import { Button, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import AccountManagementPasswordPreview from "../components/AccountManagementPasswordPreview";
 import { ButtonLink } from "../components/ButtonLink";
 import * as Collapsible from "../components/Collapsible";
 import * as Dialog from "../components/Dialog";
 import LoadingSpinner from "../components/LoadingSpinner";
+import Separator from "../components/Separator";
 import { useEndBrowserSession } from "../components/Session/EndBrowserSessionButton";
 import AddEmailForm from "../components/UserProfile/AddEmailForm";
 import UserEmailList from "../components/UserProfile/UserEmailList";
@@ -75,7 +76,7 @@ function Index(): React.ReactElement {
 
   return (
     <>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-6">
         {/* Only display this section if the user can add email addresses to their
           account *or* if they have any existing email addresses */}
         {(siteConfig.emailChangeAllowed ||
diff --git a/frontend/src/routes/_account.sessions.index.lazy.tsx b/frontend/src/routes/_account.sessions.index.lazy.tsx
index 6c328dd79..d6d1a8ff2 100644
--- a/frontend/src/routes/_account.sessions.index.lazy.tsx
+++ b/frontend/src/routes/_account.sessions.index.lazy.tsx
@@ -5,7 +5,7 @@
 // Please see LICENSE in the repository root for full details.
 
 import { createLazyFileRoute, notFound } from "@tanstack/react-router";
-import { H3, Separator } from "@vector-im/compound-web";
+import { H3 } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
 import { ButtonLink } from "../components/ButtonLink";
@@ -17,6 +17,7 @@ import BrowserSessionsOverview from "../components/UserSessionsOverview/BrowserS
 import { usePages } from "../pagination";
 
 import { useSuspenseQuery } from "@tanstack/react-query";
+import Separator from "../components/Separator";
 import { listQuery, query } from "./_account.sessions.index";
 
 const PAGE_SIZE = 6;
@@ -55,7 +56,7 @@ function Sessions(): React.ReactElement {
     <div className="flex flex-col gap-6">
       <H3>{t("frontend.user_sessions_overview.heading")}</H3>
       <BrowserSessionsOverview user={viewer} />
-      <Separator />
+      <Separator kind="section" />
       <div className="flex gap-2 justify-start items-center">
         <Filter
           to="/sessions"
diff --git a/frontend/src/routes/password.change.index.lazy.tsx b/frontend/src/routes/password.change.index.lazy.tsx
index b27f94c21..57dcb1ba7 100644
--- a/frontend/src/routes/password.change.index.lazy.tsx
+++ b/frontend/src/routes/password.change.index.lazy.tsx
@@ -11,7 +11,7 @@ import {
   useRouter,
 } from "@tanstack/react-router";
 import IconLockSolid from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
-import { Alert, Form, Separator } from "@vector-im/compound-web";
+import { Alert, Form } from "@vector-im/compound-web";
 import { type FormEvent, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -20,6 +20,7 @@ import Layout from "../components/Layout";
 import LoadingSpinner from "../components/LoadingSpinner";
 import PageHeading from "../components/PageHeading";
 import PasswordCreationDoubleInput from "../components/PasswordCreationDoubleInput";
+import Separator from "../components/Separator";
 import { graphql } from "../gql";
 import { graphqlRequest } from "../graphql";
 import { translateSetPasswordError } from "../i18n/password_changes";
diff --git a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
index 2dbaeda34..f8f8bebea 100644
--- a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
+++ b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
@@ -400,7 +400,7 @@ exports[`Account home page > renders the page 1`] = `
       </div>
     </div>
     <div
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <section
         aria-labelledby=":r8:"
@@ -518,9 +518,8 @@ exports[`Account home page > renders the page 1`] = `
         </article>
       </section>
       <div
-        class="_separator_7ckbw_8"
-        data-kind="section"
-        data-orientation="horizontal"
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc"
         role="separator"
       />
       <section
@@ -614,9 +613,8 @@ exports[`Account home page > renders the page 1`] = `
         </article>
       </section>
       <div
-        class="_separator_7ckbw_8"
-        data-kind="section"
-        data-orientation="horizontal"
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc"
         role="separator"
       />
       <section
@@ -668,9 +666,8 @@ exports[`Account home page > renders the page 1`] = `
         </header>
       </section>
       <div
-        class="_separator_7ckbw_8"
-        data-kind="section"
-        data-orientation="horizontal"
+        aria-orientation="horizontal"
+        class="_separator_162edc _section_162edc"
         role="separator"
       />
     </div>