New shared libraries
We've given the libraries in Figma a good tidy. The previously-named ‘Agreed Patterns’ and ‘Legacy Patterns’ have been removed and everything has been moved to a library that reflects the platform of the existing code. Visit the Team Libraries folder to find the latest.
Simplified library overview
- 🍌🌰 Banana and Acorn contains Home, Combined Results, Explore and mWeb. Desktop: Flights Results, Partner Selection.
- 🚗 🏨 Car Hire and Hotels are together in one file.
- 🛸 Falcon houses SEO pages, content pages, destination hub.
- 🌎 Global Components (new) and Open Components (old).
The only exception is inventory cards.
Inventory Cards
While they’re not officially part of Backpack inventory cards are built in line with Backpack standards.
Vivian and Pete from the Flight’s team have meticulously mapped every single inventory flight card. Their work includes over 100 cards for Flights alone, covering every variable, platform, and both current and next states, as well as Visual Design Language. These are all neatly organised in an accessible grid. Pages for Car Hire and Hotels are currently being populated.
Tale a look in our Team Libraries Figma folder at this comprehensive file.
Updated components
Focus indicator
From power users to travellers using assistive technology, the focus indicator helps many navigate our product with ease. The best part of this component is you don't need to do anything in code. This affects anything with a focus state.
Swap button
The dedicated control to swap origins has been added. This should only be used within our Search Input Controls.
👏 Thanks to Jenna from Luna for contributing.
Badges
Following the update in November, badges have now been completed and shipped.
👏 Shoutout to Luca, Kami, Clare and Maryam for collaborating, and to Devito squad for making the changes.
New components in Beta 🚧
Link styles
Our inline link style is historic, predating the 2019 rebrand, 2022 colour refresh, and more recent incremental UI improvements. It stands out significantly – which might be a good thing – but also makes it difficult for other UI elements to be pronounced. We're experimenting with reducing its affordance while offering both explicit and implicit options.
For more information, search 'Global Link Styles' in Confluence.
Info banner docs
Info banner Overview and Usage have been added to our documentation.
Quick-fire code updates you may have missed 🏃♂️
New components in Web
- Bottom Sheet component from Justyna Toporkiewicz
- Info Banner from Sam Bocharov
- On-dark Navigation Bar from Iain Cattermole
- Swap Button from Jenna McLelland