imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update toast styles to match Figma (#12833)

Browse source 
* Warn users on unsupported browsers before they lack features

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Learn more link

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 toast styles to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove test code

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-30 13:57:15 +01:00 • committed by GitHub
parent a1897583b1
commit b0392b8fc3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 156 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

8
test/components/views/toasts/GenericToast-test.tsx
View file

@ -21,11 +21,11 @@ import GenericToast from "../../../../src/components/views/toasts/GenericToast";
const renderGenericToast = (props: Partial<ComponentProps<typeof GenericToast>> = {}): RenderResult => {
const propsWithDefaults = {
acceptLabel: "Accept",
primaryLabel: "Accept",
description: <div>Description</div>,
onAccept: () => {},
onReject: () => {},
rejectLabel: "Reject",
onPrimaryClick: () => {},
onSecondaryClick: () => {},
secondaryLabel: "Reject",
...props,
};

32
test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
View file

@ -14,20 +14,24 @@ exports[`GenericToast should render as expected with detail content 1`] = `
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
<button
class="_button_zt6rp_17"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
Reject
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
</button>
<button
class="_button_zt6rp_17"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
>
Accept
</div>
</button>
</div>
</div>
</DocumentFragment>
@ -52,20 +56,24 @@ exports[`GenericToast should render as expected without detail content 1`] = `
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
<button
class="_button_zt6rp_17"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
Reject
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
</button>
<button
class="_button_zt6rp_17"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
>
Accept
</div>
</button>
</div>
</div>
</DocumentFragment>

32
test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap
View file

@ -12,20 +12,24 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
<button
class="_button_zt6rp_17"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
Ignore
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
</button>
<button
class="_button_zt6rp_17"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
>
Verify Session
</div>
</button>
</div>
</div>
</div>
@ -48,20 +52,24 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
<button
class="_button_zt6rp_17"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
Ignore
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
</button>
<button
class="_button_zt6rp_17"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
>
Verify Session
</div>
</button>
</div>
</div>
</div>

2
test/stores/LifecycleStore-test.ts
View file

@ -80,7 +80,7 @@ describe("LifecycleStore", () => {
await sleep(0);
addOrReplaceToast.mock.calls[0][0].props.onAccept();
addOrReplaceToast.mock.calls[0][0].props.onPrimaryClick();
expect(dismissToast).toHaveBeenCalledWith(addOrReplaceToast.mock.calls[0][0].key);
});

20
test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
View file

@ -13,7 +13,9 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
<div
class="mx_Toast_title"
>
<h2>
<h2
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
>
New login. Was this you?
</h2>
<span
@ -47,20 +49,24 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
<button
class="_button_zt6rp_17 _destructive_zt6rp_111"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
No
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
</button>
<button
class="_button_zt6rp_17"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
>
Yes, it was me
</div>
</button>
</div>
</div>
</div>