Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

* Fix labelling of avatar menu

* Make the integration manager toggle more clear.

* fix label

* lint

* Update snapshots.

* Refactor many cases of checkbox to use the new compound component.

* Remove non-checkbox related changes

* Reset some things

* Remove usages of mx_checkbox* styling.

* Use label locators for apperance tests.

* small linter tweaks

* lint

* update screenshot

* Test updates

* lint

* Realign checkboxes for device selection.

* Fixup QuickSettings styling

* remove comment

* lint

* flex comment

* remove unused label

* remove redundant classes

* add test for spaces

* lint

* Copyright

* fixup spaces test

* spaces lint

* Replace pin with compound pin.

* Realign icons

* Remove hack for colouring icons

* Adjust existing rooms component to correctly label room.

* Add test for adding an existing room to an existing space.

* Set deterministic sort order for rooms

* lint
This commit is contained in:
Will Hunt
2025-03-20 15:35:54 +00:00
committed by GitHub
parent 170dcd1c0e
commit 599112e122
43 changed files with 2361 additions and 1436 deletions

View File

@@ -9,29 +9,50 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
<span
tabindex="0"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
aria-label="Deselect all"
aria-labelledby=":r6:"
checked=""
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<label
for="device-select-all-checkbox"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-label="Deselect all"
aria-labelledby=":r9:"
checked=""
class="_input_1hel1_18"
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</span>
<span
class="mx_FilteredDeviceListHeader_label"
@@ -54,28 +75,49 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
<span
tabindex="0"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
aria-label="Select all"
aria-labelledby=":r0:"
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<label
for="device-select-all-checkbox"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-label="Select all"
aria-labelledby=":r0:"
class="_input_1hel1_18"
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</span>
<span
class="mx_FilteredDeviceListHeader_label"

View File

@@ -3,6 +3,7 @@
exports[`<SelectableDeviceTile /> renders selected tile 1`] = `
<input
checked=""
class="_input_1hel1_18"
data-testid="device-tile-checkbox-my-device"
id="device-tile-checkbox-my-device"
type="checkbox"
@@ -14,88 +15,113 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
<div
class="mx_SelectableDeviceTile"
>
<span
class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
data-testid="device-tile-checkbox-my-device"
id="device-tile-checkbox-my-device"
type="checkbox"
/>
<label
for="device-tile-checkbox-my-device"
<div
class="_inline-field_19upo_32 mx_SelectableDeviceTile_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
class="_input_1hel1_18"
data-testid="device-tile-checkbox-my-device"
id="device-tile-checkbox-my-device"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-my-device"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="device-tile-checkbox-my-device"
>
<div
class="mx_DeviceTypeIcon"
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-my-device"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
class="mx_DeviceTypeIcon"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
class="mx_DeviceTile_info"
>
My Device
</h4>
<h4
class="mx_Heading_h4"
>
My Device
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-lastSeenIp"
>
123.456.789
</span>
·
<span
data-testid="device-metadata-deviceId"
>
my-device
</span>
</div>
</div>
<div
class="mx_DeviceTile_metadata"
class="mx_DeviceTile_actions"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-lastSeenIp"
>
123.456.789
</span>
·
<span
data-testid="device-metadata-deviceId"
>
my-device
</span>
<div>
test
</div>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div>
test
</div>
</div>
</div>
</label>
</div>
</label>
</span>
</div>
</form>
</div>
</div>
`;

View File

@@ -39,8 +39,7 @@ const labelActivityStatus = "New room activity, upgrades and status messages occ
const labelActivityBots = "Messages sent by bots";
const labelMentionUser = "Notify when someone mentions using @displayname or @mxid";
const labelMentionRoom = "Notify when someone mentions using @room";
const labelMentionKeyword =
"Notify when someone uses a keyword" + "Enter keywords here, or use for spelling variations or nicknames";
const labelMentionKeyword = "Notify when someone uses a keyword";
const labelResetDefault = "Reset to default settings";
const keywords = ["justjann3", "justj4nn3", "justj4nne", "Janne", "J4nne", "Jann3", "jann3", "j4nne", "janne"];

View File

@@ -383,28 +383,49 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
<span
tabindex="0"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
aria-label="Select all"
aria-labelledby=":r3s:"
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<label
for="device-select-all-checkbox"
<div
class="_inline-field_19upo_32"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-label="Select all"
aria-labelledby=":r4q:"
class="_input_1hel1_18"
data-testid="device-select-all-checkbox"
id="device-select-all-checkbox"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
</label>
</span>
<div
class="_inline-field-body_19upo_38"
/>
</div>
</form>
</span>
<span
class="mx_FilteredDeviceListHeader_label"

View File

