@progress/kendo-themes-html 5.6.1-dev.2 → 5.6.1-dev.5

package/src/scheduler/tests/scheduler-angular-day-rtl.tsx

@@ -20,11 +20,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/24/2013</span>
-                            <span className="k-lg-date-format">Monday, June 24, 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Monday, June 24, 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">
@@ -62,7 +60,7 @@ root.render(
                                                 <tr><td style={{ height: "46px" }}></td></tr>
                                             </tbody>
                                         </table>
-                                        <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
+                                        <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
                                             <span className="k-event-actions"><Icon name="arrow-e"></Icon></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
@@ -151,7 +149,7 @@ root.render(
                                     </tbody>
                                 </table>
 
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "56px", right: "3px", top: "37px", height: "443px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "56px", right: "3px", top: "37px", height: "443px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">8:30 AM - 2:30 PM</div>
@@ -161,7 +159,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "61px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "61px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -171,7 +169,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "117px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "117px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -181,7 +179,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "173px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "173px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -191,7 +189,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "229px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "229px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -201,7 +199,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "285px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "285px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -211,7 +209,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "54px", right: "341px", top: "259px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "54px", right: "341px", top: "259px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
@@ -221,7 +219,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "393px", right: "61px", top: "370px", height: "73px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "393px", right: "61px", top: "370px", height: "73px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">1:00 PM - 2:00 PM</div>
@@ -231,7 +229,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", display: "block", width: "54px", right: "397px", top: "259px", height: "36px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "54px", right: "397px", top: "259px", height: "36px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">11:30 AM - 12:00 PM</div>
@@ -241,7 +239,7 @@ root.render(
                                     <span className="k-resize-handle k-resize-n"></span>
                                     <span className="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", display: "block", width: "393px", right: "61px", top: "333px", height: "36px" }} className="k-event">
+                                <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "393px", right: "61px", top: "333px", height: "36px" }} className="k-event">
                                     <span className="k-event-actions"></span>
                                     <div>
                                         <div className="k-event-template k-event-time">12:30 PM - 1:00 PM</div>

