diff --git a/CHANGELOG.md b/CHANGELOG.md index f533b2c93..8c0335cce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) +## [Unreleased] + +### Added + +- **Button**: Add the ability to modify the icon animation parameters. +- **Button**: Align and arrange any content added through the main slot. + ## [1.6.2] - 2024-10-07 ### Fixed diff --git a/dev/vscode-button.html b/dev/vscode-button.html index 268994c98..28c23270b 100644 --- a/dev/vscode-button.html +++ b/dev/vscode-button.html @@ -5,43 +5,81 @@ <vscode-button> Demo - - +
-
-

Basic example

-
- - Enabled - Hello World - Disabled - Disabled - Icons - Commit - - - -
-
+

Basic example

+ + + Enabled + Hello World + Disabled + Disabled + Icons + Commit + + + + +

Rich content

+ + + + Red + + + Green + + + Blue + + + + Loading + + Sync + +
diff --git a/package-lock.json b/package-lock.json index 8668f9816..4088f9056 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/node": "^22.6.1", "@typescript-eslint/eslint-plugin": "^8.7.0", "@typescript-eslint/parser": "^8.7.0", - "@vscode-elements/webview-playground": "^1.1.1", + "@vscode-elements/webview-playground": "^1.1.2", "@vscode/codicons": "^0.0.36", "@web/dev-server": "^0.4.6", "@web/dev-server-esbuild": "^1.0.2", @@ -3959,9 +3959,9 @@ } }, "node_modules/@vscode-elements/webview-playground": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.1.1.tgz", - "integrity": "sha512-mr/d2cYF7ABxdMKafd4UhlgN58fdlQ4MEfGZe2pEaAKprRHOw9XrvAleDws0s70XqX7srHC4dJ6hbUI0DfKi4A==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.1.2.tgz", + "integrity": "sha512-C/OWpAblhZlmdCf5RaK0KQjsmlbxxtcH+esbB4B1F5yPZevbNLLTVAeZTf8lD+adKIO4KmKFW2RS1qkalYW5WQ==", "dev": true, "license": "MIT" }, @@ -14739,9 +14739,9 @@ } }, "@vscode-elements/webview-playground": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.1.1.tgz", - "integrity": "sha512-mr/d2cYF7ABxdMKafd4UhlgN58fdlQ4MEfGZe2pEaAKprRHOw9XrvAleDws0s70XqX7srHC4dJ6hbUI0DfKi4A==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.1.2.tgz", + "integrity": "sha512-C/OWpAblhZlmdCf5RaK0KQjsmlbxxtcH+esbB4B1F5yPZevbNLLTVAeZTf8lD+adKIO4KmKFW2RS1qkalYW5WQ==", "dev": true }, "@vscode/codicons": { diff --git a/package.json b/package.json index 1cf8b24cf..2154f817b 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "@types/node": "^22.6.1", "@typescript-eslint/eslint-plugin": "^8.7.0", "@typescript-eslint/parser": "^8.7.0", - "@vscode-elements/webview-playground": "^1.1.1", + "@vscode-elements/webview-playground": "^1.1.2", "@vscode/codicons": "^0.0.36", "@web/dev-server": "^0.4.6", "@web/dev-server-esbuild": "^1.0.2", diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 27f841d1d..eec3a9be2 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -5,7 +5,6 @@ const styles: CSSResultGroup = [ defaultStyles, css` :host { - align-items: center; background-color: var(--vscode-button-background); border-color: var(--vscode-button-border, var(--vscode-button-background)); border-style: solid; @@ -76,6 +75,20 @@ const styles: CSSResultGroup = [ background-color: var(--vscode-button-secondaryBackground); } + ::slotted(*) { + display: inline-block; + margin-left: 4px; + margin-right: 4px; + } + + ::slotted(*:first-child) { + margin-left: 0; + } + + ::slotted(vscode-icon) { + color: inherit; + } + .wrapper { align-items: center; box-sizing: border-box; @@ -86,7 +99,9 @@ const styles: CSSResultGroup = [ } slot { - display: block; + align-items: center; + display: flex; + height: 100%; } .icon { diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts index 4cb4843af..71063d9c7 100644 --- a/src/vscode-button/vscode-button.ts +++ b/src/vscode-button/vscode-button.ts @@ -4,6 +4,7 @@ import {classMap} from 'lit/directives/class-map.js'; import {VscElement} from '../includes/VscElement.js'; import '../vscode-icon/index.js'; import styles from './vscode-button.styles.js'; +import {ifDefined} from 'lit/directives/if-defined.js'; /** * @fires vsc-click Dispatched only when button is not in disabled state. @@ -53,12 +54,40 @@ export class VscodeButton extends VscElement { @property() icon = ''; + /** + * Spin property for the icon + */ + @property({type: Boolean, reflect: true, attribute: 'icon-spin'}) + iconSpin? = false; + + /** + * Duration property for the icon + */ + @property({type: Number, reflect: true, attribute: 'icon-spin-duration'}) + iconSpinDuration?: number; + /** * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label */ @property({attribute: 'icon-after'}) iconAfter = ''; + /** + * Spin property for the after icon + */ + @property({type: Boolean, reflect: true, attribute: 'icon-after-spin'}) + iconAfterSpin = false; + + /** + * Duration property for the after icon + */ + @property({ + type: Number, + reflect: true, + attribute: 'icon-after-spin-duration', + }) + iconAfterSpinDuration?: number; + @property({type: Boolean, reflect: true}) focused = false; @@ -196,12 +225,19 @@ export class VscodeButton extends VscElement { }; const iconElem = hasIcon - ? html`` + ? html`` : nothing; const iconAfterElem = hasIconAfter ? html`` : nothing;