Merge pull request #757 from dxc-technology/fix-727

[Major] Renamed tokens file input

Author: mawelCaballero

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json

@@ -328,21 +328,26 @@
   "fileInput": {
     "dropBorderColor": "#000000",
     "fileItemBorderColor": "#cccccc",
-    "fileItemIconColor": "#000000",
+    "deleteFileItemIconColor": "#000000",
     "fileNameFontColor": "#000000",
     "labelFontColor": "#000000",
     "helperTextFontColor": "#000000",
+    "filePreviewBackgroundColor": "#f2f2f2",
+    "filePreviewIconColor": "#000000",
+    "errorFilePreviewBackgroundColor": "#ffccd3",
+    "errorFilePreviewIconColor": "#d0011b",
     "dropLabelFontColor": "#000000",
     "disabledLabelFontColor": "#999999",
     "disabledHelperTextFontColor": "#999999",
     "disabledDropLabelFontColor": "#999999",
     "focusDropBorderColor": "#0095ff",
     "disabledDropBorderColor": "#999999",
     "dragoverDropBackgroundColor": "#f5fbff",
-    "hoverFileItemIconBackgroundColor": "#f2f2f2",
-    "activeFileItemIconBackgroundColor": "#cccccc",
+    "hoverDeleteFileItemBackgroundColor": "#0000000d",
+    "activeDeleteFileItemBackgroundColor": "#00000033",
+    "focusDeleteFileItemBackgroundColor": "#0095ff",
     "errorFileItemBorderColor": "#d0011b",
-    "errorFileItemBackgroundColor": "#ffccd3",
+    "errorFileItemBackgroundColor": "#FFF5F6",
     "errorMessageFontColor": "#d0011b",
     "labelFontFamily": "Open Sans, sans-serif",
     "labelFontSize": "0.875rem",

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json

@@ -345,19 +345,24 @@
   "fileInput": {
     "dropBorderColor": "color",
     "fileItemBorderColor": "color",
-    "fileItemIconColor": "color",
+    "deleteFileItemIconColor": "color",
     "fileNameFontColor": "color",
     "labelFontColor": "color",
     "helperTextFontColor": "color",
+    "filePreviewBackgroundColor": "color",
+    "filePreviewIconColor": "color",
+    "errorFilePreviewBackgroundColor": "color",
+    "errorFilePreviewIconColor": "color",
     "dropLabelFontColor": "color",
     "disabledLabelFontColor": "color",
     "disabledHelperTextFontColor": "color",
     "disabledDropLabelFontColor": "color",
     "focusDropBorderColor": "color",
     "disabledDropBorderColor": "color",
     "dragoverDropBackgroundColor": "color",
-    "hoverFileItemIconBackgroundColor": "color",
-    "activeFileItemIconBackgroundColor": "color",
+    "hoverDeleteFileItemBackgroundColor": "color",
+    "activeDeleteFileItemBackgroundColor": "color",
+    "focusDeleteFileItemBackgroundColor": "color",
     "errorFileItemBorderColor": "color",
     "errorFileItemBackgroundColor": "color",
     "errorMessageFontColor": "color",

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html

@@ -44,6 +44,7 @@
       [showPreview]="showPreview"
       [multiple]="!hasSingleFile"
       [mode]="mode"
+      [tabIndexValue]="tabIndexValue"
       [updatable]="callbackFile?.observers?.length > 0"
     ></dxc-file>
   </div>

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.html

@@ -1,4 +1,8 @@
-<div class="previewContainer" [attr.aria-label]="getIconAriaLabel()" *ngIf="hasShowPreview">
+<div
+  class="previewContainer"
+  [attr.aria-label]="getIconAriaLabel()"
+  *ngIf="hasShowPreview"
+>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24px"
@@ -7,9 +11,8 @@
     dxcFileFormat
     [format]="file.data.type"
     *ngIf="hasShowPreviewIcon"
-  >
-  </svg>
-  <img [src]="file.image" *ngIf="hasShowPreviewImage"/>
+  ></svg>
+  <img [src]="file.image" *ngIf="hasShowPreviewImage" />
 </div>
 
 <div class="infoContainer">
@@ -29,7 +32,13 @@
           ></path>
         </svg>
       </span>
-      <span class="removeIcon" [attr.aria-label]="getRemoveAriaLabel()" (click)="onRemoveHandler($event)" data-testid="removeIcon">
+      <span
+        class="removeIcon"
+        [tabindex]="tabIndexValue"
+        [attr.aria-label]="getRemoveAriaLabel()"
+        (click)="onRemoveHandler($event)"
+        data-testid="removeIcon"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="18px"
@@ -46,10 +55,6 @@
     </div>
   </div>
   <div class="errorContainer">
-    <span
-      *ngIf="hasShowError"
-      class="errorMessage"
-      >{{ file.error }}</span
-    >
+    <span *ngIf="hasShowError" class="errorMessage">{{ file.error }}</span>
   </div>
 </div>

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts

@@ -1,4 +1,7 @@
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import {
+  coerceBooleanProperty,
+  coerceNumberProperty,
+} from "@angular/cdk/coercion";
 import { C } from "@angular/cdk/keycodes";
 import {
   Component,
@@ -31,6 +34,14 @@ export class DxcFileComponent implements OnInit {
     this._showPreview = coerceBooleanProperty(value);
   }
   private _showPreview = false;
+  @Input()
+  get tabIndexValue(): number {
+    return this._tabIndexValue;
+  }
+  set tabIndexValue(value: number) {
+    this._tabIndexValue = coerceNumberProperty(value);
+  }
+  private _tabIndexValue = 0;
 
   hasError: boolean = false;
   hasShowError: boolean = false;
@@ -70,9 +81,9 @@ export class DxcFileComponent implements OnInit {
   }
 
   onRemoveHandler(event: any): void {
-    if(this.updatable){
+    if (this.updatable) {
       this.service.removeFile(this.file);
-    } 
+    }
   }
 
   private isShowPreview() {
@@ -114,11 +125,11 @@ export class DxcFileComponent implements OnInit {
       return "image";
     }
     return "file";
-  };
+  }
 
   getRemoveAriaLabel() {
     return "Remove " + this.file.data.name;
-  };
+  }
 
   getDynamicStyle(inputs) {
     return css`
@@ -149,7 +160,9 @@ export class DxcFileComponent implements OnInit {
       margin-top: ${inputs.multiple || inputs.mode !== "file" ? "4px" : ""};
       margin-left: ${!inputs.multiple && inputs.mode === "file" ? "4px" : ""};
       .previewContainer {
-        background-color: ${this.hasError ? "#ffc9ce" : "#e6e6e6"};
+        background-color: ${this.hasError
+          ? "var(--fileInput-errorFilePreviewBackgroundColor)"
+          : "var(--fileInput-filePreviewBackgroundColor)"};
         display: flex;
         align-items: center;
         place-content: center;
@@ -159,7 +172,9 @@ export class DxcFileComponent implements OnInit {
         width: 48px;
         svg,
         img {
-          fill: ${this.hasError ? "#d0011b" : "#808080"};
+          fill: ${this.hasError
+            ? "var(--fileInput-errorFilePreviewIconColor)"
+            : "var(--fileInput-filePreviewIconColor)"};
           height: 24px;
           width: 24px;
         }
@@ -207,6 +222,7 @@ export class DxcFileComponent implements OnInit {
               svg {
                 height: 16px;
                 width: 16px;
+                fill: var(--fileInput-deleteFileItemIconColor);
               }
               &:hover,
               &:active {
@@ -215,14 +231,18 @@ export class DxcFileComponent implements OnInit {
               }
               &:hover {
                 background-color: var(
-                  --fileInput-hoverFileItemIconBackgroundColor
+                  --fileInput-hoverDeleteFileItemBackgroundColor
                 );
               }
               &:active {
                 background-color: var(
-                  --fileInput-activeFileItemIconBackgroundColor
+                  --fileInput-activeDeleteFileItemBackgroundColor
                 );
               }
+              &:focus {
+                outline: var(--fileInput-focusDeleteFileItemBackgroundColor)
+                  auto 1px;
+              }
             }
             .errorIcon {
               margin-right: 4px;

projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts

@@ -498,24 +498,27 @@ export const componentTokens = {
   //FILE INPUT
   "--fileInput-dropBorderColor": globalTokens.hal_black,
   "--fileInput-fileItemBorderColor": globalTokens.hal_grey_l_80,
-  "--fileInput-fileItemIconColor": globalTokens.hal_black, //añadir
+  "--fileInput-deleteFileItemIconColor": globalTokens.hal_black,
   "--fileInput-fileNameFontColor": globalTokens.hal_black,
   "--fileInput-labelFontColor": globalTokens.hal_black,
   "--fileInput-helperTextFontColor": globalTokens.hal_black,
   "--fileInput-dropLabelFontColor": globalTokens.hal_black,
-
+  "--fileInput-filePreviewBackgroundColor": globalTokens.hal_grey_l_95,
+  "--fileInput-filePreviewIconColor": globalTokens.hal_black,
+  "--fileInput-errorFilePreviewBackgroundColor": "#ffccd3",
+  "--fileInput-errorFilePreviewIconColor": globalTokens.hal_red_s_41,
   "--fileInput-disabledLabelFontColor": globalTokens.hal_grey_l_60,
   "--fileInput-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
   "--fileInput-disabledDropLabelFontColor": globalTokens.hal_grey_l_60,
   "--fileInput-focusDropBorderColor": globalTokens.hal_blue_l_50,
   "--fileInput-disabledDropBorderColor": globalTokens.hal_grey_l_60,
   "--fileInput-dragoverDropBackgroundColor": "#f5fbff",
-  "--fileInput-hoverFileItemIconBackgroundColor": globalTokens.hal_grey_l_95,
-  "--fileInput-activeFileItemIconBackgroundColor": globalTokens.hal_grey_l_80,
+  "--fileInput-hoverDeleteFileItemBackgroundColor": "#0000000d",
+  "--fileInput-activeDeleteFileItemBackgroundColor": "#00000033",
+  "--fileInput-focusDeleteFileItemBackgroundColor": globalTokens.hal_blue_l_50,
   "--fileInput-errorFileItemBorderColor": globalTokens.hal_red_s_41,
-  "--fileInput-errorFileItemBackgroundColor": "#ffccd3",
+  "--fileInput-errorFileItemBackgroundColor": "#FFF5F6",
   "--fileInput-errorMessageFontColor": globalTokens.hal_red_s_41,
-  //falta token para error icon
   "--fileInput-labelFontFamily": globalTokens.type_sans,
   "--fileInput-labelFontSize": globalTokens.type_scale_02,
   "--fileInput-labelFontWeight": globalTokens.type_semibold,