@vaadin/button 23.2.14 → 23.2.16
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.
- package/README.md +2 -2
- package/package.json +8 -7
- package/src/vaadin-button-mixin.d.ts +1 -1
- package/src/vaadin-button-mixin.js +1 -1
- package/src/vaadin-button.d.ts +3 -2
- package/src/vaadin-button.js +14 -2
- package/theme/lumo/vaadin-button-styles.js +4 -5
- package/theme/material/vaadin-button-styles.js +6 -10
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ An accessible and customizable button that allows users to perform actions.
|
|
|
13
13
|
<vaadin-button theme="tertiary">Tertiary</vaadin-button>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/
|
|
16
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/button/screenshot.png" width="296" alt="Screenshot of vaadin-button">](https://vaadin.com/docs/latest/components/button)
|
|
17
17
|
|
|
18
18
|
## Installation
|
|
19
19
|
|
|
@@ -32,7 +32,7 @@ import '@vaadin/button';
|
|
|
32
32
|
## Themes
|
|
33
33
|
|
|
34
34
|
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
35
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/
|
|
35
|
+
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/button/vaadin-button.js) of the package uses the Lumo theme.
|
|
36
36
|
|
|
37
37
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
38
38
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/button",
|
|
3
|
-
"version": "23.2.
|
|
3
|
+
"version": "23.2.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,19 +36,20 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "~23.2.
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "~23.2.
|
|
41
|
-
"@vaadin/vaadin-material-styles": "~23.2.
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "~23.2.
|
|
39
|
+
"@vaadin/component-base": "~23.2.16",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "~23.2.16",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "~23.2.16",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "~23.2.16"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
|
-
"@vaadin/
|
|
46
|
+
"@vaadin/icon": "~23.2.16",
|
|
47
|
+
"@vaadin/testing-helpers": "^0.4.0",
|
|
47
48
|
"sinon": "^13.0.2"
|
|
48
49
|
},
|
|
49
50
|
"web-types": [
|
|
50
51
|
"web-types.json",
|
|
51
52
|
"web-types.lit.json"
|
|
52
53
|
],
|
|
53
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
|
|
54
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
|
package/src/vaadin-button.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
6
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
7
8
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
8
9
|
import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
@@ -35,7 +36,7 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
|
35
36
|
*
|
|
36
37
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
37
38
|
*/
|
|
38
|
-
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
|
|
39
|
+
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
|
|
39
40
|
|
|
40
41
|
declare global {
|
|
41
42
|
interface HTMLElementTagNameMap {
|
package/src/vaadin-button.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
8
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
11
|
import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
10
12
|
|
|
@@ -38,10 +40,11 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
|
38
40
|
*
|
|
39
41
|
* @extends HTMLElement
|
|
40
42
|
* @mixes ButtonMixin
|
|
43
|
+
* @mixes ControllerMixin
|
|
41
44
|
* @mixes ElementMixin
|
|
42
45
|
* @mixes ThemableMixin
|
|
43
46
|
*/
|
|
44
|
-
class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) {
|
|
47
|
+
class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
|
|
45
48
|
static get is() {
|
|
46
49
|
return 'vaadin-button';
|
|
47
50
|
}
|
|
@@ -105,8 +108,17 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) {
|
|
|
105
108
|
<slot name="suffix"></slot>
|
|
106
109
|
</span>
|
|
107
110
|
</div>
|
|
111
|
+
<slot name="tooltip"></slot>
|
|
108
112
|
`;
|
|
109
113
|
}
|
|
114
|
+
|
|
115
|
+
/** @protected */
|
|
116
|
+
ready() {
|
|
117
|
+
super.ready();
|
|
118
|
+
|
|
119
|
+
this._tooltipController = new TooltipController(this);
|
|
120
|
+
this.addController(this._tooltipController);
|
|
121
|
+
}
|
|
110
122
|
}
|
|
111
123
|
|
|
112
124
|
customElements.define(Button.is, Button);
|
|
@@ -25,9 +25,10 @@ const button = css`
|
|
|
25
25
|
-webkit-tap-highlight-color: transparent;
|
|
26
26
|
-webkit-font-smoothing: antialiased;
|
|
27
27
|
-moz-osx-font-smoothing: grayscale;
|
|
28
|
+
flex-shrink: 0;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
/* Set only for the internal parts so we don
|
|
31
|
+
/* Set only for the internal parts so we don't affect the host vertical alignment */
|
|
31
32
|
[part='label'],
|
|
32
33
|
[part='prefix'],
|
|
33
34
|
[part='suffix'] {
|
|
@@ -203,16 +204,14 @@ const button = css`
|
|
|
203
204
|
|
|
204
205
|
/* Icons */
|
|
205
206
|
|
|
206
|
-
[part] ::slotted(vaadin-icon)
|
|
207
|
-
[part] ::slotted(iron-icon) {
|
|
207
|
+
[part] ::slotted(vaadin-icon) {
|
|
208
208
|
display: inline-block;
|
|
209
209
|
width: var(--lumo-icon-size-m);
|
|
210
210
|
height: var(--lumo-icon-size-m);
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
/* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
|
|
214
|
-
[part] ::slotted(vaadin-icon[icon^='vaadin:'])
|
|
215
|
-
[part] ::slotted(iron-icon[icon^='vaadin:']) {
|
|
214
|
+
[part] ::slotted(vaadin-icon[icon^='vaadin:']) {
|
|
216
215
|
padding: 0.25em;
|
|
217
216
|
box-sizing: border-box !important;
|
|
218
217
|
}
|
|
@@ -25,6 +25,7 @@ const button = css`
|
|
|
25
25
|
-webkit-tap-highlight-color: transparent;
|
|
26
26
|
-webkit-font-smoothing: antialiased;
|
|
27
27
|
-moz-osx-font-smoothing: grayscale;
|
|
28
|
+
flex-shrink: 0;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
:host::before,
|
|
@@ -116,21 +117,18 @@ const button = css`
|
|
|
116
117
|
|
|
117
118
|
/* Icon alignment */
|
|
118
119
|
|
|
119
|
-
[part] ::slotted(vaadin-icon)
|
|
120
|
-
[part] ::slotted(iron-icon) {
|
|
120
|
+
[part] ::slotted(vaadin-icon) {
|
|
121
121
|
display: block;
|
|
122
122
|
width: 18px;
|
|
123
123
|
height: 18px;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
[part='prefix'] ::slotted(vaadin-icon)
|
|
127
|
-
[part='prefix'] ::slotted(iron-icon) {
|
|
126
|
+
[part='prefix'] ::slotted(vaadin-icon) {
|
|
128
127
|
margin-right: 8px;
|
|
129
128
|
margin-left: -4px;
|
|
130
129
|
}
|
|
131
130
|
|
|
132
|
-
[part='suffix'] ::slotted(vaadin-icon)
|
|
133
|
-
[part='suffix'] ::slotted(iron-icon) {
|
|
131
|
+
[part='suffix'] ::slotted(vaadin-icon) {
|
|
134
132
|
margin-left: 8px;
|
|
135
133
|
margin-right: -4px;
|
|
136
134
|
}
|
|
@@ -156,14 +154,12 @@ const button = css`
|
|
|
156
154
|
transform: translate(50%, -50%) scale(1);
|
|
157
155
|
}
|
|
158
156
|
|
|
159
|
-
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon)
|
|
160
|
-
:host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
|
|
157
|
+
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon) {
|
|
161
158
|
margin-right: -4px;
|
|
162
159
|
margin-left: 8px;
|
|
163
160
|
}
|
|
164
161
|
|
|
165
|
-
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon)
|
|
166
|
-
:host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
|
|
162
|
+
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon) {
|
|
167
163
|
margin-left: -4px;
|
|
168
164
|
margin-right: 8px;
|
|
169
165
|
}
|
package/web-types.json
CHANGED