@vaadin/button - npm Package Compare versions

Comparing version 22.0.0-alpha3 to 22.0.0-alpha4

package.json

 {
   "name": "@vaadin/button",
-  "version": "22.0.0-alpha3",
+  "version": "22.0.0-alpha4",
   "description": "vaadin-button",
@@ -28,8 +28,8 @@ "main": "vaadin-button.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha3",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha3",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha3",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha3"
+    "@vaadin/field-base": "^22.0.0-alpha4",
+    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha4",
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
   },
@@ -44,3 +44,3 @@ "devDependencies": {
   },
-  "gitHead": "efd855b1c0a7c4998f43670a17b0c7fdfe14ff9d"
+  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
 }

README.md

 # @vaadin/button
 
-> ⚠️ Work in progress, please do not use this component yet.
+An accessible and customizable button that allows users to perform actions.
 
-The new version of `vaadin-button` component.
+[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/button)
+
+```html
+<vaadin-button>Press me</vaadin-button>
+```
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/button --save
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/button';
+```
+
+## Themes
+
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes),
+Lumo and Material. The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/button/vaadin-button.js)
+of the package uses the Lumo theme.
+
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/button/theme/material/vaadin-button.js';
+```
+
+You can also import the Lumo version of the component explicitly:
+
+```js
+import '@vaadin/button/theme/lumo/vaadin-button.js';
+```
+
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
+
+```js
+import '@vaadin/button/src/vaadin-button.js';
+```
+
+## License
+
+Apache License 2.0
+
+Vaadin collects development time usage statistics to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

src/vaadin-button.d.ts

@@ -11,9 +11,38 @@ /**
 
-declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * A getter that returns the native button as a focusable element for ControlStateMixin.
-   */
-  readonly focusElement: HTMLButtonElement | null;
+/**
+ * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
+ *
+ * ```html
+ * <vaadin-button>Press me</vaadin-button>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the button is disabled.
+ * `focus-ring` | Set when the button is focused using the keyboard.
+ * `focused`    | Set when the button is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ */
+declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-button': Button;
+  }
 }
 
 export { Button };

src/vaadin-button.js

@@ -13,2 +13,37 @@ /**
 
+/**
+ * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
+ *
+ * ```html
+ * <vaadin-button>Press me</vaadin-button>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the button is disabled.
+ * `focus-ring` | Set when the button is focused using the keyboard.
+ * `focused`    | Set when the button is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @extends HTMLElement
+ * @mixes ActiveMixin
+ * @mixes TabindexMixin
+ * @mixes FocusMixin
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ */
 class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
@@ -27,2 +62,5 @@ static get is() {
           white-space: nowrap;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
         }
@@ -34,4 +72,5 @@
 
-        /* Ensure the button is always aligned on the baseline */
-        [part='button']::before {
+        /* Aligns the button with form fields when placed on the same line.
+          Note, to make it work, the form fields should have the same "::before" pseudo-element. */
+        .vaadin-button-container::before {
           content: '\\2003';
@@ -42,3 +81,3 @@ display: inline-block;
 
-        [part='button'] {
+        .vaadin-button-container {
           display: inline-flex;
@@ -69,3 +108,3 @@ align-items: center;
       </style>
-      <div part="button">
+      <div class="vaadin-button-container">
         <span part="prefix">
@@ -96,2 +135,4 @@ <slot name="prefix"></slot>
 
+customElements.define(Button.is, Button);
+
 export { Button };

vaadin-button.js

@@ -0,1 +1,3 @@
+import './theme/lumo/vaadin-button.js';
+
 export * from './src/vaadin-button.js';

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

31025

increased by102.43%

Number of package files

11

increased by57.14%

Lines of code

564

increased by469.7%

Number of lines in readme file

55

increased by816.67%

Published versions last year

136

increased by0.74%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/field-base@^22.0.0-alpha4

• Updated@vaadin/vaadin-control-state-mixin@^22.0.0-alpha4

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha4

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha4

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha4

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha4