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
@@ -150,28 +150,53 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
||||
<form
|
||||
class="_root_19upo_16"
|
||||
>
|
||||
<input
|
||||
id="include-attachments"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="include-attachments"
|
||||
<div
|
||||
class="_inline-field_19upo_32 mx_ExportDialog_attachments-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"
|
||||
id="include-attachments"
|
||||
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>
|
||||
Include Attachments
|
||||
<div
|
||||
class="_inline-field-body_19upo_38"
|
||||
>
|
||||
<label
|
||||
class="_label_19upo_59"
|
||||
for="include-attachments"
|
||||
>
|
||||
Include Attachments
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_buttons"
|
||||
|
||||
+66
-39
@@ -59,53 +59,80 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
|
||||
<h3>
|
||||
Other spaces you know
|
||||
</h3>
|
||||
<label
|
||||
<div
|
||||
class="mx_ManageRestrictedJoinRuleDialog_entry"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||||
data-color="1"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
>
|
||||
O
|
||||
</span>
|
||||
<span
|
||||
class="mx_ManageRestrictedJoinRuleDialog_entry_name"
|
||||
>
|
||||
Other Space
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ManageRestrictedJoinRuleDialog_entry_description"
|
||||
>
|
||||
0 members
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
||||
<form
|
||||
class="_root_19upo_16"
|
||||
>
|
||||
<input
|
||||
id="checkbox_vY7Q4uEh9K"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="checkbox_vY7Q4uEh9K"
|
||||
<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-describedby=":r5:"
|
||||
class="_input_1hel1_18"
|
||||
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>
|
||||
</label>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="_inline-field-body_19upo_38"
|
||||
>
|
||||
<label
|
||||
class="_label_19upo_59"
|
||||
for="checkbox_vY7Q4uEh9K"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||||
data-color="1"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="none"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
>
|
||||
O
|
||||
</span>
|
||||
<span
|
||||
class="mx_ManageRestrictedJoinRuleDialog_entry_name"
|
||||
>
|
||||
Other Space
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<span
|
||||
class="_message_19upo_85 _help-message_19upo_91"
|
||||
id=":r5:"
|
||||
>
|
||||
0 members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user