PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update @vector-im/compound-web (#12718)

Browse source 
* deps: update `@vector-im/compound-web`

* feat: use new EditInPlace

* e2e: update snapshots
This commit is contained in:
Florian Duros 2024-07-02 14:35:13 +02:00 committed by GitHub
parent 510fb1ba2f
commit 53ea045c54
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 150 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -79,7 +79,7 @@
"@sentry/browser": "^8.0.0", "@sentry/browser": "^8.0.0",
"@testing-library/react-hooks": "^8.0.1", "@testing-library/react-hooks": "^8.0.1",
"@vector-im/compound-design-tokens": "^1.2.0", "@vector-im/compound-design-tokens": "^1.2.0",
"@vector-im/compound-web": "^4.9.0", "@vector-im/compound-web": "^5.1.2",
"@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4",
"@zxcvbn-ts/language-en": "^3.0.2", "@zxcvbn-ts/language-en": "^3.0.2",

BIN
playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/theme-panel-custom-theme-added-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/theme-panel-custom-theme-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

1
res/css/views/settings/_UserProfileSettings.pcss
View file

@ -35,6 +35,7 @@ limitations under the License.
.mx_UserProfileSettings_profile_controls_userId { .mx_UserProfileSettings_profile_controls_userId {
width: 100%; width: 100%;
margin-top: var(--cpd-space-4x);
.mx_CopyableText { .mx_CopyableText {
margin-top: var(--cpd-space-1x); margin-top: var(--cpd-space-1x);
width: 100%; width: 100%;

10
src/components/views/settings/ThemeChoicePanel.tsx
View file

@ -23,6 +23,8 @@ import {
RadioControl, RadioControl,
EditInPlace, EditInPlace,
IconButton, IconButton,
ErrorMessage,
HelpMessage,
} from "@vector-im/compound-web"; } from "@vector-im/compound-web";
import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg"; import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
import classNames from "classnames"; import classNames from "classnames";
@ -231,10 +233,9 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
<EditInPlace <EditInPlace
className="mx_ThemeChoicePanel_CustomTheme_EditInPlace" className="mx_ThemeChoicePanel_CustomTheme_EditInPlace"
label={_t("settings|appearance|custom_theme_add")} label={_t("settings|appearance|custom_theme_add")}
cancelButtonLabel={_t("action|cancel")}
saveButtonLabel={_t("settings|appearance|custom_theme_add")} saveButtonLabel={_t("settings|appearance|custom_theme_add")}
savingLabel={_t("settings|appearance|custom_theme_downloading")} savingLabel={_t("settings|appearance|custom_theme_downloading")}
helpLabel={_t("settings|appearance|custom_theme_help")}
error={error}
value={customTheme} value={customTheme}
onChange={(e: ChangeEvent<HTMLInputElement>) => { onChange={(e: ChangeEvent<HTMLInputElement>) => {
setError(undefined); setError(undefined);
@ -281,7 +282,10 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes); await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
}} }}
onCancel={clear} onCancel={clear}
/> >
<HelpMessage>{_t("settings|appearance|custom_theme_help")}</HelpMessage>
{error && <ErrorMessage>{error}</ErrorMessage>}
</EditInPlace>
<CustomThemeList theme={theme} /> <CustomThemeList theme={theme} />
</div> </div>
); );

10
src/components/views/settings/UserProfileSettings.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"; import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert } from "@vector-im/compound-web"; import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@ -68,7 +68,6 @@ interface UserProfileSettingsProps {
const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplayName, canSetAvatar }) => { const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplayName, canSetAvatar }) => {
const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc); const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc);
const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? ""); const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [initialDisplayName, setInitialDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [avatarError, setAvatarError] = useState<boolean>(false); const [avatarError, setAvatarError] = useState<boolean>(false);
const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>(); const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>();
const [displayNameError, setDisplayNameError] = useState<boolean>(false); const [displayNameError, setDisplayNameError] = useState<boolean>(false);
@ -135,7 +134,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
try { try {
setDisplayNameError(false); setDisplayNameError(false);
await client.setDisplayName(displayName); await client.setDisplayName(displayName);
setInitialDisplayName(displayName);
} catch (e) { } catch (e) {
setDisplayNameError(true); setDisplayNameError(true);
throw e; throw e;
@ -174,7 +172,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
className="mx_UserProfileSettings_profile_displayName" className="mx_UserProfileSettings_profile_displayName"
label={_t("settings|general|display_name")} label={_t("settings|general|display_name")}
value={displayName} value={displayName}
disableSaveButton={displayName === initialDisplayName}
saveButtonLabel={_t("common|save")} saveButtonLabel={_t("common|save")}
cancelButtonLabel={_t("common|cancel")} cancelButtonLabel={_t("common|cancel")}
savedLabel={_t("common|saved")} savedLabel={_t("common|saved")}
@ -182,9 +179,10 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
onChange={onDisplayNameChanged} onChange={onDisplayNameChanged}
onCancel={onDisplayNameCancel} onCancel={onDisplayNameCancel}
onSave={onDisplayNameSave} onSave={onDisplayNameSave}
error={displayNameError ? _t("settings|general|display_name_error") : undefined}
disabled={!canSetDisplayName} disabled={!canSetDisplayName}
/> >
{displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
</EditInPlace>
</div> </div>
{avatarError && ( {avatarError && (
<Alert title={_t("settings|general|avatar_upload_error_title")} type="critical"> <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">

280
test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View file

@ -19,20 +19,20 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi" class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
> >
<form <form
class="_root_148br_24" class="_root_dgy0u_24"
> >
<div <div
class="_inline-field_148br_40" class="_inline-field_dgy0u_40"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_qnvru_18" class="_container_qnvru_18"
> >
<input <input
class="_input_qnvru_32" class="_input_qnvru_32"
id="radix-42" id="radix-48"
name="systemTheme" name="systemTheme"
title="" title=""
type="checkbox" type="checkbox"
@ -43,11 +43,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67" class="_label_dgy0u_67"
for="radix-42" for="radix-48"
> >
Match system theme Match system theme
</label> </label>
@ -55,13 +55,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</form> </form>
<form <form
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors" class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
> >
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -69,7 +69,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
<input <input
checked="" checked=""
class="_input_1vw5h_26" class="_input_1vw5h_26"
id="radix-43" id="radix-49"
name="themeSelector" name="themeSelector"
title="" title=""
type="radio" type="radio"
@ -81,28 +81,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-43" for="radix-49"
> >
Light Light
</label> </label>
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
> >
<input <input
class="_input_1vw5h_26" class="_input_1vw5h_26"
id="radix-44" id="radix-50"
name="themeSelector" name="themeSelector"
title="" title=""
type="radio" type="radio"
@ -114,28 +114,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-44" for="radix-50"
> >
Dark Dark
</label> </label>
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
> >
<input <input
class="_input_1vw5h_26" class="_input_1vw5h_26"
id="radix-45" id="radix-51"
name="themeSelector" name="themeSelector"
title="" title=""
type="radio" type="radio"
@ -147,28 +147,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-45" for="radix-51"
> >
High contrast High contrast
</label> </label>
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
> >
<input <input
class="_input_1vw5h_26" class="_input_1vw5h_26"
id="radix-46" id="radix-52"
name="themeSelector" name="themeSelector"
title="" title=""
type="radio" type="radio"
@ -180,11 +180,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-46" for="radix-52"
> >
Alice theme Alice theme
</label> </label>
@ -195,72 +195,36 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
class="mx_ThemeChoicePanel_CustomTheme" class="mx_ThemeChoicePanel_CustomTheme"
> >
<form <form
class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace" class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
id=":r7:"
> >
<div <div
class="_label_zfn7i_21" class="_field_dgy0u_34"
id=":r8:" >
<label
class="_label_dgy0u_67"
for="radix-54"
> >
Add custom theme Add custom theme
</div> </label>
<div <div
class="_controls_zfn7i_27" class="_controls_1h4nb_17"
> >
<input <input
aria-invalid="false" aria-describedby="radix-53"
aria-labelledby=":r8:" class="_control_9gon8_18"
class="_control_9gon8_18 _control_zfn7i_27" id="radix-54"
name="input"
title=""
value="" value=""
/> />
<div
class="_button-group_zfn7i_32"
>
<button
aria-controls=":r7:"
aria-label="Add custom theme"
class="_button_zfn7i_32 _primary-button_zfn7i_51"
type="submit"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</button>
<button
aria-controls=":r7:"
class="_button_zfn7i_32"
role="button"
type="button"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</button>
</div>
</div> </div>
<span <span
class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147" class="_message_dgy0u_98 _help-message_dgy0u_104"
id="radix-53"
> >
Enter the URL of a custom theme you want to apply. Enter the URL of a custom theme you want to apply.
</span> </span>
</div>
</form> </form>
<ul <ul
class="mx_ThemeChoicePanel_CustomThemeList" class="mx_ThemeChoicePanel_CustomThemeList"
@ -321,13 +285,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi" class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
> >
<form <form
class="_root_148br_24" class="_root_dgy0u_24"
> >
<div <div
class="_inline-field_148br_40" class="_inline-field_dgy0u_40"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_qnvru_18" class="_container_qnvru_18"
@ -345,10 +309,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67" class="_label_dgy0u_67"
for="radix-32" for="radix-32"
> >
Match system theme Match system theme
@ -357,13 +321,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</form> </form>
<form <form
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors" class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
> >
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -383,10 +347,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-33" for="radix-33"
> >
Light Light
@ -394,10 +358,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -416,10 +380,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-34" for="radix-34"
> >
Dark Dark
@ -427,10 +391,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -449,10 +413,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-35" for="radix-35"
> >
High contrast High contrast
@ -460,10 +424,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -482,10 +446,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-36" for="radix-36"
> >
Alice theme Alice theme
@ -497,72 +461,36 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
class="mx_ThemeChoicePanel_CustomTheme" class="mx_ThemeChoicePanel_CustomTheme"
> >
<form <form
class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace" class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
id=":r1:"
> >
<div <div
class="_label_zfn7i_21" class="_field_dgy0u_34"
id=":r2:" >
<label
class="_label_dgy0u_67"
for="radix-38"
> >
Add custom theme Add custom theme
</div> </label>
<div <div
class="_controls_zfn7i_27" class="_controls_1h4nb_17"
> >
<input <input
aria-invalid="false" aria-describedby="radix-37"
aria-labelledby=":r2:" class="_control_9gon8_18"
class="_control_9gon8_18 _control_zfn7i_27" id="radix-38"
name="input"
title=""
value="" value=""
/> />
<div
class="_button-group_zfn7i_32"
>
<button
aria-controls=":r1:"
aria-label="Add custom theme"
class="_button_zfn7i_32 _primary-button_zfn7i_51"
type="submit"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</button>
<button
aria-controls=":r1:"
class="_button_zfn7i_32"
role="button"
type="button"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</button>
</div>
</div> </div>
<span <span
class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147" class="_message_dgy0u_98 _help-message_dgy0u_104"
id="radix-37"
> >
Enter the URL of a custom theme you want to apply. Enter the URL of a custom theme you want to apply.
</span> </span>
</div>
</form> </form>
<ul <ul
class="mx_ThemeChoicePanel_CustomThemeList" class="mx_ThemeChoicePanel_CustomThemeList"
@ -623,13 +551,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi" class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
> >
<form <form
class="_root_148br_24" class="_root_dgy0u_24"
> >
<div <div
class="_inline-field_148br_40" class="_inline-field_dgy0u_40"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_qnvru_18" class="_container_qnvru_18"
@ -647,10 +575,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67" class="_label_dgy0u_67"
for="radix-0" for="radix-0"
> >
Match system theme Match system theme
@ -659,13 +587,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</form> </form>
<form <form
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors" class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
> >
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -685,10 +613,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-1" for="radix-1"
> >
Light Light
@ -696,10 +624,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -718,10 +646,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-2" for="radix-2"
> >
Dark Dark
@ -729,10 +657,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -751,10 +679,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-3" for="radix-3"
> >
High contrast High contrast

26
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file

@ -32,13 +32,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi" class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
> >
<form <form
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors" class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
> >
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -58,10 +58,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-0" for="radix-0"
> >
Light Light
@ -69,10 +69,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -92,10 +92,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-1" for="radix-1"
> >
Dark Dark
@ -103,10 +103,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light" class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
> >
<div <div
class="_inline-field-control_148br_52" class="_inline-field-control_dgy0u_52"
> >
<div <div
class="_container_1vw5h_18" class="_container_1vw5h_18"
@ -126,10 +126,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
<div <div
class="_inline-field-body_148br_46" class="_inline-field-body_dgy0u_46"
> >
<label <label
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label" class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-2" for="radix-2"
> >
High contrast High contrast

8
yarn.lock
View file

@ -3045,10 +3045,10 @@
dependencies: dependencies:
svg2vectordrawable "^2.9.1" svg2vectordrawable "^2.9.1"
"@vector-im/compound-web@^4.9.0": "@vector-im/compound-web@^5.1.2":
version "4.10.0" version "5.1.2"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.10.0.tgz#5403c9933af91d432b5fb5f92a305acadc810893" resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.1.2.tgz#2ee3d859819e153c898770c058a4277c0b8ef3b8"
integrity sha512-SPeol6FK/h/q8ChHyuCCncUIVoIGNdPODBf7UqvaohRjt8EzyAAHKP89l1YhWKqEaOtG67+28IXoFvdS46tbUA== integrity sha512-p7ide2JRblCkcSMPNakkWjK9GxA8boMQCEgXCT7Dp+owhONf2QsYpyRzlW+tPZ3DULd+h4nqWRova4uSeZtBbA==
dependencies: dependencies:
"@floating-ui/react" "^0.26.9" "@floating-ui/react" "^0.26.9"
"@floating-ui/react-dom" "^2.0.8" "@floating-ui/react-dom" "^2.0.8"