From 364bc804ffd938ba7f9ba442862f7716ac8e0073 Mon Sep 17 00:00:00 2001 From: dankeboy36 Date: Sat, 8 Nov 2025 15:04:20 +0100 Subject: [PATCH 1/2] fix: align button height with Monaco metrics Closes: vscode-elements/elements#554 Signed-off-by: dankeboy36 --- src/vscode-button/vscode-button.styles.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 6f9586168..c2bd5ed53 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -34,10 +34,10 @@ const styles: CSSResultGroup = [ font-weight: var(--vscode-font-weight, normal); height: 100%; justify-content: center; - line-height: 22px; + line-height: 18px; overflow: hidden; - padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px)) - 1px 13px; + padding: 4px calc(13px + var(--vsc-base-additional-right-padding, 0px)) + 4px 13px; position: relative; user-select: none; white-space: nowrap; @@ -146,9 +146,8 @@ const styles: CSSResultGroup = [ :host(:empty) .base, .base.icon-only { - min-height: 24px; min-width: 26px; - padding: 1px 4px; + padding: 4px 4px; } slot { From e9f989af6f92ef4d43afe1496a71c6a64ec66371 Mon Sep 17 00:00:00 2001 From: dankeboy36 Date: Thu, 13 Nov 2025 19:14:08 +0100 Subject: [PATCH 2/2] fix: add `block` prop to button to align with Code Signed-off-by: dankeboy36 --- dev/vscode-button/block-button.html | 41 +++++++++++++++++++++++ dev/vscode-button/variations.html | 13 +++++++ src/vscode-button/vscode-button.styles.ts | 20 ++++++++--- src/vscode-button/vscode-button.test.ts | 21 +++++++++++- src/vscode-button/vscode-button.ts | 7 ++++ 5 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 dev/vscode-button/block-button.html diff --git a/dev/vscode-button/block-button.html b/dev/vscode-button/block-button.html new file mode 100644 index 000000000..0f4c95d3f --- /dev/null +++ b/dev/vscode-button/block-button.html @@ -0,0 +1,41 @@ + + + + + + VSCode Elements + + + + + + + +
+ +
+ Inline Button + Block Button + Secondary Block Button +
+ +
+ + diff --git a/dev/vscode-button/variations.html b/dev/vscode-button/variations.html index afcee797a..d218cd0e0 100644 --- a/dev/vscode-button/variations.html +++ b/dev/vscode-button/variations.html @@ -70,6 +70,19 @@ disabled > +
+ Block Button + Secondary Block Button +
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index c2bd5ed53..a0edd4eb7 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -13,6 +13,11 @@ const styles: CSSResultGroup = [ width: auto; } + :host([block]) { + display: block; + width: 100%; + } + .base { align-items: center; background-color: var(--vscode-button-background, #0078d4); @@ -34,16 +39,22 @@ const styles: CSSResultGroup = [ font-weight: var(--vscode-font-weight, normal); height: 100%; justify-content: center; - line-height: 18px; + line-height: 22px; overflow: hidden; - padding: 4px calc(13px + var(--vsc-base-additional-right-padding, 0px)) - 4px 13px; + padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px)) + 1px 13px; position: relative; user-select: none; white-space: nowrap; width: 100%; } + :host([block]) .base { + min-height: 28px; + text-align: center; + width: 100%; + } + .base:after { background-color: var( --vscode-button-separator, @@ -146,8 +157,9 @@ const styles: CSSResultGroup = [ :host(:empty) .base, .base.icon-only { + min-height: 24px; min-width: 26px; - padding: 4px 4px; + padding: 1px 4px; } slot { diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts index 199a4755e..f79a0046e 100644 --- a/src/vscode-button/vscode-button.test.ts +++ b/src/vscode-button/vscode-button.test.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-expressions */ import sinon from 'sinon'; import {VscodeButton} from './index.js'; -import {expect, fixture, html} from '@open-wc/testing'; +import {expect, fixture, html, aTimeout} from '@open-wc/testing'; import {$} from '../includes/test-helpers.js'; describe('vscode-button', () => { @@ -233,5 +233,24 @@ describe('vscode-button', () => { expect(base.classList.contains('has-content-after')).to.be.true; }); + it('renders block buttons as full-width controls', async () => { + const wrapper = await fixture(html` +
+ Commit +
+ `); + const el = wrapper.querySelector('vscode-button') as VscodeButton; + + await el.updateComplete; + await aTimeout(0); + + const base = $(el.shadowRoot!, '.base') as HTMLElement; + const rect = base.getBoundingClientRect(); + + expect(rect.width).to.be.closeTo(320, 0.5); + expect(rect.height).to.be.closeTo(28, 0.5); + expect(window.getComputedStyle(el).display).to.eq('block'); + }); + it('sets the form value'); }); diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts index 4cdcfc950..5730cc2a2 100644 --- a/src/vscode-button/vscode-button.ts +++ b/src/vscode-button/vscode-button.ts @@ -48,6 +48,13 @@ export class VscodeButton extends VscElement { @property({type: Boolean, reflect: true}) secondary = false; + /** + * Makes the button fill its container and use VS Code's block sizing, + * similar to the Source Control "Commit" action. + */ + @property({type: Boolean, reflect: true}) + block = false; + /** @internal */ @property({reflect: true}) override role = 'button';