Stop file upload component 'jumping' on focus

[vanitabarrett]

What

Stop file upload component 'jumping' on focus.

Why

While working on #2194 , we noticed that the file upload component 'jumps' slightly to the left on focus. Example (in Safari, but this affects other browsers too):

Screen.Recording.2021-04-26.at.16.01.58.BEFORE.mov

This is related to some CSS and a comment in the code, which is applied on focus:

// Yank the padding with negative margin to avoid a jump
// when element is focused
margin-right: -$component-padding;
margin-left: -$component-padding;
padding-right: $component-padding;
padding-left: $component-padding;

We can understand why this code was added by observing the effect of removing it:

Screen.Recording.2021-04-26.at.16.06.15.mov

When this CSS is removed, the focus state and the file upload button overlap on the left-hand side.

So... we need to add some padding-left?

The component has bottom and top padding applied by default, but left and right padding is only added on focus (see the code above). What happens if we add padding by default instead of waiting for focus, to prevent anything moving around on focus?

This initially looks good on focus, but we can see that when the focus state is removed the file upload button is out of line with the text above it. This explains why we were initially adding a negative margin.

Setting padding and negative margin by default

Instead of waiting until focus, we can add padding and a negative left margin by default:

Screen.Recording.2021-04-26.at.16.21.11.mov

Cross Browser testing

• IE11
• Edge
• Chrome
• Firefox
• Safari
• Safari (iOS)
• Chrome (iOS)
• Chrome (Android)
• Samsung Internet (Android)
• Windows High Contrast Mode (Edge)

[36degrees]

Looks good – neat solution and great write up 👍🏻