@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.0-dev.0

package/src/grid/tests/grid-multicolumn-headers.tsx

@@ -1,150 +1,110 @@
-import { Icon } from '../../icon';
-
+import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid">
 
-            <div style={{ height: "300px" }} className="k-grid k-grid-md k-grid-lockedcolumns k-grid-no-scrollbar">
-                <div className="k-grid-aria-root">
-                    <div className="k-grid-header">
-                        <div className="k-grid-header-locked" style={{ width: "300px" }}>
-                            <table className="k-table k-table-md k-grid-header-table">
+            <Grid _renderAriaRoot className="k-grid-lockedcolumns k-grid-no-scrollbar" style={{ height: "300px" }}>
+                <GridHeader>
+                    <div className="k-grid-header-locked" style={{ width: "300px" }}>
+                        <GridHeaderTable>
+                            <colgroup>
+                                <col style={{ width: "300px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell rowspan={2} colspan={1} columnTitle="Name"></GridHeaderCell>
+                                </TableRow>
+                                <TableRow></TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                    <div className="k-grid-header-wrap" style={{ width: "434px" }}>
+                        <GridHeaderTable style={{ width: "900px" }}>
+                            <colgroup>
+                                <col style={{ width: "300px" }} /><col style={{ width: "300px" }} /><col style={{ width: "300px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell rowspan={1} colspan={3} columnTitle="Availability"></GridHeaderCell>
+                                </TableRow>
+                                <TableRow>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units In Stock"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Unit Price"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Discontinued"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                </GridHeader>
+                <GridContainer>
+                    <div className="k-grid-content-locked" style={{ width: "300px", height: "272px" }}>
+                        <div className="k-grid-table-wrap" style={{ position: "relative" }}>
+                            <GridTable>
                                 <colgroup>
                                     <col style={{ width: "300px" }} />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-header" rowSpan={2} colSpan={1}>
-                                            Name
-                                        </th>
-                                    </tr><tr className="k-table-row">
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableTbody>
+                                    <TableRow style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>
+                                            Chai
+                                        </TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-alt" alt style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>
+                                            Chang
+                                        </TableTd>
+                                    </TableRow>
+                                    <TableRow style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>
+                                            Aniseed Syrup
+                                        </TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
+                        </div>
+                        <div className="k-height-container">
+                            <div style={{ height: '0px' }}></div>
                         </div>
-                        <div className="k-grid-header-wrap" style={{ width: "434px" }}>
-                            <table className="k-table k-table-md k-grid-header-table" style={{ width: "900px" }}>
+                    </div>
+                    <GridContent className="k-virtual-content" style={{ width: "447px" }}>
+                        <div className="k-grid-table-wrap" style={{ position: "relative" }}>
+                            <GridTable style={{ transform: "translateY(0px)", width: "900px" }}>
                                 <colgroup>
                                     <col style={{ width: "300px" }} /><col style={{ width: "300px" }} /><col style={{ width: "300px" }} />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-header" rowSpan={1} colSpan={3}>
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Availability</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr><tr className="k-table-row">
-                                        <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Units In Stock</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Unit Price</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Discontinued</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableTbody>
+                                    <TableRow style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>39</TableTd>
+                                        <TableTd colspan={1}>18</TableTd>
+                                        <TableTd colspan={1}>false</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-alt" alt style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>17</TableTd>
+                                        <TableTd colspan={1}>19</TableTd>
+                                        <TableTd colspan={1}>false</TableTd>
+                                    </TableRow>
+                                    <TableRow style={{ height: "37px" }}>
+                                        <TableTd colspan={1}>13</TableTd>
+                                        <TableTd colspan={1}>10</TableTd>
+                                        <TableTd colspan={1}>false</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
                         </div>
-                    </div>
-                    <div className="k-grid-container">
-                        <div className="k-grid-content-locked" style={{ width: "300px", height: "272px" }}>
-                            <div className="k-grid-table-wrap" style={{ position: "relative" }}>
-                                <table className="k-table k-table-md k-grid-table">
-                                    <colgroup>
-                                        <col style={{ width: "300px" }} />
-                                    </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                Chai
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                Chang
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                Aniseed Syrup
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div className="k-height-container">
-                                <div style={{ height: '0px' }}></div>
-                            </div>
-                        </div><div className="k-grid-content k-virtual-content" style={{ width: "447px" }}>
-                            <div className="k-grid-table-wrap" style={{ position: "relative" }}>
-                                <table className="k-table k-table-md k-grid-table" style={{ transform: "translateY(0px)", width: "900px" }}>
-                                    <colgroup>
-                                        <col style={{ width: "300px" }} /><col style={{ width: "300px" }} /><col style={{ width: "300px" }} />
-                                    </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                39
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                18
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                false
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                17
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                19
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                false
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row" style={{ height: "37px" }}>
-                                            <td className="k-table-td" colSpan={1}>
-                                                13
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                10
-                                            </td><td className="k-table-td" colSpan={1}>
-                                                false
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div className="k-height-container">
-                                <div style={{ height: '0px' }}></div>
-                            </div>
+                        <div className="k-height-container">
+                            <div style={{ height: '0px' }}></div>
                         </div>
-                    </div>
-                </div>
-            </div>
-
+                    </GridContent>
+                </GridContainer>
+            </Grid>
 
             <div className="k-rtl">
-
-                <div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ height: "200px" }}>
-                    <div className="k-grid-header">
+                <Grid className="k-grid-no-scrollbar" style={{ height: "200px" }}>
+                    <GridHeader>
                         <div className="k-grid-header-wrap k-auto-scrollable">
-                            <table className="k-table k-table-md k-grid-header-table">
+                            <GridHeaderTable>
                                 <colgroup>
                                     <col style={{ width: "160px" }} />
                                     <col style={{ width: "160px" }} />
@@ -153,84 +113,30 @@ export default () =>(
                                     <col style={{ width: "160px" }} />
                                     <col />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th scope="col" rowSpan={3} className="k-table-th k-header k-filterable">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Company</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                        <th scope="col" colSpan={5} className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Contact Info</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                    <tr className="k-table-row">
-                                        <th scope="col" rowSpan={2} className="k-table-th k-header k-filterable k-first">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">First Name</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                        <th scope="col" rowSpan={2} className="k-table-th k-header k-filterable">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Last Name</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                        <th scope="col" colSpan={2} className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Location</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th scope="col" rowSpan={2} className="k-table-th k-header k-filterable">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Phone</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                    <tr className="k-table-row">
-                                        <th scope="col" className="k-table-th k-header k-filterable k-first">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Country</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                        <th scope="col" className="k-table-th k-header k-filterable">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">City</span>
-                                                </span>
-                                                <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-filterable" scope="col" rowspan={3} columnTitle="Company" menu="column"></GridHeaderCell>
+                                        <GridHeaderCell scope="col" colspan={5} columnTitle="Contact Info"></GridHeaderCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-filterable k-first" scope="col" rowspan={2} columnTitle="First Name" menu="column"></GridHeaderCell>
+                                        <GridHeaderCell className="k-filterable" scope="col" rowspan={2} columnTitle="Last Name" menu="column"></GridHeaderCell>
+                                        <GridHeaderCell scope="col" colspan={2} columnTitle="Location"></GridHeaderCell>
+                                        <GridHeaderCell className="k-filterable" scope="col" rowspan={2} columnTitle="Phone" menu="column"></GridHeaderCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-filterable k-first" scope="col" columnTitle="Country" menu="column"></GridHeaderCell>
+                                        <GridHeaderCell className="k-filterable" scope="col" columnTitle="City" menu="column"></GridHeaderCell>
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
                             <div className="k-resize-handle" style={{ top: '0px', left: "417px", height: "89px", width: "9px" }}>
                                 <div className="k-resize-handle-inner"></div>
                             </div>
                         </div>
-                    </div>
-                    <div className="k-grid-content k-auto-scrollable">
-                        <table className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
+                    </GridHeader>
+                    <GridContent className="k-auto-scrollable">
+                        <GridTable style={{ height: 'auto' }}>
                             <colgroup>
                                 <col style={{ width: "160px" }} />
                                 <col style={{ width: "160px" }} />
@@ -239,10 +145,10 @@ export default () =>(
                                 <col style={{ width: "160px" }} />
                                 <col />
                             </colgroup>
-                            <tbody className="k-table-tbody"></tbody>
-                        </table>
-                    </div>
-                </div>
+                            <TableTbody></TableTbody>
+                        </GridTable>
+                    </GridContent>
+                </Grid>
 
             </div>
 

package/src/grid/tests/grid-no-records.tsx

@@ -1,108 +1,86 @@
-
+import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
 
 export default () =>(
     <>
         <div id="test-area">
-            <div id="grid" className="k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar" style={{ height: "350px" }}>
-                <div className="k-grid-header">
+            <Grid className="k-grid-display-block k-grid-no-scrollbar" style={{ height: "350px" }}>
+                <GridHeader>
                     <div className="k-grid-header-wrap k-auto-scrollable">
-                        <table className="k-table k-table-md k-grid-header-table">
+                        <GridHeaderTable>
                             <colgroup>
                                 <col style={{ width: "225px" }} />
                                 <col style={{ width: "500px" }} />
                                 <col style={{ width: "255px" }} />
                                 <col />
                             </colgroup>
-                            <thead className="k-table-thead">
-                                <tr className="k-table-row">
-                                    <th scope="col" className="k-table-th k-header">
-                                        <span className="k-cell-inner">
-                                            <span className="k-link">
-                                                <span className="k-column-title">OrderID</span>
-                                            </span>
-                                        </span>
-                                    </th>
-                                    <th scope="col" className="k-table-th k-header">
-                                        <span className="k-cell-inner">
-                                            <span className="k-link">
-                                                <span className="k-column-title">Ship Name</span>
-                                            </span>
-                                        </span>
-                                    </th>
-                                    <th scope="col" className="k-table-th k-header">
-                                        <span className="k-cell-inner">
-                                            <span className="k-link">
-                                                <span className="k-column-title">Freight</span>
-                                            </span>
-                                        </span>
-                                    </th>
-                                </tr>
-                            </thead>
-                        </table>
-                    </div>
-                </div>
-                <div className="k-grid-content k-auto-scrollable" style={{ height: "280px" }}>
-                    <table className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
-                        <colgroup>
-                            <col style={{ width: "225px" }} />
-                            <col style={{ width: "500px" }} />
-                            <col style={{ width: "255px" }} />
-                            <col />
-                        </colgroup>
-                        <tbody className="k-table-tbody"></tbody>
-                    </table>
-                    <div className="k-grid-norecords">
-                        <div className="k-grid-norecords-template">No records available.</div>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell scope="col" columnTitle="OrderID"></GridHeaderCell>
+                                    <GridHeaderCell scope="col" columnTitle="Ship Name"></GridHeaderCell>
+                                    <GridHeaderCell scope="col" columnTitle="Freight"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
                     </div>
-                    <div className="k-grid-content-expander" style={{ width: "982px" }}></div>
-                </div>
-            </div>
+                </GridHeader>
+                <GridContainer>
+                    <GridContent className="k-auto-scrollable" style={{ height: "280px" }}>
+                        <GridTable style={{ height: "auto" }}>
+                            <colgroup>
+                                <col style={{ width: "225px" }} />
+                                <col style={{ width: "500px" }} />
+                                <col style={{ width: "255px" }} />
+                                <col />
+                            </colgroup>
+                            <TableTbody></TableTbody>
+                        </GridTable>
+                        <div className="k-grid-norecords">
+                            <div className="k-grid-norecords-template">No records available.</div>
+                        </div>
+                        <div className="k-grid-content-expander" style={{ width: "982px" }}></div>
+                    </GridContent>
+                </GridContainer>
+            </Grid>
             <h4>Angular Grid</h4>
-            <div className="k-grid k-grid-md">
-                <div className="k-grid-aria-root">
-                    <div className="k-grid-header" style={{ padding: "0px 16px 0px 0px" }}>
-                        <colgroup>
-                            <col style={{ width: "140px" }} />
-                            <col style={{ width: "120px" }} />
-                            <col style={{ width: "100px" }} />
-                            <col style={{ width: "130px" }} />
-                        </colgroup>
-                        <table className="k-table k-table-md k-grid-header-table">
-                            <thead className="k-table-thead">
-                                <tr className="k-table-row">
-                                    <th className="k-table-th k-header" rowSpan={1} colSpan={1}>CompanyName</th>
-                                    <th className="k-table-th k-header" rowSpan={1} colSpan={1}>ContactName</th>
-                                    <th className="k-table-th k-header" rowSpan={1} colSpan={1}>City</th>
-                                    <th className="k-table-th k-header" rowSpan={1} colSpan={1}>ContactTitle</th>
-                                </tr>
-                            </thead>
-                        </table>
+            <Grid _renderAriaRoot>
+                <GridHeader style={{ padding: "0px 16px 0px 0px" }}>
+                    <div className="k-grid-header-wrap">
+                        <GridHeaderTable>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="CompanyName"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="ContactName"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="City"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="ContactTitle"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
                     </div>
-                </div>
-
-                <div className="k-grid-container">
-                    <div className="k-grid-content k-virtual-content">
+                </GridHeader>
+                <GridContainer>
+                    <GridContent className="k-virtual-content">
                         <div className="k-grid-table-wrap">
-                            <table className="k-table k-table-md k-grid-table">
+                            <GridTable>
                                 <colgroup>
                                     <col style={{ width: "140px" }} />
                                     <col style={{ width: "120px" }} />
                                     <col style={{ width: "100px" }} />
-                                    <col style={{ width: "130px" }} />
+                                    <col style={{ width: "130px" }}/>
                                 </colgroup>
-                                <tbody className="k-table-tbody">
-                                    <tr className="k-grid-norecords">
-                                        <td className="k-table-td" colSpan={4}>No records available. </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                                <TableTbody>
+                                    <TableRow className="k-grid-norecords">
+                                        <TableTd colspan={4}>No records available.</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
                         </div>
                         <div className="k-height-container">
-                            <div style={{ height: '0px' }}></div>
+                            <div style={{ height: "0px" }}></div>
                         </div>
-                    </div>
-                </div>
-            </div>
+                    </GridContent>
+                </GridContainer>
+            </Grid>
         </div>
     </>
 );