v13.0.0

Default Component Options, TreeView and Chat Rendering Enhancements

Kendo Themes v13.0.0 introduces important changes to the default component options and the rendering of the TreeView and Chat components.

Default Component Options Breaking Changes

Component option classes (size, roundness, fill mode, theme color) are no longer rendered in the component HTML when they match the default values. Instead, default options are now controlled through SCSS variables (e.g., $kendo-button-default-size, $kendo-button-default-fill-mode, $kendo-button-default-roundness, $kendo-button-default-theme-color). This allows different themes to define their own defaults and enables easier customization.

What Changed?

• Removed default option classes from component rendering (e.g., k-button-md, k-rounded-md, k-button-solid)
• Default option styles are now applied directly to the main component class
• Theme color classes are now separate from fill mode classes (e.g., k-button-solid k-button-primary instead of k-button-solid-primary)
• Each theme can define its own default options through SCSS variables

What Are the Benefits?

• Easier theme customization through SCSS variables
• Different themes can have different default options
• Reduced HTML output when using default configurations
• Cleaner separation between theme color and fill mode styling

Default Component Options Prior to v13.0.0

With the release of Kendo Themes v5.0.0 in 2022, we introduced a standardized component options system across many Kendo UI components. These options provide consistent visual customization capabilities:

• Size-Controls component dimensions (sm, md, lg)
• Roundness-Controls border radius (none, sm, md, lg, full)
• Fill Mode-Controls background fill style (solid, outline, flat, link, clear)
• Theme Color-Controls color scheme (primary, secondary, tertiary, info, success, warning, error, etc.)

Component options were enforced through modifier classes that follow a consistent naming pattern:

<!-- Button example -->
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
  Click me
</button>

<!-- Badge example -->
<span class="k-badge k-badge-md k-rounded-md k-badge-solid k-badge-solid-primary"> New </span>

<!-- TreeView example -->
<div class="k-treeview k-treeview-md">
  <!-- TreeView content -->
</div>

Initially, the default component options were set through the component's API. When a component was initialized without explicit options, the framework would:

1. Apply default values defined in the component configuration
2. Add the corresponding CSS classes to the DOM element
3. The themes would style these classes accordingly

Example (old approach):

// Component API would set defaults
const button = new Button(element, {
  size: 'md',
  rounded: 'md',
  fillMode: 'solid',
  themeColor: 'base',
});

<!-- Resulting DOM (API adds classes) -->
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"></button>

However, this approach had several drawbacks:

• Hard to Customize: Defaults were hardcoded in the component API rather than in the theme layer, making it difficult to change default styles without modifying component code or overriding multiple CSS classes.

• Same Options Across Different Themes: All themes were forced to use identical default options (e.g., all buttons defaulted to md size, md roundness, solid fill mode, base theme color)

• No Flexibility: Themes couldn't define theme-specific defaults that better matched the design language - a Material theme, Bootstrap theme, and Fluent theme all had to start with the same baseline appearance.

• Bloated HTML Output: Even when using default configurations, the DOM included redundant option classes (like k-button-md k-rounded-md k-button-solid k-button-solid-base), increasing HTML size unnecessarily.

• Limited Theme Control: No way to override defaults through SCSS variables

Default Component Options in v13.0.0 and Later

With Kendo Themes v13.0.0, component APIs now set default options to undefined, allowing the themes to control the visual defaults entirely through SCSS variables and CSS. This would give each theme full control over its default appearance:

1. Component API leaves options as undefined by default
2. No option-related classes are added when options are unspecified
3. The default styles are applied directly to the base component class
4. Users can still explicitly set options, which will add the corresponding classes

Example (new approach):

// Component API defaults are undefined
const button = new Button(element, {
  size: undefined,
  rounded: undefined,
  fillMode: undefined,
  themeColor: undefined,
});

<!-- Resulting DOM (no option classes) -->
<button class="k-button"></button>

// Theme CSS handles the defaults
// _variables.scss
$kendo-button-default-size: 'md' !default;
$kendo-button-default-roundness: 'md' !default;
$kendo-button-default-fill-mode: 'solid' !default;
$kendo-button-default-theme-color: 'base' !default;

How to Migrate?

• If you rely on specific option classes being present in the DOM (e.g., k-button-md), update your selectors to use the base component class or explicit size classes
• If you customized components by overriding default classes, update your SCSS to override the new default option variables instead
• Update any JavaScript/tests that expect default option classes to be present in the rendered HTML

TreeView Rendering Enhancements

The TreeView component has been refactored to use a more consistent class structure, CSS variables for indentation, and unified state management. These changes improve maintainability and reduce CSS complexity.

Key Changes

• Wrapper Class Renamed: Position-based wrapper classes (k-treeview-top, k-treeview-mid, k-treeview-bot) have been replaced with a single unified k-treeview-item-content class. If you have custom CSS targeting the old position-based classes, update it to target k-treeview-item-content instead.

• CSS Variable for Indentation: A --kendo-treeview-level CSS custom property is now set on each k-treeview-item element to calculate indentation based on nesting level. The variable is used internally in SCSS to calculate padding-inline-start.

• State Classes Moved: State classes (k-hover, k-focus, k-selected, k-disabled) are now applied to the k-treeview-item-content wrapper element instead of the k-treeview-leaf element. This provides consistent state styling across all child elements.

Chat Rendering Enhancements

In v13.0.0 the Chat component was redesigned to enhance the overall user experience, supporting smoother and more engaging interactions for both person-to-person and AI-powered conversations.

Key Changes

• Chat textarea—Replaced the Chat textarea with the new PromptBox component, providing a more flexible and consistent input experience.
• Header component—Replaced the AppBar component in the header with the Toolbar component for improved structure and alignment.

New Features

• Message send failure handling—The Chat component now visually indicates when a message fails to send.
• Scroll-to-bottom button—Added a scroll-to-bottom button, allowing users to quickly jump to the latest content in the conversation.
• Scroll buttons—Added scroll buttons with gradient styling over the suggestions area, making it easier to navigate through available suggestions.
• Conversation-message box divider—Introduced a horizontal divider between messages and the promptBox area that visually indicates where messages are truncated.

Visual Refinements

• Chat background—Removed the gray background for a cleaner, more modern appearance;
• Avatar alignment—Avatars are now aligned with their corresponding message bubbles for improved visual clarity.
• Sequential message styling—Updated border radius handling for consecutive messages to create a smoother, more cohesive message flow.