@spectrum-web-components/button - npm Package Compare versions

Comparing version 0.4.6 to 0.4.7

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.4.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.4.6...@spectrum-web-components/button@0.4.7) (2020-04-07)
+
+### Bug Fixes
+
+-   **button:** add "toggles" attribute to action button ([3e2d80c](https://github.com/adobe/spectrum-web-components/commit/3e2d80c5d004eb13b6523ee7e71d550d5e468d07))
+
 ## [0.4.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.4.5...@spectrum-web-components/button@0.4.6) (2020-03-11)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -6,2 +6,3 @@ {
       "name": "sp-button",
+      "path": "./src/button.ts",
       "description": "A Spectrum button control.",
@@ -106,5 +107,6 @@ "attributes": [
       "name": "sp-action-button",
+      "path": "./src/index.ts",
       "attributes": [
         {
-          "name": "quiet",
+          "name": "hold-affordance",
           "type": "boolean",
@@ -119,3 +121,3 @@ "default": "false"
         {
-          "name": "hold-affordance",
+          "name": "toggles",
           "type": "boolean",
@@ -125,2 +127,7 @@ "default": "false"
         {
+          "name": "quiet",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "href",
@@ -141,4 +148,4 @@ "description": "Supplies an address that the browser will navigate to when this button is\nclicked",
         {
-          "name": "quiet",
-          "attribute": "quiet",
+          "name": "holdAffordance",
+          "attribute": "hold-affordance",
           "type": "boolean",
@@ -154,4 +161,4 @@ "default": "false"
         {
-          "name": "holdAffordance",
-          "attribute": "hold-affordance",
+          "name": "toggles",
+          "attribute": "toggles",
           "type": "boolean",
@@ -161,2 +168,8 @@ "default": "false"
         {
+          "name": "quiet",
+          "attribute": "quiet",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "href",
@@ -204,2 +217,3 @@ "attribute": "href",
       "name": "sp-clear-button",
+      "path": "./src/index.ts",
       "attributes": [
@@ -277,2 +291,3 @@ {
       "name": "sp-button",
+      "path": "./src/index.ts",
       "description": "A Spectrum button control.",
@@ -279,0 +294,0 @@ "attributes": [

lib/action-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/action-button.d.ts

@@ -1,8 +0,12 @@
-import { CSSResultArray } from 'lit-element';
+import { CSSResultArray, PropertyValues } from 'lit-element';
 import { ButtonBase } from './button-base.js';
 export declare class ActionButton extends ButtonBase {
+    static get styles(): CSSResultArray;
+    holdAffordance: boolean;
+    selected: boolean;
+    toggles: boolean;
     quiet: boolean;
-    selected: boolean;
-    holdAffordance: boolean;
-    static readonly styles: CSSResultArray;
+    constructor();
+    private onClick;
+    protected updated(changes: PropertyValues): void;
 }

lib/action-button.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -18,6 +18,14 @@ you may not use this file except in compliance with the License. You may obtain a copy
     constructor() {
-        super(...arguments);
+        super();
+        this.holdAffordance = false;
+        this.selected = false;
+        this.toggles = false;
         this.quiet = false;
-        this.selected = false;
-        this.holdAffordance = false;
+        this.onClick = () => {
+            if (!this.toggles) {
+                return;
+            }
+            this.selected = !this.selected;
+        };
+        this.addEventListener('click', this.onClick);
     }
@@ -27,6 +35,12 @@ static get styles() {
     }
+    updated(changes) {
+        super.updated(changes);
+        if (this.toggles && changes.has('selected')) {
+            this.focusElement.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
+        }
+    }
 }
 __decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "quiet", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
+], ActionButton.prototype, "holdAffordance", void 0);
 __decorate([
@@ -36,4 +50,7 @@ property({ type: Boolean, reflect: true })
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
-], ActionButton.prototype, "holdAffordance", void 0);
+    property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "toggles", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "quiet", void 0);
 //# sourceMappingURL=action-button.js.map

lib/button-base.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/button-base.d.ts

@@ -8,3 +8,3 @@ import { TemplateResult, CSSResultArray } from 'lit-element';
 export declare class ButtonBase extends ButtonBase_base {
-    static readonly styles: CSSResultArray;
+    static get styles(): CSSResultArray;
     /**
@@ -18,8 +18,8 @@ * Supplies an address that the browser will navigate to when this button is
     protected iconRight: boolean;
-    private readonly hasIcon;
-    private readonly hasLabel;
-    readonly focusElement: HTMLElement;
-    protected readonly buttonContent: TemplateResult[];
+    private get hasIcon();
+    private get hasLabel();
+    get focusElement(): HTMLElement;
+    protected get buttonContent(): TemplateResult[];
     protected render(): TemplateResult;
 }
 export {};

lib/button-base.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/button.d.ts

@@ -20,3 +20,3 @@ import { CSSResultArray } from 'lit-element';
     quiet: boolean;
-    static readonly styles: CSSResultArray;
+    static get styles(): CSSResultArray;
 }

lib/button.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/clear-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/clear-button.d.ts

 import { CSSResultArray, TemplateResult } from 'lit-element';
 import { ButtonBase } from './button-base.js';
 export declare class ClearButton extends ButtonBase {
-    static readonly styles: CSSResultArray;
+    static get styles(): CSSResultArray;
     /**
@@ -9,3 +9,3 @@ * The visual variant to apply to this button.
     variant: 'overBackground' | '';
-    protected readonly buttonContent: TemplateResult[];
+    protected get buttonContent(): TemplateResult[];
 }

lib/clear-button.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/field-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/index.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/spectrum-action-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/spectrum-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/spectrum-clear-button.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

lib/spectrum-fieldbutton.css.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.6",
+    "version": "0.4.7",
     "description": "",
@@ -45,7 +45,7 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.4.4",
-        "@spectrum-web-components/shared": "^0.4.3",
+        "@spectrum-web-components/icon": "^0.4.5",
+        "@spectrum-web-components/shared": "^0.4.4",
         "tslib": "^1.10.0"
     },
-    "gitHead": "d5b370be9515cb1458c436fd4b7c8689e2bfb933"
+    "gitHead": "c2eb86ecfa01469b723cbf64163ae7f8e4203119"
 }

src/action-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/action-button.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -13,3 +13,3 @@ you may not use this file except in compliance with the License. You may obtain a copy
 
-import { CSSResultArray, property } from 'lit-element';
+import { CSSResultArray, property, PropertyValues } from 'lit-element';
 import { ButtonBase } from './button-base.js';
@@ -19,14 +19,39 @@ import buttonStyles from './action-button.css.js';
 export class ActionButton extends ButtonBase {
-    @property({ type: Boolean, reflect: true })
-    public quiet = false;
+    public static get styles(): CSSResultArray {
+        return [...super.styles, buttonStyles];
+    }
 
+    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
+    public holdAffordance = false;
+
     @property({ type: Boolean, reflect: true })
     public selected = false;
 
-    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
-    public holdAffordance = false;
+    @property({ type: Boolean, reflect: true })
+    public toggles = false;
 
-    public static get styles(): CSSResultArray {
-        return [...super.styles, buttonStyles];
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
+    constructor() {
+        super();
+        this.addEventListener('click', this.onClick);
     }
+
+    private onClick = (): void => {
+        if (!this.toggles) {
+            return;
+        }
+        this.selected = !this.selected;
+    };
+
+    protected updated(changes: PropertyValues): void {
+        super.updated(changes);
+        if (this.toggles && changes.has('selected')) {
+            this.focusElement.setAttribute(
+                'aria-pressed',
+                this.selected ? 'true' : 'false'
+            );
+        }
+    }
 }

src/button-base.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/button-base.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/button.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/clear-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/clear-button.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/field-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/index.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/spectrum-action-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/spectrum-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/spectrum-clear-button.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/spectrum-config.js

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the 'License');
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

src/spectrum-fieldbutton.css.ts

 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2020 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4,0 +4,0 @@ you may not use this file except in compliance with the License. You may obtain a copy

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

439202

increased by0.75%

Lines of code

4355

increased by1.33%

Dependency changes

• Updated@spectrum-web-components/icon@^0.4.5

• Updated@spectrum-web-components/shared@^0.4.4