@progress/kendo-themes-html 14.5.1-dev.6 → 14.5.1-dev.8

package/src/imageeditor/tests/imageeditor-sidebar-scrollable.tsx

@@ -0,0 +1,97 @@
+import { ImageEditor } from '..';
+import { Button } from '../../button';
+
+const sidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize" />,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop" />,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate" />,
+    <div className="k-separator" key="sidebar-separator-1" />,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text" />,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes" />,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur" />,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments" />,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters" />,
+    <div className="k-separator" key="sidebar-separator-2" />,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame" />,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow" />,
+    <Button fillMode="flat" key="sidebar-button-11" icon="image-resize" aria-label="Resize 2" />,
+    <Button fillMode="flat" key="sidebar-button-12" icon="crop" aria-label="Crop 2" />,
+    <Button fillMode="flat" key="sidebar-button-13" icon="rotate" aria-label="Rotate 2" />,
+];
+
+const styles = `
+    .k-imageeditor {
+        width: 500px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1" style={{ gap: '40px' }}>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll Start)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="start"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll End)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="end"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll Both)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="both"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll Start)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="start"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll End)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="end"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll Both)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="both"
+                    contentHeight="300px"
+                />
+            </div>
+        </div>
+    </>
+);

package/src/numerictextbox/numerictextbox.spec.tsx

@@ -73,10 +73,10 @@ const defaultOptions = {
  * @ux {Format} The value is displayed using the configured number format.
  * @ux {Disabled state} When disabled, the input and spin buttons are non-interactive.
  */
-export const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & React.HTMLAttributes<HTMLSpanElement>> = (
+export const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>> = (
     props: KendoNumericTextboxProps &
         KendoNumericTextboxState &
-        React.HTMLAttributes<HTMLSpanElement>
+        Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>
 ) => {
     const {
         size,

package/src/signature/signature.spec.tsx

@@ -95,26 +95,13 @@ export const Signature: KendoComponent<KendoSignatureProps & KendoSignatureState
                 <Button
                     className={classNames(
                         'k-signature-action',
-                        'k-signature-maximize',
-                        maximized ? 'k-hidden' : ''
+                        maximized ? 'k-signature-minimize' : 'k-signature-maximize'
                     )}
-                    icon="hyperlink-open"
+                    icon={maximized ? 'x' : 'hyperlink-open'}
                     rounded={rounded}
                     size={size}
                     fillMode="flat"
-                    aria-label="Maximize"
-                />
-                <Button
-                    className={classNames(
-                        'k-signature-action',
-                        'k-signature-minimize',
-                        maximized ? '' : 'k-hidden'
-                    )}
-                    icon="hyperlink-open"
-                    rounded={rounded}
-                    size={size}
-                    fillMode="flat"
-                    aria-label="Minimize"
+                    aria-label={maximized ? 'Minimize' : 'Maximize'}
                 />
             </div>
             <div className="k-signature-line"></div>
@@ -128,7 +115,7 @@ export const Signature: KendoComponent<KendoSignatureProps & KendoSignatureState
                         'k-signature-action',
                         'k-signature-clear',
                     )}
-                    icon="x"
+                    icon="eraser"
                     rounded={props.rounded}
                     size={props.size}
                     fillMode="flat"

package/src/signature/tests/signature-flat.tsx

@@ -6,9 +6,6 @@ const styles = `
         display: flex;
         justify-content: end;
     }
-    .k-signature-minimize {
-        transform: rotate(180deg);
-    }
 `;
 
 export default () =>(

package/src/signature/tests/signature-outline.tsx

@@ -6,9 +6,6 @@ const styles = `
         display: flex;
         justify-content: end;
     }
-    .k-signature-minimize {
-        transform: rotate(180deg);
-    }
 `;
 
 export default () =>(

package/src/signature/tests/signature-solid.tsx

@@ -6,9 +6,6 @@ const styles = `
         display: flex;
         justify-content: end;
     }
-    .k-signature-minimize {
-        transform: rotate(180deg);
-    }
 `;
 
 export default () =>(

package/src/signature/tests/signature.tsx

@@ -6,9 +6,6 @@ const styles = `
         display: flex;
         justify-content: end;
     }
-    .k-signature-minimize {
-        transform: rotate(180deg);
-    }
 `;
 
 export default () =>(