99178bce86
* 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>
500 lines
18 KiB
Plaintext
500 lines
18 KiB
Plaintext
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
|
|
|
exports[`<LayoutSwitcher /> should render 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="layoutPanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Message layout
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
|
|
>
|
|
<div
|
|
class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
|
|
>
|
|
<label
|
|
aria-label="Modern"
|
|
class="_label_19upo_59"
|
|
for="radix-_r_0_"
|
|
>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
|
|
>
|
|
<div
|
|
class="_container_1qhtc_10"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1qhtc_18"
|
|
id="radix-_r_0_"
|
|
name="layout"
|
|
title=""
|
|
type="radio"
|
|
value="group"
|
|
/>
|
|
<div
|
|
class="_ui_1qhtc_19"
|
|
/>
|
|
</div>
|
|
<span>
|
|
Modern
|
|
</span>
|
|
</div>
|
|
<hr
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
|
|
/>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
|
|
role="presentation"
|
|
>
|
|
<div
|
|
aria-atomic="true"
|
|
aria-live="off"
|
|
class="mx_EventTile"
|
|
data-event-id="$9999999999999999999999999999999999999999999"
|
|
data-has-reply="false"
|
|
data-layout="group"
|
|
data-scroll-tokens="$9999999999999999999999999999999999999999999"
|
|
data-self="true"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="mx_DisambiguatedProfile"
|
|
>
|
|
<span
|
|
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
|
dir="auto"
|
|
>
|
|
Alice
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_avatar"
|
|
>
|
|
<span
|
|
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 30px;"
|
|
title="@userId:matrix.org"
|
|
>
|
|
A
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_line"
|
|
id="1"
|
|
>
|
|
<div
|
|
class="mx_MTextBody mx_EventTile_content"
|
|
>
|
|
<div
|
|
class="mx_EventTile_body translate"
|
|
dir="auto"
|
|
>
|
|
Hey you. You're the best!
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Message Actions"
|
|
aria-live="off"
|
|
class="mx_MessageActionBar"
|
|
role="toolbar"
|
|
>
|
|
<div
|
|
aria-label="Edit"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
clip-rule="evenodd"
|
|
d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
aria-label="Options"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div
|
|
class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
|
|
>
|
|
<label
|
|
aria-label="Message bubbles"
|
|
class="_label_19upo_59"
|
|
for="radix-_r_9_"
|
|
>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
|
|
>
|
|
<div
|
|
class="_container_1qhtc_10"
|
|
>
|
|
<input
|
|
class="_input_1qhtc_18"
|
|
id="radix-_r_9_"
|
|
name="layout"
|
|
title=""
|
|
type="radio"
|
|
value="bubble"
|
|
/>
|
|
<div
|
|
class="_ui_1qhtc_19"
|
|
/>
|
|
</div>
|
|
<span>
|
|
Message bubbles
|
|
</span>
|
|
</div>
|
|
<hr
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
|
|
/>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
|
|
role="presentation"
|
|
>
|
|
<div
|
|
aria-atomic="true"
|
|
aria-live="off"
|
|
class="mx_EventTile"
|
|
data-event-id="$9999999999999999999999999999999999999999999"
|
|
data-has-reply="false"
|
|
data-layout="bubble"
|
|
data-scroll-tokens="$9999999999999999999999999999999999999999999"
|
|
data-self="true"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="mx_DisambiguatedProfile"
|
|
>
|
|
<span
|
|
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
|
dir="auto"
|
|
>
|
|
Alice
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_avatar"
|
|
>
|
|
<span
|
|
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 30px;"
|
|
title="@userId:matrix.org"
|
|
>
|
|
A
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_line"
|
|
id="2"
|
|
>
|
|
<div
|
|
class="mx_MTextBody mx_EventTile_content"
|
|
>
|
|
<div
|
|
class="mx_EventTile_body translate"
|
|
dir="auto"
|
|
>
|
|
Hey you. You're the best!
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Message Actions"
|
|
aria-live="off"
|
|
class="mx_MessageActionBar"
|
|
role="toolbar"
|
|
>
|
|
<div
|
|
aria-label="Edit"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
clip-rule="evenodd"
|
|
d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
aria-label="Options"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div
|
|
class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
|
|
>
|
|
<label
|
|
aria-label="IRC (experimental)"
|
|
class="_label_19upo_59"
|
|
for="radix-_r_i_"
|
|
>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
|
|
>
|
|
<div
|
|
class="_container_1qhtc_10"
|
|
>
|
|
<input
|
|
class="_input_1qhtc_18"
|
|
id="radix-_r_i_"
|
|
name="layout"
|
|
title=""
|
|
type="radio"
|
|
value="irc"
|
|
/>
|
|
<div
|
|
class="_ui_1qhtc_19"
|
|
/>
|
|
</div>
|
|
<span>
|
|
IRC (experimental)
|
|
</span>
|
|
</div>
|
|
<hr
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
|
|
/>
|
|
<div
|
|
class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"
|
|
role="presentation"
|
|
>
|
|
<div
|
|
aria-atomic="true"
|
|
aria-live="off"
|
|
class="mx_EventTile"
|
|
data-event-id="$9999999999999999999999999999999999999999999"
|
|
data-has-reply="false"
|
|
data-layout="irc"
|
|
data-scroll-tokens="$9999999999999999999999999999999999999999999"
|
|
data-self="true"
|
|
tabindex="-1"
|
|
>
|
|
<span
|
|
class="mx_MessageTimestamp"
|
|
/>
|
|
<div
|
|
class="mx_DisambiguatedProfile"
|
|
>
|
|
<span
|
|
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
|
dir="auto"
|
|
>
|
|
Alice
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_avatar"
|
|
>
|
|
<span
|
|
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 14px;"
|
|
title="@userId:matrix.org"
|
|
>
|
|
A
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_EventTile_line"
|
|
id="3"
|
|
>
|
|
<div
|
|
class="mx_MTextBody mx_EventTile_content"
|
|
>
|
|
<div
|
|
class="mx_EventTile_body translate"
|
|
dir="auto"
|
|
>
|
|
Hey you. You're the best!
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Message Actions"
|
|
aria-live="off"
|
|
class="mx_MessageActionBar"
|
|
role="toolbar"
|
|
>
|
|
<div
|
|
aria-label="Edit"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
clip-rule="evenodd"
|
|
d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
aria-label="Options"
|
|
class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_19upo_16"
|
|
>
|
|
<div
|
|
class="_inline-field_19upo_32"
|
|
>
|
|
<div
|
|
class="_inline-field-control_19upo_44"
|
|
>
|
|
<div
|
|
class="_container_udcm8_10"
|
|
>
|
|
<input
|
|
aria-describedby="radix-_r_s_"
|
|
class="_input_udcm8_24"
|
|
id="radix-_r_r_"
|
|
name="compactLayout"
|
|
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_r_"
|
|
>
|
|
Show compact text and messages
|
|
</label>
|
|
<span
|
|
class="_message_19upo_85 _help-message_19upo_91"
|
|
id="radix-_r_s_"
|
|
>
|
|
Modern layout must be selected to use this feature.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="_separator_cqpyv_8"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|