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

Comparing version 1.0.0 to 1.0.1

anypoint-button.d.ts

@@ -15,5 +15,5 @@ /**
 
-import {LitElement, html, css} from 'lit-element';
+import {html, css} from 'lit-element';
 
-import {ButtonStateMixin, ControlStateMixin} from '@anypoint-web-components/anypoint-control-mixins/anypoint-control-mixins.js';
+import {AnypointButtonBase} from './anypoint-button-base.js';
 
@@ -26,83 +26,9 @@ declare namespace AnypointUi {
    */
-  class AnypointButton {
-
-    /**
-     * If true, the button should be styled with a shadow according to Material Design.
-     * This has no effect when theme is not set to `md`;
-     */
-    raised: boolean|null|undefined;
-
-    /**
-     * If true, the element will not produce a ripple effect when interacted
-     * with via the pointer.
-     */
-    noink: boolean|null|undefined;
-
-    /**
-     * To be used to styles the button according to Material Design
-     * principles. This enables ripple effect, adds border radius, and
-     * enables `raised`property.
-     * By default it renders Anypoint theme. Set to `md` to enable material design.
-     */
-    theme: string|null|undefined;
-    _receivedFocusFromKeyboard: any;
-    readonly canRipple: any;
-
-    /**
-     * A type of the button. Can be one of:
-     * - `primary`
-     * - `secondary`
-     * - `tertiary`
-     * - `danger`
-     *
-     * You can set own type but the style has to be applied within the
-     * light DOM or you have to create own CSS variabnle and place it with
-     * every occurence of the button.
-     *
-     * ```html
-     * <style>
-     * anypoint-button[type="my-type"] {
-     *  background-color: var(--anypopint-button-my-type, red);
-     * }
-     * </style>
-     * <anypoint-button type="myu-type">Click me</anypoint-button>
-     * ```
-     */
-    type: String|null;
-
-    /**
-     * The z-depth of this element, from 0-5. Setting to 0 will remove the
-     * shadow, and each increasing number greater than 0 will be "deeper"
-     * than the last.
-     * This is for MD implementation.
-     */
-    elevation: number|null|undefined;
-
-    /**
-     * Button emphasis in the UI.
-     *
-     * Possible values:
-     * - `low` - Text buttons are typically used for less important actions.
-     * - `medium` - Outlined buttons are used for more emphasis than text buttons due to the stroke.
-     * - `high` - Contained buttons have more emphasis, as they use use a color fill and shadow.
-     *
-     * Emphasis related CSS variables override default ones.
-     */
-    emphasis: string|null|undefined;
+  class AnypointButton extends AnypointButtonBase {
+    readonly _ripple: any;
+    constructor();
     render(): any;
     connectedCallback(): void;
-    _buttonStateChanged(): void;
-    _controlStateChanged(): void;
-    _calculateElevation(): void;
-    _computeKeyboardClass(focus: any): void;
     _spaceKeyDownHandler(e: any): void;
     _spaceKeyUpHandler(e: any): void;
-    _downHandler(e: any): void;
-    _upHandler(e: any): void;
-    _ensureRipple(e: any): void;
-    getRipple(): any;
-    hasRipple(): any;
-    _createRipple(): any;
-    _noinkChanged(noink: any): void;
-    _themeChanged(theme: any): void;
   }
@@ -109,0 +35,0 @@ }

anypoint-button.js

@@ -1,6 +0,3 @@
-import { LitElement, html, css } from 'lit-element';
-import {
-  ButtonStateMixin,
-  ControlStateMixin
-} from '@anypoint-web-components/anypoint-control-mixins/anypoint-control-mixins.js';
+import { html, css } from 'lit-element';
+import { AnypointButtonBase } from './anypoint-button-base.js';
 import '@polymer/paper-ripple/paper-ripple.js';
@@ -16,3 +13,3 @@ /**
  */
