Fix `o-grid.layoutChange` for custom layouts (breakpoints)

notlee commented 3 years ago

It is possible to add a custom layout (breakpoint) to the grid:

@include oGridAddLayout(
    $layout-name: XS,
    $layout-width: 360px
);

However the enableLayoutChangeEvents method, which sets up event listeners to fire when layouts change, did not correctly fire for custom layouts. It fired layout change events for any custom layout when the default layout change is fired, regardless of the size of the custom layout.

Now events are fired correctly for each layout, however this still depends on each layout having the same CSS unit (px, rem, etc). Since oGridAddLayout currently throws an error if there is a mismatch of units I think that's ok.

https://github.com/Financial-Times/o-grid/issues/286

https://user-images.githubusercontent.com/10405691/119658658-51c71100-be25-11eb-89ec-763bc1735c93.mov

origamiserviceuser commented 3 years ago

o-grid bundle size difference from 5.2.10 to e8a8a44c805aec639de6d164ec0feded41725f7f js: 3.87kb decrease (-1.40kb/gzip) An insignificant difference was also found for: css

origamiserviceuser commented 3 years ago

o-grid bundle size difference from 5.2.10 to ccffb1d22cf6d60cfcc0982828ec895105ae26bd js: 2.24kb decrease (-0.94kb/gzip) An insignificant difference was also found for: css

origamiserviceuser commented 3 years ago

:tada: This PR is included in version v5.2.11 :tada:

Financial-Times / o-grid

Fix `o-grid.layoutChange` for custom layouts (breakpoints) #287