Radzen Blazor Components v5 Changelog

Track and review changes to Radzen Blazor Components v5.

Dependencies link

• Dropped Bootstrap - including the Bootsrap CSS is not mandatory any more.
• Dropped the obsolete RadzenGrid component.
• Dropped support for .NET Core 3.x and .NET 5.

Common link

• New RTL Support - All components now support right to left direction for languages that are written from the right to the left (like Arabic).
• New All components now render with box-sizing: border-box;.

New Components link

• New RadzenAppearanceToggle - A toggle button to quickly switch between light and dark themes.
• New RadzenTheme - Use it to load themes to your app.

Themes link

• New Open sourced Material Dark theme - you can now use Material Dark theme for free!
• New Added Standard Dark free theme.
• New Added Humanistic Dark free theme.
• New Added Software Dark free theme.

Colors link

• New Added --rz-base color variable and shades.

Typography link

• Update Replaced all Source Sans Pro fonts with Source Sans 3 variable fonts.
  • Added SourceSans3VF-Italic.ttf.woff2
  • Added SourceSans3VF-Upright.ttf.woff2
  • Deleted SourceSansPro-Black.woff
  • Deleted SourceSansPro-BlackIt.woff
  • Deleted SourceSansPro-Black.woff
  • Deleted SourceSansPro-BlackIt.woff
  • Deleted SourceSansPro-Bold.woff
  • Deleted SourceSansPro-BoldIt.woff
  • Deleted SourceSansPro-ExtraLight.woff
  • Deleted SourceSansPro-ExtraLightIt.woff
  • Deleted SourceSansPro-It.woff
  • Deleted SourceSansPro-Light.woff
  • Deleted SourceSansPro-LightIt.woff
  • Deleted SourceSansPro-Regular.woff
  • Deleted SourceSansPro-Semibold.woff
  • Deleted SourceSansPro-SemiboldIt.woff
• Update Replaced all Roboto fonts with Roboto Flex variable font.
  • Added RobotoFlex.woff2
  • Deleted roboto-v15-latin-300.woff
  • Deleted roboto-v15-latin-700.woff
  • Deleted roboto-v15-latin-regular.woff
  • Deleted roboto-v30-latin-300.woff
  • Deleted roboto-v30-latin-500.woff
  • Deleted roboto-v30-latin-700.woff
  • Deleted roboto-v30-latin-regular.woff

Icons link

• Breaking Replaced Material Icons font with Material Symbols variable font.
  • Added MaterialSymbolsOutlined.woff2
  • Deleted MaterialIcons-Regular.woff
• Breaking Removed direction: ltr; rule from .rzi CSS class.

DataGrid link

• Update Updated and unified Clear and Apply button appearance in filtering popups
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-grid-header-filter-icon-margin is now --rz-grid-header-filter-icon-margin-inline
  • Updated --rz-grid-header-title-padding is now --rz-grid-header-title-padding-inline
  • Updated --rz-column-drag-handle-margin is now --rz-column-drag-handle-margin-inline
  • Updated --rz-grid-filter-icon-margin is now --rz-grid-filter-icon-margin-inline
  • Updated --rz-grid-group-header-item-padding is now --rz-grid-group-header-item-padding-block
  • Added --rz-grid-group-header-item-title-margin-inline
  • Added --rz-grid-group-header-item-padding-inline
  • Added --rz-grid-group-header-gap
  • Added --rz-grid-group-header-item-color
  • Deleted --rz-grid-group-header-item-margin
  • Deleted --rz-grid-group-header-items-margin

DataList link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datalist-item-vertical-margin is now --rz-datalist-item-margin-block
  • Updated --rz-datalist-item-horizontal-margin is now --rz-datalist-item-margin-inline

DataFilter link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datafilter-item-padding-y is now --rz-datafilter-item-padding-block
  • Updated --rz-datafilter-item-padding-left is now --rz-datafilter-item-padding-inline-start

Pager link

