From 7f8b3c9576cf153a41dca0b93433cd634ab2a30c Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 15:26:02 +0200 Subject: [PATCH 1/8] Adapt VSCode's focus outline style --- src/vscode-button/vscode-button.styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 3dfb0bb86..f8b4bfa64 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -62,7 +62,7 @@ const styles: CSSResultGroup = [ outline: none; } - :host(:focus) { + :host(:focus-visible) { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; @@ -110,7 +110,10 @@ const styles: CSSResultGroup = [ padding: 1px 13px; } - :host(:empty) .wrapper { + :host(:empty) .wrapper, + :host([icon-only]) .wrapper { + min-height: 24px; + min-width: 16px; padding: 1px 5px; } From 0f21f456143561114237cc530b911a920b98eda9 Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 15:51:04 +0200 Subject: [PATCH 2/8] Display button group as inline group --- 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 5b8e5191c..6a80d0cb6 100644 --- a/src/vscode-button-group/vscode-button-group.styles.ts +++ b/src/vscode-button-group/vscode-button-group.styles.ts @@ -6,7 +6,7 @@ const styles: CSSResultGroup = [ defaultStyles, css` :host { - display: flex; + display: inline-flex; align-items: stretch; padding: 0; border: none; From 2f65b57263c9188a266511ac917bbd6a882f0c1f Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 15:51:53 +0200 Subject: [PATCH 3/8] Add iconOnly property to Button --- dev/vscode-button-group.html | 61 ------- .../vscode-button-group.html | 157 ++++++++++++++++++ dev/vscode-button/icon-button.html | 34 ++++ src/vscode-button/vscode-button.ts | 4 + 4 files changed, 195 insertions(+), 61 deletions(-) delete mode 100644 dev/vscode-button-group.html create mode 100644 dev/vscode-button-group/vscode-button-group.html create mode 100644 dev/vscode-button/icon-button.html diff --git a/dev/vscode-button-group.html b/dev/vscode-button-group.html deleted file mode 100644 index 0913083f9..000000000 --- a/dev/vscode-button-group.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - <vscode-button-group> Demo - - - - - - - -
-

Basic example

- - -

- - Hello World - - -

- -

- - Left - - Right - -

- -

- - Left - - Right - -

- -

- - Primary - Secondary - -

- -
- - diff --git a/dev/vscode-button-group/vscode-button-group.html b/dev/vscode-button-group/vscode-button-group.html new file mode 100644 index 000000000..dcc2c9726 --- /dev/null +++ b/dev/vscode-button-group/vscode-button-group.html @@ -0,0 +1,157 @@ + + + + + + <vscode-button-group> Demo + + + + + + + +
+

Basic example

+ + +

+ + Hello World + + +

+ +

+ + Left + + Right + +

+ +

+ + Left + + Right + +

+ +

+ + Primary + Secondary + +

