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

Comparing version 1.7.1 to 1.8.0-rc.0

custom-elements.json

@@ -64,3 +64,3 @@ {
           "name": "value",
-          "description": "Value of this form control.",
+          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
           "type": "string",
@@ -189,3 +189,3 @@ "default": "\"''\""
           "attribute": "value",
-          "description": "Value of this form control.",
+          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
           "type": "string",
@@ -234,3 +234,4 @@ "default": "\"''\""
         {
-          "name": "validationMessage"
+          "name": "validationMessage",
+          "type": "string"
         },
@@ -331,2 +332,6 @@ {
           "description": "Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'."
+        },
+        {
+          "name": "--uui-button-transition",
+          "description": "Add transition to the button. Default is none."
         }
@@ -333,0 +338,0 @@ ]

lib/index.js

 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from '@umbraco-ui/uui-base/lib/animations';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { FormControlMixin, LabelMixin, PopoverTargetMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUIFormControlMixin, LabelMixin, PopoverTargetMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
@@ -21,4 +21,5 @@ import { iconWrong, iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 };
-let UUIButtonElement = class extends FormControlMixin(
-  LabelMixin("", PopoverTargetMixin(LitElement))
+let UUIButtonElement = class extends UUIFormControlMixin(
+  LabelMixin("", PopoverTargetMixin(LitElement)),
+  void 0
 ) {
@@ -38,2 +39,14 @@ constructor() {
   }
+  async focus() {
+    await this.updateComplete;
+    this._button.focus();
+  }
+  async blur() {
+    await this.updateComplete;
+    this._button.blur();
+  }
+  async click() {
+    await this.updateComplete;
+    this._button.click();
+  }
   _onHostClick(e) {
@@ -214,3 +227,10 @@ if (this.disabled) {
         box-shadow: none;
+
+        transition: var(--uui-button-transition, none);
       }
+
+      #button:focus-visible {
+        outline: 2px solid var(--color-emphasis);
+      }
+
       button[disabled]:active,
@@ -234,21 +254,2 @@ a:not([href]):active {
 
-      /* ANIMATIONS */
-      @keyframes fadeIn {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes fadeOut {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0;
-        }
-      }
-
       /* edge case for default color */
@@ -333,2 +334,3 @@ :host(:not([color]):not([look='primary'])),
       }
+
       :host([look='primary']:hover) #button {
@@ -342,2 +344,8 @@ background-color: var(
       }
+
+      /* special outline offset tof primary style so you can see the outline */
+      :host([look='primary']) #button:focus-visible {
+        outline-offset: 2px;
+      }
+
       :host([look='primary'][disabled]) #button {
@@ -344,0 +352,0 @@ background-color: var(

lib/uui-button.element.d.ts

@@ -5,3 +5,3 @@ import { LitElement, nothing, TemplateResult } from 'lit';
 export type UUIButtonType = 'submit' | 'button' | 'reset';
-declare const UUIButtonElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").PopoverTargetMixinInterface) & typeof LitElement;
+declare const UUIButtonElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinInterface<FormDataEntryValue | FormData, undefined>) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").PopoverTargetMixinInterface) & typeof LitElement;
 /**
@@ -29,2 +29,3 @@ *  @element uui-button
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+ *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
  */
@@ -91,2 +92,5 @@ export declare class UUIButtonElement extends UUIButtonElement_base {
     protected getFormElement(): HTMLElement;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    click(): Promise<void>;
     private _onHostClick;
@@ -93,0 +97,0 @@ private _resetStateTimeout?;

package.json

 {
   "name": "@umbraco-ui/uui-button",
-  "version": "1.7.1",
+  "version": "1.8.0-rc.0",
   "license": "MIT",
@@ -33,4 +33,4 @@ "description": "All-round button, Umbraco backoffice style.",
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.7.0",
-    "@umbraco-ui/uui-icon-registry-essential": "1.7.0"
+    "@umbraco-ui/uui-base": "1.8.0-rc.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.8.0-rc.0"
   },
@@ -46,3 +46,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-button",
-  "gitHead": "48b40b1f5a550f89e731051c78f2c5aea9412c47"
+  "gitHead": "46d444c66217c9a3c74518d8ce4badc7f121bfdf"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35997

increased by3.1%

Lines of code

883

increased by1.49%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@umbraco-ui/uui-base@1.8.0-rc.0(transitive)

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

• Updated@umbraco-ui/uui-base@1.8.0-rc.0

• Updated@umbraco-ui/uui-icon-registry-essential@1.8.0-rc.0