@progress/kendo-themes-html 6.3.0 → 6.4.0-dev.0

package/src/slider/tests/slider-tick-absolute-position.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { Slider, SliderTick } from '../../slider';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -22,78 +22,54 @@ const style = `
         --kendo-slider-start: 20;
         --kendo-slider-end: 60;
     }
-`;
 
-root.render(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
+    .k-slider-items {
+        position: relative;
+    }
 
-            <section>
-                <div className="k-widget k-slider k-slider-horizontal">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
-                            <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '0%' }}>
-                                <span className="k-label">0</span>
-                            </li>
+    .k-slider-horizontal .k-slider-track .k-slider-selection {
+        width: 33%;
+    }
 
-                            <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '33%' }}>
-                                <span className="k-label">33</span>
-                            </li>
+    .k-slider-horizontal .k-slider-track .k-draghandle-end {
+        left: 33%;
+        z-index: 1;
+    }
 
-                            <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '50%' }}>
-                                <span className="k-label">50</span>
-                            </li>
+    .k-slider-vertical .k-slider-track .k-slider-selection {
+        bottom: 0;
+        height: 33%;
+    }
 
-                            <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '75%' }}>
-                                <span className="k-label">75</span>
-                            </li>
+    .k-slider-vertical .k-slider-track .k-draghandle-end {
+        bottom: 33%;
+        z-index: 1;
+    }
+`;
 
-                            <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '100%' }}>
-                                <span className="k-label">100</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection" style={{ width: '33%' }}></div>
-                            <a href="#" className="k-draghandle k-draghandle-end" style={{ left: '33%', zIndex: 1 }}></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
-            </section>
+root.render(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <div className="k-widget k-slider k-slider-vertical">
-                    <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
-                            <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '100%' }}>
-                                <span className="k-label">100</span>
-                            </li>
-                            <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '75%' }}>
-                                <span className="k-label">75</span>
-                            </li>
-
-                            <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '50%' }}>
-                                <span className="k-label">50</span>
-                            </li>
-
-                            <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '33%' }}>
-                                <span className="k-label">33</span>
-                            </li>
+                <Slider>
+                    <SliderTick label large orientation="horizontal" text="0" style={{ zIndex: 1, position: "absolute", left: "0%" }}/>
+                    <SliderTick label large orientation="horizontal" text="33" style={{ zIndex: 1, position: "absolute", left: "33%" }}/>
+                    <SliderTick label large orientation="horizontal" text="50" style={{ zIndex: 1, position: "absolute", left: "50%" }}/>
+                    <SliderTick label large orientation="horizontal" text="75" style={{ zIndex: 1, position: "absolute", left: "75%" }}/>
+                    <SliderTick label large orientation="horizontal" text="100" style={{ zIndex: 1, position: "absolute", left: "100%" }}/>
+                </Slider>
+            </section>
 
-                            <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '0' }}>
-                                <span className="k-label">0</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection" style={{ bottom: '0', height: '33%' }}></div>
-                            <a href="#" className="k-draghandle k-draghandle-end" style={{ bottom: '33%', zIndex: 1 }}></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
-                </div>
+            <section style={{ justifySelf: "center" }} >
+                <Slider orientation="vertical">
+                    <SliderTick label large orientation="vertical" text="0" style={{ zIndex: 1, position: "absolute", bottom: "0%" }}/>
+                    <SliderTick label large orientation="vertical" text="33" style={{ zIndex: 1, position: "absolute", bottom: "33%" }}/>
+                    <SliderTick label large orientation="vertical" text="50" style={{ zIndex: 1, position: "absolute", bottom: "50%" }}/>
+                    <SliderTick label large orientation="vertical" text="75" style={{ zIndex: 1, position: "absolute", bottom: "75%" }}/>
+                    <SliderTick label large orientation="vertical" text="100" style={{ zIndex: 1, position: "absolute", bottom: "100%" }}/>
+                </Slider>
             </section>
 
         </div>

package/src/slider/tests/slider.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { Slider, SliderTick } from '../../slider';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -36,288 +36,144 @@ root.render(
 
             <span>Normal</span>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-0">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-0">
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-50">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end k-hover"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-50" hover>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-100">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end k-focus"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-100" focus>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
 
 
             <span>Disabled</span>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-0 k-disabled">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-0" disabled>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-50 k-disabled">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-50" disabled>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-100 k-disabled">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-100" disabled>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
 
             <span>Readonly</span>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-0 k-readonly">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-0" readonly>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-50 k-readonly">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-50" readonly>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
             <section>
-                <div className="k-slider k-slider-horizontal k-slider-100 k-readonly">
-                    <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                    <div className="k-slider-track-wrap">
-                        <ul className="k-reset k-slider-items">
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">0</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">5</span>
-                            </li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick"></li>
-                            <li className="k-tick k-tick-large">
-                                <span className="k-label">10</span>
-                            </li>
-                        </ul>
-                        <div className="k-slider-track">
-                            <div className="k-slider-selection"></div>
-                            <a href="#" className="k-draghandle k-draghandle-end"></a>
-                        </div>
-                    </div>
-                    <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                </div>
+                <Slider className="k-slider-100" readonly>
+                    <SliderTick label large text="0"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="5"/>
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick />
+                    <SliderTick label large text="10"/>
+                </Slider>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx

@@ -38,7 +38,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     Filter by condition
                                     <span className="k-spacer"></span>
-                                    <Icon className="k-expander-indicator" name="arrow-chevron-down"></Icon>
+                                    <span className="k-expander-indicator">
+                                        <Icon name="arrow-chevron-down" />
+                                    </span>
                                 </div>
                             </div>
                         </div>
@@ -47,7 +49,9 @@ root.render(
                                 <div className="k-columnmenu-item">
                                     Filter by value
                                     <span className="k-spacer"></span>
-                                    <Icon className="k-expander-indicator" name="arrow-chevron-up"></Icon>
+                                    <span className="k-expander-indicator">
+                                        <Icon name="arrow-chevron-up" />
+                                    </span>
                                 </div>
                                 <div className="k-columnmenu-item-content">
                                     <Searchbox placeholder="Search..." />