Files
element-web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
renovate[bot] 99178bce86 Update vector-im (#31306)
* Update vector-im

* Update Jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix playwright styling overrides

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hold back Compound Design Tokens as threads icons unexpectedly grew a dot in the top corner where we conditionally draw a dot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Compound Design Tokens to 6.4.1

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak bubble

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update storybook snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-02 09:57:28 +00:00

730 lines
20 KiB
Plaintext

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
<DocumentFragment>
<div
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
data-testid="themePanel"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
>
<form
class="_root_19upo_16"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="radix-_r_28_"
name="systemTheme"
role="switch"
title=""
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="radix-_r_28_"
>
Match system theme
</label>
</div>
</div>
</form>
<form
class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
checked=""
class="_input_1qhtc_18"
id="radix-_r_29_"
name="themeSelector"
title=""
type="radio"
value="light"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_29_"
>
Light
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_2a_"
name="themeSelector"
title=""
type="radio"
value="dark"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_2a_"
>
Dark
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_2b_"
name="themeSelector"
title=""
type="radio"
value="light-high-contrast"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_2b_"
>
High contrast
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_2c_"
name="themeSelector"
title=""
type="radio"
value="custom-Alice theme"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_2c_"
>
Alice theme
</label>
</div>
</div>
</form>
<div
class="mx_ThemeChoicePanel_CustomTheme"
>
<form
class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="radix-_r_2d_"
>
Add custom theme
</label>
<div
class="_controls_17lij_8"
>
<input
aria-describedby="radix-_r_2e_"
class="_control_sqdq4_10"
id="radix-_r_2d_"
name="input"
title=""
value=""
/>
</div>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_2e_"
>
Enter the URL of a custom theme you want to apply.
</span>
</div>
</form>
<ul
class="mx_ThemeChoicePanel_CustomThemeList"
>
<li
aria-label="Alice theme"
class="mx_ThemeChoicePanel_CustomThemeList_theme"
>
<span
class="mx_ThemeChoicePanel_CustomThemeList_name"
>
Alice theme
</span>
<button
aria-label="Delete"
aria-labelledby="_r_2f_"
class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 19V6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 5q0-.424.287-.713A.97.97 0 0 1 5 4h4q0-.424.287-.712A.97.97 0 0 1 10 3h4q.424 0 .713.288Q15 3.575 15 4h4q.424 0 .712.287Q20 4.576 20 5t-.288.713A.97.97 0 0 1 19 6v13q0 .824-.587 1.413A1.93 1.93 0 0 1 17 21zM7 6v13h10V6zm2 10q0 .424.287.712Q9.576 17 10 17t.713-.288A.97.97 0 0 0 11 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 10 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 9zm4 0q0 .424.287.712.288.288.713.288.424 0 .713-.288A.97.97 0 0 0 15 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 9z"
/>
</svg>
</div>
</button>
</li>
</ul>
</div>
</div>
<div
class="_separator_cqpyv_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
</div>
</DocumentFragment>
`;
exports[`<ThemeChoicePanel /> custom theme should render the custom theme section 1`] = `
<DocumentFragment>
<div
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
data-testid="themePanel"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
>
<form
class="_root_19upo_16"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="radix-_r_10_"
name="systemTheme"
role="switch"
title=""
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="radix-_r_10_"
>
Match system theme
</label>
</div>
</div>
</form>
<form
class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
checked=""
class="_input_1qhtc_18"
id="radix-_r_11_"
name="themeSelector"
title=""
type="radio"
value="light"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_11_"
>
Light
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_12_"
name="themeSelector"
title=""
type="radio"
value="dark"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_12_"
>
Dark
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_13_"
name="themeSelector"
title=""
type="radio"
value="light-high-contrast"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_13_"
>
High contrast
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_14_"
name="themeSelector"
title=""
type="radio"
value="custom-Alice theme"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_14_"
>
Alice theme
</label>
</div>
</div>
</form>
<div
class="mx_ThemeChoicePanel_CustomTheme"
>
<form
class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="radix-_r_15_"
>
Add custom theme
</label>
<div
class="_controls_17lij_8"
>
<input
aria-describedby="radix-_r_16_"
class="_control_sqdq4_10"
id="radix-_r_15_"
name="input"
title=""
value=""
/>
</div>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_16_"
>
Enter the URL of a custom theme you want to apply.
</span>
</div>
</form>
<ul
class="mx_ThemeChoicePanel_CustomThemeList"
>
<li
aria-label="Alice theme"
class="mx_ThemeChoicePanel_CustomThemeList_theme"
>
<span
class="mx_ThemeChoicePanel_CustomThemeList_name"
>
Alice theme
</span>
<button
aria-label="Delete"
aria-labelledby="_r_17_"
class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 19V6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 5q0-.424.287-.713A.97.97 0 0 1 5 4h4q0-.424.287-.712A.97.97 0 0 1 10 3h4q.424 0 .713.288Q15 3.575 15 4h4q.424 0 .712.287Q20 4.576 20 5t-.288.713A.97.97 0 0 1 19 6v13q0 .824-.587 1.413A1.93 1.93 0 0 1 17 21zM7 6v13h10V6zm2 10q0 .424.287.712Q9.576 17 10 17t.713-.288A.97.97 0 0 0 11 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 10 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 9zm4 0q0 .424.287.712.288.288.713.288.424 0 .713-.288A.97.97 0 0 0 15 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 9z"
/>
</svg>
</div>
</button>
</li>
</ul>
</div>
</div>
<div
class="_separator_cqpyv_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
</div>
</DocumentFragment>
`;
exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
<DocumentFragment>
<div
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
data-testid="themePanel"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
>
<form
class="_root_19upo_16"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="radix-_r_0_"
name="systemTheme"
role="switch"
title=""
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="radix-_r_0_"
>
Match system theme
</label>
</div>
</div>
</form>
<form
class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
checked=""
class="_input_1qhtc_18"
id="radix-_r_1_"
name="themeSelector"
title=""
type="radio"
value="light"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_1_"
>
Light
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_2_"
name="themeSelector"
title=""
type="radio"
value="dark"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_2_"
>
Dark
</label>
</div>
</div>
<div
class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_1qhtc_10"
>
<input
class="_input_1qhtc_18"
id="radix-_r_3_"
name="themeSelector"
title=""
type="radio"
value="light-high-contrast"
/>
<div
class="_ui_1qhtc_19"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
for="radix-_r_3_"
>
High contrast
</label>
</div>
</div>
</form>
</div>
<div
class="_separator_cqpyv_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
</div>
</DocumentFragment>
`;