BAgel 2 - layout, grid and typography

Notes about the BAgel 2 release and what teams will need to do in order to upgrade their projects

Why the breaking change

The recent changes to the ba-grid component and the additions of the ba-page-segment and ba-content components allow for:

closer parity between design files and BAgel code
a much simpler development flow without the reliance on a medley of CSS classes and sass functionality

Component changes

ba-accordion

The changes in this component aren't related to layout/structure, but include some deprecated attributes that are due to be phased out

Remove deprecated accordion-title renamed to heading to align with new heading-level attribute
Remove deprecated subtitle renamed to subheading to align with heading naming convention
Remove deprecated hide-accordion-shadow sibling accordions now automatically remove top border / shadow
Remove deprecated name this attribute muddled the semantics between id's and name's so has been removed to allow the accordion to set it's own internal id's
Remove deprecated attention-indicator title and subtitle options Use heading and subheading instead

ba-col

This component can be removed as ba-grid can be used for column layouts

ba-grid

Remove deprecated align-items no new equivalent
Remove deprecated full ba-grid is now full width by default
Remove deprecated reverse as reversing content can lead to layouts that aren't accessible
Remove deprecated row-gap replaced by a number of of row-gutter-x attributes that allow the value to be changed per viewport width
Remove latest temporary attribute that was used to force the most recent version of the component

ba-section

This component can be removed and ba-page-segment can be used instead

ba-text

This component can be removed and ba-content (and native html text elements) can be used instead

CSS changes

Remove background-x classes use ba-page-segment themes instead
Remove border-x classes no new equivalent
Remove default styling from h1-h6, p, ul and ol use ba-content instead
Remove default styling from dl no new equivalent
Remove [shadow-top],[shadow-bottom] and shadow-top & shadow-bottom classes no new equivalent
Remove margin-x, margin-top-x, margin-bottom-x, margin-left-x, and margin-right-x classes use ba-grid instead
Remove padding-x, padding-top-x, padding-bottom-x, padding-left-x, and padding-right-x classes use ba-grid instead
Remove text-x colour classes use ba-page-segment themes instead
Remove [heading-x] and heading-x, text-x, subheading typography classes use ba-content instead

SASS changes

These changes have been proposed as they are either not in use within BAgel, or the functionality can be replicated with the ba-grid, ba-page-segment and ba-content components

Remove the following variables:

$spacing-directions & $spacing-size
$app-direction
$global-breakpoints
$global-width
$global-font-size
$global-line-height
$global-font-weight
$global-border-radius
$base-spacing-unit-x
$font-weight-x
$color-x
$colors
$headings-x
$heading-x
$subheading-x
$body-font-size
$body-line-height
$body-letter-spacing

Remove the following mixins:

spacing
set-breakpoint-min
set-breakpoint-max
set-breakpoint-min-max
clearfix
calculate-rem
anchor-style
opacity
pseudo
property-horizontal
property
padding-horizontal
padding
margin-horizontal
margin
responsive-ratio
truncate
heading-x
subheading
body-x
font-size

Remove the following functions

color
current-color
get-color-shade
get-color-tint
color-to-rgb-list

Dependency changes

Remove Foundation XY and related mixins and classes use ba-grid instead