[upload] Component out of bounds when added to FormLayout

[rolandoisidoro]

Description

vaadin-form-layout-flow offers two methods to add components:

1. add from implementing the HasComponent interface;
2. addFormItem;

When adding an Upload component to a FormLayout component, using the 1st method it's rendered out of bounds, while using the 2nd method everything is rendered correctly.

Expected outcome

Actual outcome

Steps to reproduce

1. Create a view with a FormLayout component;
2. Add a Upload component to the FormLayout using the add method;
3. Add a Upload component to the FormLayout using the addFormItem method.

Browsers Affected**

• [x ] Chrome
• [x ] Firefox
• [x ] Edge (new Chromium based)

** haven't tested other browsers, but I'd say the issue is browser independent.

[web-padawan]

Confirmed. Can be workarounded by setting box-sizing: border-box; on the vaadin-upload element.

[rolandoisidoro]

@web-padawan , thanks for looking into this. Even being a low impact and minor severity issue, given the simplicity of the fix, is it expected to be included in the next minor version of the component?

[web-padawan]

I'm not sure if this can be considered minor bump because it might be a breaking change for some users.

For example if you set width: 300px on the component, it renders properly:

But adding box-sizing: border-box breaks that:

We aim to avoid such behavior incompatible changes in minor releases, so maybe this would need a new major.

[rolandoisidoro]

I was just following your Severity: minor label. In light of your last comment, maybe that classification should be revised.

[web-padawan]

Sorry if this looks confusing. I have added the label indicating it might require a new major.

Setting severity to minor is done according to the following criteria:

the bug is annoying and disturbs some specific workflow, with the main functionality available and working properly.

"Impact: low" means that the bug is not common and is not expected to affect majority of our users.

[web-padawan]

Suggested solution:

1. add box-sizing: border-box; on vaadin-upload in its src styles.
2. add visual test with using vaadin-upload in vaadin-form-layout