# Rendering Changes in 8.0.0

The Kendo UI for Vue 8.0.0 release introduces changes in the rendering of several components. Most of the components no longer apply default values to their appearance properties (`size`, `rounded`, `fillMode`, `themeColor`, and the related ones), so the classes that these defaults produced are not rendered unless you set the properties explicitly. If your application overrides the built-in CSS rules or queries the generated markup, for example in tests, review the following changes.

To keep the previous look, set the properties explicitly, for example `size="medium"`, `rounded="medium"`, `fillMode="solid"`, and `themeColor="base"`, where the component supports them. For the changes in the API, see [Breaking Changes in 8.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/breaking-changes/8-0-0).

## Buttons

* `Button`, `DropDownButton`, `SplitButton`, and `SpeechToTextButton`—The `k-button-md`, `k-rounded-md`, `k-button-solid`, and `k-button-solid-base` classes, and the `k-icon-md` class of the icon, are not rendered unless `size`, `rounded`, `fillMode`, `themeColor`, or `iconSize` is set.

* `Chip`—The `k-chip-md`, `k-rounded-md`, `k-chip-solid`, and `k-chip-solid-base` classes are not rendered unless the properties are set.

* `ChipList`—The `k-chip-list-md` class is not rendered unless `size` is set, and the `ChipList` no longer passes the default values to its chips.

* `FloatingActionButton`—The `k-fab-md`, `k-rounded-full`, `k-fab-solid`, and `k-fab-solid-primary` classes are not rendered unless the properties are set.

* `Toolbar`—The `k-toolbar-md` and `k-toolbar-solid` classes, and the `k-toolbar-items-list-md` and `k-toolbar-items-list-solid` classes in the overflow popup, are not rendered unless `size` or `fillMode` is set.

* `Button`, `Chip`, and `FloatingActionButton`—An explicit `themeColor` renders a single theme color class instead of the combined `fillMode` and `themeColor` class.

  * Before: `k-button-solid-primary`, `k-chip-solid-info`, and `k-fab-solid-primary`. The combined classes follow the `k-button-<fillMode>-<themeColor>`, `k-chip-<fillMode>-<themeColor>`, and `k-fab-<fillMode>-<themeColor>` patterns.
  * After: `k-button-primary`, `k-chip-info`, and `k-fab-primary`. The classes follow the `k-button-<themeColor>`, `k-chip-<themeColor>`, and `k-fab-<themeColor>` patterns.

* `Button` and `FloatingActionButton`—The `k-button-<shape>` classes (for example `k-button-square`) and the `k-fab-<shape>` classes (`k-fab-rectangle`, `k-fab-square`, `k-fab-pill`, `k-fab-circle`, and `k-fab-rounded`) are not rendered, because the `shape` property is removed. The `FloatingActionButton` rendered `k-fab-rectangle` by default.

## Data Tools

* `Pager`—The `k-pager-md` class is not rendered unless `size` is set. The same applies to the `k-picker-md` class of the responsive numeric select.
* `Pager`—The navigation and numeric buttons do not render `k-button-md`, and the page size `DropDownList` does not render `k-picker-md`, `k-picker-solid`, and `k-rounded-md`, unless `size` is set explicitly on the `Pager`.
* `FilterCell`—The child controls (buttons, dropdowns, and inputs) no longer receive a default size.

## Date Inputs

* `DateInput`, `DatePicker`, `DateTimePicker`, and `TimePicker`—The `k-input-md`, `k-input-solid`, and `k-rounded-md` classes are not rendered unless `size`, `rounded`, or `fillMode` is set.
* `DateRangePicker`—The swap button does not render `k-button-md` and `k-rounded-md` unless `size` or `rounded` is set.

## Dropdowns

* `AutoComplete`, `ComboBox`, `MultiSelect`, and `MultiSelectTree`—The `k-input-md`, `k-rounded-md`, and `k-input-solid` classes are not rendered unless `size`, `rounded`, or `fillMode` is set.
* `DropDownList` and `DropDownTree`—The `k-picker-md`, `k-rounded-md`, and `k-picker-solid` classes are not rendered unless the properties are set.
* `MultiSelect` and `MultiSelectTree`—The tag list does not render `k-chip-list-md`, and each tag does not render `k-chip-md`, `k-rounded-md`, `k-chip-solid`, and `k-chip-solid-base`, unless `size`, `rounded`, `fillMode`, or `tagsRounded` (`MultiSelect`) is set.
* The list filter input does not render `k-input-md`, `k-rounded-md`, and `k-input-solid` unless the properties are set.

## Grid

* `Grid`—The `GridToolbar` renders `k-toolbar k-grid-toolbar k-toolbar-solid`. The `k-toolbar-md` class is rendered only when `size="medium"` is set. The `Grid` itself still renders `k-grid-md` and `k-table-md`, because its `size` default is not removed.

* `Grid`—The inline scrollbar-compensation padding (`style="padding: 0 <scrollbar width>px 0 0"`, mirrored in RTL) is no longer set on the `k-grid-header` and `k-grid-footer` elements.

* `Grid`—The header `th` elements no longer have `style="top: 0px"`.