-class AnypointButton extends ControlStateMixin(ButtonStateMixin(LitElement)) {
+class AnypointButton extends AnypointButtonBase {
   static get styles() {
@@ -28,8 +25,3 @@ return css`:host {
       background: transparent;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      -webkit-tap-highlight-color: transparent;
       outline-width: 0;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
       user-select: none;
@@ -39,8 +31,10 @@ cursor: pointer;
       padding: 0.7em 0.57em;
+      font-size: var(--anypoint-button-font-size, 15px);
       background-color: var(--anypoint-button-background-color, inherit);
-      color: var(--anypoint-button-color, inherit);
+      color: var(--anypoint-button-color, var(--anypoint-color-primary));
       border-width: 1px;
       border-color: var(--anypoint-button-border-color, transparent);
       border-style: solid;
-      border-radius: var(--anypoint-button-border-radius, 2px);
+      border-radius: var(--anypoint-button-border-radius, 3px);
+      text-transform: var(--anypoint-button-text-transform);
     }
@@ -56,97 +50,73 @@
 
-    :host(.keyboard-focus) {
-      font-weight: bold;
-    }
-
-    :host(:not([type])[active]) {
-      font-weight: bold;
-      background-color:
-        var(--anypoint-button-active-background-color, var(--anypoint-button-background-color, initial));
-      color: var(--anypoint-button-active-color, var(--anypoint-button-color, initial));
-    }
-
-    :host(:not([active]):not([emphasis]):not([type])[focused]) {
-      font-weight: bold;
-      background-color:
-        var(--anypoint-button-focused-background-color, var(--anypoint-button-background-color, initial));
-      color: var(--anypoint-button-focused-color, var(--anypoint-button-color, initial));
-    }
-
     :host([disabled]) {
-      background: var(--anypoint-button-disabled-background-color, #eaeaea);
-      color: var(--anypoint-button-disabled-color, #a8a8a8);
       cursor: auto;
       pointer-events: none;
-      border: none;
     }
 
-    :host([type="primary"]),
-    :host([type="primary"][focused]) {
-      background-color: var(--anypoint-color-primary);
-      color: #fff;
+    :host([emphasis="low"]) {
+      box-shadow: none !important;
     }
 
-    :host([type][focused]) {
-      font-weight: bold;
+    :host([emphasis="low"][disabled]) {
+      color: var(--anypoint-button-disabled-color, #a8a8a8);
     }
 
-    :host([type="secondary"]),
-    :host([type="secondary"][focused]) {
-      background-color: var(--anypoint-color-secondary);
-      color: #fff;
+    :host(:not([pressed])[emphasis="low"]:hover) {
+      background-color: var(--anypoint-button-emphasis-low-hover-background-color, rgba(0, 162, 223, .08));
     }
 
-    :host([type="tertiary"]),
-    :host([type="tertiary"][focused]) {
-      background-color: var(--anypoint-color-aluminum5);
-      color: #fff;
+    :host(:not([pressed])[emphasis="low"][focused]) {
+      background-color: var(--anypoint-button-emphasis-low-focus-background-color, rgba(0, 162, 223, .12));
+      color: var(--anypoint-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
     }
 
-    :host([type="danger"]),
-    :host([type="danger"][focused]) {
-      background-color: var(--anypoint-color-danger);
-      color: #fff;
+    :host(:not([pressed])[emphasis="low"][active]) {
+      background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
     }
 
-    :host([active][type="primary"]),
-    :host([pressed][type="primary"]) {
-      background-color: var(--anypoint-color-coreBlue4);
+    :host([emphasis="medium"]) {
+      border-color: var(--anypoint-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue1));
+      box-shadow: none !important;
     }
 
-    :host([active][type="secondary"]),
-    :host([pressed][type="secondary"]) {
-      background-color: var(--anypoint-color-coreBlue5);
+    :host([emphasis="medium"][disabled]) {
+      color: var(--anypoint-button-disabled-color, #a8a8a8);
+      border-color: var(--anypoint-button-disabled-color, var(--anypoint-color-aluminum4));
     }
 
-    :host([active][type="tertiary"]),
-    :host([pressed][type="tertiary"]) {
-      background-color: var(--anypoint-color-steel2);
+    :host(:not([pressed])[emphasis="medium"]:hover) {
+      background-color: var(--anypoint-button-emphasis-medium-hover-background-color, rgba(0, 162, 223, .06));
     }
 
-    :host([active][type="danger"]),
-    :host([pressed][type="danger"]) {
-      background-color: #8c031a;
+    :host(:not([pressed])[emphasis="medium"][focused]) {
+      background-color: var(--anypoint-button-emphasis-medium-focus-background-color, rgba(0, 162, 223, .08));
+      color: var(--anypoint-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
+      border-color: var(--anypoint-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue2));
     }
 
-    :host([disabled][raised]) {
-      background: #eaeaea;
+    :host(:not([pressed])[emphasis="medium"][active]) {
+      background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
     }
 
-    :host([animated]) {
+    :host([emphasis="high"]) {
       transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      will-change: box-shadow;
+      background-color: var(--anypoint-button-emphasis-high-background-color, var(--anypoint-color-primary));
+      color: var(--anypoint-button-emphasis-high-color, var(--anypoint-color-tertiary));
     }
 
-    paper-ripple {
-      color: var(--anypoint-button-ink-color, var(--paper-button-ink-color));
+    :host([emphasis="high"][disabled]) {
+      background: var(--anypoint-button-disabled-background-color, #eaeaea);
+      color: var(--anypoint-button-disabled-color, #a8a8a8);
+      box-shadow: none;
     }
 
-    :host([raised].keyboard-focus) {
-      font-weight: bold;
+    :host(:not([pressed])[emphasis="high"]:hover) {
+      background-color: var(--anypoint-button-emphasis-high-hover-background-color, rgba(0, 162, 223, 0.87));
     }
 
-    :host(:not([raised]).keyboard-focus) {
-      font-weight: bold;
+    :host(:not([pressed])[emphasis="high"]:focus) {
+      background-color: var(--anypoint-button-emphasis-high-focus-background-color, rgba(0, 162, 223, 0.87));
     }
 
-    /* Material design implementation */
     :host([elevation="1"]) {
@@ -169,139 +139,13 @@ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     }
-
-    :host([elevation="4"]) {
-      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                  0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                  0 5px 5px -3px rgba(0, 0, 0, 0.4);
-    }
-
-    :host([elevation="5"]) {
-      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
-                  0  8px 10px -5px rgba(0, 0, 0, 0.4);
-    }
-
-    :host([emphasis="low"]) {
-      background-color: none;
-      color: var(--anypoint-button-emphasis-low-color, var(--anypoint-button-color, initial));
-    }
-
-    :host([emphasis="medium"]) {
-      background-color: none;
-      border-color: var(--anypoint-button-emphasis-medium-border-color, var(--anypoint-color-primary));
-      color: var(--anypoint-button-emphasis-medium-color, var(--anypoint-color-primary));
-    }
-
-    :host([emphasis="high"]) {
-      background-color: var(--anypoint-button-emphasis-high-background-color, var(--anypoint-color-primary));
-      color: var(--anypoint-button-emphasis-high-color, var(--anypoint-color-tertiary));
-    }
-
-    :host([emphasis][focused]) {
-      font-weight: bold;
-    }`;
+    `;
   }
 
   render() {
-    return html`<slot></slot>`;
+    return html`<slot></slot><paper-ripple .noink="${this.noink}"></paper-ripple>`;
   }
 
-  static get properties() {
-    return {
-      /**
-       * A type of the button. Can be one of:
-       * - `primary`
-       * - `secondary`
-       * - `tertiary`
-       * - `danger`
-       *
-       * You can set own type but the style has to be applied within the
-       * light DOM or you have to create own CSS variabnle and place it with
-       * every occurence of the button.
-       *
-       * ```html
-       * <style>
-       * anypoint-button[type="my-type"] {
-       *  background-color: var(--anypopint-button-my-type, red);
-       * }
-       * </style>
-       * <anypoint-button type="myu-type">Click me</anypoint-button>
-       * ```
-       *
-       * @type {String}
-       */
-      type: { type: String, reflect: true },
-      /**
-       * If true, the button should be styled with a shadow according to Material Design.
-       * This has no effect when theme is not set to `md`;
-       */
-      raised: { type: Boolean, reflect: true },
-      /**
-       * The z-depth of this element, from 0-5. Setting to 0 will remove the
-       * shadow, and each increasing number greater than 0 will be "deeper"
-       * than the last.
-       * This is for MD implementation.
-       */
-      elevation: { type: Number, reflect: true },
-      /**
-       * If true, the element will not produce a ripple effect when interacted
-       * with via the pointer.
-       */
-      noink: { type: Boolean, reflect: true },
-      /**
-       * To be used to styles the button according to Material Design
-       * principles. This enables ripple effect, adds border radius, and
-       * enables `raised`property.
-       * By default it renders Anypoint theme. Set to `md` to enable material design.
-       */
-      theme: { type: String },
-      /**
-       * Button emphasis in the UI.
-       *
-       * Possible values:
-       * - `low` - Text buttons are typically used for less important actions.
-       * - `medium` - Outlined buttons are used for more emphasis than text buttons due to the stroke.
-       * - `high` - Contained buttons have more emphasis, as they use use a color fill and shadow.
-       *
-       * Emphasis related CSS variables override default ones.
-       */
-      emphasis: { type: String, reflect: true }
-    };
+  get _ripple() {
+    return this.shadowRoot.querySelector('paper-ripple');
   }
 
-  get raised() {
-    return this._raised;
-  }
-
-  set raised(value) {
-    this._setChanged('raised', value);
-    this._calculateElevation(value);
-  }
-
-  get noink() {
-    return this._noink;
-  }
-
-  set noink(value) {
-    this._setChanged('noink', value);
-    this._noinkChanged(value);
-  }
-
-  get theme() {
-    return this._theme;
-  }
-
-  set theme(value) {
-    this._setChanged('theme', value);
-    this._themeChanged(value);
-  }
-
-  get _receivedFocusFromKeyboard() {
-    return this.__receivedFocusFromKeyboard || false;
-  }
-
-  set _receivedFocusFromKeyboard(value) {
-    this._setChanged('_receivedFocusFromKeyboard', value);
-    this._computeKeyboardClass(value);
-  }
-
   connectedCallback() {
@@ -317,41 +161,6 @@ if (!this.hasAttribute('role')) {
 
-  _buttonStateChanged() {
-    this._calculateElevation();
-    if (this.focused) {
-      this._ensureRipple();
-    }
-  }
-
-  _controlStateChanged() {
-    super._controlStateChanged();
-    this._calculateElevation();
-  }
-
-  _calculateElevation() {
-    if (!this.raised) {
-      this.elevation = 0;
-      return;
-    }
-    let e = 1;
-    if (this.disabled) {
-      e = 0;
-    } else if (this.active || this.pressed) {
-      e = 4;
-    } else if (this.receivedFocusFromKeyboard) {
-      e = 3;
-    }
-    this.elevation = e;
-  }
-
-  _computeKeyboardClass(focus) {
-    if (focus) {
-      this.classList.add('keyboard-focus');
-    } else {
-      this.classList.remove('keyboard-focus');
-    }
-  }
-
   _spaceKeyDownHandler(e) {
     super._spaceKeyDownHandler(e);
-    if (this.hasRipple()) {
+    this._calculateElevation();
+    if (!this._ripple.animating) {
       this._ripple.uiDownAction();
@@ -363,74 +172,7 @@ }
     super._spaceKeyUpHandler(e);
-    if (this.hasRipple()) {
-      this._ripple.uiUpAction();
-    }
+    this._calculateElevation();
+    this._ripple.uiUpAction();
   }
-
-  _downHandler(e) {
-    super._downHandler(e);
-    if (this.canRipple && this.pressed) {
-      this._ensureRipple(e);
-    }
-  }
-
-  _upHandler(e) {
-    super._upHandler(e);
-    if (this.hasRipple()) {
-      this._ripple.uiUpAction();
-    }
-  }
-
-  _ensureRipple(e) {
-    if (this.canRipple && !this.hasRipple()) {
-      this._ripple = this._createRipple();
-      this._ripple.noink = this.noink;
-      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);
-        }
-      }
-    }
-  }
-
-  getRipple() {
-    this._ensureRipple();
-    return this._ripple;
-  }
-
-  hasRipple() {
-    return Boolean(this._ripple);
-  }
-
-  _createRipple() {
-    const element = /** @type {!PaperRippleElement} */ (
-        document.createElement('paper-ripple'));
-    return element;
-  }
-
-  _noinkChanged(noink) {
-    if (this.hasRipple()) {
-      this._ripple.noink = noink;
-    }
-  }
-
-  get canRipple() {
-    return this.theme === 'md';
-  }
-
-  _themeChanged(theme) {
-    if (theme === 'md') {
-      const radius = getComputedStyle(this).getPropertyValue('--anypoint-button-border-radius').trim();
-      if (!radius) {
-        this.style.setProperty('--anypoint-button-border-radius', '4px');
-      }
-    }
-  }
 }
 
 window.customElements.define('anypoint-button', AnypointButton);

package.json

 {
   "name": "@anypoint-web-components/anypoint-button",
   "description": "Anypoint styled button.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "main": "anypoint-button.js",

README.md

@@ -9,7 +9,4 @@ [![Build Status](https://travis-ci.org/anypoint-web-components/anypoint-button.svg?branch=master)](https://travis-ci.org/anypoint-web-components/anypoint-button)
 
-Anypoint button by default is styled for Anypoint platform. Styles can be controlled by using recommended `emphasis` or legacy `type` proeprty.
+Anypoint button by default is styled for Anypoint platform. Styles can be controlled by using `emphasis` property ans CSS variables.
 
-`type` property accepts one of pre-defied values used in Anypoint platform: `primary`, `secondary`, `tertiary`, and `danger`.
-However, because this way it is impossible to represent emphasis of a button except having different colours an `emphasis` property is a better choice to build importance gradation in the document.
-
 `emphasis` can be one of `low`, `middle`, or `high`. Styles for each of it can be redefined using CSS variables.
@@ -31,2 +28,3 @@ Low emphasis button should be used for less important actions.
 <script type="module" src="node_modules/@anypoint-web-components/anypoint-button/anypoint-button.js"></script>
+<script type="module" src="node_modules/@anypoint-web-components/anypoint-button/anypoint-icon-button.js"></script>
 <anypoint-button emphasis="low">Low emphasis</anypoint-button>
@@ -37,2 +35,8 @@ <anypoint-button emphasis="medium">Medium emphasis</anypoint-button>
 <anypoint-button disabled>You can't click me</anypoint-button>
+
+<anypoint-icon-button emphasis="low">
+  <button title="Add alarm">
+    <iron-icon icon="alarm-add"></iron-icon>
+  </button>
+</anypoint-icon-button>
 ```
@@ -45,2 +49,3 @@
 import '@anypoint-web-components/anypoint-button/anypoint-button.js';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
 
@@ -55,2 +60,8 @@ class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
     <anypoint-button disabled>You can't click me</anypoint-button>
+
+    <anypoint-icon-button emphasis="low">
+      <button title="Add alarm">
+        <iron-icon icon="alarm-add"></iron-icon>
+      </button>
+    </anypoint-icon-button>
     `;
@@ -57,0 +68,0 @@ }

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

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

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

24327

increased by19.9%

Number of package files

11

increased by57.14%

Lines of code

550

increased by16.03%

Number of lines in readme file

86

increased by14.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes