chore: update visual previews

telerik · Sep 18, 2023 · 9e882e5 · 9e882e5
1 parent 3819999
commit 9e882e5
Show file tree

Hide file tree

Showing 14 changed files with 302 additions and 0 deletions.
diff --git a/tests/_output/bootstrap/colorpicker/colorpicker-size.png b/tests/_output/bootstrap/colorpicker/colorpicker-size.png
diff --git a/tests/_output/bootstrap/colorpicker/colorpicker-states.png b/tests/_output/bootstrap/colorpicker/colorpicker-states.png
diff --git a/tests/_output/classic/colorpicker/colorpicker-size.png b/tests/_output/classic/colorpicker/colorpicker-size.png
diff --git a/tests/_output/classic/colorpicker/colorpicker-states.png b/tests/_output/classic/colorpicker/colorpicker-states.png
diff --git a/tests/_output/default/colorpicker/colorpicker-size.png b/tests/_output/default/colorpicker/colorpicker-size.png
diff --git a/tests/_output/default/colorpicker/colorpicker-states.png b/tests/_output/default/colorpicker/colorpicker-states.png
diff --git a/tests/_output/fluent/colorpicker/colorpicker-size.png b/tests/_output/fluent/colorpicker/colorpicker-size.png
diff --git a/tests/_output/fluent/colorpicker/colorpicker-states.png b/tests/_output/fluent/colorpicker/colorpicker-states.png
diff --git a/tests/_output/material/colorpicker/colorpicker-size.png b/tests/_output/material/colorpicker/colorpicker-size.png
diff --git a/tests/_output/material/colorpicker/colorpicker-states.png b/tests/_output/material/colorpicker/colorpicker-states.png
diff --git a/tests/_output/nouvelle/colorpicker/colorpicker-size.png b/tests/_output/nouvelle/colorpicker/colorpicker-size.png
diff --git a/tests/_output/nouvelle/colorpicker/colorpicker-states.png b/tests/_output/nouvelle/colorpicker/colorpicker-states.png
diff --git a/tests/colorpicker/colorpicker-size.html b/tests/colorpicker/colorpicker-size.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area {
+            justify-items: start;
+        }
+        .k-animation-container {
+            width: min-content;
+            position: relative;
+            overflow: visible;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-3">
+        <span>Small</span>
+        <span>Medium</span>
+        <span>Large</span>
+        <section>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-sm k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-no-color">
+                        <span class="k-color-preview-mask"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-sm k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-no-color">
+                        <span class="k-color-preview-mask"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-lg k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-no-color">
+                        <span class="k-color-preview-mask"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-lg k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/colorpicker/colorpicker-states.html b/tests/colorpicker/colorpicker-states.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area {
+            justify-items: start;
+        }
+        .k-animation-container {
+            width: min-content;
+            position: relative;
+            overflow: visible;
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-4">
+        <section>
+            <span>no color</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-no-color">
+                        <span class="k-color-preview-mask"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>opacity</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: rgba(255, 0, 255, 0.5);"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>icon</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-icon-color-preview">
+                        <span class="k-color-preview-icon k-svg-icon k-svg-i-edit-tools">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m260.6 288 11.5 31.5 56.2-56.6L244.2 32H139.8L0 416h76.8l28-76.8 18.6-51.2h137.2zm-17.5-48H140.9L192 99.5 243.1 240zM224 413.3V480h66.7l169.7-168.5-67.9-67.9L224 413.3zm55.3 34-22.6-22.6 135.8-135.8 22.6 22.6-135.8 135.8zm223.4-178-22.6 22.6-67.9-67.9 22.5-22.7c12.5-12.4 32.9-12.4 45.3 0l22.7 22.7c12.4 12.4 12.4 32.8 0 45.3z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>icon opacity</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview k-icon-color-preview">
+                        <span class="k-color-preview-icon k-svg-icon k-svg-i-edit-tools">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m260.6 288 11.5 31.5 56.2-56.6L244.2 32H139.8L0 416h76.8l28-76.8 18.6-51.2h137.2zm-17.5-48H140.9L192 99.5 243.1 240zM224 413.3V480h66.7l169.7-168.5-67.9-67.9L224 413.3zm55.3 34-22.6-22.6 135.8-135.8 22.6 22.6-135.8 135.8zm223.4-178-22.6 22.6-67.9-67.9 22.5-22.7c12.5-12.4 32.9-12.4 45.3 0l22.7 22.7c12.4 12.4 12.4 32.8 0 45.3z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-color-preview-mask" style="background-color: rgba(255, 0, 255, 0.5);"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>normal</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>hover</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md k-hover">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>focus</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md k-focus">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>valid</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md k-valid">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>invalid</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md k-invalid">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>required</span>
+            <span required="" class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+        <section>
+            <span>disabled</span>
+            <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md k-disabled">
+                <span class="k-input-inner">
+                    <span class="k-value-icon k-color-preview">
+                        <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                    </span>
+                </span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256L256 352z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </section>
+    </div>
+</body>
+</html>