Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

New toast design #10258

Closed
wants to merge 1 commit into from
Closed

New toast design #10258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions res/css/structures/_ToastContainer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ limitations under the License.

.mx_ToastContainer {
position: absolute;
top: 0;
top: $spacing-4;
left: 70px;
z-index: 101;
padding: 4px;
display: grid;
grid-template-rows: 1fr 14px 6px;

Expand All @@ -45,7 +44,7 @@ limitations under the License.
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: 8px;
padding: $spacing-16;

&.mx_Toast_hasIcon {
&::before,
Expand All @@ -60,6 +59,8 @@ limitations under the License.
mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
top: 1px;
}

&.mx_Toast_icon_verification::after {
Expand Down Expand Up @@ -104,21 +105,17 @@ limitations under the License.
}
}

.mx_Toast_title,
.mx_Toast_description {
padding-right: 8px;
}

.mx_Toast_title {
display: flex;
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;
margin-bottom: $spacing-16;

h2 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use the styled Heading component instead of the h2 tag and remove most of this style

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Except this style matches our h3 styling, which might cause a bit more fallout with changed snapshots etc

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The mx_Toast_title_countIndicator below also could be replaced with a Caption component

margin: 0;
font-size: $font-15px;
font-size: $font-18px;
font-weight: 600;
display: inline;
width: auto;
Expand All @@ -140,7 +137,8 @@ limitations under the License.
.mx_Toast_buttons {
display: flex;
justify-content: flex-end;
column-gap: 5px;
column-gap: $spacing-8;
margin-top: $spacing-32;

.mx_AccessibleButton {
min-width: 96px;
Expand All @@ -152,8 +150,9 @@ limitations under the License.
max-width: 272px;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;
margin: 0;
font-size: $font-15px;
font-weight: 600;

a {
text-decoration: none;
Expand All @@ -162,6 +161,9 @@ limitations under the License.

.mx_Toast_detail {
color: $secondary-content;
font-size: $font-12px;
font-weight: 400;
max-width: 272px;
}

.mx_Toast_deviceID {
Expand Down
6 changes: 2 additions & 4 deletions src/components/views/toasts/GenericToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,8 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({

return (
<div>
<div className="mx_Toast_description">
{description}
{detailContent}
</div>
<div className="mx_Toast_description">{description}</div>
{detailContent}
<div className="mx_Toast_buttons" aria-live="off">
{onReject && rejectLabel && (
<AccessibleButton kind="danger_outline" onClick={onReject}>
Expand Down
27 changes: 13 additions & 14 deletions test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,21 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
<div>
<div
class="mx_Toast_description"
/>
<div
class="mx_Toast_detail"
>
<div
class="mx_Toast_detail"
<span
data-testid="device-metadata-isVerified"
>
<span
data-testid="device-metadata-isVerified"
>
Verified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
ABC123
</span>
</div>
Verified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
ABC123
</span>
</div>
<div
aria-live="off"
Expand Down