Skip to content

Commit 587c730

Browse files
web-padawanweb-padawan
authored
chore: move pages to playground, restore simple dev pages (#10198)
1 parent 5fc9efe commit 587c730

33 files changed

+2269
-1791
lines changed

‎dev/button.html‎

Lines changed: 4 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,85 +7,16 @@
77
<title>Button</title>
88
<script type="module" src="./common.js"></script>
99

10-
<script type="module">
11-
window.Vaadin = {};
12-
window.Vaadin.featureFlags = {};
13-
window.Vaadin.featureFlags.accessibleDisabledButtons = true;
14-
</script>
1510
<script type="module">
1611
import '@vaadin/button';
17-
import '@vaadin/icon';
18-
import '@vaadin/icons';
1912
import '@vaadin/tooltip';
20-
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
2113
</script>
2214
</head>
2315

2416
<body>
25-
<section class="section">
26-
<h2 class="heading">Label & Icon</h2>
27-
<vaadin-button>Reply</vaadin-button>
28-
<vaadin-button>
29-
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
30-
Reply
31-
</vaadin-button>
32-
<vaadin-button aria-label="Reply">
33-
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
34-
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
35-
</vaadin-button>
36-
</section>
37-
38-
<section class="section">
39-
<h2 class="heading">Primary</h2>
40-
<vaadin-button theme="primary">Reply</vaadin-button>
41-
<vaadin-button theme="primary">
42-
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
43-
Reply
44-
</vaadin-button>
45-
<vaadin-button theme="primary" aria-label="Reply">
46-
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
47-
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
48-
</vaadin-button>
49-
</section>
50-
51-
<section class="section">
52-
<h2 class="heading">Tertiary</h2>
53-
<vaadin-button theme="tertiary">Reply</vaadin-button>
54-
<vaadin-button theme="tertiary">
55-
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
56-
Reply
57-
</vaadin-button>
58-
<vaadin-button theme="tertiary" aria-label="Reply">
59-
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
60-
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
61-
</vaadin-button>
62-
</section>
63-
64-
<section class="section">
65-
<h2 class="heading">Disabled</h2>
66-
<vaadin-button theme="primary" disabled>Primary</vaadin-button>
67-
<vaadin-button disabled>Secondary</vaadin-button>
68-
<vaadin-button theme="tertiary" disabled>Tertiary</vaadin-button>
69-
</section>
70-
71-
<section class="section">
72-
<h2 class="heading">Custom Layout</h2>
73-
<vaadin-button style="width: 150px">Reply</vaadin-button>
74-
<vaadin-button style="width: 150px">
75-
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
76-
Reply
77-
</vaadin-button>
78-
<vaadin-button style="width: 150px" aria-label="Reply">
79-
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
80-
</vaadin-button>
81-
<vaadin-button style="width: 150px; justify-content: start">
82-
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
83-
Reply
84-
</vaadin-button>
85-
<vaadin-button style="flex-direction: column">
86-
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
87-
Reply
88-
</vaadin-button>
89-
</section>
17+
<vaadin-button>
18+
Edit
19+
<vaadin-tooltip slot="tooltip" text="Click to edit"></vaadin-tooltip>
20+
</vaadin-button>
9021
</body>
9122
</html>

‎dev/checkbox-group.html‎

Lines changed: 5 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -10,111 +10,13 @@
1010
<script type="module">
1111
import '@vaadin/checkbox-group';
1212
</script>
13-
14-
<style>
15-
label img {
16-
height: 1lh;
17-
padding: 2px;
18-
box-sizing: border-box;
19-
vertical-align: top;
20-
}
21-
</style>
2213
</head>
2314

2415
<body>
25-
<section class="section">
26-
<h2 class="heading">Plain Text Labels</h2>
27-
<vaadin-checkbox-group label="Options">
28-
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
29-
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
30-
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
31-
</vaadin-checkbox-group>
32-
</section>
33-
34-
<section class="section">
35-
<h2 class="heading">Horizontal</h2>
36-
<vaadin-checkbox-group label="Options" theme="horizontal">
37-
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
38-
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
39-
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
40-
</vaadin-checkbox-group>
41-
</section>
42-
43-
<section class="section">
44-
<h2 class="heading">Read Only &amp; Disabled</h2>
45-
<vaadin-checkbox-group label="Options" readonly>
46-
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
47-
<vaadin-checkbox value="2" label="Option Two" indeterminate></vaadin-checkbox>
48-
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
49-
</vaadin-checkbox-group>
50-
51-
<vaadin-checkbox-group label="Options" disabled>
52-
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
53-
<vaadin-checkbox value="2" label="Option Two" indeterminate></vaadin-checkbox>
54-
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
55-
</vaadin-checkbox-group>
56-
</section>
57-
58-
<section class="section">
59-
<h2 class="heading">Bells &amp; Whistles</h2>
60-
<vaadin-checkbox-group
61-
theme="helper-above-field"
62-
label="Payment Methods"
63-
helper-text="Choose which payment methods you would like to enable."
64-
required
65-
error-message="Choose one or more payment methods."
66-
invalid
67-
>
68-
<vaadin-checkbox value="1" helper-text="Expiry date:12/2026">
69-
<label slot="label">
70-
<img
71-
src="data:image/png;base64,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"
72-
alt="Visa"
73-
/>
74-
<span>**** **** **** 1234</span>
75-
</label>
76-
</vaadin-checkbox>
77-
<vaadin-checkbox value="2" helper-text="Expiry date:11/2026">
78-
<label slot="label">
79-
<img
80-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAAwCAMAAACIXLyeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABsUExURUdwTOwAG/mIIPifG+wAG+wAG/eeG+sAG/tFJ/leIO0AHO0AHPqgHfieG/eeG+wAG/mgHfieG/ifG/ifG+wAG/ieG/mgHOwAG/tOCusAG/eeG/9fAP5rBfmXGPYxDf15C/IcE/pECP5VA/qLE2jxkIMAAAAZdFJOUwBsIZPfsu/wCRQ7Vy/gx8w/tWp9hqVZmOTex8qZAAABoklEQVRIx62XWXLDIBBEEWLXvhvkJE5y/ztG3mLZQgOU6V9VvaJpBNMIvUpkEyVcc1LRXonXr3k7lAUzrCiHViKXZEL1Wpxmq6/1wMxaZYdBWM/1RiS5LXEszVbDLlAkFtgFqM4ubbBFLLV7xpXe1SQ7sytWW2iKa0CHDwOo3dASCKa/5yPISwNpcxBPOWku3tov5m7awoNw5pGHqCDaab7rC8Ix7LdxP/+4GbQ73BcHWv180Bx28yuuBxc3r/UL4Zrrj+q9OK80vHfOuXuXw0f9YvUItwgKwiuMLMSrw22H0OSfqzPbMnDrHDiGEAnDgVkYiYKScOEw0jFxeejqju/gTsFmo0YhYh+UPu4xjvyTRb4CIl9QYW7d12e8yz33eBf9c729jILEeRhx1Gf7MfVEGSqkFLepV3rZdeWA69pr9PQZyManAS+LOi4uPP7OMNttR21w/w5gCqOtowD59qJl+79qbu8pGQFqCm52ltaJoN5T3VtZbQOmYM8TGeXPFU+t62JaPA+IHqVRqJ5W5Nw/p0Rtq9aYNksDLcomHS0u/wCadzZdj+ddpQAAAABJRU5ErkJggg=="
81-
alt="Mastercard"
82-
/>
83-
<span>**** **** **** 7890</span>
84-
</label>
85-
</vaadin-checkbox>
86-
<vaadin-checkbox value="3" helper-text="Expiry date:10/2026">
87-
<label slot="label">
88-
<img
89-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURRV70wBvz/////D3/CaF10eX3Xq05pPC69bp+KfO7zuR21ih4Ap10rza82iq41FJ1oUAAAABdFJOU/2D6lbHAAABpUlEQVQ4y2OQwQ5EGASxA4FRCRIkBFx8XFxEXKDAkcUFyPdxcRBgkFXSVFJKUoICCyDWBEEBBqesJtW1uqtVVy2vWlqUqbsrKcqo65FVpwBDhdQjHT5VFp3cGwnTzy7rCb8pldQo2QiUMPM4rPPA5onO6r0JM88uK1DSimRqXACSMNjJrjPnSYlOWG4iY9GyEqXGlycbGwKBEjWhC3Rmi5cAjUoxebSs8cWDUK9GS0GgRJiSyZW7HLNUGNhLNTy3a671VGqYYLQBKKF0SwnJrcZKSqlKSrog54Y6Lg2FgoDQ0IUuLgeBXgwNITcQHxsbG9tdNkYGFmCJ5N277xVZz4uKtd6dfHv35rZ3l+ueQSTEynslQ0zCYhqfec8pL2Z91+r3EiIhndZUyKFSNLGxdvectGSxGVo7L0MkRHc3XXRWETzWeHDFnN2bpq6ZsZUbIiHZYcHmrVKs1HjbeU5Hk7HpY+MUiISgYOmmnpLizMampRMFJQQFugSPgyVAEahhpKQsp6QMChpjI2VjZbDEsrS0tISwtDyp8tJyKHg1mj9IkMABWAD0UMnWDyQ8pAAAAABJRU5ErkJggg=="
90-
alt="American Express"
91-
/>
92-
<span>**** **** **** 5432</span>
93-
</label>
94-
</vaadin-checkbox>
95-
</vaadin-checkbox-group>
96-
</section>
97-
98-
<section class="section">
99-
<h2 class="heading">Content &amp; Layout Variations</h2>
100-
<p>Resize the field to test how content flows.</p>
101-
<vaadin-checkbox-group
102-
label="A very long label for this field"
103-
helper-text="If the label wasn't enough to tell what options you should choose, then this long description should be."
104-
error-message="In case you didn't select any of the options in this required field, this error message is here to let you know that you really should select at least one option."
105-
required
106-
invalid
107-
theme="horizontal"
108-
style="resize: horizontal; overflow: hidden; padding: 1px"
109-
>
110-
<vaadin-checkbox value="1" label="Option One"></vaadin-checkbox>
111-
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
112-
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
113-
<vaadin-checkbox value="4" label="Option Four"></vaadin-checkbox>
114-
<vaadin-checkbox value="5" label="Option Five"></vaadin-checkbox>
115-
<vaadin-checkbox value="6" label="Option Six"></vaadin-checkbox>
116-
<vaadin-checkbox value="7" label="Option Seven"></vaadin-checkbox>
117-
</vaadin-checkbox-group>
118-
</section>
16+
<vaadin-checkbox-group label="Language">
17+
<vaadin-checkbox value="en" label="English"></vaadin-checkbox>
18+
<vaadin-checkbox value="fr" label="French"></vaadin-checkbox>
19+
<vaadin-checkbox value="de" label="German"></vaadin-checkbox>
20+
</vaadin-checkbox-group>
11921
</body>
12022
</html>

‎dev/checkbox.html‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,12 @@
99

1010
<script type="module">
1111
import '@vaadin/checkbox';
12-
import '@vaadin/icon';
13-
import '@vaadin/icons';
1412
</script>
1513
</head>
1614

1715
<body>
18-
<section class="section">
19-
<h2 class="heading">Label &amp; Description</h2>
20-
<vaadin-checkbox label="Checked" checked></vaadin-checkbox>
21-
<vaadin-checkbox label="Indeterminate" indeterminate></vaadin-checkbox>
22-
<vaadin-checkbox label="Unchecked"></vaadin-checkbox>
23-
</section>
24-
25-
<section class="section">
26-
<h2 class="heading">All Features</h2>
27-
<vaadin-checkbox
28-
label="Label"
29-
helper-text="Description"
30-
required
31-
error-message="You have to check me."
32-
invalid
33-
></vaadin-checkbox>
34-
</section>
35-
36-
<section class="section">
37-
<h2 class="heading">Complex Label</h2>
38-
<vaadin-checkbox>
39-
<label slot="label">
40-
<vaadin-icon icon="vaadin:file"></vaadin-icon>
41-
I accept <a href="http://vaadin.com">the terms and conditions</a>
42-
</label>
43-
</vaadin-checkbox>
44-
</section>
16+
<vaadin-checkbox>
17+
<label slot="label">I accept <a href="http://vaadin.com">the terms and conditions</a></label>
18+
</vaadin-checkbox>
4519
</body>
4620
</html>

‎dev/combo-box.html‎

Lines changed: 16 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,79 +6,28 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Combo Box</title>
88
<script type="module" src="./common.js"></script>
9-
10-
<script type="module">
11-
import '@vaadin/combo-box';
12-
import '@vaadin/icon';
13-
import '@vaadin/icons';
14-
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
15-
</script>
169
</head>
1710
<body>
18-
<section class="section">
19-
<h2 class="heading">Plain</h2>
20-
<vaadin-combo-box></vaadin-combo-box>
21-
<vaadin-combo-box placeholder="Placeholder"></vaadin-combo-box>
22-
</section>
23-
24-
<section class="section">
25-
<h2 class="heading">Bells & Whistles</h2>
26-
<vaadin-combo-box
27-
label="Label"
28-
helper-text="Description for this field."
29-
clear-button-visible
30-
error-message="You need to write something in this field."
31-
required
32-
>
33-
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
34-
</vaadin-combo-box>
35-
</section>
36-
37-
<section class="section">
38-
<h2 class="heading">States</h2>
39-
<vaadin-combo-box
40-
label="Read-only"
41-
helper-text="Description for this field."
42-
clear-button-visible
43-
error-message="You need to write something in this field."
44-
required
45-
readonly
46-
>
47-
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
48-
</vaadin-combo-box>
49-
50-
<vaadin-combo-box
51-
label="Disabled"
52-
helper-text="Description for this field."
53-
clear-button-visible
54-
error-message="You need to write something in this field."
55-
required
56-
disabled
57-
>
58-
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
59-
</vaadin-combo-box>
60-
</section>
11+
<vaadin-combo-box label="Country"></vaadin-combo-box>
6112

6213
<script type="module">
63-
document.querySelectorAll('vaadin-combo-box').forEach((comboBox) => {
64-
comboBox.dataProvider = async (params, callback) => {
65-
const index = params.page * params.pageSize;
66-
const response = await fetch(
67-
`https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
68-
);
69-
if (response.ok) {
70-
const { result, size } = await response.json();
71-
// Emulate network latency for demo purpose
72-
setTimeout(() => {
73-
callback(result, size);
74-
}, 1000);
75-
}
76-
};
14+
import '@vaadin/combo-box';
15+
16+
const comboBox = document.querySelector('vaadin-combo-box');
7717

78-
if (!comboBox.placeholder) {
79-
comboBox.selectedItem = 'Andorra';
18+
comboBox.dataProvider = async (params, callback) => {
19+
const index = params.page * params.pageSize;
20+
const response = await fetch(
21+
`https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
22+
);
23+
if (response.ok) {
24+
const { result, size } = await response.json();
25+
// Emulate network latency for demo purpose
26+
setTimeout(() => {
27+
callback(result, size);
28+
}, 100);
8029
}
81-
});
30+
};
8231
</script>
8332
</body>
8433
</html>

0 commit comments

Comments
 (0)