# Upgrade guide for Grid v5.3.0

## Button, Checkbox, Radio, SlideToggle & Toast CSS changes

The CSS for these widgets was changed - instead of letting SASS generate CSS for the built-in color variations it now
uses internal CSS variables.

The upside of this change is that it removes thousands of lines of CSS, while also making it easier for us to add more
colors in the future.

We don't expect it to affect the styling of existing applications much, but if your application use custom styling for
these widgets you might need to adjust the specificity of some selectors.

With the change, the following SCSS variables are no longer used and was removed:

`$button-hover-lightness`
`$button-pressed-lightness`
`$button-active-lightness`
`$button-pressed-hover-lightness`
`$button-active-hover-lightness`
`$button-pressed-active-lightness`
`$button-pressed-active-hover-lightness`
`$checkbox-checked-box-color`
`$checkbox-checked-box-background-color`
`$checkbox-checked-box-border-color`
`$radio-background-color`
`$radio-border-color`
`$radio-dot-color`
`$radio-checked-dot-color`
`$radio-checked-border-color`
`$radio-checked-background-color`
`$radio-disabled-background-color`             
`$radio-disabled-border-color`

There is not a 1-1 mapping to anything in the updated CSS, therefor if you are using any of these SCSS variables we
recommend checking the corresponding CSS files to figure out what to use instead (see `button.scss`, `checkbox.scss`,
`radio.scss`). Or post a question on the [forum](https://forum.bryntum.com).

## Localization update

`LocaleManager.registerLocale` has been deprecated.
[LocaleHelper.publishLocale](#Core/localization/LocaleHelper#function-publishLocale-static) should be used instead.

**Old code:**

```javascript
LocaleManager.registerLocale('Es', {
    desc : 'Spanish', locale : {
        localeName : 'Es',
        localeDesc : 'Spanish',
        locale     : {
            /* localization */
        }
    }
});
```

**New code:**

```javascript
LocaleHelper.publishLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});
```

`LocaleManager.extendLocale` has been deprecated.
[LocaleManager.applyLocale](#Core/localization/LocaleManager#function-applyLocale) should be used instead.

**Old code:**

```javascript
LocaleManager.extendLocale('Es', {
    desc : 'Spanish', locale : {
        locale : {
            /* localization */
        }
    }
});
```

**New code:**

```javascript
LocaleManager.applyLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});
```

Check our [localization guide](#Grid/guides/customization/localization.md#locales) for the details.

## Grid `selectionMode` changes

With the introduction of cell selection, Grid's `selectionMode` config no longer has the `row` setting. Instead, it is 
the default mode and can be omitted. Specifying `cell : true` will enable cell selection and disable row selection - 
both cannot be used at the same time.

While you don't actually have to change your code, the `row` setting no longer has any effect and can be removed:

**Old code:**

```javascript
new Grid({
    selectionMode : {
        row : false,
        cell : true
    }
});
```

**New code:**

```javascript
new Grid({
    selectionMode : {
        cell : true
    }
});
```

The `rowCheckboxSelection` setting of Grid's `selectionMode` config was renamed to `checkboxOnly`, to better indicate 
its purpose. Please update your code accordingly:

**Old code:**

```javascript
new Grid({
    selectionMode : {
        rowCheckboxSelection : true
    }
});
```

**New code:**

```javascript
new Grid({
    selectionMode : {
        checkboxOnly : true
    }
});
```
## Deprecated menuContext.event

The `event` property available on the `menuContext` property of context menu features has been deprecated in favor of 
the `domEvent` property, to reduce risk of confusion with a Bryntum event object or an event record in Scheduler. If you
are using it, please change your code to use `domEvent` instead.

**Old code:**
```javascript
console.log(grid.features.cellMenu.menuContext.event);
```

**New code:**
```javascript
console.log(grid.features.cellMenu.menuContext.domEvent);
```

## GridFieldFilterPicker `fields` configuration type change

The type of the `fields` config for `GridFieldFilterPicker` and `GridFieldFilterPickerGroup` widgets has changed from 
array of `FieldOption`s to `Object` map of `FieldOption`s keyed by field name. The array type is now deprecated. The 
fields supplied in this config (if any) will now be merged with fields found in the configured `grid`'s columns, instead
of overwriting them.

**Old code:**

```javascript
new GridFieldFilterPickerGroup({
    fields : [{
        name  : 'myStringField',
        type  : 'string'
    }, {
        name  : 'myNumberField',
        type  : 'number',
        title : 'MyNumber'
    }]
});
```

**New code:**

```javascript
new GridFieldFilterPickerGroup({
    fields : {
        myStringField : {
            type  : 'string'
        },
        myNumberField : {
            type  : 'number',
            title : 'MyNumber'
        }
    }
});
```


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