Update settings toggles to use consistent design across app. (#30169)

* Use EditInPlace for identity server picker. * Update test * Add a test for setting an ID server. * fix tests * Reformat other :not sections * forgot a comma * Update Apperance settings to use toggle switches. * Remove unused checkbox setting. * Remove unused import. * Update tests * lint * update apperance screenshot * Begin replacing settings * Refactor RoomPublishSetting * Remove LabelledToggleSwitch * Refactor SettingsFlag to use SettingsToggleInput * Refactor CreateRoomDialog to use SettingsToggleInput * Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput * Update DevtoolsDialog * Refactor ReportRoomDialog to use SettingsToggle * Update RoomUpgradeWarningDialog to use SettingsToggleInput * Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput * Update trivial switchovers * Update Notifications settings to use SettingsFlag where possible * Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning * revert changes to field * Updated screenshots * Prevent accidental submits * Replace test ID tests * Create new snapshot tests * Add screenshot test for DeclineAndBlockDialog * Add screenshot for create room dialog. * Add devtools test * Add upgrade rooms test * Add widget capabilites prompt test * Fix spec * Add a test for the live location sharing prompt. * fix copyright * Add tests for notification settings * Add tests for user security tab. * Add test for room security tab. * Add test for video settings tab. * remove .only * Test creating a video room * Mask the IM name in the header. * Add spaces vis tab test. * Fixup unit tests to check correct attributes. * Various fixes to components for tests. * lint * Update compound * update setting names * Cleanup tests prettier Updates some more playwright tests Update more snapshots Update switch more fixes drop .only last screenshot round fix video room flake Remove console.logs Remove roomId from devtools view. lint final screenshot * Add playwright tests * import pages/ remove duplicate create-room * Update screenshots * Fix accessibility for devtools * Disable region test * Fixup headers * remove extra test * Fix permissions dialog * fixup tests * update snapshot * Update jest tests * Clear up playwright tests * update widget screenshot * Fix wrong snaps from using wrong compound version * Revert mistaken s/checkbox/switch/ * lint lint * Update headings * fix snap * remove unused * update snapshot * update tab screenshot * Update snapshots * Fix margins * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-11-05 12:54:39 +00:00 · 2025-12-04 15:46:21 +00:00
parent f84e2815d0
commit a2f5c49438
93 changed files with 5491 additions and 4726 deletions
@@ -301,7 +301,7 @@ describe("<LocationShareMenu />", () => {

            setShareType(getByText, LocationShareType.Live);

-            expect(getByText("OK").hasAttribute("disabled")).toBeTruthy();
+            expect(getByText("OK")).toHaveAttribute("aria-disabled", "true");
        });

        it("enables OK button when labs flag is toggled to enabled", () => {
@@ -311,7 +311,7 @@ describe("<LocationShareMenu />", () => {

            fireEvent.click(getByLabelText("Enable live location sharing"));

-            expect(getByText("OK").hasAttribute("disabled")).toBeFalsy();
+            expect(getByText("OK")).not.toHaveAttribute("aria-disabled", "true");
        });

        it("enables live share setting on ok button submit", () => {
@@ -18,41 +18,50 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
  >
    Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
  </p>
-  <div
-    class="mx_SettingsFlag"
-    data-testid="enable-live-share-toggle"
+  <form
+    class="_root_19upo_16"
  >
-    <span
-      class="mx_SettingsFlag_label"
+    <div
+      class="_inline-field_19upo_32"
    >
      <div
-        id="mx_LabelledToggleSwitch__r_0_"
+        class="_inline-field-control_19upo_44"
      >
-        Enable live location sharing
+        <div
+          class="_container_udcm8_10"
+        >
+          <input
+            class="_input_udcm8_24"
+            id="_r_0_"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_udcm8_34"
+          />
+        </div>
      </div>
-    </span>
-    <div
-      aria-checked="false"
-      aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch__r_0_"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      role="switch"
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="_r_0_"
+        >
+          Enable live location sharing
+        </label>
+      </div>
+    </div>
+    <button
+      aria-disabled="true"
+      class="_button_187yx_8 mx_EnableLiveShare_button"
+      data-kind="primary"
+      data-size="lg"
+      role="button"
      tabindex="0"
    >
-      <div
-        class="mx_ToggleSwitch_ball"
-      />
-    </div>
-  </div>
-  <button
-    aria-disabled="true"
-    class="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
-    data-testid="enable-live-share-submit"
-    disabled=""
-    role="button"
-    tabindex="0"
-  >
-    OK
-  </button>
+      OK
+    </button>
+  </form>
 </div>
 `;