Border Tool: Inconsistent with other inspector inputs

[shaunandrews]

The (new-ish) border tools are pretty cool, and really open the door to creating some nice patterns and designs. I did notice that they look different from other inputs in the editor's Inspector sidebar. Here's a comparison between the Border tool and the Radius tool:

The Border input is taller and has a lighter colored border. This appears unintentional and should be updated to match the other inputs.

[aaronrobertshaw]

I've created two separate PRs to tackle this as how best to control the component height might change with a possible move to 36px default height in the near future.

Updating height: #40920
Updating border color: #40921

[javierarce]

I couldn't find the designs for this tool, so I created a proposal in the Design Library.

[aaronrobertshaw]

I couldn't find the designs for this tool

@shaunandrews is probably the best person to point to any official designs. You might find some extra details within #35602 though.

[javierarce]

@aaronrobertshaw thanks! I actually used some of those designs to create the components above. I just wanted to mention that those components exist now in the library.

[mtias]

It seems that things should be adjusted the other way, not going down to 30px but increasing to 40px, which is where we have settled for the new tool controls:

[mtias]

This also goes for the border radius control:

[aaronrobertshaw]

Thanks for the direction @mtias on which way we should be moving these controls.

Can you clarify if we should be migrating these controls directly to a 40px height now, or update them such that the 40px height can be toggled on whenever all the other controls in the sidebar are ready for the same height?

In other words, are we OK with the border controls being at 40px even though other controls in the sidebar are shorter?

Example screenshots

Global Styles	Inspector Controls

I've put together a quick draft PR (#41860) adding a __next40pxDefaultSize prop to the border control components allowing for their height to be toggled to 40px via the patch included in that PR's description. If we decide to update the controls directly to 40px now instead, I'll update that PR accordingly.

[mtias]

We need to be updating all the controls gradually and systematically. For example, the layout content/wide setting is set at 40px in the global styles designs:

[aaronrobertshaw]

I'm not sure I'm following your last comment 100% sorry.

We need to be updating all the controls gradually and systematically.

Does gradually here mean we are happy to have inconsistent control heights (maybe just between panels) for however long it may be until we update all controls? Or, does systematically mean we want to update all controls together so we avoid that inconsistency?

The latter was the thinking behind #41860 and the end of my earlier comment.

[mtias]

@aaronrobertshaw sorry missed the ping — I'm fine with some inconsistency as we work through it. By systematically I mean not abandoning it or trying to do it in one go, which is unlikely to happen. We should focus one panel at a time and get it to match the designs as soon as possible.

[aaronrobertshaw]

Thanks for the clarification @mtias, I'll revisit this and update #41860 as soon as possible.

[aaronrobertshaw]

Closing this issue as I believe all the tweaks to the controls sizing, focus, etc. have been resolved now #41860 has been merged.