fix: wrong border color around invalid files

telerik · Feb 15, 2021 · d2ac02e · d2ac02e
1 parent 1281eef
commit d2ac02e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/packages/default/scss/upload/_layout.scss b/packages/default/scss/upload/_layout.scss
@@ -94,7 +94,6 @@
                 padding: $upload-item-padding-y $upload-item-padding-x calc(#{$upload-item-padding-y} + #{$upload-progress-thickness});
                 border-width: 0 0 1px;
                 border-style: solid;
-                border-color: inherit;
                 outline: none;
                 display: flex;
                 align-items: flex-start;

diff --git a/packages/default/scss/upload/_theme.scss b/packages/default/scss/upload/_theme.scss
@@ -27,6 +27,11 @@
 
         }
 
+        .k-upload-files,
+        .k-file {
+            border-color: $upload-border;
+        }
+
         .k-file {
 
             &.k-state-focused {

diff --git a/tests/visual/upload-angular.html b/tests/visual/upload-angular.html
@@ -381,28 +381,43 @@
         </section>
 
         <section>
-            <!-- Drag and drop file text in the dropzone -->
-            <kendo-upload class="k-widget k-upload">
+            <!-- Invalid file -->
+            <kendo-upload class="k-widget k-upload ng-pristine ng-invalid ng-touched" dir="ltr">
                 <div class="k-dropzone">
-                    <div class="k-button k-upload-button">
-                        <input><span>Select files...</span></div>
+                    <div class="k-button k-upload-button"><input /><span>Select files...</span></div>
                     <div class="k-dropzone-hint">Drop files here to upload</div>
                 </div>
+                <ul class="k-upload-files k-reset ng-star-inserted">
+                    <li class="k-file k-file-invalid ng-star-inserted">
+                        <kendo-upload-file-list-single-item class="k-file-single ng-tns-c0-0 ng-star-inserted">
+                            <div class="k-progressbar ng-trigger ng-trigger-progressState" style="opacity: 0;">
+                                <span class="k-progress" style="width: 0%;"></span>
+                            </div>
+                            <span class="k-file-group-wrapper"><span class="k-file-group k-icon k-i-file-programming"></span></span>
+                            <span class="k-file-name-size-wrapper">
+                                <span class="k-file-name ng-tns-c0-0 ng-star-inserted">untitled.html</span>
+                                <span class="ng-tns-c0-0 k-file-validation-message k-text-error ng-star-inserted">File type not allowed.</span>
+                            </span>
+                            <kendo-upload-file-list-item-action-button class="ng-tns-c0-0">
+                                <strong class="k-upload-status">
+                                    <button class="k-button k-button-icon k-flat k-upload-action ng-star-inserted">
+                                        <span class="k-icon k-delete k-i-x"></span>
+                                    </button>
+                                </strong>
+                            </kendo-upload-file-list-item-action-button>
+                        </kendo-upload-file-list-single-item>
+                    </li>
+                </ul>
             </kendo-upload>
         </section>
 
         <section>
-            <!--
-                Drag and drop file text in the dropzone, legacy drop hint rendering
-                https://github.com/telerik/kendo/issues/8240
-            -->
-            <kendo-upload dir="ltr" class="k-widget k-upload">
+            <!-- Drag and drop file text in the dropzone -->
+            <kendo-upload class="k-widget k-upload">
                 <div class="k-dropzone">
                     <div class="k-button k-upload-button">
-                        <input type="file" name="files" multiple="multiple" dir="ltr" />
-                        <span>Select files...</span>
-                    </div>
-                    <em class="k-dropzone-hint">Drop files here to upload</em>
+                        <input><span>Select files...</span></div>
+                    <div class="k-dropzone-hint">Drop files here to upload</div>
                 </div>
             </kendo-upload>
         </section>
@@ -428,6 +443,21 @@
                 </div>
             </kendo-upload>
         </section>
+        <section>
+            <!--
+                Drag and drop file text in the dropzone, legacy drop hint rendering
+                https://github.com/telerik/kendo/issues/8240
+            -->
+            <kendo-upload dir="ltr" class="k-widget k-upload">
+                <div class="k-dropzone">
+                    <div class="k-button k-upload-button">
+                        <input type="file" name="files" multiple="multiple" dir="ltr" />
+                        <span>Select files...</span>
+                    </div>
+                    <em class="k-dropzone-hint">Drop files here to upload, legacy drop hint rendering</em>
+                </div>
+            </kendo-upload>
+        </section>
     </div>
 
 </body>