@vaadin/button 23.2.16 → 23.2.18
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 +7 -8
- package/src/vaadin-button-mixin.d.ts +1 -1
- package/src/vaadin-button-mixin.js +1 -1
- package/src/vaadin-button.d.ts +2 -3
- package/src/vaadin-button.js +2 -14
- package/theme/lumo/vaadin-button-styles.js +4 -3
- package/theme/material/vaadin-button-styles.js +10 -6
- 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/master/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/master/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.18",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,20 +36,19 @@
|
|
|
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.18",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "~23.2.18",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "~23.2.18",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "~23.2.18"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
|
-
"@vaadin/
|
|
47
|
-
"@vaadin/testing-helpers": "^0.4.0",
|
|
46
|
+
"@vaadin/testing-helpers": "^0.3.2",
|
|
48
47
|
"sinon": "^13.0.2"
|
|
49
48
|
},
|
|
50
49
|
"web-types": [
|
|
51
50
|
"web-types.json",
|
|
52
51
|
"web-types.lit.json"
|
|
53
52
|
],
|
|
54
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "0633266344f3b8eaae21f5c1365b682f163dd0cb"
|
|
55
54
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2022 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 - 2022 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,9 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2022 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';
|
|
7
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
7
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
8
|
import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
@@ -36,7 +35,7 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
|
36
35
|
*
|
|
37
36
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
38
37
|
*/
|
|
39
|
-
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(
|
|
38
|
+
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
|
|
40
39
|
|
|
41
40
|
declare global {
|
|
42
41
|
interface HTMLElementTagNameMap {
|
package/src/vaadin-button.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2022 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';
|
|
8
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
|
-
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
8
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
9
|
import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
12
10
|
|
|
@@ -40,11 +38,10 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
|
40
38
|
*
|
|
41
39
|
* @extends HTMLElement
|
|
42
40
|
* @mixes ButtonMixin
|
|
43
|
-
* @mixes ControllerMixin
|
|
44
41
|
* @mixes ElementMixin
|
|
45
42
|
* @mixes ThemableMixin
|
|
46
43
|
*/
|
|
47
|
-
class Button extends ButtonMixin(ElementMixin(ThemableMixin(
|
|
44
|
+
class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) {
|
|
48
45
|
static get is() {
|
|
49
46
|
return 'vaadin-button';
|
|
50
47
|
}
|
|
@@ -108,17 +105,8 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
|
|
|
108
105
|
<slot name="suffix"></slot>
|
|
109
106
|
</span>
|
|
110
107
|
</div>
|
|
111
|
-
<slot name="tooltip"></slot>
|
|
112
108
|
`;
|
|
113
109
|
}
|
|
114
|
-
|
|
115
|
-
/** @protected */
|
|
116
|
-
ready() {
|
|
117
|
-
super.ready();
|
|
118
|
-
|
|
119
|
-
this._tooltipController = new TooltipController(this);
|
|
120
|
-
this.addController(this._tooltipController);
|
|
121
|
-
}
|
|
122
110
|
}
|
|
123
111
|
|
|
124
112
|
customElements.define(Button.is, Button);
|
|
@@ -25,7 +25,6 @@ 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;
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
/* Set only for the internal parts so we don't affect the host vertical alignment */
|
|
@@ -204,14 +203,16 @@ const button = css`
|
|
|
204
203
|
|
|
205
204
|
/* Icons */
|
|
206
205
|
|
|
207
|
-
[part] ::slotted(vaadin-icon)
|
|
206
|
+
[part] ::slotted(vaadin-icon),
|
|
207
|
+
[part] ::slotted(iron-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:'])
|
|
214
|
+
[part] ::slotted(vaadin-icon[icon^='vaadin:']),
|
|
215
|
+
[part] ::slotted(iron-icon[icon^='vaadin:']) {
|
|
215
216
|
padding: 0.25em;
|
|
216
217
|
box-sizing: border-box !important;
|
|
217
218
|
}
|
|
@@ -25,7 +25,6 @@ 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;
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
:host::before,
|
|
@@ -117,18 +116,21 @@ const button = css`
|
|
|
117
116
|
|
|
118
117
|
/* Icon alignment */
|
|
119
118
|
|
|
120
|
-
[part] ::slotted(vaadin-icon)
|
|
119
|
+
[part] ::slotted(vaadin-icon),
|
|
120
|
+
[part] ::slotted(iron-icon) {
|
|
121
121
|
display: block;
|
|
122
122
|
width: 18px;
|
|
123
123
|
height: 18px;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
[part='prefix'] ::slotted(vaadin-icon)
|
|
126
|
+
[part='prefix'] ::slotted(vaadin-icon),
|
|
127
|
+
[part='prefix'] ::slotted(iron-icon) {
|
|
127
128
|
margin-right: 8px;
|
|
128
129
|
margin-left: -4px;
|
|
129
130
|
}
|
|
130
131
|
|
|
131
|
-
[part='suffix'] ::slotted(vaadin-icon)
|
|
132
|
+
[part='suffix'] ::slotted(vaadin-icon),
|
|
133
|
+
[part='suffix'] ::slotted(iron-icon) {
|
|
132
134
|
margin-left: 8px;
|
|
133
135
|
margin-right: -4px;
|
|
134
136
|
}
|
|
@@ -154,12 +156,14 @@ const button = css`
|
|
|
154
156
|
transform: translate(50%, -50%) scale(1);
|
|
155
157
|
}
|
|
156
158
|
|
|
157
|
-
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon)
|
|
159
|
+
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon),
|
|
160
|
+
:host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
|
|
158
161
|
margin-right: -4px;
|
|
159
162
|
margin-left: 8px;
|
|
160
163
|
}
|
|
161
164
|
|
|
162
|
-
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon)
|
|
165
|
+
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
|
|
166
|
+
:host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
|
|
163
167
|
margin-left: -4px;
|
|
164
168
|
margin-right: 8px;
|
|
165
169
|
}
|
package/web-types.json
CHANGED