# Rendering Changes in 17.0.0

The Kendo UI for Angular 17.0.0 release introduces changes in the rendering of a number of components.

## Breadcrumb

* Removed `k-breadcrumb-delimiter-icon` and `k-icon` classes from separator wrapper element.
* Added `k-breadcrumb-delimiter-icon` class to separator icon.

## Button

* Added `k-button-arrow` wrapper.

## Chip

* Removed `k-chip-has-icon` when no avatar is present.

## DateRange

* Other month days are now hidden. `k-empty` class is used instead of `k-other-month`.

## DateTimePicker

* Removed `k-input-solid`, `k-rounded-md` and `k-input-md` classes from the `.k-input` element.
* Moved the `Set` button to the right of the `Cancel` button in adaptive mode.
* Replaced `k-selected` with `k-active` on the active tab in the popup.

## DropDownButton

* Added `k-menu-button` class on the button element.
* Added `k-menu-button-arrow` class on the arrow wrapper.
* Removed `k-dropdown-button` class from wrapper.

## DropDownTree

* Removed `k-input-value-text` wrapper when no value is present.

## Filter

* Added `.k-toolbar-solid` class to elements with class `.k-toolbar` in filter groups and filter expressions.

## Grid

* Integrated the Kendo UI for Angular [Pager](https://www.telerik.com/kendo-angular-ui/components/pager) component.
* Integrated Kendo UI for Angular [Input](https://www.telerik.com/kendo-angular-ui/components/inputs) components.
* Removed the `k-filtercell-boolean` class from the wrapper of the boolean filter cell.
* Added class `k-table-group-td` to table cells with `k-group-cell` class.
* Removed the `k-sort-icon` wrapper element from headers when there is no sorting indicator rendered.
* Removed the class `k-grid-table-wrap` from the content table wrapper.
* Removed the class `k-alt` from the detail rows in master-detail Grids.
* Added class `k-expanded` on expanded master rows in master-detail Grids.
* Removed class `k-touch-action-auto` from content table `td` elements.

## ListView

* The default value of the `bordered` is now `false`. The `k-listview-bordered` class is not rendered by default.
* Removed the `k-d-flex` class.

## Menu

* Swapped the colors of active and inactive menu items.

## MultiSelect

* Removed `k-selection-multiple` class from tag list.

## MultiSelectTree

* Removed `k-readonly` class on inner input.

## Pager

* The `kendo-datapager` selector is deprecated (but still supported for backward compatibility). Replace it with `kendo-pager`.

* All internal pager elements' selectors that follow the pattern `kendo-datapager-xxx` are deprecated (but still supported for backward compatibility). Replace them with `kendo-pager-xxx`.

  Prior version `17.0.0`.

  ```html
  <kendo-datapager>
    <ng-template kendoDataPagerTemplate>
        <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
        ...
  ```

  Starting with version `17.0.0`.

  ```html
  <kendo-pager>
    <ng-template kendoPagerTemplate>
        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
        ...
  ```

* Removed `k-label` from the `.k-pager-input` element within the `kendo-pager-input` component.

* The visibility of the internal pager elements in responsive mode is controlled by toggling the `k-hidden` class instead of using `style.display`.

## Panelbar

* Switched the expanded font icon of the items. Previously `arrow-chevron-up` was used, now changed to `chevron-up`.

## PivotGrid

* Added `k-form-md` class to the configurator form.
* Added `k-form-vertical` class to a vertical configurator form and `k-form-horizontal` class to a horizontal configurator form.
* Moved the `.k-checkbox-wrap` element outside of the `.k-treeview-leaf` element in the configurator.
* Replaced the `k-hstack k-justify-content-end` classes with `k-actions-end k-actions-horizontal` in the `.k-pivotgrid-configurator-actions` element.
* Removed the `k-color-inherit` class from the gear icon of the configurator.
* Added `k-flex-row` class to the wrapper of the PivotGrid when the `configuratorSettings` property is not set.
* Added `k-pivotgrid-header-title` class to the cell that wraps the column header title text.
* Added `k-pivotgrid-content` class to the cell that wraps the values text.
* Replaced the `k-pivotgrid-header-total` class with `k-pivotgrid-total` on total cells in the values table.
* Added `k-column-fields` class to the columns ChipList in the configurator.
* Added `k-row-fields` class to the rows ChipList in the configurator.
* Added `k-filter-fields` class to the values ChipList in the configurator.
* Replaced the `k-rounded-full` class with `k-rounded-md` in the Chips of the ChipList.

## Popover

* Removed `k-popup-transparent` from the internal wrapper element of the generated Popup.

## Stepper

* Added `k-progress-start` to the progress bar and removed `k-progress-end`.

## Switch

* Removed `k-rounded-full` class from the wrapper.

## Tabstrip

* Added `stretched` TabAlignment option.
* Removed `k-tabstrip-item` class from the tab wrapper.
* Added `k-first` class to the first tab.
* Added `k-last` class to the last tab.
* Removed `k-pos-relative` and added `k-header` class to the wrapper element.
* Swapped the colors of active and inactive tabs.

## TextArea

* Removed `!k-overflow-y-auto` class from the `<textarea>`   element when resizable is both.

## TileLayout

* Removed `k-cursor-grabbing` from header when dragging.
* Removed `k-touch-action-none` and `k-touch-action-auto` from header wrapper.
* Removed `k-cursor-grab` and added `k-cursor-move` to the tile header.
* Removed `k-layout-item-hint-reorder` from `k-layout-item-hint` element.
* Removed `k-pos-relative` from wrapper.

## ToolBar

* Added `fillMode` option. Class `k-toolbar-solid` is added to the wrapper element by default; varies based on the `fillMode` value.
* Added `k-button-group-solid` to `ToolBarButtonGroup` component wrapper.
* Removed `k-toolbar-menu-button` from `ToolBarDropDownButton` `kendo-dropdownbutton` element.
* Added `k-toolbar-menu-button` to the internal `<button>` element of the `ToolBarDropDownButton` component.

## TimePicker

* Removed `k-input-solid`, `k-rounded-md` and `k-input-md` classes from the `.k-input` element.
* Moved the `Set` button to the right of the `Cancel` button in adaptive mode.

## TreeList

* Integrated the Kendo UI for Angular [Pager](https://www.telerik.com/kendo-angular-ui/components/pager) component.
* Integrated Kendo UI for Angular [Input](https://www.telerik.com/kendo-angular-ui/components/inputs) components.
* Removed the `k-filtercell-boolean` class from the wrapper of the boolean filter cell.
* Removed the `k-sort-icon` wrapper element from headers when there is no sorting indicator rendered.
* Removed the class `k-grid-table-wrap` from the content table wrapper.

## Typography

* The `margin` option is removed (a documented breaking change). Adding margin-related classes and styles is no longer a built-in feature.
