focusStrokeWidth not applied on text-field and number-field

[fcollonval]

Pull Request

📖 Description

Focus style on text and number fields does not use focusStrokeWidth (as e.g. do select).

Question: there is also a variation the text and number fields are using inset box-shadow when select is not. Does this need to be changed too? If so which one is the correct style to apply?

🎫 Issues

Fixes #5565

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

[ghost]

All CLA requirements met.

[chrisdholt]

Thanks @fcollonval!

[bheston]

Sorry I didn't get to this earlier today, but while the current code was not correct, the update isn't quite right either. Many of the controls that have an outline keep the outline in focus state and add an inner box-shadow to supplement the outline. So the current code assumes that the focus outline is always +1px from the outline stroke size. The correct way some of the components do this is to subtract the outline size from the focus size. This still assumes that the focus is larger than the outline, but that's probably pretty safe.

I have in mind a better way of doing this using outline instead, which we should consider as part of the visual refresh.

[fcollonval]

@bheston if I get you correctly a better fix would be to set the shadow width to calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)?