Skip to content

Commit

Permalink
feat(grid): update grid header rendering
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Grid header cell rendering updated
  • Loading branch information
@TeyaVes @Juveniel
TeyaVes authored and Juveniel committed Dec 20, 2022
1 parent a032e35 commit a1ad23f
Show file tree
Hide file tree
Showing 42 changed files with 1,763 additions and 1,387 deletions.
2 changes: 0 additions & 2 deletions packages/default/scss/grid/_layout.scss
View file
Expand Up @@ -203,8 +203,6 @@

.k-grid-header .k-filterable {
> .k-cell-inner {
margin-inline-end: calc(-1 * #{$kendo-grid-filterable-icon-spacing});

.k-link {
padding-inline-end: 0;
}
Expand Down
6 changes: 0 additions & 6 deletions packages/fluent/scss/grid/_layout.scss
View file
Expand Up @@ -404,10 +404,6 @@
}
}

.k-with-icon,
.k-filterable {
padding-inline-end: var( --kendo-grid-filterable-icon-spacing, #{$kendo-grid-filterable-icon-spacing} );
}

.k-table-th > .k-link:focus {
text-decoration: none;
Expand Down Expand Up @@ -874,8 +870,6 @@

.k-filterable {
> .k-cell-inner {
margin-inline-end: calc( var( --kendo-grid-filterable-icon-spacing, #{$kendo-grid-filterable-icon-spacing} ) * -1 );

.k-link {
padding-inline-end: 0;
}
Expand Down
46 changes: 34 additions & 12 deletions packages/html/src/filemanager/tests/filemanager-gridview.tsx
View file
Expand Up @@ -61,17 +61,28 @@ root.render(
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header k-sorted">
<a className="k-link">Name
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Name</span>
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
</span>
</span>
</a>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">Date Created</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Date Created</span>
</span>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">File Size</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">File Size</span>
</span>
</span>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -169,17 +180,28 @@ root.render(
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header k-sorted">
<a className="k-link">Name
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Name</span>
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
</span>
</span>
</a>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">Date Created</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Date Created</span>
</span>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">File Size</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">File Size</span>
</span>
</span>
</th>
</tr>
</thead>
Expand Down
69 changes: 51 additions & 18 deletions packages/html/src/filemanager/tests/filemanager-preview.tsx
View file
Expand Up @@ -56,17 +56,28 @@ root.render(
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header k-sorted">
<a className="k-link">Name
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Name</span>
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
</span>
</span>
</a>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">Date Created</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Date Created</span>
</span>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">File Size</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">File Size</span>
</span>
</span>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -170,17 +181,28 @@ root.render(
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header k-sorted">
<a className="k-link">Name
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Name</span>
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
</span>
</span>
</a>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">Date Created</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Date Created</span>
</span>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">File Size</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">File Size</span>
</span>
</span>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -275,17 +297,28 @@ root.render(
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header k-sorted">
<a className="k-link">Name
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Name</span>
<span className="k-sort-icon">
<Icon name="sort-asc-small" />
</span>
</span>
</a>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">Date Created</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Date Created</span>
</span>
</span>
</th>
<th className="k-table-th k-header">
<a className="k-link">File Size</a>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">File Size</span>
</span>
</span>
</th>
</tr>
</thead>
Expand Down
16 changes: 14 additions & 2 deletions packages/html/src/gantt/tests/gantt.tsx
View file
Expand Up @@ -57,8 +57,20 @@ root.render(
</colgroup>
<thead className="k-table-thead">
<tr className="k-table-row">
<th className="k-table-th k-header" rowSpan={1} id="bed2dc8a-9916-4536-bc4e-70c7e9e53f5e">ID</th>
<th className="k-table-th k-header" rowSpan={1} id="m81d007a-d0bd-4082-91d7-83a0fdac06de"><a className="k-link">Title</a></th>
<th className="k-table-th k-header" rowSpan={1}>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">ID</span>
</span>
</span>
</th>
<th className="k-table-th k-header" rowSpan={1}>
<span className="k-cell-inner">
<span className="k-link">
<span className="k-column-title">Title</span>
</span>
</span>
</th>
</tr>
</thead>
</table>
Expand Down

0 comments on commit a1ad23f

Please sign in to comment.