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

package/src/grid/grid.spec.tsx

@@ -0,0 +1,67 @@
+import { classNames, optionClassNames, Size } from '../misc';
+
+export const GRID_CLASSNAME = 'k-grid';
+
+const states = [];
+
+const options = {
+    size: [ Size.small, Size.medium, Size.large ]
+};
+
+export type KendoGridOptions = {
+    size?: (typeof options.size)[number] | null;
+};
+
+export type KendoGridProps = KendoGridOptions & {
+    toolbar?: JSX.Element;
+    pager?: JSX.Element;
+    pagerPosition?: 'top' | 'bottom';
+    groupingHeader?: JSX.Element;
+    _renderAriaRoot?: boolean;
+};
+
+const defaultProps = {
+    size: Size.medium,
+    pagerPosition: 'bottom'
+};
+
+export const Grid = (
+    props: KendoGridProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        size = defaultProps.size,
+        toolbar,
+        pager,
+        pagerPosition,
+        groupingHeader,
+        _renderAriaRoot,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GRID_CLASSNAME,
+                optionClassNames(GRID_CLASSNAME, { size })
+            )}>
+            {toolbar}
+            {pagerPosition === 'top' && pager}
+            {groupingHeader}
+            { props.children && _renderAriaRoot ?
+                <div className="k-grid-aria-root">{props.children}</div> : props.children
+            }
+            {pagerPosition === 'bottom' && pager}
+        </div>
+    );
+};
+
+Grid.states = states;
+Grid.options = options;
+Grid.className = GRID_CLASSNAME;
+Grid.defaultProps = defaultProps;
+
+export default Grid;

package/src/grid/index.ts

@@ -0,0 +1,12 @@
+export * from './grid.spec';
+export * from './grid-header.spec';
+export * from './grid-grouping-header.spec';
+export * from './grid-header-table.spec';
+export * from './grid-header-cell.spec';
+export * from './grid-container.spec';
+export * from './grid-content.spec';
+export * from './grid-table.spec';
+export * from './grid-footer.spec';
+export * from './grid-footer-table.spec';
+export * from './grid-pager.spec';
+export * from './grid-toolbar.spec';

package/src/grid/tests/grid-adaptive-pager.tsx

