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

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

CHANGELOG.md

 # @bliss-design-system/button
 
+## 1.0.0-beta.1
+
+### Patch Changes
+
+- pre release with updated loading and anchor styles
+
 ## 1.0.0-beta.0
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@bliss-design-system/button",
-  "version": "1.0.0-beta.0",
-  "description": "",
+  "version": "1.0.0-beta.1",
+  "description": "Button component, or an anchor element styled as a button.",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.md

 # \<bliss-button>
 
-`<bliss-button>` does excellent things.
+`<bliss-button>` renders a button, or an anchor element styled as a button.
 
@@ -80,3 +80,3 @@ - [Installation](#-installation)
 | theme           | string         | button theme               | `default` | no       | `default`, `neutral`, `critical` |
-| variant         | string         | button variant             | `primary` | no       | `primary`, `secondary`, `ghost |
+| variant         | string         | button variant             | `primary` | no       | `primary`, `secondary`, `ghost` |
 | disabled        | boolean        | disable the button         | `false`   | no       | - |
@@ -87,3 +87,7 @@ | loading         | boolean        | display the loading spinner    | `false`  | no       | - |
 | full-width      | boolean        | make the button full width of its container    | `false`  | no       | - |
-| Anchor specific attributes below      |         |       |    |        |  |
+
+For a link styled like a button, you can use the following attributes in addition to the ones in the table above:
+
+| Attribute        | Type           | Description                | Default | Required | Options |
+| --------------- |:--------------:| :-------------------------:|:-------:|:--------:|:-------:|
 | href            | string         | URL    | ''  | no       | - |
@@ -151,2 +155,2 @@ | target          | string         | where to display the linked URL    | ''  | no       | `_blank`, `_self`, `_top`, `_parent` |
 
-We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [[e-mail]](mailto:[e-mail]) or via the [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P) Slack channel ✨.
+We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [[e-mail]](mailto:[e-mail]) or via the [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P) Slack channel ✨.

src/styles/index.css.js

@@ -21,2 +21,3 @@ import { css } from 'lit-element';
   font-weight: 600;
+  font-family: inherit;
   height: auto;
@@ -45,3 +46,3 @@ margin: 0;
 }
-:host [part=button]:not([disabled]):focus, :host [part=button]:not([disabled]):hover:focus, :host [part=button]:not([disabled]):active:focus {
+:host [part=button]:not(:disabled):focus, :host [part=button]:not(:disabled):hover:focus, :host [part=button]:not(:disabled):active:focus {
   border-color: white;
@@ -87,2 +88,5 @@ box-shadow: 0px 0px 0px 2px #186BF2;
 
+:host([loading]) [part=button] {
+  opacity: 1;
+}
 :host([loading]) [part=button] slot[name=icon] {
@@ -110,3 +114,3 @@ position: absolute;
 
-:host(:hover) [part=button]:not([disabled]) {
+:host(:hover) [part=button]:not(:disabled) {
   background-color: #004AC2;
@@ -116,3 +120,4 @@ border-color: #004AC2;
 
-:host(:active) [part=button]:not([disabled]) {
+:host([loading]) [part=button]:disabled,
+:host(:active) [part=button]:not(:disabled) {
   background-color: #003FA3;
@@ -128,3 +133,3 @@ border-color: #003FA3;
 
-:host([theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #444A55;
@@ -134,3 +139,4 @@ border-color: #444A55;
 
-:host([theme=neutral]:active) [part=button]:not([disabled]) {
+:host([theme=neutral][loading]) [part=button]:disabled,
+:host([theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #32363E;
@@ -146,3 +152,3 @@ border-color: #32363E;
 
-:host([theme=critical]:hover) [part=button]:not([disabled]) {
+:host([theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #8A0A17;
@@ -152,3 +158,4 @@ border-color: #8A0A17;
 
-:host([theme=critical]:active) [part=button]:not([disabled]) {
+:host([theme=critical][loading]) [part=button]:disabled,
+:host([theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #780712;
@@ -164,3 +171,3 @@ border-color: #780712;
 
-:host([variant=secondary]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary]:hover) [part=button]:not(:disabled) {
   background-color: #F5F8FF;
@@ -171,3 +178,4 @@ border-color: #004AC2;
 
-:host([variant=secondary]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][loading]) [part=button]:disabled,
+:host([variant=secondary]:active) [part=button]:not(:disabled) {
   background-color: #D6E7FF;
@@ -184,3 +192,3 @@ border-color: #003FA3;
 
-:host([variant=secondary][theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #F4F4F6;
@@ -191,3 +199,4 @@ border-color: #444A55;
 
-:host([variant=secondary][theme=neutral]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=neutral][loading]) [part=button]:disabled,
+:host([variant=secondary][theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #E2E5E9;
@@ -204,3 +213,3 @@ border-color: #32363E;
 
-:host([variant=secondary][theme=critical]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #FFF0F1;
@@ -211,3 +220,4 @@ border-color: #8A0A17;
 
-:host([variant=secondary][theme=critical]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=critical][loading]) [part=button]:disabled,
+:host([variant=secondary][theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #FED2D6;
@@ -224,3 +234,3 @@ border-color: #780712;
 
-:host([variant=ghost]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost]:hover) [part=button]:not(:disabled) {
   background-color: #F5F8FF;
@@ -231,3 +241,4 @@ border-color: #F5F8FF;
 
-:host([variant=ghost]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][loading]) [part=button]:disabled,
+:host([variant=ghost]:active) [part=button]:not(:disabled) {
   background-color: #D6E7FF;
@@ -244,3 +255,3 @@ border-color: #D6E7FF;
 
-:host([variant=ghost][theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #F4F4F6;
@@ -251,3 +262,4 @@ border-color: #F4F4F6;
 
-:host([variant=ghost][theme=neutral]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=neutral][loading]) [part=button]:disabled,
+:host([variant=ghost][theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #E2E5E9;
@@ -264,3 +276,3 @@ border-color: #E2E5E9;
 
-:host([variant=ghost][theme=critical]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #FFF0F1;
@@ -271,3 +283,4 @@ border-color: #FFF0F1;
 
-:host([variant=ghost][theme=critical]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=critical][loading]) [part=button]:disabled,
+:host([variant=ghost][theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #FED2D6;
@@ -274,0 +287,0 @@ border-color: #FED2D6;

src/styles/index.css.ts

@@ -22,2 +22,3 @@ import { css, CSSResult } from 'lit-element';
   font-weight: 600;
+  font-family: inherit;
   height: auto;
@@ -46,3 +47,3 @@ margin: 0;
 }
-:host [part=button]:not([disabled]):focus, :host [part=button]:not([disabled]):hover:focus, :host [part=button]:not([disabled]):active:focus {
+:host [part=button]:not(:disabled):focus, :host [part=button]:not(:disabled):hover:focus, :host [part=button]:not(:disabled):active:focus {
   border-color: white;
@@ -88,2 +89,5 @@ box-shadow: 0px 0px 0px 2px #186BF2;
 
+:host([loading]) [part=button] {
+  opacity: 1;
+}
 :host([loading]) [part=button] slot[name=icon] {
@@ -111,3 +115,3 @@ position: absolute;
 
-:host(:hover) [part=button]:not([disabled]) {
+:host(:hover) [part=button]:not(:disabled) {
   background-color: #004AC2;
@@ -117,3 +121,4 @@ border-color: #004AC2;
 
-:host(:active) [part=button]:not([disabled]) {
+:host([loading]) [part=button]:disabled,
+:host(:active) [part=button]:not(:disabled) {
   background-color: #003FA3;
@@ -129,3 +134,3 @@ border-color: #003FA3;
 
-:host([theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #444A55;
@@ -135,3 +140,4 @@ border-color: #444A55;
 
-:host([theme=neutral]:active) [part=button]:not([disabled]) {
+:host([theme=neutral][loading]) [part=button]:disabled,
+:host([theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #32363E;
@@ -147,3 +153,3 @@ border-color: #32363E;
 
-:host([theme=critical]:hover) [part=button]:not([disabled]) {
+:host([theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #8A0A17;
@@ -153,3 +159,4 @@ border-color: #8A0A17;
 
-:host([theme=critical]:active) [part=button]:not([disabled]) {
+:host([theme=critical][loading]) [part=button]:disabled,
+:host([theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #780712;
@@ -165,3 +172,3 @@ border-color: #780712;
 
-:host([variant=secondary]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary]:hover) [part=button]:not(:disabled) {
   background-color: #F5F8FF;
@@ -172,3 +179,4 @@ border-color: #004AC2;
 
-:host([variant=secondary]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][loading]) [part=button]:disabled,
+:host([variant=secondary]:active) [part=button]:not(:disabled) {
   background-color: #D6E7FF;
@@ -185,3 +193,3 @@ border-color: #003FA3;
 
-:host([variant=secondary][theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #F4F4F6;
@@ -192,3 +200,4 @@ border-color: #444A55;
 
-:host([variant=secondary][theme=neutral]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=neutral][loading]) [part=button]:disabled,
+:host([variant=secondary][theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #E2E5E9;
@@ -205,3 +214,3 @@ border-color: #32363E;
 
-:host([variant=secondary][theme=critical]:hover) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #FFF0F1;
@@ -212,3 +221,4 @@ border-color: #8A0A17;
 
-:host([variant=secondary][theme=critical]:active) [part=button]:not([disabled]) {
+:host([variant=secondary][theme=critical][loading]) [part=button]:disabled,
+:host([variant=secondary][theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #FED2D6;
@@ -225,3 +235,3 @@ border-color: #780712;
 
-:host([variant=ghost]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost]:hover) [part=button]:not(:disabled) {
   background-color: #F5F8FF;
@@ -232,3 +242,4 @@ border-color: #F5F8FF;
 
-:host([variant=ghost]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][loading]) [part=button]:disabled,
+:host([variant=ghost]:active) [part=button]:not(:disabled) {
   background-color: #D6E7FF;
@@ -245,3 +256,3 @@ border-color: #D6E7FF;
 
-:host([variant=ghost][theme=neutral]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=neutral]:hover) [part=button]:not(:disabled) {
   background-color: #F4F4F6;
@@ -252,3 +263,4 @@ border-color: #F4F4F6;
 
-:host([variant=ghost][theme=neutral]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=neutral][loading]) [part=button]:disabled,
+:host([variant=ghost][theme=neutral]:active) [part=button]:not(:disabled) {
   background-color: #E2E5E9;
@@ -265,3 +277,3 @@ border-color: #E2E5E9;
 
-:host([variant=ghost][theme=critical]:hover) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=critical]:hover) [part=button]:not(:disabled) {
   background-color: #FFF0F1;
@@ -272,3 +284,4 @@ border-color: #FFF0F1;
 
-:host([variant=ghost][theme=critical]:active) [part=button]:not([disabled]) {
+:host([variant=ghost][theme=critical][loading]) [part=button]:disabled,
+:host([variant=ghost][theme=critical]:active) [part=button]:not(:disabled) {
   background-color: #FED2D6;
@@ -275,0 +288,0 @@ border-color: #FED2D6;

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

62820

increased by15.96%

Number of package files

28

increased by3.7%

Lines of code

1516

increased by20.6%

Number of lines in readme file

154

increased by3.36%

No dependency changes