• Breaking All CSS classes starting with .rz-paginator-* are renamed to .rz-pager-*
• Breaking All CSS variables starting with --rz-paginator-* are renamed to --rz-pager-*
• Breaking Replaced spacing related CSS variables and updated values respectively:
  • Added --rz-pager-gap
  • Deleted --rz-paginator-first-button-margin
  • Deleted --rz-paginator-last-button-margin
  • Deleted --rz-paginator-dropdown-margin
  • Deleted --rz-paginator-numeric-button-margin
• Deleted --rz-paginator-back-button-hover-color
• Deleted --rz-paginator-back-button-hover-background-color
• Deleted --rz-paginator-next-button-hover-color
• Deleted --rz-paginator-next-button-hover-background-color

Scheduler link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-scheduler-prev-next-button-padding is now --rz-scheduler-prev-next-button-padding-block and --rz-scheduler-prev-next-button-padding-inline
  • Updated --rz-scheduler-today-button-margin-left is now --rz-scheduler-today-button-margin-inline-start
  • Updated --rz-scheduler-event-padding is now --rz-scheduler-event-padding-block and --rz-scheduler-event-padding-inline
  • Updated --rz-scheduler-prev-button-border-radius is now split into:
    • --rz-scheduler-prev-button-border-start-start-radius
    • --rz-scheduler-prev-button-border-start-end-radius
    • --rz-scheduler-prev-button-border-end-start-radius
    • --rz-scheduler-prev-button-border-end-end-radius
  • Updated --rz-scheduler-next-button-border-radius is now split into:
    • --rz-scheduler-next-button-border-start-start-radius
    • --rz-scheduler-next-button-border-start-end-radius
    • --rz-scheduler-next-button-border-end-start-radius
    • --rz-scheduler-next-button-border-end-end-radius
• New --rz-scheduler-highlight-background-color - Use it to highlight working hours in day view, or today in calendar view.

Tree link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-tree-node-padding is now --rz-tree-node-padding-block and --rz-tree-node-padding-inline
  • Updated --rz-tree-node-margin is now --rz-tree-node-margin-block and --rz-tree-node-margin-inline

Image link

• New Added vertical-align: middle; to all images and SVGs inside a Radzen Blazor Component

Layout link

• New CSS reset styles to <body> are applied only when <RadzenLayout> is used.

Dialog link

• Breaking Dialog's title bar now uses flex model for its layout.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-dialog-title-padding is now --rz-dialog-title-padding-block and --rz-dialog-title-padding-inline

Sidebar link

• Breaking Renamed direction related CSS variables and updated values respectively:
  • Updated --rz-sidebar-border-right is now --rz-sidebar-border-inline-end

Splitter link

• Update Splitter icons now use font-family: var(--rz-icon-font-family) instead of hardcoded icon font.

Accordion link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-accordion-item-padding is now --rz-accordion-item-padding-block and --rz-accordion-item-padding-inline
  • Updated --rz-accordion-icon-margin is now --rz-accordion-icon-margin-inline
  • Updated --rz-accordion-toggle-icon-margin is now --rz-accordion-toggle-icon-margin-inline
  • Updated --rz-accordion-content-padding is now --rz-accordion-content-padding-block and --rz-accordion-content-padding-inline
  • Added --rz-accordion-toggle-icon-collapsed-rtl
  • Added --rz-accordion-toggle-icon-expanded-rtl

ContextMenu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-context-menu-padding is now --rz-context-menu-padding-block and --rz-context-menu-padding-inline

Login link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-login-register-padding is now --rz-login-register-padding-block and --rz-login-register-padding-inline
  • Updated --rz-login-register-margin is now --rz-login-register-margin-block and --rz-login-register-margin-inline
  • Updated --rz-login-register-button-margin is now --rz-login-register-button-margin-block and --rz-login-register-button-margin-inline

