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

package/src/column-menu/tests/column-menu-rtl.tsx

@@ -0,0 +1,119 @@
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3 k-rtl" dir="rtl">
+
+            <span>Basic</span>
+            <span>Expanded item</span>
+            <span>Expanded item with Action buttons</span>
+
+            <section>
+                <ColumnMenuNormal />
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <ActionButtons alignment="stretched">
+                                    <Button themeColor="primary">Apply</Button>
+                                    <Button>Reset</Button>
+                                </ActionButtons>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,113 @@
+import { Icon } from '../../icon';
+import { ColumnMenuTabbed, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, FilterMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>First tab seledted</span>
+            <span>Second tab selected</span>
+            <section>
+                <ColumnMenuTabbed />
+            </section>
+
+            <section>
+                <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-tabstrip-content k-active">
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                                <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                            </ColumnMenuItemWrapper>
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuItem text="Item 3" icon="group" />
+                            </ColumnMenuItemWrapper>
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuExpander itemText="Expandable item" itemIcon="set-column-position" />
+                            </ColumnMenuItemWrapper>
+                        </div>
+                    </div>
+                </ColumnMenuTabbed>
+            </section>
+
+            <span>2 Tabs Set</span>
+            <span>Single Tab Set</span>
+
+            <section>
+                <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>
+                </ColumnMenuTabbed>
+            </section>
+
+            <section>
+                <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>
+                </ColumnMenuTabbed>
+            </section>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,119 @@
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span>Basic</span>
+            <span>Expanded item</span>
+            <span>Expanded item with Action buttons</span>
+
+            <section>
+                <ColumnMenuNormal />
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <ActionButtons alignment="stretched">
+                                    <Button themeColor="primary">Apply</Button>
+                                    <Button>Reset</Button>
+                                </ActionButtons>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+        </div>
+    </>
+);