mirror of https://github.com/vector-im/riot-web
				
				
				
			Add in-progress view to display name EditInPlace (#12609)
* Add in-progress view to display name EditInPlace Requires https://github.com/element-hq/compound-web/pull/180 * Update to new compound-web for editinplace component with spinner * Update snapshots for https://github.com/element-hq/compound-web/pull/178 * Update screenshots * Remove margin which isn't necessary now there's no 'Remove' link on the bottom * Update screenshotspull/28217/head
							parent
							
								
									6fc9d7641c
								
							
						
					
					
						commit
						650b9cb0cf
					
				| 
						 | 
				
			
			@ -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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
										
											Binary file not shown.
										
									
								
							| 
		 Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB  | 
										
											Binary file not shown.
										
									
								
							| 
		 Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB  | 
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -573,6 +573,7 @@
 | 
			
		|||
        "unnamed_space": "Unnamed Space",
 | 
			
		||||
        "unsent": "Unsent",
 | 
			
		||||
        "unverified": "Unverified",
 | 
			
		||||
        "updating": "Updating...",
 | 
			
		||||
        "user": "User",
 | 
			
		||||
        "user_avatar": "Profile picture",
 | 
			
		||||
        "username": "Username",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										40
									
								
								yarn.lock
								
								
								
								
							
							
						
						
									
										40
									
								
								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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue