New components
Inset banner
Remember our wrapper component that wraps inventory cards? The inset banner will start to replace this visually.
The details are designed to be inserted into the interface instead of wrapping the information around. This can be configured in various ways and supports the use of any partner brand colour. It’s not just for sponsored experiences but is a replacement for any wrapping we used before.
This update moves our style forward and resolves previous conflicts with grey wrappers and shadows.
👏 Thanks Dario from our Neutron squad for contributing this!
Price XS
We’ve added a new XS price for longer currencies. Find more in the Price component usage.
TextArea iOS
This simple input field is a simple component of text input and is now available for all platforms. Added to iOS.
👏 Thanks Alvin from our Tempura squad for contributing this!
Map markers experiment
All of our map price pins, markers, as well as the map skin have been redesigned by Maryam from the Product Design team and contributed to Backpack. They’re currently undergoing v2 experimentation before being finalised. This redesign uses an extended range of primitive colours that we’ve added as private colour tokens to the system.
👏 Thanks Tuxio from BlueDolphin Squad for contributing this.
New documentation
Card button (for save and share)
The dedicated card button for our save and share functionality has new guidelines in Backpack. Please check out the overview, usage, and accessibility guidelines for more information. Please note, Share isn’t available for Web yet.
Additionally, there’s a dedicated save and share lockup in Figma that maintains the correct spacing when using both together.
Quick-fire code updates you may have missed 🏃♂️
- New Search Modal component for compose
Thanks, Adam and James