# Rendering Changes in 8.0.0

The KendoReact 8.0.0 release introduces changes in the rendering of several components.

## Animation

* Replaced the `k-animation-container-relative` class with `k-animation-container-shown`.

## AutoComplete

* Added `k-focus` class when the component is focused and not disabled.

## Button

* The `fillMode` property now has a `clear` option

## Breadcrumb

* Replaced the `span` element rendering the the Breadcrumb link with an `anchor` element, having a `href` property set to `#`.

## Chat

* Replaced the `k-toolbar-box` class in the component's toolbar with `k-chat-toolbar k-toolbar`.
* Added `k-toolbar-group` class to the `k-button-list` element.
* Added the `k-input-suffix-horizontal` class to the `k-input-suffix` element inside the message box.
* Added a new vertical separator is added after the message input through the new `k-input-separator k-input-separator-vertical` element.

## ChunkProgressBar

* Replaced the `k-progress-chunk` class with `k-progressbar-chunk`.

## ColorGradient

* Removed the `k-icon-button` class from the toggle button of the component.

## ColorPicker

* Removed the `k-reset` class from the component's popup.
* Added `k-color-picker-popup` class to the component's popup.

## ComboBox

* Replaced the `k-input-md` class inside the search textbox in adaptive mode with `k-input-lg`.
* Added `k-actionsheet` class to the ActionSheet component in adaptive mode.
* Added `k-text-center` element wrapping the title in adaptive mode.
* The 'Cancel' button in the adaptive mode now has the following default configurations `fillMode={'flat'}`, `themeColor={'base'}` and `size={'large'}`

## DatePicker

* Removed the `'k-calendar-container k-group k-reset'` classes from the popup of the component.

## DateRangePicker

* Added `'k-calendar-container` class the popup of the component.

## Dialog

* The `k-overlay` element is rendered only when the `modal` prop is set to `true`.
* The `k-window-titlebar-actions k-dialog-titlebar-actions` element is no longer rendered if the **closeIcon** property is set to false.

## DropDownButton

* Removed the `k-dropdown-button` class.
* Removed the `k-group` class from the component's popup menu.
* Removed the `k-reset` class from the component's popup menu.

## DropDownList

* The `k-input-value-text` element is now rendered only if the component has a value.

## DropDownTree

* Added  `k-list-container` class to the `k-dropdowntree-popup` element.
* Added `k-actionsheet` and `k-adaptive-actionsheet` to the ActionSheet component when the adaptive mode is activated.
* Added a new `k-text-center` element wrapping the title of the component in adaptive mode.
* The element with class `k-input-value-text` is now rendered only if the component has a value or a placeholder definition.

## Editor

* Added `k-toolbar-button-group k-button-group-solid` classes to the ButtonGroups inside the component's toolbar.
* Added `k-toolbar-button` class to the button of each Editor tool.

## Filter component

* Added `k-button-group-solid` class to the ButtonGroup in the Filter toolbar.
* Removed the `k-filter-dropdown` class from the DropDownList inside the Filter toolbar.

## FlatColorPicker

* Replaced the `k-button-group-flat` class of the ButtonGroup in the header of the component with `k-button-group-solid`.
* Replaced the `k-primary` class from the 'Apply' button in the footer of the component with `k-button-solid-primary`.
* Added `k-no-color` class to the color previews when a value for the current or previous color is not defined.
* Added `k-coloreditor-footer` class to the footer of the component.

## Grid

* Replaced the filter icon of the column menu with the `moreVerticalIcon` icon.

## ListBox

* Added `k-listbox-'selected size'` class to the component.

## MultiSelect

* New `k-actionsheet` and `k-adaptive-actionsheet` classes are rendered in the ActionSheet component when the adaptive mode is activated
* The title in the adaptive mode is now wrapped in an element with class `k-text-center`

## MultiSelectTree

* Removed the `k-selection-multiple` class from the `k-input-values` element.
* Added `k-actionsheet` and `k-adaptive-actionsheet` classes to the ActionSheet component when the adaptive mode is activated.

## MultiViewCalendar

* Removed the `k-widget` class.
* Added `k-calendar-md` class to the component.

## Notification

* The element with the `k-notification-actions` class is now rendered only if the `closable` property is set to `true`.

## OrgChart

* Removed the `k-justify-content-...` and `k-orgchart-group-h` classes from the `k-orgchart-group` elements.
* Removed the `k-justify-content-around` class from the `k-orgchart-node-container` element.
* Added a new `showAvatar` property to the component, controlling if an avatar will be rendered for the component's nodes.

## Pager

* Added `k-picker-solid` and `k-hidden`  classes to the select element displayed inside the Pager buttons when the component is resized.
* Added a `display: 'inline-flex'` style to the select element displayed inside the buttons when the component is resized.
* Added a new `k-disabled` class when the Pager is disabled.

## PDFViewer

* Added `k-toolbar-button-group k-button-group-solid` classes to the ButtonGroup's inside the component's toolbar.
* Added `k-group-start` and `k-group-end` classes to the first and last elements in the ButtonGroups.
* Added `k-toolbar-combobox` class to the zoom ComboBox inside the toolbar.
* Added a vertical separator to the searchbox of the search tool.

## ProgressBar

* Replaced `k-progress-chunk` class with `k-progressbar-chunk`.

## RadioButton

* Added `k-radio-wrap` element wrapping the inputs defining each radio option.

## RadioGroup

* Replaced the `k-radio-item` class with `k-radio-list-item`.

## RangeSlider

* Added `k-range-slider` class to the component.
* Added `k-draghandle-start` and `k-draghandle-end` classes to the drag handles in the component.

## Signature

* Added `k-signature-[name of the fillMode]` class to the component.

## Slider

* Added `k-draghandle-end` class to the drag handle of the component.

## SliderLabel

* Removed the `style` definition from the SliderLabel element.
* Replaced the `k-tick-vertical` and `k-tick-horizontal` classes with the conditionally rendered `k-tick-large` class.

## SplitButton

* Removed the `k-group` class from the component's popup menu.
* Removed the `k-reset` class from the component's popup menu.

## Splitter

* Removed the `k-widget` class.

## Stepper

* The element with the `k-step-label` class is now rendered conditionally based on the `label` and `optional` properties.

## Switch

* Removed the `k-rounded-...` class.
* When the labels are passed as empty strings, no DOM element is rendered for the labels. Previously, the labels were rendered every time, no matter if the label has content or not.

## TaskBoard

* Removed the `k-widget` class.
* Added `k-toolbar-md` class to the toolbar.
* Added `k-card-details` class to the button inside the card's header.

## TextArea

* Added `k-resize` class rendered conditionally, based on the `resizable` prop value.

## Timeline

* Replaced the `k-event-collapse` element with a KendoReact Button with the following definition

`<Button className={'k-event-collapse'} fillMode={'flat'} svgIcon={chevronRightIcon} />`

* Replaced the navigation buttons in the `horizontal` mode with KendoReact Buttons.
* The element with the `k-card-actions k-actions` classes is now rendered only if actions are defined for the card.

## TimePicker

* Removed the `k-group k-reset` class have been removed from the TimePicker popup.
* Added a `k-scrollable-placeholder` element to the lists inside the popup of the component.
* Added `k-content k-scrollable` class to the `k-time-container` element.
* Added `k-list-container` class to the `k-timepicker-popup` element.
* Added `k-timeselector-md` class to the `k-timeselector` element.
* Added `k-actions-horizontal` class to the time selector in the TimePicker popup.

## Upload

* Removed the `k-reset` class from the `k-upload-files` element.