Skip to content

Commit 63a1364

Browse files
spliffonespliffone
committed
feat(file-uploader): merge upload texts into single button label
The `uploadTextFileSelect` input has been removed. The whole prompt is now rendered as the file-select button text via `uploadDropText`, avoiding fragile translation concatenation. A migration removes leftover usages. BREAKING CHANGE: The `uploadTextFileSelect` input has been removed from `SiFileUploaderComponent` and `SiFileDropzoneComponent`. The full text now lives in `uploadDropText`, which renders as the button. Remove `uploadTextFileSelect` and move its content into `uploadDropText`. Before: ```typescript <si-file-uploader uploadDropText="Drop files here or" uploadTextFileSelect="click to upload" /> ``` After: ```typescript <si-file-uploader uploadDropText="Drop files here or click to upload" /> ```
1 parent 1e45848 commit 63a1364

17 files changed

Lines changed: 114 additions & 52 deletions

‎api-goldens/element-ng/file-uploader/index.api.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ export class SiFileDropzoneComponent {
6161
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
6262
reset(): void;
6363
readonly uploadDropText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
64-
readonly uploadTextFileSelect: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
6564
}
6665

6766
// @public
@@ -116,7 +115,6 @@ export class SiFileUploaderComponent {
116115
readonly uploadConfig: _angular_core.InputSignal<FileUploadConfig>;
117116
readonly uploadDropText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
118117
readonly uploadingText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
119-
readonly uploadTextFileSelect: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
120118
}
121119

122120
// @public (undocumented)

‎projects/element-ng/file-uploader/si-file-dropzone.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@
77
>
88
<si-icon class="mb-6 si-display-bold" [icon]="icons.elementUpload" />
99
<span class="drag-and-drop-description si-h5 d-flex">
10-
<span>{{ uploadDropText() | translate }}</span>
11-
&nbsp;
1210
<button type="button" class="select-file si-h5 mb-0" (click)="triggerFileSelect()">
13-
{{ uploadTextFileSelect() | translate }}
11+
{{ uploadDropText() | translate }}
1412
</button>
1513
<input
1614
#fileInput

