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.