5.0.0 (2022-01-18)

Bug Fixes

• charts: update chart series colors (8866736)
• html: set global legacy property to false (6d187e6)

chore

• scheduler: remove legacy styles for kendo-angular-scheduler toolbar (94e093b)

Features

• autocomplete: add size, rounded and fill customization to autocomplete (de93be6)
• avatar: add rounded customization to avatar (9d663e4)
• button: add size, shape and color customization to button (db31d3f)
• checkbox: add sizing property to checkbox (b60493d)
• chip: add size rounded customization to chip (1c2c8c0)
• color-picker: add size, shape and color customization to color picker (ea83616)
• combobox: add size, shape and color customization to combobox (3454223)
• date-input: add size, rounded and full customization to date input (c19da4f)
• date-picker: add size, rounded and full customization to date picker (b137bca)
• daterange-picker: add size, rounded and full customization to date range picker (5f48054)
• datetime-picker: add size, rounded and full customization to date-time picker (9d98b62)
• dropdown-grid: add size, shape and color customization to dropdown grid (b8f7f05)
• dropdown-list: add size, shape and color customization to dropdown list (1a529a8)
• dropdown-tree: add size, shape and color customization to dropdown tree (7907d94)
• fab: standartize appearance options (6a9dfdb)
• html: add html helper for multiselect (55cf915)
• input: add new high-level input component (6f45cf0)
• list: add size customization to list (1509542)
• masked-textbox: add size, rounded and fill customization to masked textbox (995dc3f)
• menu-button: add size customization to menu button (45a0864)
• menu: add size customization to menu list and menu items (7e0b9d1)
• multiselect: add size, rounded and fill customization to multiselect (11a2cab)
• numeric: add size, rounded and fill customization to numeric (8e16cd2)
• radio: add sizing property to radio (afb6cc3)
• searchbox: add size, rounded and fill customization to searchbox (0e75886)
• switch: add size and rounded customization to switch (10a7a02)
• table: add sizing to table component (ae7b643)
• textarea: add size, rounded and fill customization to textarea (cc6c6fb)
• textbox: add size, rounded and fill customization to textbox (797937e)
• time-picker: add size, rounded and full customization to time picker (c8db5cb)
• treeview: add sizing property to treeview (0b92f78)

infra

• publishing: do not include flattened dependencies in distributions (6dd9537)

BREAKING CHANGES

• fab: Convert monolithic FAB styles to multiple class names.

Styles are split in multiple class names with each being scoped to a
single FAB appearance property:

• shape - controls if the FAB is square or not;
• size - controls the overall physical size of a FAB;
• themeColor - controls which color is used to style a FAB;
• fillMode - controls how the color is applied;
• rounded - controls what border radius is applied to a FAB.
• fab: the shape option now supports rectangle and square.
• fab: themeColor class is now composite - k-fab-{fillMode}-{themeColor}.
• fab: Add kendo prefix to all FAB variables
• treeview: Add sizing property to TreeView
• multiselect: Use high-level input for multiselect base

Multiselect reuses the input base component size, rounded and fill
component options.

• multiselect: Use chip list for item selection
• chip: Add kendo prefix to all avatar variables

Change variable names from $chip-* to $kendo-chip-*.

• table: Add kendo prefix to all table variables

Change variable names from $table-* to $kendo-table-*.

• list: List size is now applied by a dedicated class.
• list: Rename list state variables.
• list: Add kendo prefix to all list variables

Change variable name from $list-* to $kendo-list-*.

• menu: Convert monolithic menu styles to multiple class names
• menu-button: Convert monolithic menu button styles to multiple class names
• avatar: Removed shape option from avatar.

The avatar has fixed width and height, thus no dedicated shape option
is needed. Instead, the avatar has rounded appearance property set
to circle by default.

The styles of the avatar are split into multiple class names with each
being scoped to a single appearance property:

• size controls the overall physical size of an avatar;
• themeColor controls which color is used to style an avatar;
• fillMode controls how the color is applied;
• rounded controls what border radius is applied to an avatar.

Each property generates component specific class name k-avatar-{size},
k-avatar-{fillMode}, k-avatar-{fillMode}-{themeColor}.

Note: without fillMode, there is no way to apply themeColor, that's why
the themeColor class is composite.

The only notable exception is rounded, which sets the same class name
for all components -- k-rounded-{rounded}.

You can find more information about the values of each property in the
documentation of the button component -- /docs/components/avatar.

• avatar: Add kendo prefix to all avatar variables

Change variable names from $avatar-* to $kendo-avatar-*.

• daterange-picker: Use high-level input for date range picker base

Date range picker reuses the input base component size, rounded and fill
component options.

• datetime-picker: Use high-level input for date-item picker base

Date-time picker reuses the input base component size, rounded and fill
component options.

• time-picker: Use high-level input for time picker base

Time picker reuses the input base component size, rounded and fill
component options.

• date-picker: Use high-level input for date picker base

Date picker reuses the input base component size, rounded and fill
component options.

