From 2a868d2be8aedfd047962c3e93cd7e2d03ad5947 Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Tue, 20 May 2025 01:54:12 +0200 Subject: [PATCH 1/5] Allow for vscode-button-group to shrink like a button --- src/vscode-button-group/vscode-button-group.styles.ts | 1 + src/vscode-button/vscode-button.styles.ts | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/vscode-button-group/vscode-button-group.styles.ts b/src/vscode-button-group/vscode-button-group.styles.ts index 6a80d0cb6..2b28beefb 100644 --- a/src/vscode-button-group/vscode-button-group.styles.ts +++ b/src/vscode-button-group/vscode-button-group.styles.ts @@ -10,6 +10,7 @@ const styles: CSSResultGroup = [ align-items: stretch; padding: 0; border: none; + overflow: hidden; } ::slotted(vscode-button:not(:first-child)) { diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 0a1f98a9c..2c970a8f2 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -105,16 +105,16 @@ const styles: CSSResultGroup = [ display: flex; justify-content: center; position: relative; - width: 100%; + width: calc(100% - 2px); height: 100%; - padding: 1px 13px; + padding: 1px 12px; } :host(:empty) .wrapper, :host([icon-only]) .wrapper { min-height: 24px; min-width: 16px; - padding: 1px 5px; + padding: 1px 4px; } slot { From e75fa879c3cdefc27995bda266848535135aa500 Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Tue, 20 May 2025 02:11:25 +0200 Subject: [PATCH 2/5] Revert the padding, the width was already considered --- src/vscode-button/vscode-button.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 2c970a8f2..e2f652213 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -107,14 +107,14 @@ const styles: CSSResultGroup = [ position: relative; width: calc(100% - 2px); height: 100%; - padding: 1px 12px; + padding: 1px 13px; } :host(:empty) .wrapper, :host([icon-only]) .wrapper { min-height: 24px; min-width: 16px; - padding: 1px 4px; + padding: 1px 5px; } slot { From 89fc0c761ff8c144162393677862711f545e2cfe Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Tue, 20 May 2025 02:15:01 +0200 Subject: [PATCH 3/5] ONly take 1px off the wrapper since we don't have to match with padding --- src/vscode-button/vscode-button.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index e2f652213..109667429 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -105,7 +105,7 @@ const styles: CSSResultGroup = [ display: flex; justify-content: center; position: relative; - width: calc(100% - 2px); + width: calc(100% - 1px); height: 100%; padding: 1px 13px; } From ce8b692c8ffaf120d7b3917208cd7b74ba40e02f Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Fri, 30 May 2025 15:37:41 +0200 Subject: [PATCH 4/5] Only reduce the width of .wrapper if there is a divider --- src/vscode-button-group/vscode-button-group.styles.ts | 1 + src/vscode-button/vscode-button.styles.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/vscode-button-group/vscode-button-group.styles.ts b/src/vscode-button-group/vscode-button-group.styles.ts index 2b28beefb..9f75f8e38 100644 --- a/src/vscode-button-group/vscode-button-group.styles.ts +++ b/src/vscode-button-group/vscode-button-group.styles.ts @@ -21,6 +21,7 @@ const styles: CSSResultGroup = [ ::slotted(vscode-button:not(:last-child)) { --divider-display: block; + --wrapper-width: calc(100%-1px); border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 0345941e0..858773efd 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -105,7 +105,7 @@ const styles: CSSResultGroup = [ display: flex; justify-content: center; position: relative; - width: calc(100% - 1px); + width: var(--wrapper-width, 100%); height: 100%; padding: 1px 13px; } From 787f8d806faf994bad89fb344322dbb6aa3c0e05 Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Fri, 30 May 2025 15:39:22 +0200 Subject: [PATCH 5/5] Spaces around calc --- src/vscode-button-group/vscode-button-group.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vscode-button-group/vscode-button-group.styles.ts b/src/vscode-button-group/vscode-button-group.styles.ts index 9f75f8e38..2bd2a725e 100644 --- a/src/vscode-button-group/vscode-button-group.styles.ts +++ b/src/vscode-button-group/vscode-button-group.styles.ts @@ -21,7 +21,7 @@ const styles: CSSResultGroup = [ ::slotted(vscode-button:not(:last-child)) { --divider-display: block; - --wrapper-width: calc(100%-1px); + --wrapper-width: calc(100% - 1px); border-top-right-radius: 0; border-bottom-right-radius: 0;