Add in-progress view to display name EditInPlace (#12609)

* Add in-progress view to display name EditInPlace Requires element-hq/compound-web#180 * Update to new compound-web for editinplace component with spinner * Update snapshots for element-hq/compound-web#178 * Update screenshots * Remove margin which isn't necessary now there's no 'Remove' link on the bottom * Update screenshots
matrix-org · Jun 14, 2024 · 650b9cb · 650b9cb
1 parent 6fc9d76
commit 650b9cb
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.4.1",
+        "@vector-im/compound-web": "^4.6.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
diff --git a/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png b/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
diff --git a/res/css/views/settings/_UserProfileSettings.pcss b/res/css/views/settings/_UserProfileSettings.pcss
@@ -21,12 +21,11 @@ limitations under the License.
         display: flex;
         margin-top: var(--cpd-space-6x);
         gap: 16px;
-        /* This is temporary until the 'Remove' link is replaced by a context menu. */
-        margin-bottom: 20px;
 
         .mx_UserProfileSettings_profile_displayName {
             flex-grow: 1;
             width: 100%;
+            gap: 0;
         }
     }
 

diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx
@@ -164,6 +164,7 @@ const UserProfileSettings: React.FC = () => {
                     saveButtonLabel={_t("common|save")}
                     cancelButtonLabel={_t("common|cancel")}
                     savedLabel={_t("common|saved")}
+                    savingLabel={_t("common|updating")}
                     onChange={onDisplayNameChanged}
                     onCancel={onDisplayNameCancel}
                     onSave={onDisplayNameSave}

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -573,6 +573,7 @@
         "unnamed_space": "Unnamed Space",
         "unsent": "Unsent",
         "unverified": "Unverified",
+        "updating": "Updating...",
         "user": "User",
         "user_avatar": "Profile picture",
         "username": "Username",

diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -123,10 +123,10 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
-      <label
+      <div
+        aria-checked="false"
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"
-        for=":r3:"
         role="menuitemcheckbox"
       >
         <div
@@ -135,11 +135,12 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
           height="24"
           width="24"
         />
-        <span
+        <label
           class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          for=":r3:"
         >
           Favourite
-        </span>
+        </label>
         <div
           class="_container_ik1u1_18"
         >
@@ -152,7 +153,7 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
             class="_ui_ik1u1_42"
           />
         </div>
-      </label>
+      </div>
       <button
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"
@@ -520,10 +521,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
-      <label
+      <div
+        aria-checked="false"
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"
-        for=":r1:"
         role="menuitemcheckbox"
       >
         <div
@@ -532,11 +533,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           height="24"
           width="24"
         />
-        <span
+        <label
           class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          for=":r1:"
         >
           Favourite
-        </span>
+        </label>
         <div
           class="_container_ik1u1_18"
         >
@@ -549,7 +551,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             class="_ui_ik1u1_42"
           />
         </div>
-      </label>
+      </div>
       <button
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"
@@ -928,10 +930,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
-      <label
+      <div
+        aria-checked="false"
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"
-        for=":r2:"
         role="menuitemcheckbox"
       >
         <div
@@ -940,11 +942,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           height="24"
           width="24"
         />
-        <span
+        <label
           class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          for=":r2:"
         >
           Favourite
-        </span>
+        </label>
         <div
           class="_container_ik1u1_18"
         >
@@ -957,7 +960,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             class="_ui_ik1u1_42"
           />
         </div>
-      </label>
+      </div>
       <button
         class="_item_1gwvj_17 _interactive_1gwvj_36"
         data-kind="primary"

diff --git a/yarn.lock b/yarn.lock
@@ -3235,10 +3235,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^4.4.1":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.4.1.tgz#378c6874888becd4b6dd3541904f63300b9ba09a"
-  integrity sha512-KLYSU8GxR8EBuz+gKSoLLs4+s5xV4stUDbqJu5GG52OmO3YQlvmz/e5/uHYvzfbqBBU5dMmZhz5bdJJ38qxHPQ==
+"@vector-im/compound-web@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.6.0.tgz#3fcdbf11f911580aa90c56fd2894cfc3e3848844"
+  integrity sha512-N/Q6FX1v1P7EWHQB8lj8tdBgLIDy7xkz8hnNschW/q5PrasT4kzHlBy0rvcqfcYUBu1puwQCBpVEz8IuTv452g==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"
@@ -3250,7 +3250,6 @@
     "@radix-ui/react-tooltip" "^1.0.6"
     "@storybook/manager-api" "^8.1.1"
     classnames "^2.3.2"
-    graphemer "^1.4.0"
     vaul "^0.7.0"
 
 "@zxcvbn-ts/core@^3.0.4":
@@ -8918,16 +8917,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9033,14 +9023,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9870,7 +9853,7 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9888,15 +9871,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"