Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(common): Document the rendering changes in 5.2.0 #2043

Merged
merged 10 commits into from May 13, 2024
Merged

docs(common): Document the rendering changes in 5.2.0 #2043

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ff892ed
docs(common): Add rendering changes for 5.2.0
dimodi Mar 5, 2024
ad92a33
docs(common): Document rendering changes for 5.2.0
dimodi Apr 10, 2024
8813734
docs: rendering changes 5.2.0 continued
dimodi Apr 16, 2024
25724e2
Update upgrade/rendering-changes/5-2-0.md
dimodi Apr 18, 2024
d1be7f8
reorder versions
dimodi Apr 24, 2024
6a86d9d
add more changes
dimodi Apr 26, 2024
bcd0df6
rendering changes continued
dimodi May 2, 2024
fc34402
docs(common): Finalize rendering changes for 5.2.0
dimodi May 7, 2024
08f00c4
Update upgrade/rendering-changes/5-2-0.md
dimodi May 8, 2024
c4a62c8
Update upgrade/rendering-changes/5-2-0.md
dimodi May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/pager/overview.md
View file
Open in desktop
Expand Up @@ -78,9 +78,9 @@ The Blazor Pager provides various parameters that allow you to configure the com

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

| Parameter | Type and Default Value | Description |
| Parameter | Type and Default Value | Description |
| ----------- | ----------- | ----------- |
|`Adaptive` | `bool` | Defines whether pager elements should be changed based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
|`Adaptive` | `bool` <br /> (`true`) | Defines whether pager elements should be changed based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
| `ButtonCount` | `int` | The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`). |
| `Class` | `string` | Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
| `Page` | `int` | Represents the current page of the pager. The first page has an index of `1`. Supports two-way binding. If no value is provided, the parameter will default to the first page (1), but you should always use this parameter value in order to successfully use the component. If you don't use two-way binding and you don't update the value of the parameter after the user action, the pager UI will not reflect the change and will revert to the previous value (page index). |
Expand Down
211 changes: 211 additions & 0 deletions upgrade/rendering-changes/5-2-0.md
View file
Open in desktop
@@ -0,0 +1,211 @@
---
title: 5.2.0
description: Handle the rendering changes in the 5.2.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 5.2.0 Release
slug: changes-in-5-2-0
position: 6
dimodi marked this conversation as resolved.
Show resolved Hide resolved
---

# Rendering Changes in 5.2.0

* [ButtonGroup](#buttongroup)
* [Calendar](#calendar)
* [DropDownButton](#dropdownbutton-and-splitbutton)
* [DateRangePicker](#daterangepicker)
* [Drawer](#drawer)
* [FloatingLabel](#floatinglabel)
* [Grid](#grid)
* [NumericTextBox](#numerictextbox)
* [Pager](#pager)
* [PanelBar](#panelbar)
* [SplitButton](#dropdownbutton-and-splitbutton)
* [Scheduler](#scheduler)
* [Switch](#switch)
* [TreeList](#treelist)


## ButtonGroup

When a `ButtonGroupButton` inside a ButtonGroup has no `ChildContent`, it no longer renders an empty `span.k-button-text`.

<table>
<thead>
<tr>
<th>UI for Blazor 5.1.1</th>
<th>UI for Blazor 5.2.0</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top">
<pre><code>
&lt;button class="k-button"&gt;
&lt;span class="k-button-icon"&gt;...&lt;/span&gt;
<strong>&lt;span class="k-button-text"&gt;&lt;/span&gt;</strong>
&lt;/button&gt;
</code></pre>
</td>
<td style="vertical-align:top">
<pre><code>
&lt;button class="k-button"&gt;
&lt;span class="k-button-icon"&gt;&lt;/span&gt;

&lt;/button&gt;
</code></pre>
</td>
</tr>
</tbody>
</table>


## Calendar

* The `tbody` element in the year, decade, and century view renders a `k-calendar-tbody` CSS class.
* The `button.k-calendar-title` button for the month name in the month view renders a `k-button-primary` CSS class and has the theme's "primary" text color.
* The `button.k-calendar-nav-today` element renders a `role="link"` attribute.


## DateRangePicker

The first and last table cell (`td.k-calendar-td`) in the selected range render `k-range-start` and `k-range-end` CSS classes.


## Drawer

* The Drawer items (`li.k-drawer-item`) render a `k-level-0` CSS class.
* The `div.k-drawer-items` element is removed. The `k-drawer-items` CSS class is moved to the child `ul` element.

<table>
<thead>
<tr>
<th>UI for Blazor 5.1.1</th>
<th>UI for Blazor 5.2.0</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top">
<pre><code>
&lt;div class="k-drawer-container"&gt;
&lt;div class="k-drawer"&gt;
&lt;div class="k-drawer-wrapper"&gt;
<strong>&lt;div class="k-drawer-items"&gt;</strong>
&lt;ul&gt;
&lt;li class="k-drawer-item"&gt;...&lt;/li&gt;
&lt;li class="k-drawer-item"&gt;...&lt;/li&gt;
&lt;li class="k-drawer-item"&gt;...&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="k-drawer-content"&gt;...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</td>
<td style="vertical-align:top">
<pre><code>
&lt;div class="k-drawer-container"&gt;
&lt;div class="k-drawer"&gt;
&lt;div class="k-drawer-wrapper"&gt;

&lt;ul <strong>class="k-drawer-items"</strong>&gt;
&lt;li class="k-drawer-item <strong>k-level-0</strong>"&gt;...&lt;/li&gt;
&lt;li class="k-drawer-item k-level-0"&gt;...&lt;/li&gt;
&lt;li class="k-drawer-item k-level-0"&gt;...&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;div class="k-drawer-content"&gt;...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</td>
</tr>
</tbody>
</table>


## DropDownButton and SplitButton

The `ul.k-menu-group` element in the popup no longer renders `k-group` and `k-reset` CSS classes.


## FloatingLabel

The `label.k-label` element renders as `label.k-floating-label`.


## Grid

The data rows (`tr.k-table-row`) render a `.k-master-row` CSS class only in hierarchy scenarios when the Grid has a `<DetailTemplate>`.
dimodi marked this conversation as resolved.
Show resolved Hide resolved


## NumericTextBox

The arrow buttons (`button.k-spinner-increase` and `button.k-spinner-decrease`) render an additional CSS class that reflects the [NumericTextBox `Size`]({%slug numerictextbox-appearance%}#size). The default `Size` is medium, so the new CSS class is `k-button-md`.


## Pager

* The selected `option` element in the native page number drop down (`select.k-picker`) no longer renders a `k-selected` CSS class. The `select` element shows on small screens instead of the pager buttons when the [Pager `Adaptive` parameter]({%slug pager-overview%}#pager-parameters) is set to `true`.
* The page number buttons (`button.k-button`) render their content in a `span.k-button-text`.

<table>
<thead>
<tr>
<th>UI for Blazor 5.1.1</th>
<th>UI for Blazor 5.2.0</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top">
<pre><code>
&lt;button class="k-button"&gt;
10
&lt;/button&gt;
&lt;button class="k-button"&gt;
...
&lt;/button&gt;
</code></pre>
</td>
<td style="vertical-align:top">
<pre><code>
&lt;button class="k-button"&gt;
<strong>&lt;span class="k-button-text"&gt;10&lt;/span&gt;</strong>
&lt;/button&gt;
&lt;button class="k-button"&gt;
<strong>&lt;span class="k-button-text"&gt;...&lt;/span&gt;</strong>
&lt;/button&gt;
</code></pre>
</td>
</tr>
</tbody>
</table>


## PanelBar

* Expanded items (`li.k-panelbar-item`) render a `k-expanded` CSS class instead of `k-state-expanded`.
* Child item groups (`ul.k-panelbar-group`) no longer render `k-group` and `k-panel` CSS classes.
* The [`<ContentTemplate>` wrapper]({%slug panelbar-templates-content%}) (`div.k-panelbar-content`) no longer renders a `k-content` CSS class.


## Scheduler

* The Scheduler `div.k-scheduler-layout` element renders a `k-scheduler-dayview` or `k-scheduler-weekview` CSS class when the component shows its Day view or Week view, respectively.


## Switch

The `span.k-switch` element no longer renders a `k-rounded-full` CSS class.


## TreeList

The data rows (`tr.k-table-row`) render a `.k-master-row` CSS class only if they are expandable.
dimodi marked this conversation as resolved.
Show resolved Hide resolved


## See Also

* [Best Practices for Styling Telerik UI for Blazor Components]({%slug good-styling-practices%})
2 changes: 1 addition & 1 deletion upgrade/rendering-changes/list.md
View file
Open in desktop
Expand Up @@ -16,6 +16,7 @@ As the Telerik UI for Blazor matures we will continuously optimize the rendering
* [4.0.0]({%slug changes-in-4-0-0%})
* [4.3.0]({%slug changes-in-4-3-0%})
* [4.6.0]({%slug changes-in-4-6-0%})
* [5.2.0]({%slug changes-in-5-2-0%})

## Good Styling Practices

Expand Down Expand Up @@ -136,4 +137,3 @@ As the Telerik UI for Blazor matures we will continuously optimize the rendering
}
}
````