@@ -38,30 +38,53 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
<div
class="mx_SettingsSubsection_content"
>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
checked=""
disabled=""
id="checkbox_vY7Q4uEh9K"
type="checkbox"
/>
<label
for="checkbox_vY7Q4uEh9K"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r1:"
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_vY7Q4uEh9K"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_vY7Q4uEh9K"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -73,69 +96,116 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
/>
</svg>
Home
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r1:"
>
Home is useful for getting an overview of everything.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
id="checkbox_38QgU2Pomx"
type="checkbox"
/>
<label
for="checkbox_38QgU2Pomx"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r5:"
class="_input_1hel1_18"
data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
id="checkbox_38QgU2Pomx"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_38QgU2Pomx"
>
Show all rooms
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r5:"
>
Show all your rooms in Home, even if they're in a space.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_wKpa6hpi3Y"
type="checkbox"
/>
<label
for="checkbox_wKpa6hpi3Y"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r9:"
class="_input_1hel1_18"
id="checkbox_wKpa6hpi3Y"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_wKpa6hpi3Y"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -147,37 +217,61 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
/>
</svg>
Favourites
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r9:"
>
Group all your favourite rooms and people in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_EetmBG4yVC"
type="checkbox"
/>
<label
for="checkbox_EetmBG4yVC"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":rd:"
class="_input_1hel1_18"
id="checkbox_EetmBG4yVC"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_EetmBG4yVC"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -192,69 +286,115 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
/>
</svg>
People
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rd:"
>
Group all your people in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_eEefiPqpMR"
type="checkbox"
/>
<label
for="checkbox_eEefiPqpMR"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
class="_container_1hel1_10"
>
<div />
Rooms outside of a space
<input
aria-describedby=":rh:"
class="_input_1hel1_18"
id="checkbox_eEefiPqpMR"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
<div
class="mx_SettingsSubsection_text"
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_eEefiPqpMR"
>
Rooms outside of a space
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rh:"
>
Group all your rooms that aren't part of a space in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_MwbPDmfGtm"
type="checkbox"
/>
<label
for="checkbox_MwbPDmfGtm"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":rl:"
class="_input_1hel1_18"
id="checkbox_MwbPDmfGtm"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_MwbPDmfGtm"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -266,15 +406,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
/>
</svg>
Video rooms and conferences
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rl:"
>
Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
</div>
</span>
</div>
</label>
</span>
</div>
</form>
</div>
</div>
</div>
@@ -322,30 +463,53 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
<div
class="mx_SettingsSubsection_content"
>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
<form
class="_root_19upo_16"
>
<input
checked=""
disabled=""
id="checkbox_vY7Q4uEh9K"
type="checkbox"
/>
<label
for="checkbox_vY7Q4uEh9K"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":rp:"
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_vY7Q4uEh9K"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_vY7Q4uEh9K"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -357,69 +521,116 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
/>
</svg>
Home
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rp:"
>
Home is useful for getting an overview of everything.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
id="checkbox_38QgU2Pomx"
type="checkbox"
/>
<label
for="checkbox_38QgU2Pomx"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":rt:"
class="_input_1hel1_18"
data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
id="checkbox_38QgU2Pomx"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_38QgU2Pomx"
>
Show all rooms
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rt:"
>
Show all your rooms in Home, even if they're in a space.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_wKpa6hpi3Y"
type="checkbox"
/>
<label
for="checkbox_wKpa6hpi3Y"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r11:"
class="_input_1hel1_18"
id="checkbox_wKpa6hpi3Y"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_wKpa6hpi3Y"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -431,37 +642,61 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
/>
</svg>
Favourites
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r11:"
>
Group all your favourite rooms and people in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_EetmBG4yVC"
type="checkbox"
/>
<label
for="checkbox_EetmBG4yVC"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r15:"
class="_input_1hel1_18"
id="checkbox_EetmBG4yVC"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_EetmBG4yVC"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -476,69 +711,115 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
/>
</svg>
People
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r15:"
>
Group all your people in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_eEefiPqpMR"
type="checkbox"
/>
<label
for="checkbox_eEefiPqpMR"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
class="_container_1hel1_10"
>
<div />
Rooms outside of a space
<input
aria-describedby=":r19:"
class="_input_1hel1_18"
id="checkbox_eEefiPqpMR"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
<div
class="mx_SettingsSubsection_text"
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_eEefiPqpMR"
>
Rooms outside of a space
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r19:"
>
Group all your rooms that aren't part of a space in one place.
</div>
</span>
</div>
</label>
</span>
<span
class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
</div>
</form>
<form
class="_root_19upo_16"
>
<input
id="checkbox_MwbPDmfGtm"
type="checkbox"
/>
<label
for="checkbox_MwbPDmfGtm"
<div
class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
>
<div
class="mx_Checkbox_background"
class="_inline-field-control_19upo_44"
>
<div
class="mx_Checkbox_checkmark"
/>
class="_container_1hel1_10"
>
<input
aria-describedby=":r1d:"
class="_input_1hel1_18"
id="checkbox_MwbPDmfGtm"
type="checkbox"
/>
<div
class="_ui_1hel1_19"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</div>
</div>
<div>
<div
class="mx_SettingsSubsection_text"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="checkbox_MwbPDmfGtm"
>
<svg
class="mx_SidebarUserSettingsTab_icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -550,15 +831,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
/>
</svg>
Video rooms and conferences
</div>
<div
class="mx_SettingsSubsection_text"
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r1d:"
>
Group all private video rooms and conferences.
</div>
</span>
</div>
</label>
</span>
</div>
</form>
</div>
</div>
</div>