Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add styling to kol-input-file #7436

Merged
merged 5 commits into from
Mar 4, 2025
Merged

Add styling to kol-input-file #7436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a2c16d1
Add styling to kol-input-file
anicyne Mar 3, 2025
9993d25
Add drag and drop support
anicyne Mar 4, 2025
54480b8
Fix input-file test
anicyne Mar 4, 2025
5981446
Update all snapshots$
anicyne Mar 4, 2025
971a4f1
Merge branch 'develop' into 6368_input-file-styling
anicyne Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 37 additions & 2 deletions packages/components/src/components/input-file/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
import { InputFileController } from './controller';
import { translate } from '../../i18n';
import { KolButtonWcTag } from '../../core/component-names';

/**
* @slot - Die Beschriftung des Eingabefeldes.
Expand Down Expand Up @@ -93,7 +95,9 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
return (
<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
<KolInputContainerFc state={this.state}>
<span class="kol-input-container__filename">{this.filename}</span>
<KolInputStateWrapperFc {...this.getInputProps()} />
<KolButtonWcTag class="kol-input-container__button" _label={translate('kol-data-browse-text')} _variant="primary" _disabled={this._disabled} />
</KolInputContainerFc>
</KolFormFieldStateWrapperFc>
);
Expand Down Expand Up @@ -204,6 +208,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
*/
@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;

@State() private filename: string = translate('kol-filename-text');
@State() public state: InputFileStates = {
_hideMsg: false,
_id: `id-${nonce()}`,
Expand Down Expand Up @@ -315,13 +320,43 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
this.controller.componentWillLoad();
}

public componentDidLoad(): void {
const container = this.inputRef?.parentElement?.parentElement;
container?.addEventListener('dragover', this.onDragOver);
container?.addEventListener('dragleave', this.onDragLeave);
container?.addEventListener('drop', this.onDrop);
}

private onDragOver = (event: DragEvent): void => {
event.preventDefault();
this.inputRef?.parentElement?.parentElement?.classList.add('kol-input-container--is-dragover');
};

private onDragLeave = (): void => {
this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
};

private onDrop = (event: DragEvent): void => {
event.preventDefault();
this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
if (event.dataTransfer?.files.length) {
const files = event.dataTransfer.files;
this.filename = Array.from(files)
.map((file) => file.name)
.join(', ');
this.controller.setFormAssociatedValue(files);
}
};
private onChange = (event: Event): void => {
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
const value = this.inputRef.files;
this.filename = value?.length
? Array.from(value)
.map((file) => file.name)
.join(', ')
: translate('kol-filename-text');

this.controller.onFacade.onChange(event, value);

// Static form handling
this.controller.setFormAssociatedValue(value);
}
};
Expand Down
30 changes: 30 additions & 0 deletions packages/components/src/components/input-file/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,35 @@
@layer kol-component {
.kol-input {
padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}

.kol-input-container {
$root: &;
padding: 0 0 0 rem(8) !important;

&__container {
display: flex;
align-items: center;
overflow: hidden;
height: var(--a11y-min-size);
}

&__filename {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: rem(4);
}

&:has(> #{$root}__adornment--start):has(> #{$root}__adornment--end) {
grid-template-columns: auto 1fr;
}
}
}
56 changes: 56 additions & 0 deletions packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -38,7 +42,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -61,7 +69,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container kol-input-container--disabled">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="file">
<kol-button-wc _disabled="" _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -84,7 +96,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand Down Expand Up @@ -113,7 +129,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
</div>
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
<div class="kol-input-container__adornment kol-input-container__adornment--end">
<kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
Expand Down Expand Up @@ -142,7 +162,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
</div>
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
<div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
</div>
Expand All @@ -167,7 +191,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-input-container">
<div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
<div class="kol-input-container__adornment kol-input-container__adornment--end">
<kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
Expand All @@ -193,7 +221,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -216,7 +248,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -239,7 +275,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -263,7 +303,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -287,7 +331,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-input-container">
<div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
<div class="kol-input-container__adornment kol-input-container__adornment--end">
<kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
Expand All @@ -313,7 +361,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand All @@ -336,7 +388,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
<div class="kol-form-field__input">
<div class="kol-input-container">
<div class="kol-input-container__container">
<span class="kol-input-container__filename">
kol-filename-text
</span>
<input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
<kol-button-wc _label="kol-data-browse-text" _variant="primary" class="kol-input-container__button"></kol-button-wc>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/locales/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,6 @@ export default {
'hide-password': 'ausblenden',
'no-results-message': 'Keine Ergebnisse gefunden.',
'delete-selection': 'Auswahl entfernen',
'filename-text': 'Datei auswählen oder hier ablegen...',
'data-browse-text': 'Datei auswählen',
};
2 changes: 2 additions & 0 deletions packages/components/src/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,6 @@ export default {
'hide-password': 'Hide',
'no-results-message': 'No results found.',
'delete-selection': 'Delete selection',
'filename-text': 'Choose a file or drop it here...',
'data-browse-text': 'Browse',
};
Binary file modified ...ransformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ormer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/theme-default/snapshot-for-input-file-basic-noColumns-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts/theme-default/snapshot-for-input-file-basic-noColumns-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ult/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ult/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...napshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...er/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...es/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...fault/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/theme-default/snapshot-for-input-file-basic-noColumns-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts/theme-default/snapshot-for-input-file-basic-noColumns-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ult/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ult/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...napshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...lt/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions packages/themes/default/src/components/input-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
@use '../@shared/input-text' as *;
@use '../mixins/rem' as *;
@use '../mixins/button' as *;

@layer kol-theme-component {
@include kol-button('kol-button');

.kol-input-container {
gap: initial;

&__filename {
color: var(--color-subtle);
}

&--is-dragover {
border-color: var(--color-primary) !important;
}
}

.kol-button {
&__text {
border-radius: 0 !important;
white-space: nowrap;
}
}

.kol-input {
Expand Down
17 changes: 17 additions & 0 deletions packages/themes/ecl/src/ecl-ec/components/input-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
@use '../@shared/input-text' as *;
@use '../mixins/button' as *;

@layer kol-theme-component {
@include kol-button('kol-button');

.kol-button {
&__text {
white-space: nowrap;
}
}

.kol-input-container {
&--is-dragover {
border-color: var(--color-blue) !important;
}
}
}
18 changes: 18 additions & 0 deletions packages/themes/ecl/src/ecl-eu/components/input-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
@use '../@shared/input-text' as *;
@use '../mixins/button' as *;

@layer kol-theme-component {
@include kol-button('kol-button');

.kol-button {
&__text {
border-radius: 0 !important;
white-space: nowrap;
}
}

.kol-input-container {
&--is-dragover {
border-color: var(--color-blue) !important;
}
}
}
Loading