@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.2

package/src/slider/slider.spec.tsx

@@ -52,7 +52,8 @@ export const Slider = (
         focus,
         active,
         trackStyle,
-        dir
+        dir,
+        ...other
     } = props;
 
     let iconIncrease;
@@ -67,19 +68,21 @@ export const Slider = (
     }
 
     return (
-        <div className={classNames(
-            SLIDER_CLASSNAME,
-            props.className,
-            stateClassNames(SLIDER_CLASSNAME, {
-                readonly,
-                disabled
-            }),
-            {
-                [`k-slider-${orientation}`]: orientation,
-                'k-colorgradient-slider': type === 'gradient',
-                'k-range-slider': type === 'range'
-            }
-        )} dir={dir} >
+        <div
+            {...other}
+            className={classNames(
+                SLIDER_CLASSNAME,
+                props.className,
+                stateClassNames(SLIDER_CLASSNAME, {
+                    readonly,
+                    disabled
+                }),
+                {
+                    [`k-slider-${orientation}`]: orientation,
+                    'k-colorgradient-slider': type === 'gradient',
+                    'k-range-slider': type === 'range'
+                }
+            )} dir={dir} >
             { showButtons && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
             <div className="k-slider-track-wrap">
                 {

package/src/taskboard/tests/taskboard-card-column-menu.tsx

@@ -1,5 +1,5 @@
 import { Popup } from '../../popup';
-import { Icon } from '../../icon';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuNormal } from '../../column-menu';
 
 const styles = `
     .k-animation-container,
@@ -18,27 +18,17 @@ export default () =>(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <Popup className="k-column-menu k-card-columnmenu-popup">
-                <div className="k-columnmenu-item-wrapper">
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-left" />Move to prev column
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-right" />Move to next column
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-up" />Move up
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-down" />Move down
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-to-top" />Move top
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="caret-alt-to-bottom" />Move bottom
-                    </div>
-                </div>
+            <Popup className="k-card-columnmenu-popup">
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Move to prev column" icon="caret-alt-left" />
+                        <ColumnMenuItem text="Move to next column" icon="caret-alt-right" />
+                        <ColumnMenuItem text="Move up" icon="caret-alt-up" />
+                        <ColumnMenuItem text="Move down" icon="caret-alt-down" />
+                        <ColumnMenuItem text="Move top" icon="caret-alt-to-top" />
+                        <ColumnMenuItem text="Move bottom" icon="caret-alt-to-bottom" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
             </Popup>
         </div>
     </>

package/src/treelist/index.ts

@@ -0,0 +1 @@
+export * from './treelist.spec';

package/src/treelist/tests/treelist-aggregate-react.tsx

@@ -1,100 +1,102 @@
 import { Icon } from '../../icon';
-
+import { TreeList } from '../../treelist';
+import { GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd, TableTh } from '../../table';
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid">
             <section>
                 <span>React</span>
-                <div className="k-grid k-grid-md k-treelist-scrollable">
-                    <table className="k-table k-table-md">
+                <TreeList className="k-treelist-scrollable">
+                    <GridTable>
                         <colgroup>
                             <col style={{ width: "34%" }} />
                             <col style={{ width: "33%" }} />
                             <col style={{ width: "33%" }} />
                         </colgroup>
-                        <thead className="k-table-thead k-grid-header">
-                            <tr className="k-table-row">
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Name</a></th>
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Position</a></th>
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Hire Date</a></th>
-                            </tr>
-                        </thead>
-                        <tbody className="k-table-tbody">
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}>
+                        <TableThead className="k-grid-header">
+                            <TableRow>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Name</a></TableTh>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Position</a></TableTh>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Hire Date</a></TableTh>
+                            </TableRow>
+                        </TableThead>
+                        <TableTbody>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     Daryl Sweeney
-                                </td>
-                                <td colSpan={1} className="k-table-td">CEO</td>
-                                <td colSpan={1} className="k-table-td">March 7, 2012</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>CEO</TableTd>
+                                <TableTd colspan={1}>March 7, 2012</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className=" k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Guy Wooten
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Technical Officer</td>
-                                <td colSpan={1} className="k-table-td">April 3, 2010</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Technical Officer</TableTd>
+                                <TableTd colspan={1}>April 3, 2010</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Priscilla Frank
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Product Officer</td>
-                                <td colSpan={1} className="k-table-td">December 30, 2014</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Product Officer</TableTd>
+                                <TableTd colspan={1}>December 30, 2014</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     Anika Vega
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Process Officer</td>
-                                <td colSpan={1} className="k-table-td">March 25, 2010</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Process Officer</TableTd>
+                                <TableTd colspan={1}>March 25, 2010</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Vernon Ballard
-                                </td>
-                                <td colSpan={1} className="k-table-td">Director Facilities</td>
-                                <td colSpan={1} className="k-table-td">July 26, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>7 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on August 30, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Director Facilities</TableTd>
+                                <TableTd colspan={1}>July 26, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>7 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1}>Last employee hired on August 30, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Nevada Hart
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Financial Officer</td>
-                                <td colSpan={1} className="k-table-td">September 17, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Financial Officer</TableTd>
+                                <TableTd colspan={1}>September 17, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Hunter Fry
-                                </td>
-                                <td colSpan={1} className="k-table-td">General Counsel</td>
-                                <td colSpan={1} className="k-table-td">March 12, 2011</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>98 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on September 17, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>99 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on September 17, 2015</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                                </TableTd>
+                                <TableTd colspan={1}>General Counsel</TableTd>
+                                <TableTd colspan={1}>March 12, 2011</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>98 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1}>Last employee hired on September 17, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>99 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1} className="k-table-TableTd">Last employee hired on September 17, 2015</TableTd>
+                            </TableRow>
+                        </TableTbody>
+                    </GridTable>
+                </TreeList>
             </section>
         </div>
     </>