chore(prompt): update more-actions test to utilize panelbar rendering

telerik · Jan 24, 2024 · 03f9ed3 · 03f9ed3
1 parent e2d5c5a
commit 03f9ed3
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/packages/default/lib/swatches/default-ocean-blue.json b/packages/default/lib/swatches/default-ocean-blue.json
@@ -22,6 +22,11 @@
                     "type": "boolean",
                     "value": false
                 },
+                "kendo-enable-color-system": {
+                    "name": "Use new Color System",
+                    "type": "boolean",
+                    "value": false
+                },
                 "kendo-color-primary": {
                     "name": "Primary",
                     "type": "color",

diff --git a/packages/html/src/prompt/templates/prompt-more-actions.tsx b/packages/html/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>