# Breaking Changes in 8.0.0
The Kendo UI for Vue 8.0.0 release removes the default values of the appearance properties (`size`, `rounded`, `fillMode`, `themeColor`, and the related ones) of many components, narrows the types of these properties, removes the `shape` property of the buttons, and changes the Grid loader, the Grid row properties, and the Grid template ref. Stale values are not always reported at runtime, and TypeScript flags them only where the type was narrowed, so review your code rather than rely on compilation errors.
The components no longer render the classes that the removed defaults produced, unless you set the properties explicitly. To keep the previous look, set the properties explicitly, for example `size="medium"`, `rounded="medium"`, `fillMode="solid"`, and `themeColor="base"`, where the component supported them. For the removed and renamed classes, see [Rendering Changes in 8.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/rendering-changes/8-0-0).
For most of the properties below, the types become strict unions. They no longer accept `null` and arbitrary strings, and `'none'` is a valid `rounded` value. The sections below list the exceptions. Omitting a property is equivalent to the previous `null`, so use `undefined` or omit the property instead of passing `null`.
## Buttons
* `Button`, `Chip`, `ChipList`, `DropDownButton`, `FloatingActionButton`, `SplitButton`, `SpeechToTextButton`, and `Toolbar`—The `size`, `rounded`, `fillMode`, and `themeColor` properties no longer have default values. The `iconSize` property of the `Button` and the `SpeechToTextButton` has no default value either.
* Before: `` rendered the classes of the `'medium'` size, the `'medium'` rounded corners, the `'solid'` fill mode, and the `'base'` theme color. The same applied to the other components with their own defaults.
* After: A class is rendered only for the properties that you set. The `ChipList` has no defaults for `size`, `rounded`, and `fillMode`, and the `Toolbar` has no defaults for `size` and `fillMode`. Neither of them has a `themeColor` property. The `ChipList` no longer passes default values to its chips.
* To migrate, set `size`, `rounded`, `fillMode`, and `themeColor` explicitly wherever you need the previous appearance, replace `null` with `undefined` or omit the property, and update the CSS and tests that depend on the removed classes. The `buttons-appearance-null-props` codemod removes the literal `null` values automatically. Review the values that evaluate to `null` at runtime, such as `:size="compact ? 'small' : null"`, the properties passed through `v-bind="obj"` or JSX spreads, and the wrapper components that forward these properties, together with the types of those wrappers.
* `Button`, `DropDownButton`, `FloatingActionButton`, and `SplitButton`—The `shape` property is removed, and the `FloatingActionButtonShape` type is no longer exported.
* Before: ``, ``, or `` rendered the `k-button-` class (except for `'rectangle'`) or the `k-fab-` class. The `FloatingActionButton` rendered `k-fab-rectangle` by default and supported `'square'`, `'pill'`, `'circle'`, and `'rounded'`.
* After: The property does not exist, and the `k-button-` and `k-fab-` classes are not rendered.
* To migrate, remove the `shape` property and the `FloatingActionButtonShape` type, and use the `rounded` property for the corner shape: `'none'` for a rectangle or square look, `'medium'` for the default rounded corners, and `'full'` for a pill or circle look. There is no one-to-one replacement. Update the custom CSS, tests, and wrapper components that depend on the removed classes or on the type. The `button-shape-removed` codemod flags the affected files.
## Data Tools
* `Pager` and `FilterCell`—The `size` property of the `Pager` no longer has a default value (`'medium'`). The `Pager` passes its `size` to the navigation buttons, the numeric buttons, the responsive page select, and the page size `DropDownList`, and the `FilterCell` passes its `size` to its child controls. These controls no longer receive a default size, and the default appearance classes of the buttons and dropdowns are not rendered either.
* Before: `` rendered no size classes, while an omitted `size` rendered the default `k-pager-md` class. The `FilterCell` `size` type accepted `null` and arbitrary strings.
* After: The `size` type of the `Pager` and the `FilterCell` no longer accepts arbitrary strings, and the `FilterCell` no longer accepts `null`.
* To migrate, set `size="medium"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the property, and update the CSS and tests that depend on the removed classes. The `datatools-appearance-null-props` codemod removes the literal `null` values of the `Pager` `size` automatically.
## Date Inputs
* `DateInput`, `DatePicker`, `DateRangePicker`, `DateTimePicker`, and `TimePicker`—The `size`, `rounded`, and `fillMode` properties no longer have default values (`'medium'`, `'medium'`, and `'solid'`).
* Before: The components rendered `k-input-md k-input-solid k-rounded-md` when the properties were not set. The swap button of the `DateRangePicker` rendered `k-button-md` and `k-rounded-md`.
* After: The classes are not rendered unless you set the properties. The `rounded` validator now also accepts `'none'`, and the `size` type of `DateInputSettings`, `DatePickerSettings`, `DateRangePickerSettings`, `DateTimePickerSettings`, and `TimePickerSettings` no longer accepts arbitrary strings.
* To migrate, set `size="medium"`, `rounded="medium"`, and `fillMode="solid"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the properties, and update the CSS and tests that depend on the removed classes. The `dateinputs-appearance-null-props` codemod removes the literal `null` values automatically. Review the `size`, `rounded`, and `fillMode` values that you set in the `*Settings` objects.
## Dropdowns
* `AutoComplete`, `ComboBox`, `DropDownList`, `DropDownTree`, `MultiSelect`, and `MultiSelectTree`—The `size`, `rounded`, and `fillMode` properties no longer have default values (`'medium'`, `'medium'`, and `'solid'`). The `tagsRounded` property of the `MultiSelect` has no default value (`'medium'`) either.
* Before: The `AutoComplete`, `ComboBox`, `MultiSelect`, and `MultiSelectTree` rendered `k-input-md k-rounded-md k-input-solid`, and the `DropDownList` and `DropDownTree` rendered `k-picker-md k-rounded-md k-picker-solid`.
* After: The classes are not rendered unless you set the properties. The properties are strict unions, and `'none'` is a valid `rounded` and `tagsRounded` value. The tags of the `MultiSelect` and the `MultiSelectTree` are `Chip` components, which no longer apply their own default fill mode and theme color either.
* To migrate, set `size="medium"`, `rounded="medium"`, and `fillMode="solid"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the properties, and update the CSS and tests that depend on the removed classes. The `dropdowns-appearance-null-props` codemod removes the literal `null` values automatically.
## Grid
* `Grid`—The boolean form of the `loader` property is removed. The new `showLoader` property controls whether the loader is displayed, and `loader` accepts only a custom loader template (a slot name, a render function, or a component).
* Before: `` displayed the default loader while `isLoading` was `true`, and `` displayed the custom loader whenever the property was set.
* After: `` displays the default loader, and `` displays the custom loader while `showLoader` is `true`. A boolean `loader` value no longer shows the loader.
* To migrate, rename the boolean `loader` to `showLoader` (`show-loader` in templates). For a custom loader template, keep `loader` and add `showLoader`, driven by the state that previously decided whether the loader was shown. If a value can be either a boolean or a template, split it into a `showLoader` boolean and a `loader` template. The `grid-loader-show-loader` codemod renames the literal boolean values (`loader`, `:loader="true"`, `:loader="false"`, `loader={true}`, and `loader={false}`) automatically. The `grid-loader-binding` codemod flags the dynamic bindings, such as `:loader="isLoading"` or `:loader="isLoading && !error"`, the properties passed through `v-bind="obj"` or JSX spreads, and the wrapper components that forward `loader`, so that you migrate them manually.
* `Grid`—The row properties that the Grid passes to a custom row render changed. `GridRowProps` and `GridRow` no longer declare `dataItem`. They declare `item`, the row model of the Grid, which holds the data item in `item.dataItem` together with the row type, level, expanded state, and index.
* Before: `rowRender: (h, trElement, defaultSlots, props) => ... props.dataItem.ProductName` and `props: GridRowProps` with `props.dataItem`.
* After: The same code reads `props.item.dataItem.ProductName`. The cell properties (`GridCellProps`) still use `dataItem`. At runtime, the Grid still adds `dataItem` (the value of `item.dataItem`) to the properties of a custom `rowRender`, but it is no longer part of the typed `GridRowProps`. The `selectedField` property is no longer passed to the row. Use `isSelected` instead.
* To migrate, read the data item from `props.item.dataItem` in every `rowRender` (`row-render` in templates) function, component, and slot that uses `GridRowProps`, and update the wrapper components and their TypeScript types. The `grid-row-render-item` codemod flags the affected files.
* `Grid`—The template ref of the Grid exposes only the members of `GridHandle`: `element`, `props`, `columns`, `scrollIntoView`, `fitColumns`, and `exportAsPdf`, plus the standard Vue instance properties such as `$el` and `$props`. The Grid is now a wrapper around an inner component.
* Before: `gridRef.value.getColumns()` returned the current columns with their widths and any other `GridColumnProps`. The other methods and data of the Grid instance were reachable through the ref.
* After: `gridRef.value.getColumns` is `undefined`, and the other methods and data of the previous Grid instance are no longer reachable through the ref. The replacement of `getColumns()` is the `columns` property (`gridRef.value.columns`), which is a property, not a function.
* To migrate, replace the `getColumns()` calls with the `columns` property, and check every other member that your code reads from the Grid ref against the list above. The `grid-ref-get-columns` codemod rewrites the zero-argument `getColumns()` calls automatically when the ref is statically a Grid ref in the same file: a static `ref="grid"` on the `Grid`, a JSX `ref`, `useTemplateRef`, `ref>()`, or `this.$refs.grid`. Migrate manually the template expressions such as `@click="gridRef.getColumns()"`, the aliased or dynamic refs, and the calls on refs that cannot be proven to be Grid refs. The `grid-ref-api` codemod flags the files with the remaining `getColumns()` calls.
* `GridToolbar`—The `size` property no longer has a default value, and it now also accepts `'none'`. The default `size` of the `Grid` itself (`'medium'`) is not removed, and the `GridFilterCell` never applied a default size.
* Before: `` rendered the `k-toolbar-md` class.
* After: `` does not render `k-toolbar-md`.
* To migrate, set `size="medium"` explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.
## Indicators
* `Badge`—The `size`, `rounded`, `fillMode`, and `themeColor` properties no longer have default values, and the types no longer accept `null` and arbitrary strings.
* Before: `` rendered `k-badge-md k-badge-solid k-badge-solid-primary k-rounded-md`.
* After: The classes are not rendered unless you set the properties. When `themeColor` is set, the `Badge` renders a single `k-badge-` class instead of the combined `k-badge--` class.
* To migrate, set `size="medium"`, `rounded="medium"`, `fillMode="solid"`, and `themeColor="primary"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the properties, and update the CSS and tests that depend on the removed or renamed classes. The `indicators-appearance-null-props` codemod removes the literal `null` values automatically.
* `BadgeContainer`—The `size`, `rounded`, and `fillMode` properties no longer have default values. The `themeColor` default (`'primary'`) is not removed.
* Before: The badge element of the `BadgeContainer` rendered `k-badge-md k-badge-solid k-badge-solid-primary k-rounded-md`.
* After: The combined `k-badge--` class is rendered only when `fillMode` is set. Omitting `themeColor` still renders the primary color, so `themeColor={null}` is left unchanged by the codemod.
* To migrate, set `size="medium"`, `rounded="medium"`, and `fillMode="solid"` explicitly where you need the previous appearance, and update the CSS and tests that depend on the removed classes.
* `Loader`—The `size` property no longer has a default value. The `themeColor` default (`'primary'`) is not removed.
* Before: `` rendered `k-loader-md`.
* After: `` does not render `k-loader-md`, and still renders `k-loader-primary`.
* To migrate, set `size="medium"` explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.
## Inputs
* `Checkbox`, `ColorPalette`, `ColorPicker`, `FlatColorPicker`, `Input`, `MaskedTextBox`, `NumericTextBox`, `RadioButton`, `Signature`, `Switch`, `TextArea`, and `TextBox`—The default values of the `size`, `rounded`, `fillMode`, `trackRounded`, and `thumbRounded` properties that each component supports are removed. The `Checkbox` supports `size` and `rounded`. The `ColorPalette`, `FlatColorPicker`, and `RadioButton` support `size`. The `ColorPicker`, `Input`, `MaskedTextBox`, `NumericTextBox`, `Signature`, `TextArea`, and `TextBox` support `size`, `rounded`, and `fillMode`. The `Switch` supports `size`, `trackRounded`, and `thumbRounded`.
* Before: The `Input`, `TextBox`, `TextArea`, `MaskedTextBox`, and `NumericTextBox` rendered `k-input-md k-rounded-md k-input-solid`, the `Checkbox` rendered `k-checkbox-md k-rounded-md`, the `RadioButton` rendered `k-radio-md`, and the `Switch` rendered `k-switch-md` and `k-rounded-full`.
* After: The classes are not rendered unless you set the properties. The properties are strict unions, and `'none'` is a valid `rounded`, `trackRounded`, and `thumbRounded` value. The `ColorGradient` never had a default size, but it no longer receives one from the `FlatColorPicker` and the `ColorPicker` popup.
* To migrate, set `size="medium"`, `rounded="medium"`, and `fillMode="solid"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the properties, and update the CSS and tests that depend on the removed classes. The `inputs-appearance-null-props` codemod removes the literal `null` values automatically.
* `Switch`—The `'circle'` option is removed from the `trackRounded` and `thumbRounded` types.
* Before: `` was part of the types.
* After: `trackRounded` and `thumbRounded` accept `'none'`, `'small'`, `'medium'`, `'large'`, and `'full'`.
* To migrate, replace `'circle'` with `'full'` for a fully rounded track or thumb. The `inputs-default-appearance-rendering-changes` codemod flags the `Switch` components that set `trackRounded` or `thumbRounded` to `'circle'` as string literals. Review the values that come from variables or expressions manually.
## Layout
* `Avatar`—The `size`, `rounded`, and `fillMode` properties no longer have default values. The `themeColor` default (`'primary'`) is not removed.
* Before: `` rendered `k-avatar-md k-rounded-md k-avatar-solid k-avatar-solid-primary`.
* After: The classes are not rendered unless you set the properties, and `k-avatar-solid-primary` is rendered only together with `fillMode="solid"`. The `Avatar` property types still accept `null`, and `themeColor={null}` is left unchanged by the codemod.
* To migrate, set `size="medium"`, `rounded="medium"`, and `fillMode="solid"` explicitly where you need the previous appearance, replace `null` with `undefined` or omit the properties, and update the CSS and tests that depend on the removed classes. The `layout-appearance-null-props` codemod removes the literal `null` values automatically.
* `TabStrip`—The `size` property no longer has a default value.
* Before: `` rendered the `k-tabstrip-md` class.
* After: `` does not render `k-tabstrip-md`. The `TabStrip` `size` type still accepts `null`.
* To migrate, set `size="medium"` explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.
* `Breadcrumb`—The `size` property no longer has a default value, and its type no longer accepts `null`. The markup is unchanged, because the `Breadcrumb` still renders `k-breadcrumb-md` when `size` is not set.
* To migrate, replace `null` with `undefined` or omit the property.
## ListBox
* `ListBox`—The `size` property no longer has a default value (`'medium'`), and its type no longer accepts `null` and arbitrary strings. The type accepts only `'small'`, `'medium'`, and `'large'`.
* Before: `` rendered `k-list k-list-md`.
* After: `` renders `k-list`.
* To migrate, set `size="medium"` explicitly to keep `k-list-md`, replace `null` with `undefined` or omit the property, and update the CSS and tests that depend on the removed class. The `listbox-appearance-null-props` codemod removes the literal `null` values automatically.
## TreeList
* `TreeList`—The `size` property no longer has a default value (`'medium'`), and it now also accepts `'none'`. The TreeList no longer passes a size to the header table, the filter row, and the `Pager`, and the `FilterCell` and `Pager` child controls no longer receive a default size.
* Before: `` rendered `k-table-md` on the data table and the header table, `k-toolbar-md` on the toolbar, and `k-pager-md` on the `Pager`.
* After: The data table renders `k-grid-md` instead of `k-table-md`, and the header table, the toolbar, and the `Pager` have no size class. The wrapper keeps `k-grid-md`, because it is applied when `size` is not set. `'none'` renders `k-grid-none`, `k-table-none`, and the like.
* To migrate, set `size="medium"` explicitly to restore the previous classes, and update the CSS and tests that depend on the removed classes.
For the changes in the generated markup and the CSS classes, see [Rendering Changes in 8.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/rendering-changes/8-0-0).