@bliss-design-system/button - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

CHANGELOG.md

 # @bliss-design-system/button
 
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- change loading implementation and click behaviour
+
 ## 1.0.0-beta.1
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@bliss-design-system/button",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Button component, or an anchor element styled as a button.",
@@ -38,4 +38,5 @@ "repository": {
   "peerDependencies": {
+    "@bliss-design-system/loading": "^1.0.0",
     "@bliss-design-system/tokens": "^1.2.0"
   }
 }

README.md

@@ -7,3 +7,4 @@ # \<bliss-button>
 - [Usage](#-usage)
-  - [Properties](#properties)
+  - [Attributes](#attributes)
+  - [Accessibility](#accessibility)
 - [Contributing](#-contributing)
@@ -49,6 +50,6 @@ - [Demoing with Storybook](#demoing-with-storybook)
 
-To use the button with a loading spinner, you'll need the [`<bliss-loading>` component](https://gitlab.com/bliss-design-system/components/-/tree/main/packages/loading), and you can use it like this:
+To use the button with a loading spinner, you'll need to have the [`<bliss-loading>` component](https://gitlab.com/bliss-design-system/components/-/tree/main/packages/loading) registered to your application. It is a peer dependency of this component, and you won't be able to see the loading state without it.
+
 ```html
-<bliss-button>
-  <bliss-loading slot="icon"></bliss-loading>
+<bliss-button loading>
   Doing things
@@ -73,5 +74,5 @@ </bliss-button>
 
-### Properties
+### Attributes
 
-The component accepts the following properties:
+The component accepts the following attributes:
 
@@ -99,2 +100,10 @@ | Attribute        | Type           | Description                | Default | Required | Options |
 
+### Accessibility
+
+The `<bliss-button>` handles labelling for you in every state.  
+
+The only requirement is that you always pass in text content, even if you are using an `icon-only` variation of the button, because that is what the button relies on to populate its `aria-label`.
+
+The colour contrast is handled out of the box for each variant and each theme.
+
 ## 🫕 Contributing
@@ -101,0 +110,0 @@

src/styles/index.css.js

@@ -36,4 +36,5 @@ import { css } from 'lit-element';
 }
+:host [part=button] bliss-loading,
 :host [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 4px 0 0;
@@ -57,4 +58,5 @@ }
 }
+:host([size=small]) [part=button] bliss-loading,
 :host([size=small]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 0;
@@ -69,8 +71,13 @@ }
 :host([icon-only]) [part=button],
+:host([icon-only][loading]) [part=button],
 :host([icon-only][icon-trailing]) [part=button] {
   padding: 0 8px;
 }
+:host([icon-only]) [part=button] bliss-loading,
 :host([icon-only]) [part=button] slot[name=icon],
+:host([icon-only][loading]) [part=button] bliss-loading,
+:host([icon-only][loading]) [part=button] slot[name=icon],
+:host([icon-only][icon-trailing]) [part=button] bliss-loading,
 :host([icon-only][icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0;
@@ -85,3 +92,3 @@ }
 :host([icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 4px;
@@ -93,5 +100,6 @@ }
 }
-:host([loading]) [part=button] slot[name=icon] {
+:host([loading]) [part=button] bliss-loading {
   position: absolute;
 }
+:host([loading]) [part=button] slot[name=icon],
 :host([loading]) [part=button] span {
@@ -101,8 +109,11 @@ visibility: hidden;
 
-:host([icon-only][loading]) [part=button] slot[name=icon] {
+:host([icon-only][loading]) [part=button] bliss-loading {
   position: relative;
 }
+:host([icon-only][loading]) [part=button] slot[name=icon] {
+  display: none;
+}
 
 :host([size=small][icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 0;
@@ -109,0 +120,0 @@ }

src/styles/index.css.ts

@@ -37,4 +37,5 @@ import { css, CSSResult } from 'lit-element';
 }
+:host [part=button] bliss-loading,
 :host [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 4px 0 0;
@@ -58,4 +59,5 @@ }
 }
+:host([size=small]) [part=button] bliss-loading,
 :host([size=small]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 0;
@@ -70,8 +72,13 @@ }
 :host([icon-only]) [part=button],
+:host([icon-only][loading]) [part=button],
 :host([icon-only][icon-trailing]) [part=button] {
   padding: 0 8px;
 }
+:host([icon-only]) [part=button] bliss-loading,
 :host([icon-only]) [part=button] slot[name=icon],
+:host([icon-only][loading]) [part=button] bliss-loading,
+:host([icon-only][loading]) [part=button] slot[name=icon],
+:host([icon-only][icon-trailing]) [part=button] bliss-loading,
 :host([icon-only][icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0;
@@ -86,3 +93,3 @@ }
 :host([icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 4px;
@@ -94,5 +101,6 @@ }
 }
-:host([loading]) [part=button] slot[name=icon] {
+:host([loading]) [part=button] bliss-loading {
   position: absolute;
 }
+:host([loading]) [part=button] slot[name=icon],
 :host([loading]) [part=button] span {
@@ -102,8 +110,11 @@ visibility: hidden;
 
-:host([icon-only][loading]) [part=button] slot[name=icon] {
+:host([icon-only][loading]) [part=button] bliss-loading {
   position: relative;
 }
+:host([icon-only][loading]) [part=button] slot[name=icon] {
+  display: none;
+}
 
 :host([size=small][icon-trailing]) [part=button] slot[name=icon] {
-  display: block;
+  display: inherit;
   margin: 0 0 0 0;
@@ -110,0 +121,0 @@ }

src/ts/BlissButton.d.ts

@@ -44,2 +44,4 @@ import { LitElement, TemplateResult, CSSResultArray, PropertyValues } from 'lit-element';
     static get styles(): CSSResultArray;
+    constructor();
+    private handleClick;
     private get hasIcon();
@@ -46,0 +48,0 @@ checkTextContent(): void;

src/ts/BlissButton.js

 var _a;
 import { __decorate } from "tslib";
-import { html, property, LitElement, queryAssignedNodes, } from 'lit-element';
+/* eslint-disable consistent-return */
+import { html, property, LitElement, queryAssignedNodes } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
@@ -34,3 +35,3 @@ import { styles } from '../styles/index.css.js';
     constructor() {
-        super(...arguments);
+        super();
         this.selector = '[slot=icon]';
@@ -43,2 +44,5 @@ this.iconSlotContent = false;
         this.type = 'button';
+        this.addEventListener('click', this.handleClick, {
+            capture: true
+        });
     }
@@ -48,2 +52,10 @@ static get styles() {
     }
+    handleClick(event) {
+        if (this.disabled && !this.href) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            return false;
+        }
+    }
     get hasIcon() {
@@ -86,3 +98,8 @@ return this.iconSlotContent;
     get contentTemplate() {
-        const icon = html `<slot name="icon" aria-hidden></slot>`;
+        const icon = html `
+      <slot name="icon" aria-hidden></slot>
+    `;
+        const loading = html `
+      <bliss-loading></bliss-loading>
+    `;
         const template = [
@@ -93,4 +110,7 @@ html `
         </span>
-      `,
+      `
         ];
+        if (this.loading) {
+            template.push(loading);
+        }
         if (!this.hasIcon) {
@@ -108,22 +128,26 @@ return template;
     renderAnchor() {
-        return html `<a
-      href="${this.href}"
-      target="${ifDefined(this.target)}"
-      rel="${ifDefined(this.target)}"
-      download="${ifDefined(this.download)}"
-      part="button"
-    >
-      ${this.contentTemplate}
-    </a>`;
+        return html `
+      <a
+        href="${this.href}"
+        target="${ifDefined(this.target)}"
+        rel="${ifDefined(this.target)}"
+        download="${ifDefined(this.download)}"
+        part="button"
+      >
+        ${this.contentTemplate}
+      </a>
+    `;
     }
     renderButton() {
-        return html ` <button
-      ?disabled="${this.disabled || this.loading}"
-      ?aria-disabled="${this.disabled}"
-      aria-label="${this.textContent}"
-      type="${this.type}"
-      part="button"
-    >
-      ${this.contentTemplate}
-    </button>`;
+        return html `
+      <button
+        ?disabled="${this.disabled || this.loading}"
+        ?aria-disabled="${this.disabled}"
+        aria-label="${this.textContent}"
+        type="${this.type}"
+        part="button"
+      >
+        ${this.contentTemplate}
+      </button>
+    `;
     }
@@ -130,0 +154,0 @@ render() {

src/ts/BlissButton.ts

@@ -0,1 +1,2 @@
+/* eslint-disable consistent-return */
 import {
@@ -8,3 +9,3 @@ html,
   queryAssignedNodes,
-  PropertyValues,
+  PropertyValues
 } from 'lit-element';
@@ -47,3 +48,5 @@ import { ifDefined } from 'lit-html/directives/if-defined';
   @queryAssignedNodes()
-  private [defaultSlot]!: NodeListOf<HTMLElement>; /* eslint-disable-line no-undef */
+  private [defaultSlot]!: NodeListOf<
+    HTMLElement
+  >; /* eslint-disable-line no-undef */
 
@@ -87,2 +90,18 @@ @property({ attribute: false })
 
+  constructor() {
+    super();
+    this.addEventListener('click', this.handleClick, {
+      capture: true
+    });
+  }
+
+  private handleClick(event: Event): void | boolean {
+    if (this.disabled && !this.href) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+
   private get hasIcon(): boolean {
@@ -138,3 +157,9 @@ return this.iconSlotContent;
   protected get contentTemplate(): TemplateResult[] {
-    const icon = html`<slot name="icon" aria-hidden></slot>`;
+    const icon = html`
+      <slot name="icon" aria-hidden></slot>
+    `;
+    const loading = html`
+      <bliss-loading></bliss-loading>
+    `;
+
     const template = [
@@ -145,5 +170,9 @@ html`
         </span>
-      `,
+      `
     ];
 
+    if (this.loading) {
+      template.push(loading);
+    }
+
     if (!this.hasIcon) {
@@ -163,23 +192,27 @@ return template;
   protected renderAnchor(): TemplateResult {
-    return html`<a
-      href="${this.href}"
-      target="${ifDefined(this.target)}"
-      rel="${ifDefined(this.target)}"
-      download="${ifDefined(this.download)}"
-      part="button"
-    >
-      ${this.contentTemplate}
-    </a>`;
+    return html`
+      <a
+        href="${this.href}"
+        target="${ifDefined(this.target)}"
+        rel="${ifDefined(this.target)}"
+        download="${ifDefined(this.download)}"
+        part="button"
+      >
+        ${this.contentTemplate}
+      </a>
+    `;
   }
 
   protected renderButton(): TemplateResult {
-    return html` <button
-      ?disabled="${this.disabled || this.loading}"
-      ?aria-disabled="${this.disabled}"
-      aria-label="${this.textContent}"
-      type="${this.type}"
-      part="button"
-    >
-      ${this.contentTemplate}
-    </button>`;
+    return html`
+      <button
+        ?disabled="${this.disabled || this.loading}"
+        ?aria-disabled="${this.disabled}"
+        aria-label="${this.textContent}"
+        type="${this.type}"
+        part="button"
+      >
+        ${this.contentTemplate}
+      </button>
+    `;
   }
@@ -186,0 +219,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

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

66299

increased by5.54%

Lines of code

1604

increased by5.8%

Number of lines in readme file

163

increased by5.84%

Worsened metrics

Dependency count

4

increased by33.33%

No dependency changes