@progress/kendo-themes-html 5.6.1-dev.6 → 5.8.0

package/src/grid/tests/grid-angular.tsx

@@ -142,7 +142,7 @@ root.render(
                                             <col className="k-hierarchy-col" /><col /><col /><col /><col />
                                         </colgroup>
                                         <tbody>
-                                            <tr className="k-master-row">
+                                            <tr className="k-master-row k-expanded">
                                                 <td className="k-hierarchy-cell"><Icon name="minus" /></td>
                                                 <td>1</td>
                                                 <td>Text</td>
@@ -219,7 +219,7 @@ root.render(
                                             <col />
                                         </colgroup>
                                         <tbody>
-                                            <tr className="k-master-row">
+                                            <tr className="k-master-row k-expanded">
                                                 <td className="k-hierarchy-cell">
                                                     <Icon name="minus" />
                                                 </td>

package/src/grid/tests/grid-column-menu-rtl.tsx

@@ -309,7 +309,7 @@ root.render(
                                     <Icon className="k-expander-indicator" name="arrow-chevron-up" />
                                 </div>
                                 <div className="k-columnmenu-item-content k-columns-item">
-                                    <form className="k-filter-menu k-group k-reset k-state-border-up">
+                                    <form className="k-filter-menu k-group k-reset">
                                         <div className="k-filter-menu-container">
                                             <DropdownList value="Contains" />
                                             <Textbox placeholder="Filter..." />
@@ -371,7 +371,7 @@ root.render(
                                     <Icon className="k-expander-indicator" name="arrow-chevron-up" />
                                 </div>
                                 <div className="k-columnmenu-item-content k-columns-item">
-                                    <form className="k-filter-menu k-group k-reset k-state-border-up">
+                                    <form className="k-filter-menu k-group k-reset">
                                         <div className="k-filter-menu-container">
                                             <Searchbox placeholder="Search..." />
                                             <ul className="k-reset k-multicheck-wrap">

package/src/grid/tests/grid-column-menu.tsx

@@ -309,7 +309,7 @@ root.render(
                                     <Icon className="k-expander-indicator" name="arrow-chevron-up" />
                                 </div>
                                 <div className="k-columnmenu-item-content k-columns-item">
-                                    <form className="k-filter-menu k-group k-reset k-state-border-up">
+                                    <form className="k-filter-menu k-group k-reset">
                                         <div className="k-filter-menu-container">
                                             <DropdownList value="Contains" />
                                             <Textbox placeholder="Filter..." />
@@ -371,7 +371,7 @@ root.render(
                                     <Icon className="k-expander-indicator" name="arrow-chevron-up" />
                                 </div>
                                 <div className="k-columnmenu-item-content k-columns-item">
-                                    <form className="k-filter-menu k-group k-reset k-state-border-up">
+                                    <form className="k-filter-menu k-group k-reset">
                                         <div className="k-filter-menu-container">
                                             <Searchbox placeholder="Search..." />
                                             <ul className="k-reset k-multicheck-wrap">

package/src/grid/tests/grid-filter-menu-multi-checkbox.tsx

@@ -37,7 +37,7 @@ root.render(
 
             <section>
                 <div className="k-animation-container" style={{ overflow: "visible" }}>
-                    <form className="k-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <Searchbox placeholder="Search..." />
                             <ul className="k-reset k-multicheck-wrap">
@@ -58,7 +58,7 @@ root.render(
 
             <section className="k-rtl">
                 <div className="k-animation-container" style={{ overflow: "visible" }}>
-                    <form className="k-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <Searchbox placeholder="Search..." />
                             <ul className="k-reset k-multicheck-wrap">
@@ -82,7 +82,7 @@ root.render(
 
             <section>
                 <div className="k-animation-container" style={{ overflow: "visible" }}>
-                    <form className="k-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <div className="k-filter-help-text">Show items with value that:</div>
                             <ul className="k-reset k-multicheck-wrap">
@@ -101,7 +101,7 @@ root.render(
 
             <section className="k-rtl">
                 <div className="k-animation-container" style={{ overflow: "visible" }}>
-                    <form className="k-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <div className="k-filter-help-text">Show items with value that:</div>
                             <ul className="k-reset k-multicheck-wrap">

package/src/grid/tests/grid-filter-menu.tsx

@@ -29,7 +29,7 @@ root.render(
             {/* jQuery rendering */}
             <section>
                 <div className="k-animation-container" style={{ overflow: "visible" }}>
-                    <form className="k-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <div className="k-filter-help-text">Show items with value that:</div>
                             <DropdownList value="Is equal to" />

package/src/grid/tests/grid-grouping-detail-template-angular.tsx

@@ -337,7 +337,7 @@ root.render(
                                                 <p className="k-reset"><Icon name="collapse" /> Name: Product1 </p>
                                             </td>
                                         </tr>
-                                        <tr className="k-master-row" role="row">
+                                        <tr className="k-master-row k-expanded" role="row">
                                             <td className="k-group-cell"></td>
                                             <td className="k-group-cell"></td>
                                             <td className="k-hierarchy-cell"><Icon name="minus" /></td>
@@ -363,7 +363,7 @@ root.render(
                                                 <p className="k-reset"><Icon name="collapse" /> Name: Product2 </p>
                                             </td>
                                         </tr>
-                                        <tr className="k-alt k-master-row" role="row">
+                                        <tr className="k-alt k-master-row k-expanded" role="row">
                                             <td className="k-group-cell"></td>
                                             <td className="k-group-cell"></td>
                                             <td className="k-hierarchy-cell"><Icon name="minus" /></td>

package/src/grid/tests/grid-grouping-detail-template-blazor.tsx

@@ -489,7 +489,7 @@ root.render(
                                                 </p>
                                             </td>
                                         </tr>
-                                        <tr role="row" className="k-master-row">
+                                        <tr role="row" className="k-master-row k-expanded">
                                             <td className="k-group-cell"></td>
                                             <td className="k-group-cell"></td>
                                             <td className="k-hierarchy-cell">
@@ -537,7 +537,7 @@ root.render(
                                                 </p>
                                             </td>
                                         </tr>
-                                        <tr role="row" className="k-master-row k-alt">
+                                        <tr role="row" className="k-master-row k-alt k-expanded">
                                             <td className="k-group-cell"></td>
                                             <td className="k-group-cell"></td>
                                             <td className="k-hierarchy-cell">

package/src/grid/tests/grid-hierarchy.tsx

@@ -42,7 +42,7 @@ root.render(
                                     </td>
                                     <td>1</td>
                                 </tr>
-                                <tr className="k-alt k-master-row">
+                                <tr className="k-alt k-master-row k-expanded">
                                     <td className="k-hierarchy-cell">
                                         <Icon name="collapse" />
                                     </td>

package/src/grid/tests/grid-locked-columns.tsx

@@ -77,15 +77,15 @@ root.render(
                                 <td>10250</td>
                                 <td>Hanari Carnes</td>
                             </tr>
-                            <tr className="k-alt k-state-hover">
+                            <tr className="k-alt k-hover">
                                 <td>10251</td>
                                 <td>Victuailles en stock (Hovered)</td>
                             </tr>
-                            <tr className="k-state-selected">
+                            <tr className="k-selected">
                                 <td>10252</td>
                                 <td>Suprêmes délices (Selected)</td>
                             </tr>
-                            <tr className="k-alt k-state-hover k-state-selected">
+                            <tr className="k-alt k-hover k-selected">
                                 <td>10253</td>
                                 <td>Hanari (Selected and Hovered)</td>
                             </tr>
@@ -123,17 +123,17 @@ root.render(
                                 <td>Rio de Janeiro</td>
                                 <td>Rua do Paço, 67</td>
                             </tr>
-                            <tr className="k-alt k-state-hover">
+                            <tr className="k-alt k-hover">
                                 <td>France</td>
                                 <td>Lyon</td>
                                 <td>2, rue du Commerce</td>
                             </tr>
-                            <tr className="k-state-selected">
+                            <tr className="k-selected">
                                 <td>Belgium</td>
                                 <td>Charleroi</td>
                                 <td>Boulevard Tirou, 255</td>
                             </tr>
-                            <tr className="k-alt k-state-selected k-state-hover">
+                            <tr className="k-alt k-selected k-hover">
                                 <td>Brazil</td>
                                 <td>Rio de Janeiro</td>
                                 <td>Rua do Paço, 67</td>

package/src/grid/tests/grid-long-titles.tsx

@@ -32,7 +32,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon">
-                                                <a className="k-grid-header-menu k-grid-column-menu k-state-active" href="#">
+                                                <a className="k-grid-header-menu k-grid-column-menu k-active" href="#">
                                                     <Icon name="more-vertical" />
                                                 </a>
                                                 Active Column Menu &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet consectetur adipiscing elit
@@ -88,7 +88,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon k-filterable">
-                                                <a className="k-grid-filter k-state-active" href="#">
+                                                <a className="k-grid-filter k-active" href="#">
                                                     <Icon name="filter" />
                                                 </a>
                                                 Active Filterable &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet consectetur adipiscing elit

package/src/grid/tests/grid-react.tsx

@@ -67,8 +67,8 @@ root.render(
                                             <td>10 boxes x 20 bags</td>
                                         </tr>
                                         <tr className="k-master-row k-alt">
-                                            <td className="k-grid-content-sticky k-state-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
-                                            <td className="k-state-selected">2</td>
+                                            <td className="k-grid-content-sticky k-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
+                                            <td className="k-selected">2</td>
                                             <td >Drag Selection Alt</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$19.00</td>
                                             <td className="k-grid-content-sticky" style={{ left: "180px", right: '0px' }}>17</td>
@@ -77,8 +77,8 @@ root.render(
                                             <td>24 - 12 oz bottles</td>
                                         </tr>
                                         <tr className="k-master-row">
-                                            <td className="k-grid-content-sticky k-state-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
-                                            <td className="k-state-selected">3</td>
+                                            <td className="k-grid-content-sticky k-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
+                                            <td className="k-selected">3</td>
                                             <td >Drag Selection</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$10.00</td>
                                             <td className="k-grid-content-sticky" style={{ left: "180px", right: '0px' }}>13</td>
@@ -86,7 +86,7 @@ root.render(
                                             <td>false</td>
                                             <td>12 - 550 ml bottles</td>
                                         </tr>
-                                        <tr className="k-master-row k-alt k-state-selected">
+                                        <tr className="k-master-row k-alt k-selected">
                                             <td className="k-grid-content-sticky" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
                                             <td>4</td>
                                             <td >Row Selection Alt</td>
@@ -96,7 +96,7 @@ root.render(
                                             <td>false</td>
                                             <td>48 - 6 oz jars</td>
                                         </tr>
-                                        <tr className="k-master-row k-state-selected">
+                                        <tr className="k-master-row k-selected">
                                             <td className="k-grid-content-sticky" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
                                             <td>5</td>
                                             <td >Row Selection</td>
@@ -106,9 +106,9 @@ root.render(
                                             <td>true</td>
                                             <td>36 boxes</td>
                                         </tr>
-                                        <tr className="k-master-row k-alt k-state-hover">
-                                            <td className="k-grid-content-sticky k-state-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
-                                            <td className="k-state-selected">6</td>
+                                        <tr className="k-master-row k-alt k-hover">
+                                            <td className="k-grid-content-sticky k-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
+                                            <td className="k-selected">6</td>
                                             <td >Drag Selection Alt Hover</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$25.00</td>
                                             <td className="k-grid-content-sticky" style={{ left: "180px", right: '0px' }}>120</td>
@@ -116,9 +116,9 @@ root.render(
                                             <td>false</td>
                                             <td>12 - 8 oz jars</td>
                                         </tr>
-                                        <tr className="k-master-row k-state-hover">
-                                            <td className="k-grid-content-sticky k-state-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
-                                            <td className="k-state-selected">7</td>
+                                        <tr className="k-master-row k-hover">
+                                            <td className="k-grid-content-sticky k-selected" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
+                                            <td className="k-selected">7</td>
                                             <td >Drag Selection Hover</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$30.00</td>
                                             <td className="k-grid-content-sticky" style={{ left: "180px", right: '0px' }}>15</td>
@@ -126,7 +126,7 @@ root.render(
                                             <td>false</td>
                                             <td>12 - 1 lb pkgs.</td>
                                         </tr>
-                                        <tr className="k-master-row k-alt k-state-hover">
+                                        <tr className="k-master-row k-alt k-hover">
                                             <td className="k-grid-content-sticky" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
                                             <td>8</td>
                                             <td >Hover</td>
@@ -137,7 +137,7 @@ root.render(
                                             <td>12 - 12 oz jars</td>
                                         </tr>
                                         <tr className="k-master-row">
-                                            <td className="k-grid-content-sticky k-state-focused" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
+                                            <td className="k-grid-content-sticky k-focus" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
                                             <td>9</td>
                                             <td >Focus sticky cell</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$97.00</td>
@@ -148,7 +148,7 @@ root.render(
                                         </tr>
                                         <tr className="k-master-row k-alt">
                                             <td className="k-grid-content-sticky" style={{ left: '0px', right: "240px" }}><Icon name="unpin" /></td>
-                                            <td className="k-state-focused">10</td>
+                                            <td className="k-focus">10</td>
                                             <td >Focus normal cell</td>
                                             <td className="k-grid-content-sticky" style={{ left: "60px", right: "120px" }}>$31.00</td>
                                             <td className="k-grid-content-sticky" style={{ left: "180px", right: '0px' }}>31</td>

package/src/grid/tests/grid-rows-states.tsx

@@ -49,8 +49,8 @@ root.render(
                                 </td>
                                 <td>Normal row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Focus</td>
-                                <td className="k-state-selected">Selected</td>
+                                <td className="k-focus">Focus</td>
+                                <td className="k-selected">Selected</td>
                             </tr>
                             <tr className="k-alt">
                                 <td>
@@ -59,34 +59,34 @@ root.render(
                                 </td>
                                 <td>Alt row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Alt + Focus</td>
-                                <td className="k-state-selected">Alt + Selected</td>
+                                <td className="k-focus">Alt + Focus</td>
+                                <td className="k-selected">Alt + Selected</td>
                             </tr>
                         </tbody>
                         <tbody>
-                            <tr className="k-state-hover">
+                            <tr className="k-hover">
                                 <td>
                                     <Checkbox />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Sorted</td>
                                 <td>Hovered row</td>
-                                <td className="k-state-focused">Hover + Focus</td>
-                                <td className="k-state-selected">Hover + Selected</td>
+                                <td className="k-focus">Hover + Focus</td>
+                                <td className="k-selected">Hover + Selected</td>
                             </tr>
-                            <tr className="k-alt k-state-hover">
+                            <tr className="k-alt k-hover">
                                 <td>
                                     <Checkbox />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Alt hovered row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Alt + Hover + Focus</td>
-                                <td className="k-state-selected">Alt + Hover + Selected</td>
+                                <td className="k-focus">Alt + Hover + Focus</td>
+                                <td className="k-selected">Alt + Hover + Selected</td>
                             </tr>
                         </tbody>
                         <tbody>
-                            <tr className="k-state-focused">
+                            <tr className="k-focus">
                                 <td>
                                     <Checkbox />
                                     <label className="k-checkbox-label"></label>
@@ -94,9 +94,9 @@ root.render(
                                 <td>Focused row</td>
                                 <td>Sorted</td>
                                 <td>N/A</td>
-                                <td className="k-state-selected">Focus + Selected</td>
+                                <td className="k-selected">Focus + Selected</td>
                             </tr>
-                            <tr className="k-alt k-state-focused">
+                            <tr className="k-alt k-focus">
                                 <td>
                                     <Checkbox />
                                     <label className="k-checkbox-label"></label>
@@ -104,50 +104,50 @@ root.render(
                                 <td>Alt focused row</td>
                                 <td>Sorted</td>
                                 <td>N/A</td>
-                                <td className="k-state-selected">Alt + Focus + Selected</td>
+                                <td className="k-selected">Alt + Focus + Selected</td>
                             </tr>
                         </tbody>
                         <tbody>
-                            <tr className="k-state-selected">
+                            <tr className="k-selected">
                                 <td>
                                     <Checkbox checked />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Selected row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Selected + Focus</td>
+                                <td className="k-focus">Selected + Focus</td>
                                 <td>N/A</td>
                             </tr>
-                            <tr className="k-alt k-state-selected">
+                            <tr className="k-alt k-selected">
                                 <td>
                                     <Checkbox checked />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Alt selected row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Alt + Selected + Focus</td>
+                                <td className="k-focus">Alt + Selected + Focus</td>
                                 <td>N/A</td>
                             </tr>
                         </tbody>
                         <tbody>
-                            <tr className="k-state-hover k-state-selected">
+                            <tr className="k-hover k-selected">
                                 <td>
                                     <Checkbox checked />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Hover + Selected row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Hover + Selected + Focus</td>
+                                <td className="k-focus">Hover + Selected + Focus</td>
                                 <td>N/A</td>
                             </tr>
-                            <tr className="k-alt k-state-hover k-state-selected">
+                            <tr className="k-alt k-hover k-selected">
                                 <td>
                                     <Checkbox checked />
                                     <label className="k-checkbox-label"></label>
                                 </td>
                                 <td>Alt + Hover selected row</td>
                                 <td>Sorted</td>
-                                <td className="k-state-focused">Alt + Hover + Selected + Focus</td>
+                                <td className="k-focus">Alt + Hover + Selected + Focus</td>
                                 <td>N/A</td>
                             </tr>
                         </tbody>

package/src/grid/tests/grid-rtl-angular.tsx

@@ -143,7 +143,7 @@ root.render(
                                             <col className="k-hierarchy-col" /><col /><col /><col /><col />
                                         </colgroup>
                                         <tbody>
-                                            <tr className="k-master-row">
+                                            <tr className="k-master-row k-expanded">
                                                 <td className="k-hierarchy-cell"><Icon name="minus" /></td>
                                                 <td>1</td>
                                                 <td>Text</td>

package/src/grid/tests/grid-rtl.tsx

@@ -61,14 +61,14 @@ root.render(
                         </table>
                     </div>
                     <div className="k-widget k-pager k-grid-pager">
-                        <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                        <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                        <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                        <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                         <div className="k-pager-numbers-wrap">
                             <select className="k-picker k-dropdown-list k-dropdown">
                                 <option>1</option>
                             </select>
                             <ul className="k-pager-numbers">
-                                <li><span className="k-link k-state-selected">1</span></li>
+                                <li><span className="k-link k-selected">1</span></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -97,15 +97,15 @@ root.render(
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Default<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-hover">
+                                        <th className="k-header k-filterable k-hover">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Hover<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-focused">
+                                        <th className="k-header k-filterable k-focus">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Focus<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-active">
+                                        <th className="k-header k-filterable k-active">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Active<span></span></a>
                                         </th>
@@ -124,7 +124,7 @@ root.render(
                                 <col className="k-hierarchy-col" /><col /><col /><col /><col />
                             </colgroup>
                             <tbody>
-                                <tr className="k-master-row">
+                                <tr className="k-master-row k-expanded">
                                     <td className="k-hierarchy-cell">
                                         <Icon name="collapse" />
                                     </td>

package/src/grid/tests/grid-sticky-columns-rtl.tsx

@@ -151,18 +151,18 @@ root.render(
                     </div>
                 </div>
                 <div className="k-pager k-widget k-grid-pager k-pager-sm" role="navigation">
-                    <a href="#" className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a href="#" className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                    <a href="#" className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a href="#" className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option className="k-link">1</option>
                         </select>
                         <ul className="k-pager-numbers k-reset">
-                            <li><a href="#" className="k-link k-state-selected">1</a></li>
+                            <li><a href="#" className="k-link k-selected">1</a></li>
                         </ul>
                     </div>
-                    <a href="#" className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-e" /></a>
-                    <a href="#" className="k-link k-pager-nav k-pager-last k-state-disabled"><Icon name="arrow-end-right" /></a>
+                    <a href="#" className="k-link k-pager-nav k-disabled"><Icon name="arrow-e" /></a>
+                    <a href="#" className="k-link k-pager-nav k-pager-last k-disabled"><Icon name="arrow-end-right" /></a>
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page

package/src/grid/tests/grid-sticky-columns.tsx

@@ -63,28 +63,28 @@ root.render(
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>40</td>
                                         <td colSpan={1}>25</td>
                                     </tr>
-                                    <tr className="k-master-row k-state-selected" role="row">
+                                    <tr className="k-master-row k-selected" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Aniseed Syrup(Selected)</td>
                                         <td colSpan={1}>13</td>
                                         <td colSpan={1}>10</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>70</td>
                                         <td colSpan={1}>25</td>
                                     </tr>
-                                    <tr className="k-master-row k-alt k-state-selected" role="row">
+                                    <tr className="k-master-row k-alt k-selected" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton (Alt Selected)</td>
                                         <td colSpan={1}>53</td>
                                         <td colSpan={1}>22</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</td>
                                         <td colSpan={1}>0</td>
                                     </tr>
-                                    <tr className="k-master-row k-state-selected k-state-hover" role="row">
+                                    <tr className="k-master-row k-selected k-hover" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef (Selected+Hover)</td>
                                         <td colSpan={1}>0</td>
                                         <td colSpan={1}>21.35</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</td>
                                         <td colSpan={1}>0</td>
                                     </tr>
-                                    <tr className="k-master-row k-alt k-state-selected k-state-hover" role="row">
+                                    <tr className="k-master-row k-alt k-selected k-hover" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Gran (Alt Selected+Hover)</td>
                                         <td colSpan={1}>120</td>
                                         <td colSpan={1}>25</td>
@@ -258,7 +258,7 @@ root.render(
                                             </td>
                                         </tr>
 
-                                        <tr className="k-master-row k-state-hover">
+                                        <tr className="k-master-row k-hover">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 1</td>
@@ -272,7 +272,7 @@ root.render(
                                                 False</td>
                                         </tr>
 
-                                        <tr className="k-master-row k-alt k-state-selected">
+                                        <tr className="k-master-row k-alt k-selected">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 2</td>
@@ -286,7 +286,7 @@ root.render(
                                                 True</td>
                                         </tr>
 
-                                        <tr className="k-master-row k-state-hover k-state-selected">
+                                        <tr className="k-master-row k-hover k-selected">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 3</td>

package/src/grid/tests/grid.tsx

@@ -126,7 +126,7 @@ root.render(
                                 <col className="k-hierarchy-col" /><col /><col /><col /><col />
                             </colgroup>
                             <tbody>
-                                <tr className="k-master-row">
+                                <tr className="k-master-row k-expanded">
                                     <td className="k-hierarchy-cell">
                                         <Icon name="collapse" />
                                     </td>