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

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>
     );

package/src/slider/slider.spec.tsx

@@ -52,7 +52,8 @@ export const Slider = (
         focus,
         active,
         trackStyle,
-        dir
+        dir,
+        ...other
     } = props;
 
     let iconIncrease;
@@ -67,19 +68,21 @@ export const Slider = (
     }
 
     return (
-        <div className={classNames(
-            SLIDER_CLASSNAME,
-            props.className,
-            stateClassNames(SLIDER_CLASSNAME, {
-                readonly,
-                disabled
-            }),
-            {
-                [`k-slider-${orientation}`]: orientation,
-                'k-colorgradient-slider': type === 'gradient',
-                'k-range-slider': type === 'range'
-            }
-        )} dir={dir} >
+        <div
+            {...other}
+            className={classNames(
+                SLIDER_CLASSNAME,
+                props.className,
+                stateClassNames(SLIDER_CLASSNAME, {
+                    readonly,
+                    disabled
+                }),
+                {
+                    [`k-slider-${orientation}`]: orientation,
+                    'k-colorgradient-slider': type === 'gradient',
+                    'k-range-slider': type === 'range'
+                }
+            )} dir={dir} >
             { showButtons && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
             <div className="k-slider-track-wrap">
                 {