vscode-elements
Button height mismatch with VS Code native buttons
<vscode-button> renders about ~1.8 px shorter than VS Code's native .monaco-button.
Native VS Code: .monaco-button.monaco-text-button (~27.8 px)
@vscode-elements/elements: <vscode-button> (26 px)
They use the same font and color, but the shorter height causes visual misalignment.
Please align <vscode-button> height with the native one. Thank you
Native VS Code:
@vscode-elements/elements (from https://vscode-elements.github.io/components/button/#basic-example):
The vscode ui itself isn't consistent, so I had to cheat a little.
As you can see, the text field, the select, and the regular button all have three different heights: 24, 26, and 28px. I standardized their sizes so that the new height is 26px. I think this works well, however, when a button is used as a "block" button, like the "Commit" button in the source control sidebar, the 2px difference becomes noticeable.
What I suggest to resolve this situation is to introduce a "block button" variant. This kind of button would be 28px height, 100% width, with center-aligned label.
introduce a "block button" variant
I mean adding it as a new property, not creating a new component.
Thanks for your feedback
I mean adding it as a new property, not creating a new component.
Understood. I'll address it and update the PR soon.