+ +
+ + + + + + + + + + + + + + B + I + U + +
+ +
+ + diff --git a/dev/vscode-button/icon-button.html b/dev/vscode-button/icon-button.html new file mode 100644 index 000000000..9a610b8e8 --- /dev/null +++ b/dev/vscode-button/icon-button.html @@ -0,0 +1,34 @@ + + + + + + VSCode Elements + + + + + + + +
+ + + + +
+ + diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts index 66208d23a..2b8160b2c 100644 --- a/src/vscode-button/vscode-button.ts +++ b/src/vscode-button/vscode-button.ts @@ -98,6 +98,9 @@ export class VscodeButton extends VscElement { @property({type: String, reflect: true}) name: string | undefined = undefined; + @property({type: Boolean, reflect: true, attribute: 'icon-only'}) + iconOnly = false; + @property({reflect: true}) type: 'submit' | 'reset' | 'button' = 'button'; @@ -241,6 +244,7 @@ export class VscodeButton extends VscElement { wrapper: true, 'has-icon-before': hasIcon, 'has-icon-after': hasIconAfter, + 'icon-only': this.iconOnly, }; const iconElem = hasIcon From 487a069cb73e51be110a543c30ed761bd04ebc5c Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 22:00:22 +0200 Subject: [PATCH 4/8] Tweak CSS --- dev/vscode-button-group/vscode-button-group.html | 4 ++++ src/vscode-button/vscode-button.styles.ts | 12 +++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/dev/vscode-button-group/vscode-button-group.html b/dev/vscode-button-group/vscode-button-group.html index dcc2c9726..c5df9804e 100644 --- a/dev/vscode-button-group/vscode-button-group.html +++ b/dev/vscode-button-group/vscode-button-group.html @@ -20,6 +20,10 @@ gap: 6px; } + .wysiwyg-toolbar path { + fill: currentColor; + } + .icon-letter { flex: 1; font-family: sans-serif; diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index f8b4bfa64..0a1f98a9c 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -140,15 +140,25 @@ const styles: CSSResultGroup = [ .divider { display: var(--divider-display, none); - background-color: var(--vscode-button-background, #0078d4); + background-color: transparent; padding: 4px 0; box-sizing: border-box; } + :host(:hover) .divider, + :host(:focus-visible) .divider { + background-color: var(--vscode-button-hoverBackground, #026ec1); + } + :host([secondary]) .divider { background-color: var(--vscode-button-secondaryBackground, #313131); } + :host([secondary]:hover) .divider, + :host([secondary]:focus-visible) .divider { + background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); + } + .divider > div { background-color: var( --vscode-button-separator, From 2e0373956a79a606f1224103b656a8946bf26644 Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 23:53:39 +0200 Subject: [PATCH 5/8] Make context menu item label optional --- src/vscode-context-menu/vscode-context-menu.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/vscode-context-menu/vscode-context-menu.ts b/src/vscode-context-menu/vscode-context-menu.ts index 5a8831128..6b8db839a 100644 --- a/src/vscode-context-menu/vscode-context-menu.ts +++ b/src/vscode-context-menu/vscode-context-menu.ts @@ -9,8 +9,7 @@ import '../vscode-context-menu-item/index.js'; import styles from './vscode-context-menu.styles.js'; interface MenuItemData { - // TODO: make optional - label: string; + label?: string; keybinding?: string; value?: string; separator?: boolean; From faa5cc853870d167072401c279f8ef016f58bfdc Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 17 May 2025 23:54:50 +0200 Subject: [PATCH 6/8] Add dropdown demo --- dev/vscode-button-group/dropdown-menu.html | 95 +++++++++++++++++++ .../vscode-button-group.html | 11 --- 2 files changed, 95 insertions(+), 11 deletions(-) create mode 100644 dev/vscode-button-group/dropdown-menu.html diff --git a/dev/vscode-button-group/dropdown-menu.html b/dev/vscode-button-group/dropdown-menu.html new file mode 100644 index 000000000..6c7e598a0 --- /dev/null +++ b/dev/vscode-button-group/dropdown-menu.html @@ -0,0 +1,95 @@ + + + + + + <vscode-button-group> Demo + + + + + + + +
+

Basic example

+ + +
+ + Hello World + + + +
+ + +
+ + diff --git a/dev/vscode-button-group/vscode-button-group.html b/dev/vscode-button-group/vscode-button-group.html index c5df9804e..1c6b60695 100644 --- a/dev/vscode-button-group/vscode-button-group.html +++ b/dev/vscode-button-group/vscode-button-group.html @@ -54,17 +54,6 @@

Basic example

-

- - Hello World - - -

-

Left From 92876244553873eb7f5808a435400c5f4bb0dc4a Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 18 May 2025 00:01:33 +0200 Subject: [PATCH 7/8] Update changelog --- CHANGELOG.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ebee74f5..ed064800d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Added -- Added falback styles to **SplitLayout**. +- Added fallback styles to **SplitLayout**. +- Added **ButtonGroup** component + +### Changed + +- The focus outline is only visible when the **Button** is focused using the keyboard. This behavior mimics the UI behavior of VSCode. ## [1.15.0] - 2025-04-08 From 14c783593cb2ed1a4c47afb05438bd7c39c41a49 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 18 May 2025 00:03:14 +0200 Subject: [PATCH 8/8] Fix with Prettier --- dev/vscode-button-group/dropdown-menu.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/dev/vscode-button-group/dropdown-menu.html b/dev/vscode-button-group/dropdown-menu.html index 6c7e598a0..8163a1731 100644 --- a/dev/vscode-button-group/dropdown-menu.html +++ b/dev/vscode-button-group/dropdown-menu.html @@ -37,7 +37,9 @@

Basic example

- Hello World + Hello World