BAgel 3 - new UI and WCAG 2.2
Notes about the BAgel 3 release and what teams will need to do in order to upgrade their projects
What's in the release
Updated UI
Uses the latest brand refresh to give an updated look.
WCAG 2.2 Compliant
Ensuring inclusivity by adhering to the latest accessibility standards.
Next.js and React.js support
Enabling BAgel to be used in even more situations and environments.
Dedicated Form Components
Introducing specialized form components to streamline user interactions.
Optimized and Standardised Attributes
Making it even easier to learn and use BAgel.
Decreased Technical Debt
Removed a lot of technical debt allowing us and our users to focus on new features.
Increased Flexibility
Offering more customizable options and configurations to adapt to a diverse range of situations.
Boosted Performance
Smaller bundle size and improved performance for various components.
Form element standardisation
We've made it easier to build forms by ensuring all form elements now use the same props, attributes, events, methods and slots.
Components affected
- ba-checkbox
- ba-form-group
- ba-form-group-dropdown
- ba-input-datepicker
- ba-input-date
- ba-input-stepper
- ba-checkbox
- ba-input-textarea
- ba-input-typeahead
- ba-radio-group
- ba-radio
- ba-select
- ba-
- ba-
- ba-
- ba-
- ba-
- ba-
- ba-
- ba-
- /
- ba-select
Props and Attributes
Each form element has the following props as standard where appropriate.
- label
- hint-text
- value
- name
- invalid
- required
Events
- baBlur
- baFocus
- baOnInput
- baSubmit
- baChange
Methods
- isValid - This can be used to run the components internal validation
Slots
- error - for custom error messages
Deprecated components
ba-entry
Similar functionality can be achieved by using the new ba-link-entry component
ba-input
Use the dedicated input components instead
ba-modal
Modal component is still deprecated due to various accessibility issues
Deleted Components
- ba-progress-bar
- ba-login-form
- ba-global-header (use ba-header instead)
- ba-textarea (use ba-input-textarea instead)
Other Updates
ba-accordion
- Deleted option for subheading to have attention indicator
- Attention indicator property is now boolean
- ba-accordion can no longer be placed in ba-content
ba-back-link
- Renamed to ba-link-back
ba-button
- Removed deprecated attributes and props related to styling the button. Use variant attribute instead
ba-content
- ba-accordion no longer a permitted child
- ba-details no longer a permitted child
- Added alignment for when ba-icon is used in
<h1> - <h6> and <p>elements
ba-date-input
- Renamed to ba-input-date
ba-details
- ba-details can no longer be placed in ba-content
ba-footer
- Deleted the link slot (Now uses the
ba-footer-listcomponent for links) - Deleted the social-title attribute
ba-grid
- Now defaults to 16 for row-gutter-320vw and column-gutter-320vw
ba-icon
- Deleted back, add-full, alert-full, remove-full icons
- Deleted fliprtl, loading, colour, circle-colour, url and custom size attributes
- Added new icons
ba-image
- Deleted deprecated aspect-ratios 1-2, 2-1, 3-2, 8-5, 21-9
- Deleted deprecated width and height attributes
ba-input-datepicker
- Added defaults for min and max
ba-interstitial
- Renamed to ba-loading-page
- Removed abilty to use in page via inline attribute
- Deleted usingInline, isloading, and name props
- Renamed interstitialTitle prop to text
ba-logo
- Removed 'ba' option from name attribute. Use 'british-airways' instead
ba-page-segment
- Added new themes
- Deleted base-grey-10 theme
- Changed width on mobile devices
ba-section-loader
- Renamed to ba-loading-skeleton
ba-textarea
- Renamed to ba-input-textarea
Colour tokens
The following colour tokens have been deprecated and will be removed in a future release:
$bagel-tokens-colour-primary-blue$bagel-tokens-colour-primary-midnight-blue$bagel-tokens-colour-primary-red$bagel-tokens-colour-ui-base-grey-5$bagel-tokens-colour-ui-base-grey-10$bagel-tokens-colour-ui-base-grey-25$bagel-tokens-colour-ui-base-grey-50$bagel-tokens-colour-ui-base-grey-100$bagel-tokens-colour-ui-white$bagel-tokens-colour-ui-highlight-blue$bagel-tokens-colour-ui-highlight-red$bagel-tokens-colour-ui-alert-pink$bagel-tokens-colour-ui-confirmation-green$bagel-tokens-colour-executive-club-blue-tier$bagel-tokens-colour-executive-club-bronze-tier$bagel-tokens-colour-executive-club-silver-tier$bagel-tokens-colour-executive-club-gold-tier$bagel-tokens-colour-executive-club-premier-tier
If you're using these tokens, please update your code to use the new ba-page-segment themes.
If you are using the colours for another purpose please let us know so we can provide an alternative options.