@vaadin/button 25.2.0-alpha9 → 25.2.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +31 -3
  2. package/package.json +12 -12
  3. package/src/styles/vaadin-button-base-styles.js +3 -2
  4. package/src/vaadin-button-mixin.js +0 -5
  5. package/src/vaadin-button.d.ts +1 -0
  6. package/src/vaadin-button.js +1 -3
  7. package/web-types.json +4 -8
  8. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -25,7 +25,22 @@
25
25
  "kind": "mixin",
26
26
  "description": "A mixin providing common button functionality.",
27
27
  "name": "ButtonMixin",
28
- "members": [],
28
+ "members": [
29
+ {
30
+ "kind": "field",
31
+ "name": "disabled",
32
+ "privacy": "public",
33
+ "type": {
34
+ "text": "boolean"
35
+ },
36
+ "description": "If true, the user cannot interact with this element.",
37
+ "attribute": "disabled",
38
+ "inheritedFrom": {
39
+ "name": "DisabledMixin",
40
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
41
+ }
42
+ }
43
+ ],
29
44
  "mixins": [
30
45
  {
31
46
  "name": "ActiveMixin",
@@ -45,7 +60,20 @@
45
60
  "name": "superClass"
46
61
  }
47
62
  ],
48
- "attributes": []
63
+ "attributes": [
64
+ {
65
+ "name": "disabled",
66
+ "type": {
67
+ "text": "boolean"
68
+ },
69
+ "description": "If true, the user cannot interact with this element.",
70
+ "fieldName": "disabled",
71
+ "inheritedFrom": {
72
+ "name": "DisabledMixin",
73
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
74
+ }
75
+ }
76
+ ]
49
77
  }
50
78
  ],
51
79
  "exports": [
@@ -65,7 +93,7 @@
65
93
  "declarations": [
66
94
  {
67
95
  "kind": "class",
68
- "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
96
+ "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
69
97
  "name": "Button",
70
98
  "members": [
71
99
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/button",
3
- "version": "25.2.0-alpha9",
3
+ "version": "25.2.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,25 +35,25 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.2.0-alpha9",
39
- "@vaadin/component-base": "25.2.0-alpha9",
40
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha9",
38
+ "@vaadin/a11y-base": "25.2.0-beta2",
39
+ "@vaadin/component-base": "25.2.0-beta2",
40
+ "@vaadin/vaadin-themable-mixin": "25.2.0-beta2",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/aura": "25.2.0-alpha9",
45
- "@vaadin/chai-plugins": "25.2.0-alpha9",
46
- "@vaadin/icon": "25.2.0-alpha9",
47
- "@vaadin/icons": "25.2.0-alpha9",
48
- "@vaadin/test-runner-commands": "25.2.0-alpha9",
44
+ "@vaadin/aura": "25.2.0-beta2",
45
+ "@vaadin/chai-plugins": "25.2.0-beta2",
46
+ "@vaadin/icon": "25.2.0-beta2",
47
+ "@vaadin/icons": "25.2.0-beta2",
48
+ "@vaadin/test-runner-commands": "25.2.0-beta2",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha9",
51
- "sinon": "^21.0.2"
50
+ "@vaadin/vaadin-lumo-styles": "25.2.0-beta2",
51
+ "sinon": "^22.0.0"
52
52
  },
53
53
  "customElements": "custom-elements.json",
54
54
  "web-types": [
55
55
  "web-types.json",
56
56
  "web-types.lit.json"
57
57
  ],
58
- "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
58
+ "gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499"
59
59
  }
package/src/styles/vaadin-button-base-styles.js CHANGED
@@ -13,7 +13,7 @@ export const buttonStyles = css`
13
13
  justify-content: center;
14
14
  text-align: center;
15
15
  gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-s));
16
- white-space: nowrap;
16
+ white-space: var(--vaadin-button-label-wrap, normal);
17
17
  -webkit-tap-highlight-color: transparent;
18
18
  -webkit-user-select: none;
19
19
  user-select: none;
@@ -47,7 +47,8 @@ export const buttonStyles = css`
47
47
  }
48
48
 
49
49
  [part='label'] {
50
- display: inline-flex;
50
+ overflow: hidden;
51
+ text-overflow: ellipsis;
51
52
  }
52
53
 
53
54
  :host(:is([focus-ring], :focus-visible)) {
package/src/vaadin-button-mixin.js CHANGED
@@ -11,11 +11,6 @@ const INTERACTION_EVENTS = ['mousedown', 'mouseup', 'click', 'dblclick', 'keypre
11
11
 
12
12
  /**
13
13
  * A mixin providing common button functionality.
14
- *
15
- * @polymerMixin
16
- * @mixes ActiveMixin
17
- * @mixes FocusMixin
18
- * @mixes TabindexMixin
19
14
  */
20
15
  export const ButtonMixin = (superClass) =>
21
16
  class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
package/src/vaadin-button.d.ts CHANGED
@@ -46,6 +46,7 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
46
46
  * | `--vaadin-button-font-weight` |
47
47
  * | `--vaadin-button-gap` |
48
48
  * | `--vaadin-button-height` |
49
+ * | `--vaadin-button-label-wrap` |
49
50
  * | `--vaadin-button-line-height` |
50
51
  * | `--vaadin-button-margin` |
51
52
  * | `--vaadin-button-padding` |
package/src/vaadin-button.js CHANGED
@@ -52,6 +52,7 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
52
52
  * | `--vaadin-button-font-weight` |
53
53
  * | `--vaadin-button-gap` |
54
54
  * | `--vaadin-button-height` |
55
+ * | `--vaadin-button-label-wrap` |
55
56
  * | `--vaadin-button-line-height` |
56
57
  * | `--vaadin-button-margin` |
57
58
  * | `--vaadin-button-padding` |
@@ -61,9 +62,6 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
61
62
  *
62
63
  * @customElement vaadin-button
63
64
  * @extends HTMLElement
64
- * @mixes ButtonMixin
65
- * @mixes ElementMixin
66
- * @mixes ThemableMixin
67
65
  */
68
66
  class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
69
67
  static get is() {
package/web-types.json CHANGED
@@ -1,23 +1,21 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/button",
4
- "version": "25.2.0-alpha9",
4
+ "version": "25.2.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-button",
11
- "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
15
15
  "description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
16
16
  "value": {
17
17
  "type": [
18
- "boolean",
19
- "null",
20
- "undefined"
18
+ "boolean"
21
19
  ]
22
20
  }
23
21
  },
@@ -40,9 +38,7 @@
40
38
  "description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
41
39
  "value": {
42
40
  "type": [
43
- "boolean",
44
- "null",
45
- "undefined"
41
+ "boolean"
46
42
  ]
47
43
  }
48
44
  }
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/button",
4
- "version": "25.2.0-alpha9",
4
+ "version": "25.2.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-button",
19
- "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {