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

wants to merge 1 commit into from

Conversation

weeman1337
Copy link
Contributor

@weeman1337 weeman1337 commented Feb 28, 2023

closes element-hq/element-web#24490

Before After
image image

Designs: element-hq/element-web#24490 (comment)

ℹ️ in design the toast is more on the left side.
I did not do this, because many of our Cypress tests would explode, because they currently don't care about the toasts.

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

✨ Features

@weeman1337 weeman1337 added T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue labels Feb 28, 2023
@weeman1337 weeman1337 changed the title Update toast design New toast design Mar 1, 2023
@weeman1337
Copy link
Contributor Author

Percy doesn't seem to take a screenshot of a toast yet.

@weeman1337 weeman1337 marked this pull request as ready for review March 1, 2023 13:03
@weeman1337 weeman1337 requested a review from a team as a code owner March 1, 2023 13:03
Copy link
Contributor

@kerryarchibald kerryarchibald left a comment

Choose a reason for hiding this comment

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

Code looks good to me, left some comments but feel free to ignore them.
Adding my ✅ but should be reviewed by design too.

.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

@weeman1337 weeman1337 requested a review from a team March 2, 2023 07:44
@weeman1337
Copy link
Contributor Author

This PR is put on hold. Need to clarify the scope.

@weeman1337 weeman1337 marked this pull request as draft March 2, 2023 08:16
@weeman1337 weeman1337 removed request for a team, dbkr and SimonBrandner March 2, 2023 08:16
@weeman1337
Copy link
Contributor Author

This PR will be replaced by a new one.

@weeman1337 weeman1337 closed this Mar 28, 2023
@weeman1337 weeman1337 deleted the weeman1337/new-toast-design branch March 28, 2023 07:35
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

When connecting a new device, device verification does not start automatically
2 participants