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

Implement new toast UI (#10467)

Browse source 
* Implement new toast UI

* Use PCSS vars and Caption component

* Add GenericToast-test

* Tweak call toast

* Fix code style
This commit is contained in:
Michael Weimann 2023-04-18 13:38:41 +02:00 • committed by GitHub
parent e350b4c2c2
commit 7632f36624
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 206 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

47
test/components/views/toasts/GenericToast-test.tsx Normal file
View file

@ -0,0 +1,47 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { render, RenderResult } from "@testing-library/react";
import React, { ComponentProps } from "react";
import GenericToast from "../../../../src/components/views/toasts/GenericToast";
const renderGenericToast = (props: Partial<ComponentProps<typeof GenericToast>> = {}): RenderResult => {
const propsWithDefaults = {
acceptLabel: "Accept",
description: <div>Description</div>,
onAccept: () => {},
onReject: () => {},
rejectLabel: "Reject",
...props,
};
return render(<GenericToast {...propsWithDefaults} />);
};
describe("GenericToast", () => {
it("should render as expected with detail content", () => {
const { asFragment } = renderGenericToast();
expect(asFragment()).toMatchSnapshot();
});
it("should render as expected without detail content", () => {
const { asFragment } = renderGenericToast({
detail: "Detail",
});
expect(asFragment()).toMatchSnapshot();
});
});

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

@ -0,0 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GenericToast should render as expected with detail content 1`] = `
<DocumentFragment>
<div>
<div
class="mx_Toast_description"
>
<div>
Description
</div>
</div>
<div
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Reject
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Accept
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`GenericToast should render as expected without detail content 1`] = `
<DocumentFragment>
<div>
<div
class="mx_Toast_description"
>
<div>
Description
</div>
<span
class="mx_Caption mx_Toast_detail"
>
Detail
</span>
</div>
<div
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Reject
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Accept
</div>
</div>
</div>
</DocumentFragment>
`;