@progress/kendo-themes-html 6.5.1-dev.0 → 6.6.0

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

@@ -154,79 +154,79 @@ export default () =>(
             <Popup id="discontinued" className="k-column-menu k-grid-columnmenu-popup">
                 <div className="k-columnmenu-item-wrapper">
                     <div className="k-columnmenu-item">
-                        <Icon icon="group"/>Group column
+                        <Icon icon="sort-asc-small" />Sort ascending
+                    </div>
+                    <div className="k-columnmenu-item">
+                        <Icon icon="sort-desc-small" />Sort descending
                     </div>
-                    <div className="k-columnmenu-item-wrapper">
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
                         <div className="k-columnmenu-item">
-                            <Icon icon="sort-asc-small" />Sort ascending
+                            <Icon icon="columns"/>Columns
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="chevron-down"/>
+                            </span>
                         </div>
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
                         <div className="k-columnmenu-item">
-                            <Icon icon="sort-desc-small" />Sort descending
+                            <Icon icon="filter"/>Filter
+                            <span className="k-spacer"></span>
+                            <Icon icon="chevron-down"/>
                         </div>
                     </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="columns"/>Columns
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-down"/>
-                                </span>
-                            </div>
-                        </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-columnmenu-item">
+                        <Icon icon="group"/>Group column
                     </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-columnmenu-item">
-                            <Icon icon="max-width"/>Autosize This Column
-                        </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-columnmenu-item">
+                        <Icon icon="max-width"/>Autosize this column
+                    </div>
+                    <div className="k-columnmenu-item">
+                        <Icon icon="display-inline-flex"/>Autosize all columns
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
                         <div className="k-columnmenu-item">
-                            <Icon icon="display-inline-flex"/>Autosize All Columns
+                            <Icon icon="set-column-position" />Set column position
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="chevron-up"/>
+                            </span>
                         </div>
-                    </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="set-column-position" />Set Column Position
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-up"/>
-                                </span>
-                            </div>
-                            <div className="k-columnmenu-item-content k-columns-item">
-                                <div className="k-column-list-wrapper">
-                                    <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
-                                        <div className="k-column-list-item">
-                                            <Icon icon="lock"/>Lock Column
-                                        </div>
-                                        <div className="k-column-list-item k-disabled">
-                                            <Icon icon="unlock"/>Unlock Column
-                                        </div>
-                                        <div className="k-column-list-item">
-                                            <Icon icon="stick"/>Stick Column
-                                        </div>
-                                        <div className="k-column-list-item k-disabled">
-                                            <Icon icon="unstick"/>Unstick Column
-                                        </div>
-                                        <div className="k-column-list-item">
-                                            <Icon icon="caret-alt-left"/>Move Previous
-                                        </div>
-                                        <div className="k-column-list-item">
-                                            <Icon icon="caret-alt-right"/>Move Next
-                                        </div>
+                        <div className="k-columnmenu-item-content k-columns-item">
+                            <div className="k-column-list-wrapper">
+                                <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
+                                    <div className="k-column-list-item">
+                                        <Icon icon="lock"/>Lock column
+                                    </div>
+                                    <div className="k-column-list-item k-disabled">
+                                        <Icon icon="unlock"/>Unlock column
+                                    </div>
+                                    <div className="k-column-list-item">
+                                        <Icon icon="stick"/>Stick column
+                                    </div>
+                                    <div className="k-column-list-item k-disabled">
+                                        <Icon icon="unstick"/>Unstick column
+                                    </div>
+                                    <div className="k-column-list-item">
+                                        <Icon icon="caret-alt-left"/>Move previous
+                                    </div>
+                                    <div className="k-column-list-item">
+                                        <Icon icon="caret-alt-right"/>Move next
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="filter"/>Filter
-                                <span className="k-spacer"></span>
-                                <Icon icon="chevron-down"/>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </Popup>
 
@@ -234,10 +234,10 @@ export default () =>(
                 <div className="k-columnmenu-item-wrapper">
                     <div className="k-columnmenu-item">
                         <div className="k-column-list-item">
-                            <Icon icon="caret-alt-left"/>Move Previous
+                            <Icon icon="caret-alt-left"/>Move previous
                         </div>
-                        <div className="k-column-list-item">
-                            <Icon icon="caret-alt-right"/>Move Next
+                        <div className="k-column-list-item k-disabled">
+                            <Icon icon="caret-alt-right"/>Move next
                         </div>
                     </div>
                 </div>

package/src/grid/tests/grid-column-resizing-actions.tsx

@@ -0,0 +1,249 @@
+import { Chip, ChipAction, ChipList } from '../../chip';
+import { Icon } from '../../icon';
+import { Pager } from '../../pager';
+import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table';
+import { Toolbar } from '../../toolbar';
+import { Popup } from '../../popup';
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Form, FormField } from '../../form';
+import { Checkbox } from '../../checkbox';
+import { Textbox } from '../../textbox';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+        top: -114px;
+        left: 254px;
+    }
+    .k-window {
+        min-width: 400px;
+        position: relative;
+    }
+    section .k-window {
+        margin-inline-end: 16px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area">
+
+            <section>
+                <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                    <Toolbar className="k-grid-toolbar">
+                        <ChipList>
+                            <Chip text="Units in Stock" icon="sort-asc-small" actions={
+                                <>
+                                    <ChipAction type="more"/>
+                                    <ChipAction type="remove"/>
+                                </>
+                            } />
+                            <Chip text="Category" icon="sort-desc-small" actions={
+                                <>
+                                    <ChipAction type="more"/>
+                                    <ChipAction type="remove"/>
+                                </>
+                            } />
+                        </ChipList>
+                    </Toolbar>
+                    <div className="k-grid-header">
+                        <div className="k-grid-header-wrap">
+                            <Table size="medium" className="k-grid-header-table" >
+                                <colgroup>
+                                    <col />
+                                    <col />
+                                    <col />
+                                </colgroup>
+                                <TableThead>
+                                    <TableRow>
+                                        <TableTh className="k-header k-sorted">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">Product Id</span>
+                                                    <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
+                                                </span>
+                                                <a href="#" className="k-grid-header-menu k-grid-column-menu">
+                                                    <Icon icon="more-vertical" />
+                                                </a>
+                                            </span>
+                                        </TableTh>
+                                        <TableTh className="k-header k-sorted">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">Unit Price</span>
+                                                    <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
+                                                </span>
+                                                <a href="#" className="k-grid-header-menu k-grid-column-menu">
+                                                    <Icon icon="more-vertical" />
+                                                </a>
+                                            </span>
+                                        </TableTh>
+                                        <TableTh className="k-header k-sorted">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">Discontinued</span>
+                                                    <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
+                                                </span>
+                                                <a href="#" className="k-grid-header-menu k-grid-column-menu">
+                                                    <Icon icon="more-vertical" />
+                                                </a>
+                                            </span>
+                                        </TableTh>
+                                        <TableTh className="k-header k-sorted">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">Category</span>
+                                                    <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
+                                                </span>
+                                                <a href="#" className="k-grid-header-menu k-grid-column-menu">
+                                                    <Icon icon="more-vertical" />
+                                                </a>
+                                            </span>
+                                        </TableTh>
+                                    </TableRow>
+                                </TableThead>
+                            </Table>
+                        </div>
+                    </div>
+                    <div className="k-grid-content">
+                        <Table size="medium" className="k-grid-table">
+                            <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow className="k-master-row">
+                                    <TableTd>Chef Anton's Gumbo</TableTd>
+                                    <TableTd>21.35</TableTd>
+                                    <TableTd>0</TableTd>
+                                    <TableTd>Condiments</TableTd>
+                                </TableRow>
+                                <TableRow alt>
+                                    <TableTd>Alice Mutton</TableTd>
+                                    <TableTd>39</TableTd>
+                                    <TableTd>0</TableTd>
+                                    <TableTd>Meat/Poultry</TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row">
+                                    <TableTd>Singaporean Hokkien Fried Mee</TableTd>
+                                    <TableTd>123.79</TableTd>
+                                    <TableTd>1</TableTd>
+                                    <TableTd>Meat/Poultry</TableTd>
+                                </TableRow>
+                                <TableRow alt>
+                                    <TableTd>Gorgonzola Telino</TableTd>
+                                    <TableTd>12.5</TableTd>
+                                    <TableTd>0</TableTd>
+                                    <TableTd>Meat/Poultry</TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row">
+                                    <TableTd>Perth Pasties</TableTd>
+                                    <TableTd>32.8</TableTd>
+                                    <TableTd>0</TableTd>
+                                    <TableTd>Meat/Poultry</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </Table>
+                    </div>
+                    <Pager refresh={false} className="k-grid-pager"/>
+                </div>
+            </section>
+
+            <Popup className="k-column-menu k-grid-columnmenu-popup">
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-columnmenu-item">
+                        <Icon icon="sort-asc-small" />Sort ascending
+                    </div>
+                    <div className="k-columnmenu-item">
+                        <Icon icon="sort-desc-small" />Sort descending
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
+                        <div className="k-columnmenu-item">
+                            <Icon icon="columns"/>Columns
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="chevron-down"/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
+                        <div className="k-columnmenu-item">
+                            <Icon icon="filter"/>Filter
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="chevron-down"/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-columnmenu-item">
+                        <Icon icon="group" />Group column
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
+                        <div className="k-columnmenu-item">
+                            <Icon icon="arrows-left-right"/>Resize column
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="window-restore"/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-columnmenu-item">
+                        <Icon icon="group" />Autosize all columns
+                    </div>
+                </div>
+                <div className="k-columnmenu-item-wrapper">
+                    <div className="k-expander">
+                        <div className="k-columnmenu-item">
+                            <Icon icon="set-column-position" />Set column position
+                            <span className="k-spacer"></span>
+                            <span className="k-expander-indicator">
+                                <Icon icon="chevron-down" />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </Popup>
+
+            <section>
+                <Window title="Column Width" actions={[ 'x' ]} className="k-grid-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Apply</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField
+                            label="Value in px"
+                            editor={ <Textbox value="412" /> }
+                        >
+                        </FormField>
+                        <FormField
+                            editor={
+                                <>
+                                    <Checkbox/>
+                                    <label className="k-checkbox-label">Autofit to content</label>
+                                </>
+                            }
+                        >
+                        </FormField>
+                    </Form>
+                </Window>
+            </section>
+        </div>
+    </>
+);

