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 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/dropdown-menu.html b/dev/vscode-button-group/dropdown-menu.html new file mode 100644 index 000000000..8163a1731 --- /dev/null +++ b/dev/vscode-button-group/dropdown-menu.html @@ -0,0 +1,97 @@ + + + + + + <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 new file mode 100644 index 000000000..1c6b60695 --- /dev/null +++ b/dev/vscode-button-group/vscode-button-group.html @@ -0,0 +1,150 @@ + + + + + + <vscode-button-group> Demo + + + + + + + +
+

Basic example

+ + +

+ + 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-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; diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 3dfb0bb86..0a1f98a9c 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; } @@ -137,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, 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 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;