@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/src/splitter/tests/splitter-splitbar.tsx

@@ -0,0 +1,79 @@
+import SplitterPane from '../splitter-pane';
+import Splitter from '../splitter.spec';
+
+const style = `
+    .content {
+        text-align: center;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <span>Splitbar horizontal</span>
+            <Splitter style={{ height: "150px" }}>
+                <SplitterPane resizable={false}>
+                    <div className="content">
+                        <p>Splitter static</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                    <div className="content">
+                        <p>Splitter draggable</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                    <div className="content">
+                        <p>Splitter draggable - collapse right</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane collapsible>
+                    <div className="content">
+                        <p>Splitter draggable - collapse left & right</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane collapsible>
+                    <div className="content">
+                        <p>Splitter draggable - collapse left</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                </SplitterPane>
+            </Splitter>
+
+            <span>Splitbar vertical</span>
+            <Splitter orientation="vertical">
+                <SplitterPane resizable={false}>
+                    <div className="content">
+                        <p>Splitter static</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                    <div className="content">
+                        <p>Splitter draggable</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                    <div className="content">
+                        <p>Splitter draggable - collapse down</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane collapsible>
+                    <div className="content">
+                        <p>Splitter draggable - collapse down & top</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane collapsible>
+                    <div className="content">
+                        <p>Splitter draggable - collapse top</p>
+                    </div>
+                </SplitterPane>
+                <SplitterPane>
+                </SplitterPane>
+            </Splitter>
+
+        </div>
+    </>
+);

package/src/splitter/tests/splitter.tsx

@@ -1,17 +1,24 @@
-import { Icon } from '../../icon';
+import { Splitter, SplitterPane, SplitterNormal, SplitterVertical } from '../../splitter';
 
 
 export default () =>(
     <>
-        <div id="test-area">
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
 
-            <div style={{ height: "280px" }} className="k-widget k-splitter k-splitter-flex k-splitter-vertical">
-                <div style={{ order: "0" }} className="k-pane-flex k-pane">
-                    <div className="k-widget k-splitter k-splitter-flex k-splitter-horizontal">
-                        <div style={{ flexBasis: "20%", order: "0" }} className="k-pane-static k-pane k-scrollable">
-                            <p>Collapsible pane<br />Size = 20%</p>
-                        </div>
-                        <div style={{ order: "2" }} className="k-pane k-scrollable">
+            <span>Splitter horizontal</span>
+            <SplitterNormal />
+
+            <span>Splitter vertical</span>
+            <SplitterVertical />
+
+            <span>Splitter nested</span>
+            <Splitter orientation="vertical" style={{ height: "280px" }}>
+                <SplitterPane flex>
+                    <Splitter>
+                        <SplitterPane flexBasis="20%" collapsible>
+                            <p>Collapsible pane - 20%</p>
+                        </SplitterPane>
+                        <SplitterPane scrollable>
                             <p>Fluid, scollable pane</p>
                             <p>Content</p>
                             <p>Content</p>
@@ -19,80 +26,22 @@ export default () =>(
                             <p>Content</p>
                             <p>Content</p>
                             <p>Content</p>
-                        </div>
-                        <div style={{ flexBasis: "30%", order: "4" }} className="k-pane-static k-pane">
-                            <p>Collapsible pane<br />Size = 30%</p>
-                        </div>
-                        <div style={{ flexBasis: "10px", order: "6" }} className="k-pane-static k-pane">
-                        </div>
-                        <div style={{ flexBasis: "10px", order: "8" }} className="k-pane-static k-pane">
-                        </div>
-                        <div style={{ flexBasis: "10px", order: "10" }} className="k-pane-static k-pane">
-                        </div>
-                        <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "1" }}>
-                            <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
-                            </div>
-                            <div className="k-resize-handle"></div>
-                            <Icon />
-                        </div>
-                        <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "3" }}>
-                            <Icon />
-                            <div className="k-resize-handle"></div>
-                            <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
-                            </div>
-                        </div>
-                        <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "5" }}>
-                            <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
-                            </div>
-                            <div className="k-resize-handle"></div>
-                            <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
-                            </div>
-                        </div>
-                        <div className="k-splitbar k-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
-                            <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
-                            </div>
-                            <div className="k-resize-handle"></div>
-                            <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
-                            </div>
-                        </div>
-                        <div className="k-splitbar k-focus k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
-                            <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
-                            </div>
-                            <div className="k-resize-handle"></div>
-                            <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div style={{ flexBasis: "80px", order: "2" }} className="k-pane-static k-pane k-scrollable">
-                    <p>Pane size: 80px</p>
-                </div>
-                <div style={{ flexBasis: "80px", order: "4" }} className="k-pane-static k-pane k-scrollable">
-                    <p>Static pane<br />Size = 80px</p>
-                </div>
-                <div style={{ order: "6" }} className="k-pane-static k-pane k-scrollable" hidden>
+                        </SplitterPane>
+                        <SplitterPane flexBasis="30%" collapsible>
+                            <p>Collapsible pane - 30%</p>
+                        </SplitterPane>
+                    </Splitter>
+                </SplitterPane>
+                <SplitterPane flexBasis="80px" >
+                    <p>Pane - 80px</p>
+                </SplitterPane>
+                <SplitterPane flexBasis="80px" resizable={false}>
+                    <p>Non resizable pane - 80px</p>
+                </SplitterPane>
+                <SplitterPane hidden>
                     <h2>Hidden pane, should be invisible!</h2>
-                </div>
-                <div className="k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical" style={{ order: "1" }}>
-                    <Icon />
-                    <div className="k-resize-handle"></div>
-                    <Icon />
-                </div>
-                <div className="k-splitbar k-splitbar-vertical k-splitbar-static-vertical" style={{ order: "3" }}>
-                    <Icon />
-                    <div className="k-resize-handle"></div>
-                    <Icon />
-                </div>
-            </div>
-
+                </SplitterPane>
+            </Splitter>
         </div>
     </>
 );

package/src/spreadsheet/tests/spreadsheet-cell-contextmenu.tsx

@@ -7,6 +7,7 @@ import { MenuList, MenuItem, MenuSeparator } from "../../menu";
 import { MenuButton } from "../../menu-button";
 import { Popup } from "../../popup";
 import { Toolbar, ToolbarItem, ToolbarSeparator } from "../../toolbar";
+import { TooltipNormal } from "../../tooltip";
 
 const style = `
     #test-area {
