The new look of Angular Materials is here!
November 30, 2020 at 3:55 pm,
No comments
Let's discover the latest features!
If you haven’t visited Angular Materials documentation website yet, we will take you through the new visual
updates! First, the Angular team has updated the homepage, added new colourful images on the component's page,
and remade the guides page, and so much more!
What’s behind these fun and vibrant images?
Annie Wang, who is one of the people behind the Angular Components project, writes that
the illustrations on the Material Design components inspired them with
the aesthetic abstract design that referenced each component. The initial plan was to adapt the idea for material.angular.io, however, a few obstacles and requirements
stood in the way. A major issue is the absence of the dedicated illustrator on the team. As for the requirements,
the Angular Team wanted to make sure that images would be compact and clearly reference each individual component,
as well as easily update images when the component’s appearance changed. Thus, the Angular Team decided to take upon
themselves to build what they have envisioned from scratch.
The design of the components on the Angular Components is more of a realistic view rather than an abstract
representation. They created “scenes” for every component to capture them the way they would be used. A technique
named “screenshot testing” now helps to efficiently capture these components. It allows to capture an image of the
page of the given URL and to compare it to the expected image. With the given technique, they can automatically
generate up-to-date scenes for all the 35 components.
So how did they do it?
- They have set up a route for each component which contains a “scene”
- Created an end-to-end testing environment and took screenshots of each route with protractor
- Saved the screenshots instead of comparing them to an expected image
- Loaded the screenshots from the site
The team held a small hackathon where they could share their ideas to create the scenes. For instance, on
the left - the button component, it displays all different styles and types of available buttons like FAB, icon,
raised, etc. And on the right - we have the toggle component, where you can see the toggle in both states.
Here at LogicFlow are excited for the new look of Angular Components as well as
all the new updates, and we are sure you will love it as well! Take a look at the new Angular Material website and let us know what you have enjoyed the
most.
To read the original article from Angular Blog written by Annie Wang, click here.
Hope you enjoyed our #MondayBlog on the new Angular Material features. Stay
tuned for the upcoming news.
