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

Comparing version 1.0.1 to 1.0.2

anypoint-button-base.js

@@ -32,3 +32,7 @@ import { LitElement } from 'lit-element';
        */
-      noink: { type: Boolean }
+      noink: { type: Boolean },
+      /**
+       * Renders the button as a Anypoint styled button.
+       */
+      legacy: { type: Boolean, reflect: true }
     };
@@ -57,2 +61,25 @@ }
 
+  get legacy() {
+    return this._legacy;
+  }
+
+  set legacy(value) {
+    if (this._setChanged('legacy', value)) {
+      this._calculateElevation();
+    }
+  }
+
+  get elevation() {
+    return this._elevation;
+  }
+
+  set elevation(value) {
+    if (!value) {
+      value = 0;
+    }
+    if (this._setChanged('elevation', value)) {
+      this.setAttribute('elevation', String(value));
+    }
+  }
+
   constructor() {
@@ -65,3 +92,3 @@ super();
     let e = 0;
-    if (this.emphasis === 'high') {
+    if (this.emphasis === 'high' && !this.legacy) {
       if (this.toggles && this.active) {
@@ -68,0 +95,0 @@ e = 2;

anypoint-button.js

@@ -36,3 +36,3 @@ import { html, css } from 'lit-element';
       border-radius: var(--anypoint-button-border-radius, 3px);
-      text-transform: var(--anypoint-button-text-transform);
+      text-transform: var(--anypoint-button-text-transform, uppercase);
     }
@@ -95,3 +95,3 @@
     :host(:not([pressed])[emphasis="medium"][active]) {
-      background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
+      background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(94, 102, 249, 0.16));
     }
@@ -120,2 +120,6 @@
 
+    :host(:not([pressed])[emphasis="high"][active]) {
+      background-color: var(--anypoint-button-emphasis-high-active-background-color, var(--anypoint-color-indigo3));
+    }
+
     :host([elevation="1"]) {
@@ -138,2 +142,31 @@ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     }
+
+    :host([legacy]) {
+      background-color: var(--anypoint-button-background-color, var(--anypoint-color-primary)) !important;
+      color: var(--anypoint-button-color, var(--anypoint-color-tertiary)) !important;
+      border-radius: 0;
+      text-transform: var(--anypoint-button-text-transform, initial);
+    }
+
+    :host([legacy]:hover),
+    :host([legacy]:focus) {
+      background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue2)) !important;
+    }
+
+    :host([legacy][pressed]) {
+      background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue4)) !important;
+    }
+
+    :host([legacy]) paper-ripple {
+      display: none;
+    }
+
+    :host([legacy][disabled]) {
+      background: var(--anypoint-button-disabled-background-color, #eaeaea) !important;
+      color: var(--anypoint-button-disabled-color, #a8a8a8) !important;
+    }
+
+    :host ::slotted(*) {
+      margin: 0 4px;
+    }
     `;
@@ -157,3 +190,5 @@ }
     }
-    super.connectedCallback();
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
   }
@@ -160,0 +195,0 @@

anypoint-icon-button.js

@@ -22,9 +22,5 @@ import { html, css } from 'lit-element';
       height: 40px;
+      outline: none;
     }
 
-    :host(:focus),
-    :host(:hover) {
-
-    }
-
     paper-ripple {
@@ -35,15 +31,10 @@ opacity: 0.6;
 
-    :host > ::slotted(button) {
-      position: relative;
-      width: 100%;
-      height: 100%;
+    :host ::slotted(*) {
       margin: 0;
       padding: 0;
-      background: transparent;
-      outline: none;
-      vertical-align: middle;
+      color: var(--anypoint-icon-button-color, var(--anypoint-color-primary));
+    }
+
+    .icon {
       cursor: pointer;
-      /* NOTE: Both values are needed, since some phones require the value to be "transparent". */
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      -webkit-tap-highlight-color: transparent;
       border-radius: 50%;
@@ -53,34 +44,50 @@ border-width: 1px;
       border-color: transparent;
-      color: var(--anypoint-icon-button-color, var(--anypoint-color-primary));
+
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    :host > ::slotted(button[disabled]),
-    :host([disabled]) > ::slotted(button) {
-      color: var(--anypoint-icon-button-disabled-color, #a8a8a8) !important;
+    :host([disabled]) {
       pointer-events: none;
       cursor: auto;
     }
+
+    :host([disabled]) ::slotted(*) {
+      color: var(--anypoint-icon-button-disabled-color, #a8a8a8) !important;
+    }
+
     /* Low emhasis styles */
-    :host([emphasis="low"]) > ::slotted(button:not(:disabled)) {
+    :host([emphasis="low"]:not(:disabled)) .icon {
       background-color: none;
       border-color: none;
-      color: var(--anypoint-icon-button-emphasis-low-color, var(--anypoint-color-primary));
       box-shadow: none !important;
     }
 
-    :host([emphasis="low"]) > ::slotted(button:hover) {
+    :host([emphasis="low"]:not(:disabled)) ::slotted(*) {
+      color: var(--anypoint-icon-button-emphasis-low-color, var(--anypoint-color-primary));
+    }
+
+    :host([emphasis="low"]:hover) .icon {
       background-color: var(--anypoint-icon-button-emphasis-low-hover-background-color, rgba(0, 162, 223, .08));
     }
 
-    :host([emphasis="low"]) > ::slotted(button:focus) {
+    :host([emphasis="low"][focused]) .icon {
       background-color: var(--anypoint-icon-button-emphasis-low-focus-background-color, rgba(0, 162, 223, .12));
     }
 
-    :host([emphasis="low"]) > ::slotted(button:active),
-    :host([emphasis="low"][active]) > ::slotted(button) {
+    :host([emphasis="low"][active]) .icon {
       background-color: var(--anypoint-icon-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
+    }
+
+    :host([emphasis="low"][active]) ::slotted(*) {
       color: var(--anypoint-icon-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
     }
+
     /* Medium emphasis styles */
-    :host([emphasis="medium"]) > ::slotted(button) {
+    :host([emphasis="medium"]) .icon {
       border-color: var(--anypoint-icon-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue1));
@@ -90,42 +97,57 @@ box-shadow: none !important;
 
-    :host([emphasis="medium"][disabled]) > ::slotted(button),
-    :host([emphasis="medium"]) > ::slotted(button[disabled]) {
-      color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
+    :host([emphasis="medium"][disabled]) .icon {
       border-color: var(--anypoint-icon-button-disabled-color, var(--anypoint-color-aluminum4));
     }
 
-    :host([emphasis="medium"]) > ::slotted(button:hover) {
+    :host([emphasis="medium"][disabled]) ::slotted(*) {
+      color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
+    }
+
+    :host([emphasis="medium"]:hover) .icon {
       background-color: var(--anypoint-icon-button-emphasis-medium-hover-background-color, rgba(0, 162, 223, .06));
     }
 
-    :host([emphasis="medium"]) > ::slotted(button:focus) {
+    :host([emphasis="medium"][focused]) .icon {
       background-color: var(--anypoint-icon-button-emphasis-medium-focus-background-color, rgba(0, 162, 223, .08));
-      color: var(--anypoint-icon-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
       border-color: var(--anypoint-icon-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue2));
     }
 
-    :host([emphasis="medium"]) > ::slotted(button:active),
-    :host([emphasis="medium"][active]) > ::slotted(button) {
-      background-color: var(--anypoint-icon-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
+    :host([emphasis="medium"][focused]) ::slotted(*) {
+      color: var(--anypoint-icon-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
     }
+
+    :host([emphasis="medium"][active]) .icon {
+      background-color: var(--anypoint-icon-button-emphasis-low-active-background-color, rgba(94, 102, 249, 0.16));
+    }
     /* High emphasis styles */
-    :host([emphasis="high"]) > ::slotted(button) {
+
+    :host([emphasis="high"]) .icon {
       transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
       will-change: box-shadow;
       background-color: var(--anypoint-icon-button-emphasis-high-background-color, var(--anypoint-color-primary));
+    }
+
+    :host([emphasis="high"]) ::slotted(*) {
       color: var(--anypoint-icon-button-emphasis-high-color, var(--anypoint-color-tertiary));
     }
 
-    :host([emphasis="high"][disabled]) > ::slotted(button),
-    :host([emphasis="high"]) > ::slotted(button[disabled]) {
+    :host([emphasis="high"][disabled]) .icon {
       background: var(--anypoint-icon-button-disabled-background-color, #eaeaea);
-      color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
       box-shadow: none;
     }
 
-    :host([emphasis="high"]) > ::slotted(button:hover) {
+    :host([emphasis="high"][disabled]) ::slotted(*) {
+      color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
+    }
+
+    :host([emphasis="high"]:hover) .icon {
       background-color: var(--anypoint-icon-button-emphasis-high-hover-background-color, rgba(0, 162, 223, 0.87));
     }
 
-    :host([elevation="1"]) > ::slotted(button) {
+    :host(:not([pressed])[emphasis="high"][active]) .icon {
+      background-color:
+        var(--anypoint-icon-button-emphasis-high-active-background-color, var(--anypoint-color-indigo3));
+    }
+
+    :host([elevation="1"]) .icon {
       box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -136,4 +158,4 @@ 0 1px 5px 0 rgba(0, 0, 0, 0.12),
 
-    :host([elevation="2"]) > ::slotted(button),
-    :host([elevation][emphasis="high"]) > ::slotted(button:focus) {
+    :host([elevation="2"]) .icon,
+    :host([elevation][emphasis="high"][focused]) > .icon {
       box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -144,3 +166,3 @@ 0 1px 10px 0 rgba(0, 0, 0, 0.12),
 
-    :host([elevation="3"]) > ::slotted(button) {
+    :host([elevation="3"]) .icon {
       box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
@@ -152,124 +174,68 @@ 0 1px 18px 0 rgba(0, 0, 0, 0.12),
   }
+
   render() {
-    return html`<slot></slot>`;
+    return html`
+      <div class="icon">
+        <slot></slot>
+        <paper-ripple class="circle" center .noink="${this.noink}"></paper-ripple>
+      </div>
+    `;
   }
 
-  get noink() {
-    return this._noink;
+  get _ripple() {
+    return this.shadowRoot.querySelector('paper-ripple');
   }
 
-  set noink(value) {
-    if (this._setChanged('noink', value)) {
-      this._noinkChanged(value);
-    }
-  }
-
-  constructor() {
-    super();
-    this._rippleDown = this._rippleDown.bind(this);
-    this._rippleUp = this._rippleUp.bind(this);
-  }
-
   connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('mousedown', this._rippleDown);
-    this.addEventListener('mouseup', this._rippleUp);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('mousedown', this._rippleDown);
-    this.removeEventListener('mouseup', this._rippleUp);
-  }
-
-  firstUpdated() {
-    const slot = this.shadowRoot.querySelector('slot');
-    const nodes = slot.assignedNodes().filter((node) => node.nodeType === 1);
-    const button = nodes[0];
-    if (!button) {
-      return;
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button');
     }
-    this._rippleContainer = button;
-    button.addEventListener('focus', this._rippleDown);
-    button.addEventListener('blur', this._rippleUp);
-  }
-
-  _ensureRipple(e) {
-    if (!this.hasRipple()) {
-      this._ripple = this._createRipple();
-      this._ripple.noink = this.noink;
-      this._ripple.center = true;
-      this._ripple.classList.add('circle');
-      const rippleContainer = this._rippleContainer || this.shadowRoot;
-      if (rippleContainer) {
-        rippleContainer.appendChild(this._ripple);
-      }
-      if (e) {
-        const domContainer = this._rippleContainer || this;
-        const target = e.target;
-        if (domContainer.contains(/** @type {Node} */ (target))) {
-          this._ripple.uiDownAction(e);
-        }
-      }
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
     }
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
   }
 
-  getRipple() {
-    this._ensureRipple();
-    return this._ripple;
+  _spaceKeyDownHandler(e) {
+    super._spaceKeyDownHandler(e);
+    this._enterDownHandler();
   }
 
-  hasRipple() {
-    return Boolean(this._ripple);
+  _spaceKeyUpHandler(e) {
+    super._spaceKeyUpHandler(e);
+    this._enterUpHandler();
   }
 
-  _createRipple() {
-    const element = /** @type {!PaperRippleElement} */ (
-        document.createElement('paper-ripple'));
-    return element;
+  _buttonStateChanged() {
+    this._calculateElevation();
   }
 
-  _noinkChanged(noink) {
-    if (this.hasRipple()) {
-      this._ripple.noink = noink;
+  _keyDownHandler(e) {
+    super._keyDownHandler(e);
+    if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.keyCode === 13) {
+      this._enterDownHandler();
     }
   }
 
-  _rippleDown() {
-    this.getRipple().uiDownAction();
-  }
-
-  _rippleUp() {
-    this.getRipple().uiUpAction();
-  }
-
-  _downHandler(e) {
-    super._downHandler(e);
-    if (this.pressed) {
-      this._ensureRipple(e);
+  _keyUpHandler(e) {
+    super._keyUpHandler(e);
+    if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.keyCode === 13) {
+      this._enterUpHandler();
     }
   }
 
-  _upHandler(e) {
-    super._upHandler(e);
-    if (this.hasRipple()) {
-      this._ripple.uiUpAction();
+  _enterDownHandler() {
+    this._calculateElevation();
+    if (!this._ripple.animating) {
+      this._ripple.uiDownAction();
     }
   }
 
-  _spaceKeyDownHandler(e) {
-    super._spaceKeyDownHandler(e);
+  _enterUpHandler() {
     this._calculateElevation();
+    this._ripple.uiUpAction();
   }
-
-  _spaceKeyUpHandler(e) {
-    super._spaceKeyUpHandler(e);
-    this._calculateElevation();
-    this.click();
-  }
-
-  _buttonStateChanged() {
-    this._calculateElevation();
-  }
 }
 window.customElements.define('anypoint-icon-button', AnypointIconButton);

package.json

 {
   "name": "@anypoint-web-components/anypoint-button",
   "description": "Anypoint styled button.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "Apache-2.0",
@@ -31,31 +31,32 @@ "main": "anypoint-button.js",
     "@polymer/paper-ripple": "^3.0.1",
-    "lit-element": "^2.0.1"
+    "lit-element": "^2.2.1"
   },
   "devDependencies": {
-    "@advanced-rest-client/a11y-suite": "^1.0.0",
-    "@advanced-rest-client/arc-demo-helper": "^1.0.3",
-    "@advanced-rest-client/testing-karma-sl": "^1.0.2",
+    "@advanced-rest-client/arc-demo-helper": "^1.0.12",
+    "@advanced-rest-client/eslint-config": "^1.0.6",
+    "@advanced-rest-client/prettier-config": "^0.1.0",
+    "@advanced-rest-client/testing-karma-sl": "^1.0.3",
+    "@anypoint-web-components/anypoint-checkbox": "^1.0.0",
     "@anypoint-web-components/anypoint-icons": "^1.0.0",
     "@anypoint-web-components/anypoint-styles": "^1.0.0-preview.1",
-    "@commitlint/cli": "^7.0.0",
+    "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^7.0.0",
-    "@open-wc/eslint-config": "^0.4.1",
-    "@open-wc/prettier-config": "^0.1.0",
-    "@open-wc/testing": "^0.11.1",
-    "@open-wc/testing-karma": "^2.0.6",
-    "@polymer/gen-typescript-declarations": "^1.6.1",
+    "@open-wc/testing": "^2.2.8",
+    "@open-wc/testing-karma": "^3.1.13",
+    "@polymer/gen-typescript-declarations": "^1.6.2",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/iron-test-helpers": "^3.0.1",
-    "accessibility-developer-tools": "^2.12.0",
+    "deepmerge": "^4.0.0",
+    "es-dev-server": "^1.10.4",
     "husky": "^1.0.0",
-    "lint-staged": "^8.0.0",
-    "owc-dev-server": "^1.0.0",
-    "sinon": "^7.3.2",
-    "webpack-merge": "^4.1.5"
+    "karma": "^4.2.0",
+    "lint-staged": "^9.2.1",
+    "sinon": "^7.4.1"
   },
   "scripts": {
     "test": "karma start --coverage",
-    "update-types": "gen-typescript-declarations --deleteExisting --outDir .",
-    "start": "owc-dev-server --app-index demo/index.html --open --watch",
+    "update-types": "gen-typescript-declarations --deleteExisting --outDir . --verify",
+    "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
+    "start:compatibility": "es-dev-server --app-index demo/index.html --compatibility all --node-resolve --open --watch",
     "lint:eslint": "eslint --ext .js,.html .",
@@ -62,0 +63,0 @@ "format:eslint": "eslint --ext .js,.html . --fix",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24679

increased by1.45%

Lines of code

562

increased by2.18%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

8

decreased by-27.27%

Dependency changes

• Updatedlit-element@^2.2.1