Welcome to our first-ever Backpack monthly update. Here’s a quick roundup of what’s changed in design and code.

Style changes 👩‍🎨

Accordion

New styles

🎒 Bpk Accordion has had a few tweaks, there are new styles (On Contrast) and the spacing has been tided up to match the code.

We’ve also added all the Type Styles that are supported. We'll look to tidy this up in future and limit the options.

Notes

There is an optional prop for a ‘divider’ that wasn’t previously there. This is so we can use this on the new Banana footer design and not cause breaking changes elsewhere.

👏 Thanks to Alex from the Product Design team for collaborating on this and bringing the changes to our attention.

Colour

🌛 Canvas contrast and 🌛 Line on Dark were added to Figma to make it clear for Engineering of the 1-2-1 mapping between day-to-night Colours.

👏 Thanks to Maria from Koala for highlighting these missing styles.

Style discussions 🎨

Badge and hint alignment

Some great work has re-emerged to update the visual appearance of Alerts – possibly a new component called Hints – and tie these into some proposed changes to Badges.

👏 Special thanks to Kami and Luca from Product Design for restarting this.

New components in Beta 🚧

Typesetting Block

This is a Figma hack we're really quite proud of. Try dropping this into your design to get all the spacing right for each Type Style.

This contains three Bpk Type Styles + a button that can be configured in any order. All the spacing auto-adjusts simply by selecting options from the dropdown.

More on this in the Typesetting guidelines.

👏 Thanks to Jamie from Product Design for collaborating on this.

Category Chip

This is still in the proof-of-concept stage for car hire, but we decided to build the Figma component as it shares a lot of similarities with Chip Group, and just Chips in general.

Feel free to experiment with it for Flights or Hotels. We can add any number of extra styles or properties while we're in Beta.

👏 Thanks to Choon for bringing this forward, and for the input from Pete, Jamie, Alex and Chris; all from the Product Design team.

Ongoing discussions 🤔

Chip Groups

If you’ve not had a look at 🚧 Bpk Chip Group • Rail, or missed the chat about Sticky Chips placement for Sort & Filter (name tbc)… take a look at workshop.

We've reached a consensus; APIs were designed, and this is going into build soon.

Card List

🚧 Bpk Card List is the mega component that does many things. This is the first instance of a large component that needed to be designed as a Row / Grid / Rail / Stack. We’ve chosen to keep it as four separate components to limit all the properties in the sidebar.

APIs were designed. Scheduled for build in Q1/Q2.

Snippet

🚧 Bpk Snippet is a simple layout grid for a single image + text. Brand input on this too as a simple way to deliver an alternative design to Graphic Promotion.

APIs were designed. Scheduled for build in Q1/Q2.

Deprecated & Replaced 👻

Autosuggest

Deprecated

👻 Bpk Autosuggest was made up of too many variants and we wanted to align this with how it looks on the New Homepage.

Rather than making a breaking change… 😱

🥳 New component

🎒 Bpk Autosuggest replaces this, you can now build complex Autosuggest fields by playing with the Figma Properties Panel (Props) on the right.

Thanks to Ksenia from Product Design for collaborating on this.

Navigation Bar • Android

Deprecated

👻 Bpk Navigation Bar • Android was missing a default state (we were only showing collapsed). It was impossible to reconfigure this cleanly and add what we needed without causing problems.

Rather than making a breaking change… 😱

New component

🎒 Bpk Navigation Bar • Android has been added.

Notes

This contains states for Collapsed and Default, and optional props for Leading Back Icon (every Android interface does the arrow not a Chevron), and two optional props for icons and-or text.

Technical restrictions

The colours are set, please don’t make these transparent.

iOS and Android are just different, this aligns Android with iOS as closely as possible without breaking the idea of using native components.

Thanks to Daniel from Product Design for pointing out the missing styles.

Quick-fire code updates you may have missed 🏃‍♂️

• All the Badges are aligned across Compose, iOS and Web.
• A Brand style badge was also added to represent Deals.
• Card Buttons (Save and Share) were release for Compose, iOS will follow shortly, as well as proper design guidelines.
• There is a dedicated Divided Card now. Figma version is also available, although you may have to simply use it as a guide to place content inside of it.
• Price is aligned across Compose, Web, and will very shortly be available on iOS.
• Tooltip was given a little bit of love, with better 8px spacing.
• Cleaned up 11 long overdue deprecations on Web.

Thanks,
Adam