# Upgrade guide for Grid v5.1.0

## Responsive Mixin `breakpoints` Config is Deprecated

The `breakpoints` config was used to dynamically calculate config properties based on the widget's size. This config
has been superseded by the `responsive` config.

**Old code:**

```javascript
class ResponsiveButton extends Button.mixin(Responsive) {}

const button = new ResponsiveButton({
    breakpoints : {
        width : {
            // When width drops to 50 or below, hide text and show icon
            50 : {
                name    : 'small',
                configs : { text : null, icon : 'b-fa b-fa-plus' }
            },

            // When width is above 50, hide icon and show text
            '*' : {
                 name    : 'large',
                 configs : { text : 'Add', icon : null }
            }
        }
    }
});
```

**New code:**

```javascript
class ResponsiveButton extends Button.mixin(Responsive) {}

const button = new ResponsiveButton({
    responsive : {
        // When width drops to 50 or below, hide text and show icon
        small : {
            when : 50,
            text : null,
            icon : 'b-fa b-fa-plus'
        },

        // When width is above 50, hide icon and show text
        '*' : {
            text : 'Add',
            icon : null
        }
    }
});
```

## Responsive Mixin `responsiveWidthChange` and `responsiveHeightChange` Events are Deprecated

Along with the deprecation of the associated `breakpoints` config, these events have been replaced by the new
`responsiveStateChange` event

**Old code:**

```javascript
class ResponsiveButton extends Button.mixin(Responsive) {}

const button = new ResponsiveButton({
    breakpoints : {
        width : {
            // When width drops to 50 or below, hide text and show icon
            50 : {
                name    : 'small',
                configs : { text : null, icon : 'b-fa b-fa-plus' }
            },

            // When width is above 50, hide icon and show text
            '*' : {
                 name    : 'large',
                 configs : { text : 'Add', icon : null }
            }
        }
    },
    listeners : {
        responsiveWidthChange({ source, breakpoint, prevBreakpoint }) {
            // ...
        }
    }
});
```

**New code:**

```javascript
class ResponsiveButton extends Button.mixin(Responsive) {}

const button = new ResponsiveButton({
    responsive : {
        // When width drops to 50 or below, hide text and show icon
        small : {
            when : 50,
            text : null,
            icon : 'b-fa b-fa-plus'
        },

        // When width is above 50, hide icon and show text
        '*' : {
            text : 'Add',
            icon : null
        }
    },
    listeners : {
        responsiveStateChange({ source, state, oldState }) {
            // ...
        }
    }
});
```

## New module bundle for Angular

Bryntum Grid is now delivered with new ES Module bundle without WebComponents. This was done to avoid conflicts with
Angular which also uses WebComponents for applications.

Angular wrappers use `grid.module.js` bundle in favor of removed `grid.lite.umd.js` one.

Your Angular applications should be upgraded to use the new `grid.module.js` bundle which is set as `main` for
`@bryntum/grid` NPM package.

Replace all application imports from Bryntum packages as shown below:

**Old code:**

```javascript
import { Grid } from '@bryntum/grid/grid.lite.umd.js';
```

**New code:**

```javascript
import { Grid } from '@bryntum/grid';
```

## New module bundle with WebComponents

Bryntum Grid is now delivered with new `grid.wc.module.js` ES Module bundle with WebComponents.

Your applications which use WebComponents and modules bundle should be upgraded to import from new `grid.wc.module.js`
instead of `grid.module.js`.


<p class="last-modified">Last modified on 2023-10-26 8:19:11</p>