The long-awaited new look of Angular Materials is finally here!
November 30, Zürich
Have you seen the new look of Angular Materials on material.angular.io? The newly added visual updates are worth the buzz!
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!
So what’s the inspiration 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?
1) They have set up a route for each component which contains a “scene” using the actual material component
2) Created an end-to-end testing environment and took screenshots of each route with a protractor
3) Saved the screenshots instead of comparing them to an expected image
4) Loaded the screenshots from the site
This approach saves a lot of time and effort as whenever a component is going to be upgraded, all you need is to take new screenshots!
In fact, we use the screenshot automation for scenes at LogicFlow in our testing tool as well!
The team held a small hackathon to create each scene where they could share with their cool ideas. 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.
To conclude, we 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 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 latest news from the techno world. Be sure to follow us on LinkedIn and subscribe to our newsletter on our website, and we will make sure that you’ll not miss out on anything! Have a great and productive week and see you at the next #MondayBlog by LogicFlow!