* `Grid`—The header `td` cells, for example the filter row cells, now render the `id`, `colspan`, and `rowspan` attributes.

* `GridFilterCell`—The `k-filtercell-operator` wrapper now contains an `&nbsp;` before the clear button.

* `Grid`—The `k-selected` class of a row follows the `isSelected` state that the Grid computes instead of the value of `selectedField` on the data item.

* `Grid`—Each row `tr` renders an `absolute-row-index` attribute.

* `Grid`—The no-records message moved.

  * Before: A `tr.k-table-row.k-grid-norecords` with a `td.k-table-td` inside the `tbody`.
  * After: A `div.k-grid-norecords` with a `div.k-grid-norecords-template`, a sibling of the table. In a scrollable Grid, it is inside the `k-grid-table-wrap` element. The `k-height-container` element is not rendered while there are no records.

* `Grid`—The default loader markup changed.

  * Before: A `div.k-loader-container.k-loader-container-md.k-loader-top` with `k-loader-container-overlay` and `k-loader-container-inner` children and an infinite-spinner `Loader`, inside the `k-grid-container` element.
  * After: A `div.k-loading-mask` with a `k-loading-color` child and a centered converging-spinner `Loader`. It is rendered only when `showLoader` is `true`, and it is a child of the Grid root after the pager instead of being inside `k-grid-container`.

## Indicators

* `Badge`—The `k-badge-md`, `k-badge-solid`, `k-badge-solid-primary`, and `k-rounded-md` classes are not rendered unless `size`, `rounded`, `fillMode`, or `themeColor` is set. An explicit `themeColor` renders a single `k-badge-<themeColor>` class, for example `k-badge-primary`, instead of the combined `k-badge-<fillMode>-<themeColor>` class.
* `BadgeContainer`—The badge element does not render `k-badge-md`, `k-badge-solid`, and `k-rounded-md` unless the properties are set. The combined `k-badge-<fillMode>-<themeColor>` class is rendered only when `fillMode` is set.
* `Loader`—The `k-loader-md` class is not rendered unless `size` is set. The `k-loader-primary` class is still rendered, because the `themeColor` default is not removed.

## Inputs

* `Input`, `TextBox`, `TextArea`, `MaskedTextBox`, and `NumericTextBox`—The `k-input-md`, `k-rounded-md`, and `k-input-solid` classes are not rendered unless `size`, `rounded`, or `fillMode` is set.
* `ColorPicker`—The `k-picker-md`, `k-rounded-md`, and `k-picker-solid` classes are not rendered unless the properties are set.
* `Signature`—The `k-signature-md`, `k-rounded-md`, and `k-input-solid` classes are not rendered unless the properties are set.
* `Checkbox`—The `k-checkbox-md` and `k-rounded-md` classes are not rendered unless `size` or `rounded` is set.
* `RadioButton`—The `k-radio-md` class is not rendered unless `size` is set.
* `Switch`—The `k-switch-md` class and the `k-rounded-full` class of the root, the track, and the thumb are not rendered unless `size`, `trackRounded`, or `thumbRounded` is set. The `'circle'` option of `trackRounded` and `thumbRounded` is removed. Use `'full'` instead.
* `ColorPalette`—The `k-colorpalette-md` class is not rendered unless `size` is set.
* `FlatColorPicker`—The `k-coloreditor-md` class is not rendered unless `size` is set. The `FlatColorPicker` and the `ColorPicker` popup no longer pass a default size to the `ColorGradient` (`k-colorgradient-md`) and the `ColorPalette`.

## Layout

* `Avatar`—The `k-avatar-md`, `k-rounded-md`, `k-avatar-solid`, and `k-avatar-solid-primary` classes are not rendered unless `size`, `rounded`, or `fillMode` is set. The `k-avatar-solid-primary` class is rendered only together with `fillMode="solid"`.
* `TabStrip`—The `k-tabstrip-md` class is not rendered unless `size` is set.

## ListBox

* `ListBox`—The `k-list-md` class of the `k-list` element is not rendered unless `size` is set.

  * Before: `<ListBox />` rendered `k-list k-list-md`.
  * After: `<ListBox />` renders `k-list`.

* `ListBoxToolbar`—The tool buttons no longer receive the default appearance classes of the buttons package, such as `k-button-md`, `k-rounded-md`, and `k-button-solid`, because the `Button` defaults are removed.

## TreeList

* `TreeList`—The size classes of the table, the header table, the toolbar, and the `Pager` changed when `size` is not set.

  * Before: `k-table k-grid-table k-table-md` on the data table, `k-table-md` on the header table (`k-grid-header-table`), `k-toolbar-md` on the toolbar, and `k-pager-md` on the `Pager`.
  * After: The data table renders `k-table k-grid-table k-grid-md`, and the header table, the toolbar, and the `Pager` have no size class. The wrapper keeps `k-grid k-grid-md`. Set `size="medium"` to restore the previous classes. The `FilterCell` and `Pager` child controls (buttons, dropdowns, and inputs) no longer receive a default size.

* `TreeList`—The `'none'` size renders `k-grid-none`, `k-table-none`, and the like.

For the changes in the component API, see [Breaking Changes in 8.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/breaking-changes/8-0-0).