Menu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-menu-item-icon-margin is now --rz-menu-item-icon-margin-inline
  • Updated --rz-menu-item-padding is now --rz-menu-item-padding-block and --rz-menu-item-padding-inline
  • Updated --rz-menu-top-item-padding is now --rz-menu-top-item-padding-block and --rz-menu-top-item-padding-inline

PanelMenu link

• Breaking Remapped CSS variables for margin, padding, color and background color to match the respective PanelMenu item level.
• Breaking Renamed some of the above mentioned CSS variables and updated values respectively:
  • Updated --rz-panel-menu-color is now --rz-panel-menu-item-color
  • Updated --rz-panel-menu-background-color is now --rz-panel-menu-item-background-color
  • Updated --rz-panel-menu-hover-color is now --rz-panel-menu-item-hover-color
  • Updated --rz-panel-menu-hover-background-color is now --rz-panel-menu-item-hover-background-color
  • Updated --rz-panel-menu-padding is now --rz-panel-menu-padding-block and --rz-panel-menu-padding-inline
  • Updated --rz-panel-menu-item-padding is now --rz-panel-menu-item-padding-block and --rz-panel-menu-item-padding-inline
  • Updated --rz-panel-menu-item-2nd-level-padding is now --rz-panel-menu-item-2nd-level-padding-block and --rz-panel-menu-item-2nd-level-padding-inline
  • Updated --rz-panel-menu-item-margin is now --rz-panel-menu-item-margin-block and --rz-panel-menu-item-margin-inline
  • Updated --rz-panel-menu-item-2nd-level-margin is now --rz-panel-menu-item-2nd-level-margin-block and --rz-panel-menu-item-2nd-level-margin-inline
  • Updated --rz-panel-menu-icon-margin is now --rz-panel-menu-icon-margin-inline
  • Updated --rz-panel-menu-icon-2nd-level-margin is now --rz-panel-menu-icon-2nd-level-margin-inline
  • Added --rz-panel-menu-item-3rd-level-color
  • Added --rz-panel-menu-item-3rd-level-background-color

ProfileMenu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-profile-menu-item-icon-margin is now --rz-profile-menu-item-icon-margin-inline
  • Updated --rz-profile-menu-padding is now --rz-profile-menu-padding-block and --rz-profile-menu-padding-inline

Steps link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-steps-number-padding is now --rz-steps-number-padding-block and --rz-steps-number-padding-inline
• Breaking Prev and Next icon is now rendered via CSS. Instead of <i class="rzi">navigate_next</i> and <i class="rzi">navigate_before</i> the component now renders <span class="rzi"></span>

Tabs link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-tabs-icon-margin is now --rz-tabs-icon-margin-inline
  • Updated --rz-tabs-tab-padding is now --rz-tabs-tab-padding-block and --rz-tabs-tab-padding-inline
• Breaking Updated Tab icon CSS classes <span class="rz-tabview-left-icon rzi" ... to <span class="rzi rz-tabview-icon" ....

Button link

• Update Removed $button-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Button styles.

CheckBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-checkbox-margin is now --rz-checkbox-margin-block and --rz-checkbox-margin-inline
  • Updated --rz-checkbox-label-margin is now --rz-checkbox-label-margin-block and --rz-checkbox-label-margin-inline

ColorPicker link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-colorpicker-item-margin is now --rz-colorpicker-items-gap

DatePicker link

• Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datepicker-header-padding is now --rz-datepicker-header-padding-block and --rz-datepicker-header-padding-inline
  • Updated --rz-datepicker-calendar-padding is now --rz-datepicker-calendar-item-padding
  • Updated --rz-timepicker-padding is now --rz-timepicker-padding-block and --rz-timepicker-padding-inline
  • Added --rz-datepicker-calendar-padding-block
  • Added --rz-datepicker-calendar-padding-inline
  • Added --rz-datepicker-popup-width
  • Added --rz-datepicker-month-dropdown-width
  • Added --rz-datepicker-year-dropdown-width
  • Added --rz-datepicker-prev-next-icon-size
  • Deleted --rz-datepicker-prev-next-button-border-radius
  • Deleted --rz-datepicker-header-line-height