@@ -480,7 +481,7 @@ export default () =>(
                         </table>
                     </div>
                     <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" data-role="formulainput" style={{ whiteSpace: "pre" }}>216321</div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
                     <div className="k-list-content k-list-scroller" unselectable="on"></div>
                 </div>

package/src/spreadsheet/tests/spreadsheet-filtering.tsx

@@ -6,6 +6,7 @@ import { DropdownList } from "../../dropdownlist";
 import { Icon } from "../../icon";
 import MenuButton from "../../menu-button/menu-button.spec";
 import { Toolbar, ToolbarItem, ToolbarSeparator } from "../../toolbar";
+import { TooltipNormal } from "../../tooltip";
 
 const style = `
     #test-area {
@@ -476,7 +477,7 @@ export default () =>(
                         </table>
                     </div>
                     <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" data-role="formulainput" style={{ whiteSpace: "pre" }}>216321</div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
                     <div className="k-list-content k-list-scroller" unselectable="on"></div>
                 </div>

package/src/spreadsheet/tests/spreadsheet-formula.tsx

@@ -2,6 +2,7 @@ import { Button } from "../../button";
 import { Combobox } from "../../combobox";
 import { MenuButton } from "../../menu-button";
 import { Toolbar } from "../../toolbar";
+import { TooltipNormal } from "../../tooltip";
 
 const style = `
     #test-area {
@@ -445,7 +446,7 @@ export default () =>(
                             </tbody>
                         </table>
                     </div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
                     <div className="k-list-content k-list-scroller" unselectable="on"></div>
                 </div>

package/src/spreadsheet/tests/spreadsheet-jquery.tsx

@@ -5,6 +5,7 @@ import { DropdownList } from '../../dropdownlist';
 import { Icon } from '../../icon';
 import { MenuButton } from '../../menu-button';
 import { Toolbar, ToolbarSeparator } from '../../toolbar';
+import { TooltipNormal } from "../../tooltip";
 
 
 const style = `
@@ -110,7 +111,7 @@ export default () =>(
                             <span className="k-syntax-ref k-series-a">C3:C11</span>
                             <span className="k-syntax-punc">)</span>
                         </div>
-                        <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                        <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                         <div className="k-group-header" style={{ display: "none" }}></div>
                         <div className="k-list-scroller"></div>
                     </div>
@@ -550,7 +551,7 @@ export default () =>(
                         </table>
                     </div>
                     <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" style={{ whiteSpace: "pre" }}>Invoice #52 - 06/23/2015</div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-group-header" style={{ display: "none" }}></div>
                     <div className="k-list-scroller"></div>
                 </div>

package/src/spreadsheet/tests/spreadsheet-row-contextmenu.tsx

@@ -7,6 +7,7 @@ import { MenuList, MenuItem } from "../../menu";
 import { MenuButton } from "../../menu-button";
 import { Popup } from "../../popup";
 import { Toolbar, ToolbarItem, ToolbarSeparator } from "../../toolbar";
+import { TooltipNormal } from "../../tooltip";
 
 const style = `
     #test-area {
@@ -480,7 +481,7 @@ export default () =>(
                         </table>
                     </div>
                     <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" data-role="formulainput" style={{ whiteSpace: "pre" }}>216321</div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
                     <div className="k-list-content k-list-scroller" unselectable="on"></div>
                 </div>

package/src/spreadsheet/tests/spreadsheet.tsx

@@ -5,6 +5,7 @@ import { Combobox } from "../../combobox";
 import { DropdownList } from "../../dropdownlist";
 import MenuButton from "../../menu-button/menu-button.spec";
 import { Toolbar, ToolbarItem, ToolbarSeparator } from "../../toolbar";
+import { Tooltip } from "../../tooltip";
 
 const style = `
     #test-area {
@@ -470,7 +471,7 @@ export default () =>(
                         </table>
                     </div>
                     <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" data-role="formulainput" style={{ whiteSpace: "pre" }}>216321</div>
-                    <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
+                    <Tooltip content="A1" style={{ position: "absolute", display: "none" }} />
                     <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
                     <div className="k-list-content k-list-scroller" unselectable="on"></div>
                 </div>

package/src/tooltip/tooltip.spec.tsx

@@ -38,7 +38,7 @@ const defaultProps = {
 
 export const Tooltip = (
     props: KendoTooltipProps &
-        React.HTMLAttributes<HTMLDivElement>
+        Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>
 ) => {
     const {
         callout,