‎projects/element-ng/file-uploader/si-file-dropzone.component.spec.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ describe('SiFileDropzoneComponent', () => {
1313
let element: HTMLElement;
1414
let maxFileSize: WritableSignal<number | undefined>;
1515
let accept: WritableSignal<string | undefined>;
16-
let uploadTextFileSelect: WritableSignal<TranslatableString>;
1716
let uploadDropText: WritableSignal<TranslatableString>;
1817
let errorTextFileType: WritableSignal<TranslatableString>;
1918
let errorTextFileMaxSize: WritableSignal<TranslatableString>;
@@ -27,8 +26,7 @@ describe('SiFileDropzoneComponent', () => {
2726
beforeEach(() => {
2827
maxFileSize = signal<number | undefined>(undefined);
2928
accept = signal<string | undefined>(undefined);
30-
uploadTextFileSelect = signal<TranslatableString>('click to upload');
31-
uploadDropText = signal<TranslatableString>('Drop files here or');
29+
uploadDropText = signal<TranslatableString>('Drop files here or click to upload');
3230
errorTextFileType = signal<TranslatableString>('Incorrect file type selected');
3331
errorTextFileMaxSize = signal<TranslatableString>('File exceeds allowed maximum size');
3432
directoryUpload = signal(false);
@@ -38,7 +36,6 @@ describe('SiFileDropzoneComponent', () => {
3836
bindings: [
3937
inputBinding('maxFileSize', maxFileSize),
4038
inputBinding('accept', accept),
41-
inputBinding('uploadTextFileSelect', uploadTextFileSelect),
4239
inputBinding('uploadDropText', uploadDropText),
4340
inputBinding('errorTextFileType', errorTextFileType),
4441
inputBinding('errorTextFileMaxSize', errorTextFileMaxSize),
@@ -122,14 +119,6 @@ describe('SiFileDropzoneComponent', () => {
122119
};
123120
};
124121

125-
it('should contain set upload text to file selecting', async () => {
126-
uploadTextFileSelect.set('browse files');
127-
uploadDropText.set('droppi droppi');
128-
await fixture.whenStable();
129-
expect(element.querySelector('.select-file')!).toHaveTextContent('browse files');
130-
expect(element.querySelector('.drag-and-drop-description')!).toHaveTextContent('droppi droppi');
131-
});
132-
133122
it('should highlight the drop area when dragging something over it', async () => {
134123
await fixture.whenStable();
135124

‎projects/element-ng/file-uploader/si-file-dropzone.component.ts‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,16 @@ import { UploadFile } from './si-file-uploader.model';
2727
})
2828
export class SiFileDropzoneComponent {
2929
/**
30-
* Text or translation key of the input file selector (is combined with the `uploadTextRest`).
30+
* Text or translation key of the drag&drop field.
3131
*
3232
* @defaultValue
3333
* ```
34-
* t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
34+
* t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
3535
* ```
3636
*/
37-
readonly uploadTextFileSelect = input(
38-
t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
37+
readonly uploadDropText = input(
38+
t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
3939
);
40-
/**
41-
* Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect`).
42-
*
43-
* @defaultValue
44-
* ```
45-
* t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
46-
* ```
47-
*/
48-
readonly uploadDropText = input(t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`));
4940
/**
5041
* Text or translation key for max file size.
5142
*

‎projects/element-ng/file-uploader/si-file-uploader.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<si-file-dropzone
22
#dropZone
33
[class]="autoUpload() ? 'mb-8' : 'mb-4'"
4-
[uploadTextFileSelect]="uploadTextFileSelect()"
54
[uploadDropText]="uploadDropText()"
65
[multiple]="maxFiles() > 1"
76
[directoryUpload]="directoryUpload()"

‎projects/element-ng/file-uploader/si-file-uploader.component.spec.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ describe('SiFileUploaderComponent', () => {
2222
let showHttpError: WritableSignal<boolean>;
2323
let autoUpload: WritableSignal<boolean>;
2424
let accept: WritableSignal<string | undefined>;
25-
let uploadTextFileSelect: WritableSignal<TranslatableString>;
2625
let uploadDropText: WritableSignal<TranslatableString>;
2726
let clearButtonText: WritableSignal<TranslatableString>;
2827
let uploadButtonText: WritableSignal<TranslatableString>;
@@ -62,8 +61,7 @@ describe('SiFileUploaderComponent', () => {
6261
showHttpError = signal(false);
6362
autoUpload = signal(false);
6463
accept = signal<string | undefined>(undefined);
65-
uploadTextFileSelect = signal<TranslatableString>('click to upload');
66-
uploadDropText = signal<TranslatableString>('Drop files here or');
64+
uploadDropText = signal<TranslatableString>('Drop files here or click to upload');
6765
clearButtonText = signal<TranslatableString>('Clear');
6866
uploadButtonText = signal<TranslatableString>('Upload');
6967
errorTextFileType = signal<TranslatableString>('Incorrect file type selected');
@@ -90,7 +88,6 @@ describe('SiFileUploaderComponent', () => {
9088
inputBinding('showHttpError', showHttpError),
9189
inputBinding('autoUpload', autoUpload),
9290
inputBinding('accept', accept),
93-
inputBinding('uploadTextFileSelect', uploadTextFileSelect),
9491
inputBinding('uploadDropText', uploadDropText),
9592
inputBinding('clearButtonText', clearButtonText),
9693
inputBinding('uploadButtonText', uploadButtonText),
@@ -130,13 +127,11 @@ describe('SiFileUploaderComponent', () => {
130127
element.querySelector<HTMLButtonElement>('.btn-primary')!.click();
131128

132129
it('should pass text messages to drop zone', async () => {
133-
uploadTextFileSelect.set('browse files');
134130
uploadDropText.set('droppi droppi');
135131
clearButtonText.set('Reset');
136132
uploadButtonText.set('Do it');
137133
await fixture.whenStable();
138-
expect(element.querySelector('.select-file')!).toHaveTextContent('browse files');
139-
expect(element.querySelector('.drag-and-drop-description')!).toHaveTextContent('droppi droppi');
134+
expect(element.querySelector('.select-file')!).toHaveTextContent('droppi droppi');
140135
expect(getClearButton()).toHaveTextContent('Reset');
141136
expect(getUploadButton()).toHaveTextContent('Do it');
142137
});

‎projects/element-ng/file-uploader/si-file-uploader.component.ts‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -94,26 +94,17 @@ interface ExtUploadFile extends UploadFile {
9494
changeDetection: ChangeDetectionStrategy.Default
9595
})
9696
export class SiFileUploaderComponent {
97-
/**
98-
* Text of the link to open the file select dialog (follows `uploadDropText`).
99-
*
100-
* @defaultValue
101-
* ```
102-
* t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
103-
* ```
104-
*/
105-
readonly uploadTextFileSelect = input(
106-
t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
107-
);
10897
/**
10998
* Text instructing a user to drop the files inside the dropzone.
11099
*
111100
* @defaultValue
112101
* ```
113-
* t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
102+
* t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
114103
* ```
115104
*/
116-
readonly uploadDropText = input(t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`));
105+
readonly uploadDropText = input(
106+
t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
107+
);
117108
/**
118109
* Text to describe the maximum file size.
119110
*

‎projects/element-ng/schematics/migration.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
"version": "49.0.0",
66
"description": "Updates Siemens element to v49",
77
"factory": "./ng-update/index#migrateToV49"
8+
},
9+
"migration-v51": {
10+
"version": "51.0.0",
11+
"description": "Updates Siemens element to v51",
12+
"factory": "./ng-update/index#migrateToV51"
813
}
914
}
1015
}

‎projects/element-ng/schematics/migrations/data/migration-test-data.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,17 @@ const SYMBOL_REMOVALS_MIGRATION: SymbolRemovalInstruction[] = [
181181
module: /@(siemens|simpl)\/charts-ng/,
182182
elementSelector: 'si-chart-gauge',
183183
names: ['numberOfDecimals']
184+
},
185+
// v50 to v51
186+
{
187+
module: /@(siemens|simpl)\/element-ng(\/file-uploader)?/,
188+
elementSelector: 'si-file-uploader',
189+
names: ['uploadTextFileSelect']
190+
},
191+
{
192+
module: /@(siemens|simpl)\/element-ng(\/file-uploader)?/,
193+
elementSelector: 'si-file-dropzone',
194+
names: ['uploadTextFileSelect']
184195
}
185196
];
186197

‎projects/element-ng/schematics/migrations/data/symbol-removals.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,16 @@ export const SYMBOL_REMOVALS_MIGRATION: SymbolRemovalInstruction[] = [
2424
module: /@(siemens|simpl)\/element-ng/,
2525
elementSelector: 'si-landing-page',
2626
names: ['registerNowIntroText']
27+
},
28+
// v49 to v51
29+
{
30+
module: /@(siemens|simpl)\/element-ng(\/file-uploader)?/,
31+
elementSelector: 'si-file-uploader',
32+
names: ['uploadTextFileSelect']
33+
},
34+
{
35+
module: /@(siemens|simpl)\/element-ng(\/file-uploader)?/,
36+
elementSelector: 'si-file-dropzone',
37+
names: ['uploadTextFileSelect']
2738
}
2839
];

0 commit comments

Comments
 (0)