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

package/src/pivotgrid/tests/pivotgrid-column-menus.tsx

@@ -1,13 +1,9 @@
 import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
-import { DropdownList } from '../../dropdownlist';
-import { Icon } from '../../icon';
-import { Textbox } from '../../textbox';
 import { Treeview, TreeviewGroup, TreeviewItem } from '../../treeview';
 import { Popup } from '../../popup';
-import { AnimationContainer } from '../../animation-container';
-
+import { ColumnMenuNormal, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, FilterMenuNormal } from "../../column-menu";
 
 const styles = `
     .k-animation-container {
@@ -26,248 +22,161 @@ export default () =>(
             <span>Filter Fields View</span>
 
             <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="grid-layout" />Include Fields
-                                <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="filter" />Filter Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-down" />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuNormal>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                            <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
+                        </ColumnMenuItemWrapper>
+                    </ColumnMenuNormal>
                 </Popup>
             </section>
 
             <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="grid-layout" />Include Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-up" />
-                                </span>
-                            </div>
-                        </div>
-                        <div className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
-                            <div className="k-column-list-wrapper">
-                                <div className="k-column-list">
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        ID
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Name
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Category
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Account
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Number
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Type
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Employer
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Employee
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Company
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Products
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Number
-                                    </label>
-                                    <label className="k-column-list-item k-checkbox-label">
-                                        <Checkbox />
-                                        Type
-                                    </label>
-                                </div>
-                            </div>
-                            <ActionButtons alignment="stretched">
-                                <Button>Reset</Button>
-                                <Button themeColor="primary">Apply</Button>
-                            </ActionButtons>
-                        </div>
-                    </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="filter" />Filter Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-down" />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuNormal>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                            <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" expanded={true} itemContent={
+                                <>
+                                    <div className="k-column-list-wrapper">
+                                        <div className="k-column-list">
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                ID
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Name
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Category
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Account
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Number
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Type
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Employer
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Employee
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Company
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Products
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Number
+                                            </label>
+                                            <label className="k-column-list-item k-checkbox-label">
+                                                <Checkbox />
+                                                Type
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <ActionButtons alignment="stretched">
+                                        <Button themeColor="primary">Apply</Button>
+                                        <Button>Reset</Button>
+                                    </ActionButtons>
+                                </>
+                            }/>
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
+                        </ColumnMenuItemWrapper>
+                    </ColumnMenuNormal>
                 </Popup>
             </section>
 
             <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="grid-layout" />Include Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-up" />
-                                </span>
-                            </div>
-                        </div>
-                        <div className="k-columnmenu-item-content" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
-                            <div className="k-column-list-wrapper">
-                                <div className="k-column-list">
-                                    <Treeview>
-                                        <TreeviewItem showCheckbox hasChildren text="Account" />
-                                        <TreeviewItem showCheckbox hasChildren text="Customer" />
-                                        <TreeviewItem showCheckbox expanded text="Date">
-                                            <TreeviewGroup>
-                                                <TreeviewItem showCheckbox hasChildren text="Date.Calendar" />
-                                                <TreeviewItem showCheckbox expanded text="Date.Calendar Quarter of Year">
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuNormal>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                            <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" expanded={true} itemContent={
+                                <>
+                                    <div className="k-column-list-wrapper">
+                                        <div className="k-column-list">
+                                            <Treeview>
+                                                <TreeviewItem showCheckbox hasChildren text="Account" />
+                                                <TreeviewItem showCheckbox hasChildren text="Customer" />
+                                                <TreeviewItem showCheckbox expanded text="Date">
                                                     <TreeviewGroup>
-                                                        <TreeviewItem showCheckbox hasChildren text="(All)" />
-                                                        <TreeviewItem showCheckbox hasChildren text="Calendar Quarter of Year" />
+                                                        <TreeviewItem showCheckbox hasChildren text="Date.Calendar" />
+                                                        <TreeviewItem showCheckbox expanded text="Date.Calendar Quarter of Year">
+                                                            <TreeviewGroup>
+                                                                <TreeviewItem showCheckbox hasChildren text="(All)" />
+                                                                <TreeviewItem showCheckbox hasChildren text="Calendar Quarter of Year" />
+                                                            </TreeviewGroup>
+                                                        </TreeviewItem>
                                                     </TreeviewGroup>
                                                 </TreeviewItem>
-                                            </TreeviewGroup>
-                                        </TreeviewItem>
-                                        <TreeviewItem showCheckbox hasChildren text="Delivery date" />
-                                        <TreeviewItem showCheckbox hasChildren text="Department" />
-                                        <TreeviewItem showCheckbox hasChildren text="Country" />
-                                        <TreeviewItem showCheckbox hasChildren text="Region" />
-                                    </Treeview>
-                                </div>
-                            </div>
-                            <ActionButtons alignment="stretched">
-                                <Button>Reset</Button>
-                                <Button themeColor="primary">Apply</Button>
-                            </ActionButtons>
-                        </div>
-                    </div>
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="filter" />Filter Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-down" />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+                                                <TreeviewItem showCheckbox hasChildren text="Delivery date" />
+                                                <TreeviewItem showCheckbox hasChildren text="Department" />
+                                                <TreeviewItem showCheckbox hasChildren text="Country" />
+                                                <TreeviewItem showCheckbox hasChildren text="Region" />
+                                            </Treeview>
+                                        </div>
+                                    </div>
+                                    <ActionButtons alignment="stretched">
+                                        <Button themeColor="primary">Apply</Button>
+                                        <Button>Reset</Button>
+                                    </ActionButtons>
+                                </>
+                            }/>
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
+                        </ColumnMenuItemWrapper>
+                    </ColumnMenuNormal>
                 </Popup>
             </section>
 
             <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="grid-layout" />Include Fields
-                                <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-widget k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="filter" />Filter Fields
-                                <span className="k-spacer"></span>
-                                <span className="k-expander-indicator">
-                                    <Icon icon="chevron-up" />
-                                </span>
-                            </div>
-                        </div>
-                        <div className="k-columnmenu-item-content">
-                            <AnimationContainer>
-                                <div className="kendo-grid-filter-menu-container">
-                                    <form className="k-filter-menu k-group k-reset">
-                                        <div className="k-filter-menu-container">
-                                            <DropdownList value="Contains" />
-                                            <Textbox />
-                                            <DropdownList value="And" className="k-filter-and" />
-                                            <DropdownList value="Contains" />
-                                            <Textbox />
-                                            <ActionButtons alignment="stretched">
-                                                <Button>Clear</Button>
-                                                <Button themeColor="primary">Filter</Button>
-                                            </ActionButtons>
-                                        </div>
-                                    </form>
-                                </div>
-                            </AnimationContainer>
-                        </div>
-                    </div>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuNormal>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                            <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
+                        </ColumnMenuItemWrapper>
+                        <ColumnMenuItemWrapper>
+                            <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" expanded={true} itemContent={
+                                <FilterMenuNormal />
+                            }/>
+                        </ColumnMenuItemWrapper>
+                    </ColumnMenuNormal>
                 </Popup>
             </section>
 

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

@@ -6,6 +6,7 @@ import { Icon } from '../../icon';
 import { Searchbox } from '../../searchbox';
 import { Treeview, TreeviewItem, TreeviewGroup } from '../../treeview';
 import { Popup } from '../../popup';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
 
 const style = `
     .k-animation-container {
@@ -641,40 +642,22 @@ export default () => (
                 </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 className="k-columnmen-item-wrapper">
-                        <div className="k-expander">
-                            <div className="k-columnmenu-item">
-                                <Icon icon="grid-layout" />Include Fields
-                                <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 k-disabled">
-                            <Icon icon="caret-alt-left" />Move Previous
-                        </div>
-                        <div className="k-columnmenu-item">
-                            <Icon icon="caret-alt-right" />Move Next
-                        </div>
-                        <div className="k-columnmenu-item">
-                            <Icon icon="caret-alt-down" />Move to Rows
-                        </div>
-                        <div className="k-columnmenu-item">
-                            <Icon icon="caret-alt-to-bottom" />Move to Values
-                        </div>
-                    </div>
-                </div>
+            <Popup className="k-grid-columnmenu-popup">
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Move to Columns" icon="columns" className="k-disabled" />
+                        <ColumnMenuItem text="Move to Rows" icon="rows" />
+                        <ColumnMenuItem text="Move previous" icon="arrow-left" className="k-disabled" />
+                        <ColumnMenuItem text="Move next" icon="arrow-right" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
             </Popup>
         </div>
     </>

package/src/prompt/templates/prompt-more-actions.tsx

@@ -1,7 +1,6 @@
 import { IconTextButton, IconButton } from "../../button";
 import { Toolbar } from "../../toolbar";
 import { Prompt, PromptContent, PromptHeader, PromptView } from "..";
-import { Icon } from "../../icon";
 
 export const PromptMoreActions = (props) => (
     <Prompt
@@ -16,18 +15,62 @@ export const PromptMoreActions = (props) => (
         </PromptHeader>
         <PromptContent>
             <PromptView>
-                <div className="k-column-menu k-flex-col k-flex-1">
-                    <div className="k-columnmenu-item-wrapper">
-                        <div className="k-columnmenu-item">
-                            <Icon icon="sort-asc-small" />
-                        Command
-                        </div>
-                        <div className="k-columnmenu-item">
-                            <Icon icon="sort-desc-small" />
-                        Command
-                        </div>
-                    </div>
-                </div>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Command</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Command Expanded</span>
+                            <span className="k-panelbar-toggle k-panelbar-collapse k-icon k-svg-icon k-svg-i-chevron-up">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m129.941 353.941 126.06-126.06 126.061 126.06L416 320 256.001 160 96 320z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <ul className="k-panelbar-group k-panel k-group">
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child Expanded</span>
+                                    <span className="k-panelbar-toggle k-panelbar-collapse k-icon k-svg-icon k-svg-i-chevron-up">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="m129.941 353.941 126.06-126.06 126.061 126.06L416 320 256.001 160 96 320z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                                <ul className="k-panelbar-group k-panel k-group">
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Command</span>
+                        </span>
+                    </li>
+                </ul>
             </PromptView>
         </PromptContent>
     </Prompt>

package/src/slider/slider-tick.tsx

@@ -27,18 +27,21 @@ export const SliderTick = (
         label = defaultProps.label,
         orientation,
         large,
-        text
+        text,
+        ...other
     } = props;
 
     return (
-        <li className={classNames(
-            props.className,
-            SLIDER_TICK_CLASSNAME,
-            {
-                [`k-tick-${orientation}`]: orientation,
-                'k-tick-large': large
-            }
-        )} style={style} >
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                SLIDER_TICK_CLASSNAME,
+                {
+                    [`k-tick-${orientation}`]: orientation,
+                    'k-tick-large': large
+                }
+            )} style={style} >
             {label && <span className="k-label">{text}</span>}
         </li>
     );