package/src/grid/tests/grid-grouping-actions.tsx

@@ -146,10 +146,10 @@ export default () => (
                 <div className="k-columnmenu-item-wrapper">
                     <div className="k-columnmenu-item">
                         <div className="k-column-list-item">
-                            <Icon icon="caret-alt-left"/>Move Previous
+                            <Icon icon="caret-alt-left"/>Move previous
                         </div>
                         <div className="k-column-list-item">
-                            <Icon icon="caret-alt-right"/>Move Next
+                            <Icon icon="caret-alt-right"/>Move next
                         </div>
                     </div>
                 </div>

package/src/pivotgrid/tests/pivotgrid-header-cell-states.tsx

@@ -18,7 +18,7 @@ export default () =>(
                                     {/* Four Rows for Date.Calendar Column grouping field */}
                                     <tr className="k-pivotgrid-row k-pivotgrid-column-total">
                                         <th colSpan={10} className="k-pivotgrid-cell k-pivotgrid-expanded k-pivotgrid-header-root">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">All Periods</span>
                                         </th>
                                     </tr>
@@ -32,7 +32,7 @@ export default () =>(
                                     </tr>
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={10} className="k-pivotgrid-cell k-pivotgrid-expanded">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">CY 2010</span>
                                         </th>
                                     </tr>
@@ -46,7 +46,7 @@ export default () =>(
                                 <tbody className="k-pivotgrid-tbody">
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={1} rowSpan={9} className="k-pivotgrid-cell k-pivotgrid-row-total k-pivotgrid-expanded k-pivotgrid-header-root">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">All Geographies</span>
                                         </th>
                                         <th colSpan={1} className="k-pivotgrid-cell">

package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx

@@ -144,7 +144,7 @@ export default () => (
                                     {/* Four Rows for Date.Calendar Column grouping field */}
                                     <tr className="k-pivotgrid-row k-pivotgrid-column-total">
                                         <th colSpan={9} className="k-pivotgrid-cell k-pivotgrid-expanded k-pivotgrid-header-root">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">All Periods</span>
                                         </th>
                                         <th colSpan={1} rowSpan={4} className="k-pivotgrid-cell k-pivotgrid-header-total k-pivotgrid-header-root">
@@ -153,25 +153,25 @@ export default () => (
                                     </tr>
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={6} className="k-pivotgrid-cell k-pivotgrid-expanded">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">CY 2010</span>
                                         </th>
                                         <th colSpan={1} rowSpan={3} className="k-pivotgrid-cell">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">CY 2011</span>
                                         </th>
                                         <th colSpan={1} rowSpan={3} className="k-pivotgrid-cell">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">CY 2012</span>
                                         </th>
                                         <th colSpan={1} rowSpan={3} className="k-pivotgrid-cell">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">CY 2013</span>
                                         </th>
                                     </tr>
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={1} className="k-pivotgrid-cell k-pivotgrid-expanded">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">H2 CY 2010</span>
                                         </th>
                                         <th colSpan={5} rowSpan={2} className="k-pivotgrid-cell">
@@ -180,7 +180,7 @@ export default () => (
                                     </tr>
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={1} className="k-pivotgrid-cell">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">Q4 CY 2010</span>
                                         </th>
                                     </tr>
@@ -188,30 +188,30 @@ export default () => (
                                     {/* Table for Product.Category Column grouping field */}
                                     <tr className="k-pivotgrid-row k-pivotgrid-column-total">
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-root">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={4} className="k-pivotgrid-cell k-pivotgrid-expanded k-pivotgrid-header-root">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-root">
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-root">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-root">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-root">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                         <th colSpan={1} rowSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-total k-pivotgrid-header-root">
-                                            <Icon icon="chevron-down" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-down" />
                                             <span className="k-pivotgrid-header-title">All Products</span>
                                         </th>
                                     </tr>
@@ -242,7 +242,7 @@ export default () => (
                                 <tbody className="k-pivotgrid-tbody">
                                     <tr className="k-pivotgrid-row">
                                         <th colSpan={1} rowSpan={9} className="k-pivotgrid-cell k-pivotgrid-row-total k-pivotgrid-expanded k-pivotgrid-header-root">
-                                            <Icon icon="chevron-up" />
+                                            <Icon className="k-pivotgrid-toggle" icon="chevron-up" />
                                             <span className="k-pivotgrid-header-title">All Geographies</span>
                                         </th>
                                         <th colSpan={1} className="k-pivotgrid-cell">