DropDown link

• Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-dropdown-trigger-icon-margin is now --rz-dropdown-trigger-icon-margin-block and --rz-dropdown-trigger-icon-margin-inline
  • Updated --rz-dropdown-label-padding is now --rz-dropdown-label-padding-block and --rz-dropdown-label-padding-inline
  • Updated --rz-multiselect-checkbox-margin is now --rz-multiselect-checkbox-margin-block and --rz-multiselect-checkbox-margin-inline
  • Updated --rz-dropdown-chips-padding is now --rz-dropdown-chips-padding-block and --rz-dropdown-chips-padding-inline

DropDownDataGrid link

• Update Improved lookup styles:
  • Added --rz-lookup-search-margin-bottom
  • Added --rz-lookup-search-gap

Fieldset link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-fieldset-legend-margin is now --rz-fieldset-legend-margin-block and --rz-fieldset-legend-margin-inline
  • Updated --rz-fieldset-legend-padding is now --rz-fieldset-legend-padding-block and --rz-fieldset-legend-padding-inline
  • Updated --rz-fieldset-toggle-margin is now --rz-fieldset-toggle-margin-block and --rz-fieldset-toggle-margin-inline

FormField link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-form-field-filled-padding is now --rz-form-field-filled-padding-block and --rz-form-field-filled-padding-inline
  • Updated --rz-form-field-start-end-padding is now --rz-form-field-start-end-padding-block and --rz-form-field-start-end-padding-inline
  • Updated --rz-form-field-margin is now --rz-form-field-margin-block and --rz-form-field-margin-inline
  • Updated --rz-form-field-filled-numeric-padding is now --rz-form-field-filled-numeric-padding-block and --rz-form-field-filled-numeric-padding-inline
  • Updated --rz-form-field-label-left is now --rz-form-field-label-inset-inline-start

HtmlEditor link

• Update Changed Underline icon from format_underline to format_underlined

ListBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-listbox-checkbox-margin is now --rz-listbox-checkbox-margin-block and --rz-listbox-checkbox-margin-inline
  • Updated --rz-listbox-header-padding is now --rz-listbox-header-padding-block and --rz-listbox-header-padding-inline

Numeric link

• Breaking All CSS classes starting with .rz-spinner-* are renamed to .rz-numeric-*
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-numeric-input-padding is now --rz-numeric-input-padding-block and --rz-numeric-input-padding-inline

RadioButtonList link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-radio-label-margin is now --rz-radio-label-margin-block and --rz-radio-label-margin-inline
  • Updated --rz-radio-margin is now --rz-radio-margin-block and --rz-radio-margin-inline

SpeechToTextButton link

• ---

SplitButton link

• Update Remove redundant CSS variables:
  • Deleted --rz-splitbutton-menu-button-width
  • Deleted --rz-splitbutton-menu-button-padding
  • Deleted --rz-splitbutton-menu-button-font-size

Switch link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-switch-circle-margin is now --rz-switch-circle-offset

TextArea link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-text-area-padding is now --rz-text-area-padding-block and --rz-text-area-padding-inline

TextBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-input-padding is now --rz-input-padding-block and --rz-input-padding-inline

Badge link

• Update Removed $badge-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Badge styles.

Chip link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-chip-padding is now --rz-chip-padding-block and --rz-chip-padding-inline

Notification link

• Breaking New Notification markup. The component now uses flex model for its layout.
• Breaking All CSS classes starting with .rz-growl-* are renamed to .rz-notification-*
• Added New --rz-notification-gap CSS variable.

Alert link

• Update Changed Alert icons:
  • check_circle_outline is now check_circle
  • error_outline is now error
  • info_outline is now info
  • lightbulb_outline is now lightbulb

ProgressBar link

• Update Removed $progressbar-styles SCSS map and use $severity-styles-map and $progressbar-base-styles to generate CSS for ProgressBar styles.