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
2025-03-20 15:35:54 +00:00
parent 170dcd1c0e
commit 599112e122
43 changed files with 2360 additions and 1435 deletions
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -7,26 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */

 .mx_LabelledCheckbox {
-    display: flex;
-    gap: 8px;
-    flex-direction: row;
-
-    .mx_Checkbox {
-        margin-top: 3px; /* visually align with label text */
-    }
-
-    .mx_LabelledCheckbox_labels {
-        flex: 1;
-
-        .mx_LabelledCheckbox_label {
-            vertical-align: middle;
-        }
-
-        .mx_LabelledCheckbox_byline {
-            display: block;
-            padding-top: $spacing-4;
-            color: $muted-fg-color;
-            font-size: $font-11px;
-        }
-    }
+    margin-top: var(--cpd-space-2x);
 }
@@ -1,98 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_Checkbox {
-    $size: $font-16px;
-    $border-radius: 0.27rem;
-
-    display: flex;
-    align-items: flex-start;
-
-    input[type="checkbox"] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
-
-        & + label {
-            display: flex;
-            align-items: center;
-
-            flex-grow: 1;
-        }
-
-        & + label > .mx_Checkbox_background {
-            display: inline-flex;
-            position: relative;
-
-            flex-shrink: 0;
-
-            height: $size;
-            width: $size;
-            size: 0.5rem;
-            border: 1px solid var(--cpd-color-border-interactive-primary);
-            box-sizing: border-box;
-            border-radius: $border-radius;
-
-            .mx_Checkbox_checkmark {
-                display: none;
-
-                height: 100%;
-                width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-position: center;
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-            }
-        }
-
-        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-            display: block;
-        }
-
-        & + label > *:not(.mx_Checkbox_background) {
-            margin-left: 10px;
-        }
-
-        &:disabled + label {
-            cursor: not-allowed;
-        }
-
-        &:focus-visible {
-            & + label .mx_Checkbox_background {
-                @mixin unreal-focus;
-            }
-        }
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-icon-on-solid-primary);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-accent-rest);
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked:disabled + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-action-primary-disabled);
-        border-color: var(--cpd-color-bg-action-primary-disabled);
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: transparent;
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-}