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

package/src/grid/tests/grid-column-menu-tabbed.tsx

@@ -1,12 +1,9 @@
 import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';
-import { Checkbox } from '../../checkbox';
-import { DropdownList } from '../../dropdownlist';
 import { Icon } from '../../icon';
 import { Searchbox } from '../../searchbox';
-import { Textbox } from '../../textbox';
 import { Popup } from '../../popup';
-
+import { ColumnMenuTabbed, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, FilterMenuMultiCheck, FilterMenuNormal, ColumnMenuMulticheckItem, ColumnMenuMulticheckWrap } from '../../column-menu';
 
 const styles = `
     .k-animation-container,
@@ -30,221 +27,131 @@ export default () =>(
             <span>Tab Column Visibility</span>
 
             <section>
-                <Popup className="k-column-menu k-column-menu-tabbed k-grid-columnmenu-popup">
-                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
-                        <div className="k-tabstrip-items-wrapper k-hstack">
-                            <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item k-active">
-                                    <span className="k-link">
-                                        <Icon icon="filter" />
-                                    </span>
-                                </li>
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="sliders" />
-                                    </span>
-                                </li>
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="columns" />
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="k-tabstrip-content k-active">
-                            <form className="k-filter-menu k-group k-reset">
-                                <div className="k-filter-menu-container">
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <DropdownList value="And" className="k-filter-and" />
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <ActionButtons>
-                                        <Button themeColor="primary">Filter</Button>
-                                        <Button>Clear</Button>
-                                    </ActionButtons>
-                                </div>
-                            </form>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuTabbed>
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon icon="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="sliders" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <FilterMenuNormal />
+                            </div>
                         </div>
-                    </div>
+                    </ColumnMenuTabbed>
                 </Popup>
             </section>
 
             <section>
-                <Popup className="k-column-menu k-column-menu-tabbed k-grid-columnmenu-popup">
-                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
-                        <div className="k-tabstrip-items-wrapper k-hstack">
-                            <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="filter" />
-                                    </span>
-                                </li>
-                                <li className="k-item k-active">
-                                    <span className="k-link">
-                                        <Icon icon="sliders" />
-                                    </span>
-                                </li>
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="columns" />
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="k-tabstrip-content k-active">
-                            <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-columnmenu-item">
-                                    <Icon icon="group" />Group 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>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuTabbed>
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon icon="sliders" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
                             </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>
-                                        <Icon className="k-expander-indicator" icon="chevron-down" />
-                                    </div>
-                                </div>
+                            <div className="k-tabstrip-content k-active">
+                                <ColumnMenuItemWrapper>
+                                    <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
+                                    <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
+                                </ColumnMenuItemWrapper>
+                                <ColumnMenuItemWrapper>
+                                    <ColumnMenuItem text="Group column" icon="group" />
+                                </ColumnMenuItemWrapper>
+                                <ColumnMenuItemWrapper>
+                                    <ColumnMenuItem text="Autosize this column" icon="max-width" />
+                                    <ColumnMenuItem text="Autosize all columns" icon="display-inline-flex" />
+                                </ColumnMenuItemWrapper>
+                                <ColumnMenuItemWrapper>
+                                    <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
+                                </ColumnMenuItemWrapper>
                             </div>
                         </div>
-                    </div>
+                    </ColumnMenuTabbed>
                 </Popup>
             </section>
 
             <section>
-                <Popup className="k-column-menu k-column-menu-tabbed k-grid-columnmenu-popup">
-                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
-                        <div className="k-tabstrip-items-wrapper k-hstack">
-                            <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="filter" />
-                                    </span>
-                                </li>
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="sliders" />
-                                    </span>
-                                </li>
-                                <li className="k-item k-active">
-                                    <span className="k-link">
-                                        <Icon icon="columns" />
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="k-tabstrip-content k-active">
-                            <form className="k-filter-menu k-group k-reset">
-                                <div className="k-filter-menu-container">
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuTabbed>
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="sliders" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon icon="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <FilterMenuMultiCheck>
                                     <Searchbox placeholder="Search..." />
-                                    <ul className="k-reset k-multicheck-wrap">
-                                        <li className="k-item k-check-all-wrap">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>(Select all)</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                        <li className="k-item">
-                                            <label className="k-label k-checkbox-label">
-                                                <Checkbox /><span>Column Name</span>
-                                            </label>
-                                        </li>
-                                    </ul>
+                                    <ColumnMenuMulticheckWrap>
+                                        <ColumnMenuMulticheckItem text="Select All" className="k-check-all-wrap" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                        <ColumnMenuMulticheckItem text="Column" />
+                                    </ColumnMenuMulticheckWrap>
                                     <div className="k-filter-selected-items">0 selected items</div>
-                                    <ActionButtons>
+                                    <ActionButtons alignment="stretched">
                                         <Button themeColor="primary">Apply</Button>
-                                        <Button>Reset</Button>
+                                        <Button>Clear</Button>
                                     </ActionButtons>
-                                </div>
-                            </form>
+                                </FilterMenuMultiCheck>
+                            </div>
                         </div>
-                    </div>
+                    </ColumnMenuTabbed>
                 </Popup>
             </section>
 
@@ -253,72 +160,52 @@ export default () =>(
             <span></span>
 
             <section>
-                <Popup className="k-column-menu k-column-menu-tabbed k-grid-columnmenu-popup">
-                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
-                        <div className="k-tabstrip-items-wrapper k-hstack">
-                            <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item k-active">
-                                    <span className="k-link">
-                                        <Icon icon="filter" />
-                                    </span>
-                                </li>
-                                <li className="k-item">
-                                    <span className="k-link">
-                                        <Icon icon="sliders" />
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="k-tabstrip-content k-active">
-                            <form className="k-filter-menu k-group k-reset">
-                                <div className="k-filter-menu-container">
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <DropdownList value="And" className="k-filter-and" />
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <ActionButtons>
-                                        <Button themeColor="primary">Filter</Button>
-                                        <Button>Clear</Button>
-                                    </ActionButtons>
-                                </div>
-                            </form>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuTabbed>
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon icon="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon icon="sliders" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <FilterMenuNormal />
+                            </div>
                         </div>
-                    </div>
+                    </ColumnMenuTabbed>
                 </Popup>
             </section>
 
             <section>
-                <Popup className="k-column-menu k-column-menu-tabbed k-grid-columnmenu-popup">
-                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
-                        <div className="k-tabstrip-items-wrapper k-hstack">
-                            <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item k-active">
-                                    <span className="k-link">
-                                        <Icon icon="filter" />
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="k-tabstrip-content k-active">
-                            <form className="k-filter-menu k-group k-reset">
-                                <div className="k-filter-menu-container">
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <DropdownList value="And" className="k-filter-and" />
-                                    <DropdownList value="Contains" />
-                                    <Textbox placeholder="Filter..." />
-                                    <ActionButtons>
-                                        <Button themeColor="primary">Filter</Button>
-                                        <Button>Clear</Button>
-                                    </ActionButtons>
-                                </div>
-                            </form>
+                <Popup className="k-grid-columnmenu-popup">
+                    <ColumnMenuTabbed>
+                        <div className="k-tabstrip k-pos-relative k-tabstrip-top">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon icon="filter" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <FilterMenuNormal />
+                            </div>
                         </div>
-                    </div>
+                    </ColumnMenuTabbed>
                 </Popup>
             </section>
 
         </div>
     </>
-);
+);