• date-input: Use high-level input for date input base

Date input reuses the input base component size, rounded and fill
component options.

• color-picker: Use high-level picker for color picker base

Color picker reuses the picker base component size, rounded and fill
component options.

• dropdown-grid: Use high-level picker for dropdown grid base

Dropdown grid reuses the picker base component size, rounded and fill
component options.

• dropdown-tree: Use high-level picker for dropdown tree base

Dropdown tree reuses the picker base component size, rounded and fill
component options.

• dropdown-list: Use high-level picker for dropdown list base

Dropdown list reuses the picker base component size, rounded and fill
component options.

• combobox: Use high-level input for combobox base

Combobox reuses the input base component size, rounded and fill
component options.

• autocomplete: Use high-level input for autocomplete base

Autocomplete reuses the input base component size, rounded and fill
component options.

• searchbox: Use high-level input for searchbox base

Searchbox reuses the input base component size, rounded and fill
component options.

• masked-textbox: Use high-level input for masked textbox base

Masked textbox reuses the input base component size, rounded and fill
component options.

• numeric: Use high-level input for numeric textbox base

Numeric textbox reuses the input base component size, rounded and fill
component options.

• textarea: Use high-level input for textarea base

Textarea reuses the input base component size, rounded and fill
component options.

• textbox: Use high-level input for textbox base base

Textbox reuses the input base component size, rounded and fill
component options.

• input: Add new high-level input and picker component

Previously, the various form components did not share or reuse code.
Now, we have have to base components: input and picker, that
hold the bulk of styling needed. In addition, styles are split in multiple class names
with each being scoped to a single component appearance property:

• size controls the overall physical size of a component;
• themeColor controls which color is used to style a component;
• fillMode controls how the color is applied;
• rounded controls what border radius is applied to a component.

Each property generates component specific class name k-input-{size},
k-input-{fillMode}, k-input-{fillMode}-{themeColor}.

Note: without fillMode, there is no way to apply themeColor, that's why
the themeColor class is composite.

The only notable exception is rounded, which sets the same class name
for all components -- k-rounded-{rounded}.

You can find more information about the values of each property in the
documentation of each respective component -- /docs/components/....

• input: Remove residual styles

No further customization is applied to input and picker components when
hosted inside other components, except in very few specific cases.

• input: Add kendo prefix to all variables

Change variable names from $input-* to $kendo-input-*.

• radio: Add sizing property to radio

There is a new aptly named property, size, for radio button which
controls the overall physical size of a radio button.

• radio: Add kendo prefix to all radio variables

Change variable names from $radio-* to $kendo-radio-*.

• checkbox: Convert monolithic checkbox styles to multiple class names

Previously, k-checkbox held all the styling information related to
the checkbox component. Now, styles are split in multiple class names
with each being scoped to a single checkbox appearance property:

• size controls the overall physical size of a checkbox;
• rounded controls what border radius is applied to a checkbox.
• checkbox: Add kendo prefix to all checkbox variables

Change variable names from $checkbox-* to $kendo-checkbox-*.

• switch: Convert monolithic switch styles to multiple class names

Previously, switch class names held too much styling information that
made customizing the switch hard. Now, styles are split in multiple
class names with each being scoped to a single switch appearance property:

• size controls the overall physical size of a switch;
• trackRounded controls what border radius is applied to the switch track;
• thumbRounded controls what border radius is applied to the switch thumb.

You can find more information about the values of each property in the
documentation of the button component -- /docs/components/switch.

• switch: Remove residual switch styles

No further customization is applied to buttons when hosted inside other
components, except in very few specific cases.

• switch: Add kendo prefix to all switch variables

Change variable name from $switch-* to $kendo-switch-*.

• button: Convert monolithic button styles to multiple class names

Previously, k-button held all the styling information related to
the button component. Now, styles are split in multiple class names
with each being scoped to a single button appearance property:

• shape controls if the button is square or not;
• size controls the overall physical size of a button;
• themeColor controls which color is used to style a button;
• fillMode controls how the color is applied;
• rounded controls what border radius is applied to a button.

Each property generates component specific class name k-button-square,
k-button-{size}, k-button-{fillMode}, k-button-{fillMode}-{themeColor}.

Note: without fillMode, there is no way to apply themeColor, that's why
the themeColor class is composite.

The only notable exception is rounded, which sets the same class name
for all components -- k-rounded-{rounded}.

You can find more information about the values of each property in the
documentation of the button component -- /docs/components/button.

• button: Remove residual button styles

No further customization is applied to buttons when hosted inside other
components, except in very few specific cases.

For instance, in Material theme we would slightly dim the normal buttons
and remove the shadow, which may or may not be desired.

• button: Add kendo prefix to all button variables

Change variable names from $button-* to $kendo-button-*.

• scheduler: Remove legacy styles for kendo-angular-scheduler

• charts: Updates the chart series colors to match the update designs

• add compatibility swatches called ending with v4

• html: Set global legacy property to false

• publishing: Do not include flattened dependencies in distributions