package/src/scheduler/tests/scheduler-angular-month-rtl.tsx

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">June 2013</span>
-                            <span className="k-lg-date-format">June 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            June 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-month.tsx

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">June 2013</span>
-                            <span className="k-lg-date-format">June 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            June 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

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

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">
@@ -85,7 +83,7 @@ root.render(
                                                 </tr>
                                             </tbody>
                                         </table>
-                                        <div className="k-event" style={{ display: "block", width: "300px", right: "304px", top: '0px', height: "25px" }} >
+                                        <div className="k-event" style={{ width: "300px", right: "304px", top: '0px', height: "25px" }} >
                                             <span className="k-event-actions"></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
@@ -366,7 +364,7 @@ root.render(
                                         </tr>
                                     </tbody>
                                 </table>
-                                <div className="k-event" style={{ display: "block", width: "150px", right: "306px", top: '0px', height: "73px" }} >
+                                <div className="k-event" style={{ width: "150px", right: "306px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
@@ -375,7 +373,7 @@ root.render(
                                     <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                 </div>
 
-                                <div className="k-event k-event-drag-hint" style={{ display: "block", width: "150px", right: "631px", top: '0px', height: "73px" }} >
+                                <div className="k-event k-event-drag-hint" style={{ width: "150px", right: "631px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>

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

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">
@@ -85,7 +83,7 @@ root.render(
                                                 </tr>
                                             </tbody>
                                         </table>
-                                        <div className="k-event" style={{ display: "block", width: "300px", left: "304px", top: '0px', height: "25px" }} >
+                                        <div className="k-event" style={{ width: "300px", left: "304px", top: '0px', height: "25px" }} >
                                             <span className="k-event-actions"></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
@@ -366,7 +364,7 @@ root.render(
                                         </tr>
                                     </tbody>
                                 </table>
-                                <div className="k-event" style={{ display: "block", width: "150px", left: "306px", top: '0px', height: "73px" }} >
+                                <div className="k-event" style={{ width: "150px", left: "306px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
@@ -375,7 +373,7 @@ root.render(
                                     <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                 </div>
 
-                                <div className="k-event k-event-drag-hint" style={{ display: "block", width: "150px", left: "631px", top: '0px', height: "73px" }} >
+                                <div className="k-event k-event-drag-hint" style={{ width: "150px", left: "631px", top: '0px', height: "73px" }} >
                                     <span className="k-event-actions"><Icon name="reload"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>

package/src/scheduler/tests/scheduler-flex-layout.tsx

@@ -17,11 +17,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2019</span>
-                        <span className="k-lg-date-format">Monday, June 24, 2019</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 24, 2019
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-jquery-agenda.tsx

@@ -24,11 +24,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/10/2013 - 6/14/2013</span>
-                        <span className="k-lg-date-format">Monday, June 10, 2013 - Friday, June 14, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 10, 2013 - Friday, June 14, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
@@ -78,7 +76,7 @@ root.render(
                                                     </div>
                                                 </td>
                                             </tr>
-                                            <tr className="k-state-hover">
+                                            <tr className="k-hover">
                                                 <td className="k-scheduler-datecolumn k-first"><strong className="k-scheduler-agendaday">14</strong><em className="k-scheduler-agendaweek">Friday</em><span className="k-scheduler-agendadate">June, 2013</span></td>
                                                 <td className="k-scheduler-timecolumn"><div>all day</div></td>
                                                 <td>
@@ -89,7 +87,7 @@ root.render(
                                                     </div>
                                                 </td>
                                             </tr>
-                                            <tr className="k-state-selected">
+                                            <tr className="k-selected">
                                                 <td className="k-scheduler-datecolumn k-first"><strong className="k-scheduler-agendaday">17</strong><em className="k-scheduler-agendaweek">Monday</em><span className="k-scheduler-agendadate">June, 2013</span></td>
                                                 <td className="k-scheduler-timecolumn"><div>6:30 PM-8:00 PM</div></td>
                                                 <td>

package/src/scheduler/tests/scheduler-jquery-month.tsx

@@ -39,11 +39,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a role="button" href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format" data-bind="text: formattedShortDate">June, 2013</span>
-                        <span className="k-lg-date-format" data-bind="text: formattedDate">June, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        June, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-agenda.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/21/2020 - 6/28/2020</span>
-                        <span className="k-lg-date-format">Sunday, June 21, 2020 - Saturday, June 27, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Sunday, June 21, 2020 - Saturday, June 27, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-day.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-month.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">June 2020</span>
-                        <span className="k-lg-date-format">June 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        June 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-timeline-multi.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020 - 6/26/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020 - Thursday, June 25, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020 - Thursday, June 25, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-timeline.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-week.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/21/2020 - 6/28/2020</span>
-                        <span className="k-lg-date-format">Sunday, June 21, 2020 - Saturday, June 27, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Sunday, June 21, 2020 - Saturday, June 27, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-year.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
-import { Icon } from '../../icon';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -17,11 +16,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">2021</span>
-                        <span className="k-lg-date-format">2021</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        2021
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler.tsx

@@ -17,11 +17,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/10/2013 - 6/14/2013</span>
-                        <span className="k-lg-date-format">Monday, June 10, 2013 - Friday, June 14, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 10, 2013 - Friday, June 14, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
@@ -223,14 +221,14 @@ root.render(
                                                 <td className="k-nonwork-hour"></td>
                                                 <td className="k-nonwork-hour"></td>
                                                 <td className="k-nonwork-hour"></td>
-                                                <td className="k-nonwork-hour k-state-selected"></td>
+                                                <td className="k-nonwork-hour k-selected"></td>
                                             </tr>
                                             <tr className="k-middle-row">
                                                 <td></td>
                                                 <td></td>
                                                 <td></td>
                                                 <td></td>
-                                                <td className="k-state-selected"></td>
+                                                <td className="k-selected"></td>
                                             </tr>
                                             <tr>
                                                 <td></td>
@@ -475,7 +473,7 @@ root.render(
                                         <span className="k-resize-handle k-resize-n"></span>
                                         <span className="k-resize-handle k-resize-s"></span>
                                     </div>
-                                    <div style={{ top: "36px", height: "108px", width: "166px", left: "348px" }} className="k-event k-state-hover k-event-ongoing">
+                                    <div style={{ top: "36px", height: "108px", width: "166px", left: "348px" }} className="k-event k-hover k-event-ongoing">
                                         <span className="k-event-actions">
                                             <Icon name="reload"></Icon>
                                         </span>
@@ -489,7 +487,7 @@ root.render(
                                         <span className="k-resize-handle k-resize-n"></span>
                                         <span className="k-resize-handle k-resize-s"></span>
                                     </div>
-                                    <div style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} className="k-event k-state-selected k-event-ongoing">
+                                    <div style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} className="k-event k-selected k-event-ongoing">
                                         <span className="k-event-actions"></span>
                                         <div>
                                             <div className="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
@@ -571,11 +569,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">2/18/2019</span>
-                        <span className="k-lg-date-format">Monday, February 18, 2019</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, February 18, 2019
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/splitter/tests/splitter.tsx

@@ -35,29 +35,45 @@ root.render(
                         <div style={{ flexBasis: "10px", order: "10" }} className="k-pane-static k-pane">
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "1" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
                             <Icon />
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "3" }}>
                             <Icon />
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "5" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-state-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-state-focused k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                     </div>
                 </div>

package/src/time-selector/tests/time-selector.tsx

@@ -35,7 +35,7 @@ root.render(
                             </div>
                             <div className="k-time-list-container">
                                 <span className="k-time-highlight"></span>
-                                <div className="k-time-list-wrapper k-state-focused">
+                                <div className="k-time-list-wrapper k-focus">
                                     <span className="k-title">hour</span>
                                     <div className="k-time-list">
                                         <div className="k-time-container k-content k-scrollable">
@@ -276,7 +276,7 @@ root.render(
                                         </div>
                                     </div>
                                     <div className="k-time-separator">:</div>
-                                    <div className="k-time-list-wrapper k-state-focused">
+                                    <div className="k-time-list-wrapper k-focus">
                                         <span className="k-title">Minute</span>
                                         <div className="k-time-list">
                                             <div className="k-content k-scrollable k-time-container">

package/src/time-selector/time-selector.tsx

@@ -80,7 +80,7 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                             </div>
                         </div>
                         <div className="k-time-separator">:</div>
-                        <div className="k-time-list-wrapper k-state-focused">
+                        <div className="k-time-list-wrapper k-focus">
                             <span className="k-title">Minute</span>
                             <div className="k-time-list">
                                 <div className="k-content k-scrollable k-time-container">

package/src/treelist/tests/treelist.tsx

@@ -21,9 +21,9 @@ root.render(
                                 </colgroup>
                                 <thead>
                                     <tr>
-                                        <th className="k-header k-with-icon"><a className="k-header-column-menu"><Icon name="more-vertical"></Icon></a><a className="k-link">First
+                                        <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical"></Icon></a><a className="k-link">First
                                                 Name</a></th>
-                                        <th className="k-header k-with-icon"><a className="k-header-column-menu"><Icon name="more-vertical"></Icon></a><a className="k-link">Last
+                                        <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical"></Icon></a><a className="k-link">Last
                                                 Name</a></th>
                                     </tr>
                                 </thead>