Merge pull request #758 from dxc-technology/jialecl-fileInputButtonLabel

[Minor] Adding new property to file input

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html

@@ -43,6 +43,15 @@
     <td></td>
     <td>Helper text to be placed above the component.</td>
   </tr>
+  <tr>
+    <td>buttonLabel: string</td>
+    <td>
+      <code></code>
+    </td>
+    <td>
+      Text to be placed inside the button.
+    </td>
+  </tr>
   <tr>
     <td>accept: string</td>
     <td></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/file-input-preview/file-input-preview.component.html

@@ -9,6 +9,15 @@
       (callbackFile)="callback($event)"
       [multiple]="false"
     ></dxc-file-input>
+    <dxc-file-input
+      label="Custom button label"
+      helperText="helperText"
+      buttonLabel="Custom button label"
+      [showPreview]="true"
+      margin="xsmall"
+      (callbackFile)="callback2($event)"
+      [multiple]="false"
+    ></dxc-file-input>
     <dxc-file-input
       label="Label"
       helperText="helperText"

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

@@ -10,7 +10,7 @@
   />
   <dxc-button
     *ngIf="mode === 'file'"
-    label="Select files"
+    [label]="buttonLabel"
     mode="secondary"
     [disabled]="disabled"
     (onClick)="fileInput.click()"
@@ -27,7 +27,7 @@
     (dragover)="dragOver($event)"
   >
     <dxc-button
-      label="Select"
+      [label]="buttonLabel"
       mode="secondary"
       [disabled]="disabled"
       [tabIndexValue]="tabIndexValue"

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

@@ -30,6 +30,23 @@ describe("DxcFileInputComponent", () => {
     expect(fileInput.getByText("Helper Text"));
   });
 
+  test("should render dxc-file-input with custom buttonLabel", async () => {
+    const fileInput = await render(DxcFileInputComponent, {
+      componentProperties: {
+        label: "Label",
+        helperText: "Helper Text",
+        buttonLabel: "Custom Button Label",
+      },
+      excludeComponentDeclaration: true,
+      imports: [DxcFileInputModule],
+    });
+
+    expect(fileInput.getByText("Custom Button Label"));
+    expect(fileInput.getByText("Label"));
+    expect(fileInput.getByText("Helper Text"));
+  });
+
+
   test("should render dxc-file-input in file drop mode", async () => {
     const fileInput = await render(DxcFileInputComponent, {
       componentProperties: {

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

@@ -49,6 +49,7 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
   @Input() public name: string;
   @Input() public mode: string = "file";
   @Input() public label: string;
+  @Input() public buttonLabel: string;
   @Input() public helperText: string;
   @Input() public value: Array<FileData>;
   @Input() public accept: any;
@@ -148,6 +149,21 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
     this.hasShowError = this.isErrorShow();
     this.hasMultipleFiles = this.isMultipleFilesPrintables();
     this.hasSingleFile = this.isSingleFilesPrintables();
+    if (!this.buttonLabel) {
+      console.log(
+        this.mode === "file"
+          ? this.multiple
+            ? "Select files"
+            : "Select file"
+          : "Select"
+      );
+      this.buttonLabel =
+        this.mode === "file"
+          ? this.multiple
+            ? "Select files"
+            : "Select file"
+          : "Select";
+    }
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }