letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Use our own implementation of the Separator component

Browse Source 
The one in compound-web is weirdly implemented and doesn't use the right
semantic tokens
This commit is contained in:
Quentin Gliech
2025-03-12 14:22:38 +01:00
parent 1846229f34
commit 660fea1769
11 changed files with 128 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
View File

@@ -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"
>

13
frontend/src/components/Separator/Separator.module.css Normal file
View File

@@ -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;
}

32
frontend/src/components/Separator/Separator.tsx Normal file
View File

@@ -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;

6
frontend/src/components/Separator/index.tsx Normal file
View File

@@ -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";

12
frontend/src/components/SessionDetail/SessionInfo.tsx
View File

@@ -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" />
</>
);

66
frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
View File

@@ -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"
>

44
frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
View File

@@ -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"
>

5
frontend/src/routes/_account.index.lazy.tsx
View File

@@ -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 ||

5
frontend/src/routes/_account.sessions.index.lazy.tsx
View File

@@ -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"

3
frontend/src/routes/password.change.index.lazy.tsx
View File

@@ -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";

17
frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
View File

@@ -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>