Skip to content

docs: add upload-file custom CSS properties to styling JSDoc #10579

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

Merged
web-padawan merged 2 commits into from
Dec 8, 2025
+132 −24
Merged

docs: add upload-file custom CSS properties to styling JSDoc #10579

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3397cee
docs: add upload-file custom CSS properties to styling JSDoc
web-padawan Dec 4, 2025
5f2d8f9
docs: add upload gap property
web-padawan Dec 8, 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
28 changes: 28 additions & 0 deletions packages/upload/src/vaadin-upload-file.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,34 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
* `uploading` | Uploading is in progress.
* `complete` | Uploading has finished successfully.
*
* The following custom CSS properties are available for styling:
*
* Custom CSS property |
* :--------------------------------------------|
* `--vaadin-upload-file-border-radius` |
* `--vaadin-upload-file-button-background` |
* `--vaadin-upload-file-button-border-color` |
* `--vaadin-upload-file-button-border-radius` |
* `--vaadin-upload-file-button-border-width` |
* `--vaadin-upload-file-button-text-color` |
* `--vaadin-upload-file-button-padding` |
* `--vaadin-upload-file-done-color` |
* `--vaadin-upload-file-error-color` |
* `--vaadin-upload-file-error-font-size` |
* `--vaadin-upload-file-error-font-weight` |
* `--vaadin-upload-file-error-line-height` |
* `--vaadin-upload-file-gap` |
* `--vaadin-upload-file-name-color` |
* `--vaadin-upload-file-name-font-size` |
* `--vaadin-upload-file-name-font-weight` |
* `--vaadin-upload-file-name-line-height` |
* `--vaadin-upload-file-padding` |
* `--vaadin-upload-file-status-color` |
* `--vaadin-upload-file-status-font-size` |
* `--vaadin-upload-file-status-font-weight` |
* `--vaadin-upload-file-status-line-height` |
* `--vaadin-upload-file-warning-color` |
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*/
declare class UploadFile extends UploadFileMixin(ThemableMixin(HTMLElement)) {
Expand Down
28 changes: 28 additions & 0 deletions packages/upload/src/vaadin-upload-file.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,34 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
* `uploading` | Uploading is in progress.
* `complete` | Uploading has finished successfully.
*
* The following custom CSS properties are available for styling:
*
* Custom CSS property |
* :--------------------------------------------|
* `--vaadin-upload-file-border-radius` |
* `--vaadin-upload-file-button-background` |
* `--vaadin-upload-file-button-border-color` |
* `--vaadin-upload-file-button-border-radius` |
* `--vaadin-upload-file-button-border-width` |
* `--vaadin-upload-file-button-text-color` |
* `--vaadin-upload-file-button-padding` |
* `--vaadin-upload-file-done-color` |
* `--vaadin-upload-file-error-color` |
* `--vaadin-upload-file-error-font-size` |
* `--vaadin-upload-file-error-font-weight` |
* `--vaadin-upload-file-error-line-height` |
* `--vaadin-upload-file-gap` |
* `--vaadin-upload-file-name-color` |
* `--vaadin-upload-file-name-font-size` |
* `--vaadin-upload-file-name-font-weight` |
* `--vaadin-upload-file-name-line-height` |
* `--vaadin-upload-file-padding` |
* `--vaadin-upload-file-status-color` |
* `--vaadin-upload-file-status-font-size` |
* `--vaadin-upload-file-status-font-weight` |
* `--vaadin-upload-file-status-line-height` |
* `--vaadin-upload-file-warning-color` |
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @customElement
Expand Down
49 changes: 37 additions & 12 deletions packages/upload/src/vaadin-upload.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,18 +149,43 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
*
* The following custom CSS properties are available for styling:
*
* Custom CSS property | Description
* -----------------------------------------|-------------
* `--vaadin-upload-background` | The host element background
* `--vaadin-upload-border-color` | The host element border color
* `--vaadin-upload-border-radius` | The host element border radius
* `--vaadin-upload-border-width` | The host element border width
* `--vaadin-upload-padding` | The host element padding
* `--vaadin-upload-drop-label-color` | The drop label color
* `--vaadin-upload-drop-label-font-size` | The drop label font size
* `--vaadin-upload-drop-label-font-weight` | The drop label font weight
* `--vaadin-upload-drop-label-gap` | The drop label gap
* `--vaadin-upload-drop-label-line-height` | The drop label line height
* Custom CSS property |
* :--------------------------------------------|
* `--vaadin-upload-background` |
* `--vaadin-upload-border-color` |
* `--vaadin-upload-border-radius` |
* `--vaadin-upload-border-width` |
* `--vaadin-upload-padding` |
* `--vaadin-upload-drop-label-color` |
* `--vaadin-upload-drop-label-font-size` |
* `--vaadin-upload-drop-label-font-weight` |
* `--vaadin-upload-drop-label-gap` |
* `--vaadin-upload-drop-label-line-height` |
* `--vaadin-upload-file-list-divider-color` |
* `--vaadin-upload-file-list-divider-width` |
* `--vaadin-upload-file-border-radius` |
* `--vaadin-upload-file-button-background` |
* `--vaadin-upload-file-button-border-color` |
* `--vaadin-upload-file-button-border-radius` |
* `--vaadin-upload-file-button-border-width` |
* `--vaadin-upload-file-button-text-color` |
* `--vaadin-upload-file-button-padding` |
* `--vaadin-upload-file-done-color` |
* `--vaadin-upload-file-error-color` |
* `--vaadin-upload-file-error-font-size` |
* `--vaadin-upload-file-error-font-weight` |
* `--vaadin-upload-file-error-line-height` |
* `--vaadin-upload-file-gap` |
* `--vaadin-upload-file-name-color` |
* `--vaadin-upload-file-name-font-size` |
* `--vaadin-upload-file-name-font-weight` |
* `--vaadin-upload-file-name-line-height` |
* `--vaadin-upload-file-padding` |
* `--vaadin-upload-file-status-color` |
* `--vaadin-upload-file-status-font-size` |
* `--vaadin-upload-file-status-font-weight` |
* `--vaadin-upload-file-status-line-height` |
* `--vaadin-upload-file-warning-color` |
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
Expand Down
49 changes: 37 additions & 12 deletions packages/upload/src/vaadin-upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,43 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
*
* The following custom CSS properties are available for styling:
*
* Custom CSS property | Description
* -----------------------------------------|-------------
* `--vaadin-upload-background` | The host element background
* `--vaadin-upload-border-color` | The host element border color
* `--vaadin-upload-border-radius` | The host element border radius
* `--vaadin-upload-border-width` | The host element border width
* `--vaadin-upload-padding` | The host element padding
* `--vaadin-upload-drop-label-color` | The drop label color
* `--vaadin-upload-drop-label-font-size` | The drop label font size
* `--vaadin-upload-drop-label-font-weight` | The drop label font weight
* `--vaadin-upload-drop-label-gap` | The drop label gap
* `--vaadin-upload-drop-label-line-height` | The drop label line height
* Custom CSS property |
* :--------------------------------------------|
* `--vaadin-upload-background` |
* `--vaadin-upload-border-color` |
* `--vaadin-upload-border-radius` |
* `--vaadin-upload-border-width` |
* `--vaadin-upload-padding` |
* `--vaadin-upload-drop-label-color` |
* `--vaadin-upload-drop-label-font-size` |
* `--vaadin-upload-drop-label-font-weight` |
* `--vaadin-upload-drop-label-gap` |
* `--vaadin-upload-drop-label-line-height` |
* `--vaadin-upload-file-list-divider-color` |
* `--vaadin-upload-file-list-divider-width` |
* `--vaadin-upload-file-border-radius` |
* `--vaadin-upload-file-button-background` |
* `--vaadin-upload-file-button-border-color` |
* `--vaadin-upload-file-button-border-radius` |
* `--vaadin-upload-file-button-border-width` |
* `--vaadin-upload-file-button-text-color` |
* `--vaadin-upload-file-button-padding` |
* `--vaadin-upload-file-done-color` |
* `--vaadin-upload-file-error-color` |
* `--vaadin-upload-file-error-font-size` |
* `--vaadin-upload-file-error-font-weight` |
* `--vaadin-upload-file-error-line-height` |
* `--vaadin-upload-file-gap` |
* `--vaadin-upload-file-name-color` |
* `--vaadin-upload-file-name-font-size` |
* `--vaadin-upload-file-name-font-weight` |
* `--vaadin-upload-file-name-line-height` |
* `--vaadin-upload-file-padding` |
* `--vaadin-upload-file-status-color` |
* `--vaadin-upload-file-status-font-size` |
* `--vaadin-upload-file-status-font-weight` |
* `--vaadin-upload-file-status-line-height` |
* `--vaadin-upload-file-warning-color` |
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
Expand Down