@umbraco-ui/uui-button - npm Package Compare versions

Comparing version 0.1.10 to 0.2.0

custom-elements.json

@@ -106,8 +106,8 @@ {
         {
-          "name": "",
-          "description": "for button contents"
+          "name": "extra",
+          "description": "for extra"
         },
         {
-          "name": "extra",
-          "description": "for extra"
+          "name": "",
+          "description": "Override the default label"
         }
@@ -114,0 +114,0 @@ ],

lib/index.js

@@ -1,5 +0,5 @@
-import '@umbraco-ui/uui-icon/lib';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from '@umbraco-ui/uui-base/lib/animations';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { InterfaceLookDefaultValue } from '@umbraco-ui/uui-base/lib/types';
@@ -47,3 +47,7 @@ import { iconWrong, iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
         default:
-          this._internals.form.requestSubmit();
+          if (this._internals.form.requestSubmit) {
+            this._internals.form.requestSubmit();
+          } else {
+            this._internals.form.dispatchEvent(new SubmitEvent("submit"));
+          }
           break;
@@ -66,8 +70,7 @@ }
       case "waiting":
-        if (!customElements.get("uui-loader-circle")) {
-          console.warn("To properly render the waiting state, the uui-loader-circle element has to be registered");
-        }
+        demandCustomElement(this, "uui-loader-circle");
         element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
         break;
       case "success":
+        demandCustomElement(this, "uui-icon");
         element = html`<uui-icon
@@ -78,2 +81,3 @@ name="check"
       case "failed":
+        demandCustomElement(this, "uui-icon");
         element = html`<uui-icon
@@ -108,2 +112,8 @@ name="wrong"
         --uui-button-padding-bottom-factor: 1;
+
+        text-align: center;
+        font-weight: var(
+          --uui-button-font-weight,
+          var(--uui-interface-font-weight,400)
+        );
       }
@@ -145,3 +155,3 @@
           calc(var(--uui-size-2,6px) * var(--uui-button-padding-left-factor));
-        text-align: center;
+        text-align: inherit; /* Inherit from host so it can be overwritten from the outside */
         vertical-align: middle;
@@ -160,8 +170,6 @@ box-shadow: none;
         cursor: pointer;
-        font-weight: var(
-          --uui-button-font-weight,
-          var(--uui-interface-font-weight,400)
-        );
+
         font-size: var(--uui-button-font-size, inherit);
         font-family: inherit;
+        font-weight: inherit; /* Inherit from host so it can be overwritten from the outside */
 
@@ -220,2 +228,5 @@ background-color: var(
       }
+      :host([look]:not([look=''])) #loader {
+        color: inherit;
+      }
 
@@ -243,2 +254,5 @@ /* ANIMATIONS */
 
+      :host([look='primary']) {
+        font-weight: var(--uui-look-primary-font-weight,700);
+      }
       :host([look='primary']) button {
@@ -262,3 +276,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-primary-font-weight,700);
       }
@@ -288,2 +301,5 @@ :host([look='primary']) button:hover {
 
+      :host([look='secondary']) {
+        font-weight: var(--uui-look-secondary-font-weight,500);
+      }
       :host([look='secondary']) button {
@@ -307,3 +323,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-secondary-font-weight,500);
       }
@@ -334,2 +349,5 @@ :host([look='secondary']) button:hover {
       :host([look='outline']) button {
+        font-weight: var(--uui-look-outline-font-weight,700);
+      }
+      :host([look='outline']) button {
         background-color: var(
@@ -352,3 +370,2 @@ --uui-button-background-color,
         );
-        font-weight: var(--uui-look-outline-font-weight,700);
       }
@@ -378,2 +395,5 @@ :host([look='outline']) button:hover {
 
+      :host([look='placeholder']) {
+        font-weight: var(--uui-look-placeholder-font-weight,400);
+      }
       :host([look='placeholder']) button {
@@ -397,3 +417,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-placeholder-font-weight,400);
       }
@@ -423,2 +442,5 @@ :host([look='placeholder']) button:hover {
 
+      :host([look='positive']) {
+        font-weight: var(--uui-look-positive-font-weight,700);
+      }
       :host([look='positive']) button {
@@ -442,3 +464,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-positive-font-weight,700);
       }
@@ -468,2 +489,5 @@ :host([look='positive']) button:hover {
 
+      :host([look='warning']) {
+        font-weight: var(--uui-look-warning-font-weight,700);
+      }
       :host([look='warning']) button {
@@ -487,3 +511,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-warning-font-weight,700);
       }
@@ -513,2 +536,5 @@ :host([look='warning']) button:hover {
 
+      :host([look='danger']) {
+        font-weight: var(--uui-look-danger-font-weight,700);
+      }
       :host([look='danger']) button {
@@ -532,3 +558,2 @@ background-color: var(
         );
-        font-weight: var(--uui-look-danger-font-weight,700);
       }
@@ -535,0 +560,0 @@ :host([look='danger']) button:hover {

lib/uui-button.element.d.ts

@@ -1,2 +0,1 @@
-import '@umbraco-ui/uui-icon/lib';
 import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
@@ -10,3 +9,2 @@ import { LitElement } from 'lit';
  *  @fires {UUIButtonEvent} click - fires when the element is clicked
- *  @slot - for button contents
  *  @slot extra - for extra
@@ -13,0 +11,0 @@ *  @description - All-round button

package.json

 {
   "name": "@umbraco-ui/uui-button",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "license": "MIT",
@@ -33,3 +33,4 @@ "description": "All-round button, Umbraco backoffice style.",
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.1.0",
+    "@umbraco-ui/uui-icon-registry-essential": "0.1.0"
   },
@@ -45,3 +46,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-button",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }

README.md

@@ -5,2 +5,6 @@ # uui-button
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-button)
+
 ## Installation
@@ -7,0 +11,0 @@

No alert changes

Improved metrics

Total package byte prevSize

32602

increased by2.61%

Lines of code

817

increased by2.64%

Number of lines in readme file

34

increased by13.33%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@umbraco-ui/uui-icon-registry-essential@0.1.0

• + Added@umbraco-ui/uui-base@0.1.0(transitive)

• - Removed@umbraco-ui/uui-base@0.0.17(transitive)

• Updated@umbraco-ui/uui-base@0.1.0