@@ -1,4 +1,4 @@
-import { Pager } from '../../pager';
+import { Grid, GridPager } from '../../grid';
 
 
 export default () =>(
@@ -11,9 +11,10 @@ export default () =>(
                     <div className="k-pane">
                         <div className="k-view k-widget">
                             <div className="k-stretched-view k-content">
-                                <div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
-                                    <Pager className="k-grid-pager" adaptive info={false} pageSizes={false} />
-                                </div>
+                                <Grid className="k-grid-display-block k-grid-mobile k-editable" pager={(
+                                    <GridPager adaptive info={false} pageSizes={false} />
+                                )}>
+                                </Grid>
                             </div>
                         </div>
                     </div>
@@ -26,9 +27,10 @@ export default () =>(
                     <div className="k-pane">
                         <div className="k-view k-widget">
                             <div className="k-stretched-view k-content">
-                                <div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
-                                    <Pager className="k-grid-pager" adaptive info={false} pageSizes={false} dir="rtl" />
-                                </div>
+                                <Grid className="k-grid-display-block k-grid-mobile k-editable" pager={(
+                                    <GridPager adaptive info={false} pageSizes={false} dir="rtl" />
+                                )}>
+                                </Grid>
                             </div>
                         </div>
                     </div>

package/src/grid/tests/grid-adaptive-search.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../../button';
 import { Searchbox } from '../../searchbox';
-import { Toolbar } from '../../toolbar';
+import { Grid, GridToolbar } from '../../grid';
 
 
 export default () =>(
@@ -10,12 +10,13 @@ export default () =>(
                 <div className="k-pane">
                     <div className="k-view k-widget">
                         <div className="k-stretched-view k-content">
-                            <div id="grid" className="k-grid k-grid-md k-grid-display-block k-grid-mobile">
-                                <Toolbar className="k-grid-toolbar">
+                            <Grid className="k-grid-display-block k-grid-mobile" toolbar={(
+                                <GridToolbar>
                                     <Button className="k-grid-pdf" icon="file-pdf">Export to PDF</Button>
                                     <Searchbox className="k-grid-search" placeholder="Search..." />
-                                </Toolbar>
-                            </div>
+                                </GridToolbar>
+                            )}>
+                            </Grid>
                         </div>
                     </div>
                 </div>
@@ -26,12 +27,13 @@ export default () =>(
                 <div className="k-pane">
                     <div className="k-view k-widget">
                         <div className="k-stretched-view k-content">
-                            <div id="grid" className="k-grid k-grid-md k-grid-display-block k-grid-mobile">
-                                <Toolbar className="k-grid-toolbar">
+                            <Grid className="k-grid-display-block k-grid-mobile" toolbar={(
+                                <GridToolbar>
                                     <Button className="k-grid-pdf" icon="file-pdf">Export to PDF</Button>
                                     <Searchbox className="k-grid-search" placeholder="Search..." />
-                                </Toolbar>
-                            </div>
+                                </GridToolbar>
+                            )}>
+                            </Grid>
                         </div>
                     </div>
                 </div>

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

@@ -2,9 +2,10 @@ import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { Icon } from '../../icon';
-import { Pager } from '../../pager';
 import { Popup } from '../../popup';
 import { SkeletonNormal } from '../../skeleton';
+import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
 
 
 export default () =>(
@@ -14,86 +15,94 @@ export default () =>(
             <span className="col-3">Angular grid</span>
 
             <section className="col-3">
-                <div className="k-grid k-grid-md k-grid-no-scrollbar">
-                    <div className="k-grid-aria-root">
-                        {/* add padding-left or -right for scrollbar width */}
-                        <div className="k-grid-header">
-                            <div className="k-grid-header-wrap">
-                                <table className="k-table k-table-md k-grid-header-table">
+                <Grid className="k-grid-no-scrollbar" _renderAriaRoot pager={( <GridPager/> )} >
+                    <GridHeader>
+                        <div className="k-grid-header-wrap">
+                            <GridHeaderTable>
+                                <colgroup>
+                                    <col style={{ width: "100px" }} />
+                                    <col />
+                                </colgroup>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell columnTitle="100px"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="no width"></GridHeaderCell>
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
+                        </div>
+                    </GridHeader>
+                    <GridContainer>
+                        <GridContent className="k-virtual-content">
+                            <div className="k-grid-table-wrap">
+                                <GridTable>
                                     <colgroup>
                                         <col style={{ width: "100px" }} />
                                         <col />
                                     </colgroup>
-                                    <thead className="k-table-thead">
-                                        <tr className="k-table-row">
-                                            <th className="k-table-th k-header">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">100px</span>
-                                                    </span>
-                                                </span>
-                                            </th>
-                                            <th className="k-table-th k-header">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">no width</span>
-                                                    </span>
-                                                </span>
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                </table>
+                                    <TableTbody>
+                                        <TableRow>
+                                            <TableTd>1</TableTd>
+                                            <TableTd>Row</TableTd>
+                                        </TableRow>
+                                        <TableRow className="k-alt" alt>
+                                            <TableTd>2</TableTd>
+                                            <TableTd>Alt row</TableTd>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableTd>3</TableTd>
+                                            <TableTd>
+                                            This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
+                                            </TableTd>
+                                        </TableRow>
+                                        <TableRow className="k-alt" alt>
+                                            <TableTd>4</TableTd>
+                                            <TableTd><SkeletonNormal animation={false}/></TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </GridTable>
                             </div>
-                        </div>
-
-                        <div className="k-grid-container">
-                            <div className="k-grid-content k-virtual-content">
-                                <div>
-                                    <table className="k-table k-table-md k-grid-table">
-                                        <colgroup>
-                                            <col style={{ width: "100px" }} />
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">1</td>
-                                                <td className="k-table-td">Row</td>
-                                            </tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt">
-                                                <td className="k-table-td">2</td>
-                                                <td className="k-table-td">Alt row</td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">3</td>
-                                                <td className="k-table-td">
-                                                    This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt">
-                                                <td className="k-table-td">4</td>
-                                                <td className="k-table-td"><SkeletonNormal animation={false}/></td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div className="k-height-container">
-                                    {/* set height to scroll height (virtual scrolling) */}
-                                    <div style={{ height: '0px' }}></div>
-                                </div>
+                            <div className="k-height-container">
+                                {/* set height to scroll height (virtual scrolling) */}
+                                <div style={{ height: '0px' }}></div>
                             </div>
-                        </div>
-                    </div>
-                    <Pager className="k-grid-pager" />
-                </div>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
 
             <span className="col-3">Angular -- fixed height, hierarchy, filter menu, sort icon</span>
             <section className="col-3">
-                <div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ height: "240px" }}>
-                    <div className="k-grid-aria-root">
-                        <div className="k-grid-header">
-                            <div className="k-grid-header-wrap">
-                                <table className="k-table k-table-md k-grid-header-table">
+                <Grid className="k-grid-no-scrollbar" _renderAriaRoot style={{ height: "240px" }}>
+                    <GridHeader>
+                        <div className="k-grid-header-wrap">
+                            <GridHeaderTable>
+                                <colgroup>
+                                    <col className="k-hierarchy-col" />
+                                    <col style={{ width: "80px" }} />
+                                    <col />
+                                    <col />
+                                    <col />
+                                    <col />
+                                </colgroup>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-hierarchy-cell"></GridHeaderCell>
+                                        <GridHeaderCell></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Default" menu="filter"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Hover" menu="filter" hover></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Focus" menu="filter" focus></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Active" menu="filter" active></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Sorted" menu="filter" sortable></GridHeaderCell>
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
+                        </div>
+                    </GridHeader>
+                    <GridContainer>
+                        <GridContent className="k-virtual-content">
+                            <div className="k-grid-table-wrap">
+                                <GridTable>
                                     <colgroup>
                                         <col className="k-hierarchy-col" />
                                         <col style={{ width: "80px" }} />
@@ -102,201 +111,109 @@ export default () =>(
                                         <col />
                                         <col />
                                     </colgroup>
-                                    <thead className="k-table-thead">
-                                        <tr className="k-table-row">
-                                            <th className="k-table-th k-header k-hierarchy-cell"></th>
-                                            <th className="k-table-th k-header"></th>
-                                            <th className="k-table-th k-header k-filterable">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">Default</span>
-                                                    </span>
-                                                    <a className="k-grid-filter-menu k-grid-header-menu">
-                                                        <Icon icon="filter" />
-                                                    </a>
-                                                </span>
-                                            </th>
-                                            <th className="k-table-th k-header k-filterable">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">Hover</span>
-                                                    </span>
-                                                    <a className="k-grid-filter-menu k-grid-header-menu">
-                                                        <Icon icon="filter" />
-                                                    </a>
-                                                </span>
-                                            </th>
-                                            <th className="k-table-th k-header k-filterable k-focus">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">Focus</span>
-                                                    </span>
-                                                    <a className="k-grid-filter-menu k-grid-header-menu">
-                                                        <Icon icon="filter" />
-                                                    </a>
-                                                </span>
-                                            </th>
-                                            <th className="k-table-th k-header k-filterable">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">Active</span>
-                                                    </span>
-                                                    <a className="k-grid-filter-menu k-grid-header-menu k-active">
-                                                        <Icon icon="filter" />
-                                                    </a>
-                                                </span>
-                                            </th>
-                                            <th className="k-table-th k-header k-filterable k-sorted">
-                                                <span className="k-cell-inner">
-                                                    <span className="k-link">
-                                                        <span className="k-column-title">Sorted</span>
-                                                        <span className="k-sort-icon">
-                                                            <Icon icon="sort-asc-small" />
-                                                        </span>
-                                                    </span>
-                                                    <a className="k-grid-filter-menu k-grid-header-menu">
-                                                        <Icon icon="filter" />
-                                                    </a>
-                                                </span>
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                </table>
+                                    <TableTbody>
+                                        <TableRow className="k-master-row k-expanded">
+                                            <TableTd className="k-hierarchy-cell"><Icon icon="caret-alt-down" /></TableTd>
+                                            <TableTd><Checkbox /><label className="k-checkbox-label"></label></TableTd>
+                                            <TableTd>1</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                        </TableRow>
+                                        <TableRow className="k-detail-row">
+                                            <TableTd className="k-hierarchy-cell"></TableTd>
+                                            <TableTd className="k-detail-cell" colspan={6}>
+                                                {/* hierarchy child content */}
+                                                <div style={{ padding: "10px" }}>
+                                                Nested content
+                                                </div>
+                                            </TableTd>
+                                        </TableRow>
+                                        <TableRow alt className="k-master-row k-alt">
+                                            <TableTd className="k-hierarchy-cell">
+                                                <Icon icon="caret-alt-right" />
+                                            </TableTd>
+                                            <TableTd><Checkbox /><label className="k-checkbox-label"></label></TableTd>
+                                            <TableTd>2</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                            <TableTd>Text</TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </GridTable>
                             </div>
-                        </div>
-                        <div className="k-grid-container">
-                            <div className="k-grid-content k-virtual-content">
-                                <div>
-                                    <table className="k-table k-table-md k-grid-table">
-                                        <colgroup>
-                                            <col className="k-hierarchy-col" />
-                                            <col style={{ width: "80px" }} />
-                                            <col />
-                                            <col />
-                                            <col />
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row k-master-row k-expanded">
-                                                <td className="k-table-td k-hierarchy-cell"><Icon icon="minus" /></td>
-                                                <td className="k-table-td"><Checkbox /><label className="k-checkbox-label"></label></td>
-                                                <td className="k-table-td">1</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                            </tr>
-                                            <tr className="k-table-row k-detail-row">
-                                                <td className="k-table-td k-hierarchy-cell"></td>
-                                                <td className="k-table-td k-detail-cell" colSpan={6}>
-                                                    {/* hierarchy child content */}
-                                                    <div style={{ padding: "10px" }}>
-                                                        Nested content
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt k-master-row">
-                                                <td className="k-table-td k-hierarchy-cell">
-                                                    <Icon icon="plus" />
-                                                </td>
-                                                <td className="k-table-td"><Checkbox /><label className="k-checkbox-label"></label></td>
-                                                <td className="k-table-td">2</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                                <td className="k-table-td">Text</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div className="k-height-container">
-                                    <div></div>
-                                </div>
+                            <div className="k-height-container">
+                                <div></div>
                             </div>
-                        </div>
-                    </div>
-                </div>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
 
             <span className="col-3">Angular -- standalone column chooser</span>
             <section className="col-2">
-                <div className="k-grid k-grid-md">
+                <Grid _renderAriaRoot toolbar={(
                     <div className="k-toolbar k-grid-toolbar">
                         <div className="k-spacer"></div>
                         <div className="k-grid-column-chooser">
                             <Button fillMode="flat" icon="columns"></Button>
                         </div>
                     </div>
-                    <div className="k-grid-header">
+                )}>
+                    <GridHeader>
                         <div className="k-grid-header-wrap">
-                            <table className="k-table k-table-md k-grid-header-table">
+                            <GridHeaderTable>
                                 <colgroup>
                                     <col />
                                     <col />
                                     <col />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Product</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header">
-                                            <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">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Qty Per Unit</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell columnTitle="Product"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Unit Price"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Qty Per Unit"></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 />
                                         <col />
                                         <col />
                                     </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row k-master-row k-expanded">
-                                            <td className="k-table-td">Chai</td>
-                                            <td className="k-table-td">18</td>
-                                            <td className="k-table-td">10 boxes x 20 bags</td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-master-row">
-                                            <td className="k-table-td">Chang</td>
-                                            <td className="k-table-td">19</td>
-                                            <td className="k-table-td">24 - 12 oz bottles</td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-master-row">
-                                            <td className="k-table-td">Aniseed Syrup</td>
-                                            <td className="k-table-td">20</td>
-                                            <td className="k-table-td">24 - 12 oz bottles</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
+                                    <TableTbody>
+                                        <TableRow className="k-master-row k-expanded">
+                                            <TableTd>Chai</TableTd>
+                                            <TableTd>18</TableTd>
+                                            <TableTd>10 boxes x 20 bags</TableTd>
+                                        </TableRow>
+                                        <TableRow alt className="k-master-row k-alt">
+                                            <TableTd>Chang</TableTd>
+                                            <TableTd>19</TableTd>
+                                            <TableTd>24 - 12 oz bottles</TableTd>
+                                        </TableRow>
+                                        <TableRow alt className="k-master-row k-alt">
+                                            <TableTd>Aniseed Syrup</TableTd>
+                                            <TableTd>20</TableTd>
+                                            <TableTd>24 - 12 oz bottles</TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </GridTable>
                             </div>
                             <div className="k-height-container">
                                 <div></div>
                             </div>
-                        </div>
-                    </div>
-                </div>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
             <section className="col-1">
                 <Popup>