@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

package/src/treelist/tests/treelist-editing-popup.tsx

@@ -0,0 +1,66 @@
+import ReactDOM from 'react-dom/client';
+import { Window } from '../../window';
+import { Checkbox } from '../../checkbox';
+import { NumericTextbox } from '../../numerictextbox';
+import { Textbox } from '../../textbox';
+import { Button } from '../../button';
+import { DatePicker } from '../../datepicker';
+import { Form, FormField } from '../../form';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        width: 500px;
+    }
+    .k-window {
+        min-width: 400px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <section>
+                <Window title="Add item" actions={[ 'minimize', 'maximize', 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary" icon="save">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                    </>
+                }>
+                    <Form tag="div" orientation="vertical">
+                        <FormField
+                            className="k-form-field-error"
+                            label="Text data field label"
+                            error="Error"
+                            editor={ <Textbox value="Invalid" invalid showClearButton /> }
+                        />
+                        <FormField
+                            label="Date data field label"
+                            editor={ <DatePicker placeholder="dd/MM/yyyy" /> }
+                        />
+                        <FormField
+                            label="Numeric data field label"
+                            editor={ <NumericTextbox placeholder="##,###" /> }
+                        />
+                        <FormField
+                            label=" "
+                            editor={
+                                <>
+                                    <Checkbox checked />
+                                    <label className="k-checkbox-label">Boolean data field label</label>
+                                </>
+                            }
+                        />
+                    </Form>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

package/src/window/tests/window-action-buttons.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Window } from '../../window';
 
 const root = ReactDOM.createRoot(
@@ -17,19 +18,39 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons actionButtonsAlign="start">
+            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtonsAlign="start" actionButtons={
+                <>
+                    <Button>Cancel</Button>
+                    <Button themeColor="primary">Update</Button>
+                </>
+            }>
                 Action Buttons at start position
             </Window>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons actionButtonsAlign="center">
+            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtonsAlign="center" actionButtons={
+                <>
+                    <Button>Cancel</Button>
+                    <Button themeColor="primary">Update</Button>
+                </>
+            }>
                 Action Buttons at center position
             </Window>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons actionButtonsAlign="end">
+            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Cancel</Button>
+                    <Button themeColor="primary">Update</Button>
+                </>
+            }>
                 Action Buttons at end position
             </Window>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons actionButtonsAlign="stretched">
+            <Window title="Title" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtonsAlign="stretched" actionButtons={
+                <>
+                    <Button>Cancel</Button>
+                    <Button themeColor="primary">Update</Button>
+                </>
+            }>
                 Action Buttons with stretched position
             </Window>
 

package/src/window/window.spec.tsx

@@ -24,7 +24,7 @@ export type KendoWindowProps = KendoWindowOptions & {
     title?: string;
     actions?: string[];
     minimized?: boolean;
-    actionButtons?: boolean;
+    actionButtons?: JSX.Element;
     actionButtonsAlign?: "start" | "end" | "center" | "stretched"
 };
 
@@ -76,8 +76,7 @@ export const Window = (
             </div>
             {actionButtons &&
                 <ActionButtons alignment={actionButtonsAlign} className="k-window-actions">
-                    <Button>Cancel</Button>
-                    <Button themeColor="primary">Update</Button>
+                    {actionButtons}
                 </ActionButtons>
             }
         </div>