Merge pull request #2051 from element-hq/renovate/vector-im-compound-web-2.x

Update dependency @vector-im/compound-web to v2
This commit is contained in:
Robin
2024-01-10 10:48:47 -05:00
committed by GitHub
7 changed files with 50 additions and 51 deletions

View File

@@ -50,7 +50,7 @@
"@types/lodash": "^4.14.199", "@types/lodash": "^4.14.199",
"@use-gesture/react": "^10.2.11", "@use-gesture/react": "^10.2.11",
"@vector-im/compound-design-tokens": "^0.1.0", "@vector-im/compound-design-tokens": "^0.1.0",
"@vector-im/compound-web": "^1.0.0", "@vector-im/compound-web": "^2.0.0",
"@vitejs/plugin-basic-ssl": "^1.0.1", "@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitejs/plugin-react": "^4.0.1", "@vitejs/plugin-react": "^4.0.1",
"buffer": "^6.0.3", "buffer": "^6.0.3",

View File

@@ -24,6 +24,7 @@ import {
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays"; import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history"; import { History } from "history";
import { TooltipProvider } from "@vector-im/compound-web";
import { HomePage } from "./home/HomePage"; import { HomePage } from "./home/HomePage";
import { LoginPage } from "./auth/LoginPage"; import { LoginPage } from "./auth/LoginPage";
@@ -77,35 +78,37 @@ export const App: FC<AppProps> = ({ history }) => {
// @ts-ignore // @ts-ignore
<Router history={history}> <Router history={history}>
<BackgroundProvider> <BackgroundProvider>
{loaded ? ( <TooltipProvider>
<Suspense fallback={null}> {loaded ? (
<ClientProvider> <Suspense fallback={null}>
<MediaDevicesProvider> <ClientProvider>
<Sentry.ErrorBoundary fallback={errorPage}> <MediaDevicesProvider>
<OverlayProvider> <Sentry.ErrorBoundary fallback={errorPage}>
<DisconnectedBanner /> <OverlayProvider>
<Switch> <DisconnectedBanner />
<SentryRoute exact path="/"> <Switch>
<HomePage /> <SentryRoute exact path="/">
</SentryRoute> <HomePage />
<SentryRoute exact path="/login"> </SentryRoute>
<LoginPage /> <SentryRoute exact path="/login">
</SentryRoute> <LoginPage />
<SentryRoute exact path="/register"> </SentryRoute>
<RegisterPage /> <SentryRoute exact path="/register">
</SentryRoute> <RegisterPage />
<SentryRoute path="*"> </SentryRoute>
<RoomPage /> <SentryRoute path="*">
</SentryRoute> <RoomPage />
</Switch> </SentryRoute>
</OverlayProvider> </Switch>
</Sentry.ErrorBoundary> </OverlayProvider>
</MediaDevicesProvider> </Sentry.ErrorBoundary>
</ClientProvider> </MediaDevicesProvider>
</Suspense> </ClientProvider>
) : ( </Suspense>
<LoadingView /> ) : (
)} <LoadingView />
)}
</TooltipProvider>
</BackgroundProvider> </BackgroundProvider>
</Router> </Router>
); );

View File

@@ -15,6 +15,7 @@ limitations under the License.
*/ */
.lock { .lock {
display: block;
padding: var(--cpd-space-1x); padding: var(--cpd-space-1x);
border-radius: var(--cpd-radius-pill-effect); border-radius: var(--cpd-radius-pill-effect);
} }

View File

@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
const label = encrypted ? t("common.encrypted") : t("common.unencrypted"); const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
return ( return (
<Tooltip label={label} side="right"> <Tooltip label={label} side="right" isTriggerInteractive={false}>
<Icon <Icon
width={16} width={16}
height={16} height={16}
className={styles.lock} className={styles.lock}
data-encrypted={encrypted} data-encrypted={encrypted}
aria-label={label} aria-label={label}
// Make the icon focusable so that the tooltip can be opened
// with keyboard navigation
// TODO: Replace this with the solution from
// https://github.com/vector-im/compound-web/pull/130 once it
// lands
tabIndex={0}
/> />
</Tooltip> </Tooltip>
); );

View File

@@ -158,7 +158,8 @@ unconditionally select the container so we can use cqmin units */
max-inline-size: 100%; max-inline-size: 100%;
} }
.nameTag > svg { .nameTag > svg,
.nameTag > span {
flex-shrink: 0; flex-shrink: 0;
} }
@@ -170,14 +171,16 @@ unconditionally select the container so we can use cqmin units */
color: var(--cpd-color-icon-primary); color: var(--cpd-color-icon-primary);
} }
.nameTag span { .nameTag > .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
padding-inline: var(--cpd-space-2x); padding-inline: var(--cpd-space-2x);
flex-shrink: 1;
} }
.errorIcon { .errorIcon {
display: block;
color: var(--cpd-color-icon-critical-primary); color: var(--cpd-color-icon-critical-primary);
} }

View File

@@ -148,22 +148,20 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
<div className={styles.fg}> <div className={styles.fg}>
<div className={styles.nameTag}> <div className={styles.nameTag}>
{nameTagLeadingIcon} {nameTagLeadingIcon}
<Text as="span" size="sm" weight="medium"> <Text as="span" size="sm" weight="medium" className={styles.name}>
{nameTag} {nameTag}
</Text> </Text>
{unencryptedWarning && ( {unencryptedWarning && (
<Tooltip label={t("common.unencrypted")} side="bottom"> <Tooltip
label={t("common.unencrypted")}
side="bottom"
isTriggerInteractive={false}
>
<ErrorIcon <ErrorIcon
width={20} width={20}
height={20} height={20}
aria-label={t("common.unencrypted")} aria-label={t("common.unencrypted")}
className={styles.errorIcon} className={styles.errorIcon}
// Make the icon focusable so that the tooltip can be opened
// with keyboard navigation
// TODO: Replace this with the solution from
// https://github.com/vector-im/compound-web/pull/130 once it
// lands
tabIndex={0}
/> />
</Tooltip> </Tooltip>
)} )}

View File

@@ -3818,10 +3818,10 @@
dependencies: dependencies:
svg2vectordrawable "^2.9.1" svg2vectordrawable "^2.9.1"
"@vector-im/compound-web@^1.0.0": "@vector-im/compound-web@^2.0.0":
version "1.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-1.0.0.tgz#cee4a1c1d7df50951ebb1c167bfab26311b68d5d" resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-2.0.0.tgz#9ffc621f32be11acabe74bb3ff59cc4d8bc845ac"
integrity sha512-TwohQjgQilndkg+PTfRH8s98onHOj9MdmrLEObozN3oLZ0Awx0LsyQf/+tcm2ZwpCotWuP9DEzuRXOQgSU4OLg== integrity sha512-vEhGayoBSq4WLf86VmFoX9h0KIxaAjlG+kmcJLWitsqnPEDOG0XPhScYqzEshFqdJFLWX6gBOnXYLeq065t57w==
dependencies: dependencies:
"@radix-ui/react-context-menu" "^2.1.5" "@radix-ui/react-context-menu" "^2.1.5"
"@radix-ui/react-dropdown-menu" "^2.0.6" "@radix-ui/react-dropdown-menu" "^2.0.6"