Skip to content

Commit e338e22

Browse files
sissbrueckersissbruecker
authored
refactor: simplify scroller basic example (#4944)
1 parent 7cb2b85 commit e338e22

File tree

4 files changed

+131
-201
lines changed

4 files changed

+131
-201
lines changed

‎articles/components/scroller/index.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ page-links:
1515
Scroller is a container component that enables scrollable areas within the UI.
1616
// end::description[]
1717

18-
[.example]
18+
[.example,themes="lumo,aura"]
1919
--
2020

2121
ifdef::lit[]

‎frontend/demo/component/scroller/react/scroller-basic.tsx‎

Lines changed: 43 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,56 @@
1-
import '@vaadin/icons';
21
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
32
import React from 'react';
43
import { Button } from '@vaadin/react-components/Button.js';
5-
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
6-
import { Icon } from '@vaadin/react-components/Icon.js';
4+
import { Card } from '@vaadin/react-components/Card.js';
5+
import { Markdown } from '@vaadin/react-components/Markdown.js';
76
import { Scroller } from '@vaadin/react-components/Scroller.js';
8-
import { TextArea } from '@vaadin/react-components/TextArea.js';
9-
import { TextField } from '@vaadin/react-components/TextField.js';
10-
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
11-
import exampleStyles from './scroller-basic-styles'; // hidden-source-line
12-
13-
const headerStyle = {
14-
display: 'flex',
15-
alignItems: 'center',
16-
gap: '1rem',
17-
padding: '1rem',
18-
borderBottom: 'solid 1px var(--vaadin-border-color)',
19-
};
7+
8+
const eventDetails = `
9+
**Date & Time**
10+
11+
Saturday, July 19, 2025
12+
9:00 AM – 5:00 PM (PDT)
13+
14+
**About This Event**
15+
16+
Join us for a full day of inspiring talks, hands-on workshops, and networking opportunities with industry leaders. Whether you're a seasoned developer or just starting out, there's something for everyone.
17+
18+
**Schedule**
19+
20+
- **9:00 AM** – Registration & Breakfast
21+
- **10:00 AM** – Opening Keynote
22+
- **11:30 AM** – Breakout Sessions
23+
- **1:00 PM** – Lunch & Networking
24+
- **2:30 PM** – Afternoon Workshops
25+
- **4:30 PM** – Closing Remarks & Raffle
26+
27+
**What to Bring**
28+
29+
- Photo ID for check-in
30+
- Laptop (optional, for workshops)
31+
- Business cards for networking
32+
33+
**Parking**
34+
35+
Free parking available in Lot B. Street parking is limited.
36+
37+
**Contact**
38+
39+
Questions? Email us at [email protected]
40+
`;
2041

2142
function Example() {
2243
return (
23-
<VerticalLayout id="container">
24-
<header style={headerStyle}>
25-
<a href="#" aria-label="Go back">
26-
<Icon icon="vaadin:arrow-left" style={{ padding: '0.25rem' }} aria-hidden="true" />
27-
</a>
28-
<h2 style={{ fontSize: '1.375rem' }}>Edit employee</h2>
29-
</header>
30-
44+
<Card style={{ maxWidth: '400px' }}>
45+
<div slot="title">Summer Tech Conference 2025</div>
3146
{/* tag::snippet[] */}
32-
<Scroller
33-
style={{ borderBottom: 'solid 1px var(--vaadin-border-color)', padding: '1rem' }}
34-
scrollDirection="vertical"
35-
>
36-
<section aria-labelledby="personal-title">
37-
<h3 id="personal-title" style={{ fontSize: '1.125rem' }}>
38-
Personal information
39-
</h3>
40-
<TextField style={{ width: '100%' }} label="First name" />
41-
<TextField style={{ width: '100%' }} label="Last name" />
42-
<DatePicker initialPosition="1990-01-01" label="Birthdate" style={{ width: '100%' }} />
43-
</section>
44-
<section aria-labelledby="employment-title">
45-
<h3 id="employment-title" style={{ fontSize: '1.125rem', marginTop: '1.5rem' }}>
46-
Employment information
47-
</h3>
48-
<TextField style={{ width: '100%' }} label="Position" />
49-
<TextArea style={{ width: '100%' }} label="Additional information" />
50-
</section>
47+
<Scroller theme="overflow-indicators" style={{ maxHeight: '300px' }}>
48+
<Markdown>{eventDetails}</Markdown>
5149
</Scroller>
5250
{/* end::snippet[] */}
53-
54-
<footer style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem 1rem' }}>
55-
<Button theme="primary">Save</Button>
56-
<Button theme="tertiary">Reset</Button>
57-
</footer>
58-
</VerticalLayout>
51+
<Button slot="footer">Add to calendar</Button>
52+
</Card>
5953
);
6054
}
6155

62-
export default reactExample(Example, exampleStyles); // hidden-source-line
56+
export default reactExample(Example); // hidden-source-line

‎frontend/demo/component/scroller/scroller-basic.ts‎

Lines changed: 41 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,47 @@
11
import 'Frontend/demo/init'; // hidden-source-line
22
import '@vaadin/button';
3-
import '@vaadin/date-picker';
4-
import '@vaadin/icon';
5-
import '@vaadin/icons';
3+
import '@vaadin/card';
64
import '@vaadin/scroller';
7-
import '@vaadin/text-area';
8-
import '@vaadin/text-field';
9-
import '@vaadin/vertical-layout';
10-
import { css, html, LitElement } from 'lit';
5+
import '@vaadin/markdown';
6+
import { html, LitElement } from 'lit';
117
import { customElement } from 'lit/decorators.js';
128
import { applyTheme } from 'Frontend/demo/theme';
139

1410
@customElement('scroller-basic')
1511
export class Example extends LitElement {
16-
static override styles = css`
17-
#container {
18-
align-items: stretch;
19-
border: 1px solid var(--vaadin-border-color);
20-
max-width: 100%;
21-
height: 400px;
22-
width: 360px;
23-
}
12+
private eventDetails = `
13+
**Date & Time**
2414
25-
header {
26-
display: flex;
27-
align-items: center;
28-
gap: 1rem;
29-
padding: 1rem;
30-
border-bottom: solid 1px var(--vaadin-border-color);
31-
}
32-
`;
15+
Saturday, July 19, 2025
16+
9:00 AM – 5:00 PM (PDT)
17+
18+
**About This Event**
19+
20+
Join us for a full day of inspiring talks, hands-on workshops, and networking opportunities with industry leaders. Whether you're a seasoned developer or just starting out, there's something for everyone.
21+
22+
**Schedule**
23+
24+
- **9:00 AM** – Registration & Breakfast
25+
- **10:00 AM** – Opening Keynote
26+
- **11:30 AM** – Breakout Sessions
27+
- **1:00 PM** – Lunch & Networking
28+
- **2:30 PM** – Afternoon Workshops
29+
- **4:30 PM** – Closing Remarks & Raffle
30+
31+
**What to Bring**
32+
33+
- Photo ID for check-in
34+
- Laptop (optional, for workshops)
35+
- Business cards for networking
36+
37+
**Parking**
38+
39+
Free parking available in Lot B. Street parking is limited.
40+
41+
**Contact**
42+
43+
Questions? Email us at [email protected]
44+
`;
3345

3446
protected override createRenderRoot() {
3547
const root = super.createRenderRoot();
@@ -39,48 +51,15 @@ export class Example extends LitElement {
3951

4052
protected override render() {
4153
return html`
42-
<vaadin-vertical-layout id="container">
43-
<header>
44-
<a href="#" aria-label="Go back">
45-
<vaadin-icon
46-
icon="vaadin:arrow-left"
47-
style="padding: 0.25rem"
48-
aria-hidden="true"
49-
></vaadin-icon>
50-
</a>
51-
<h2 style="font-size: 1.375rem">Edit employee</h2>
52-
</header>
53-
54+
<vaadin-card style="max-width: 400px">
55+
<div slot="title">Summer Tech Conference 2025</div>
5456
<!-- tag::snippet[] -->
55-
<vaadin-scroller
56-
style="border-bottom: solid 1px var(--vaadin-border-color); padding: 1rem"
57-
scroll-direction="vertical"
58-
>
59-
<section aria-labelledby="personal-title">
60-
<h3 id="personal-title" style="font-size: 1.125rem">Personal information</h3>
61-
<vaadin-text-field style="width: 100%" label="First name"></vaadin-text-field>
62-
<vaadin-text-field style="width: 100%" label="Last name"></vaadin-text-field>
63-
<vaadin-date-picker
64-
style="width: 100%"
65-
initial-position="1990-01-01"
66-
label="Birthdate"
67-
></vaadin-date-picker>
68-
</section>
69-
<section aria-labelledby="employment-title">
70-
<h3 id="employment-title" style="font-size: 1.125rem; margin-top: 1.5rem">
71-
Employment information
72-
</h3>
73-
<vaadin-text-field style="width: 100%" label="Position"></vaadin-text-field>
74-
<vaadin-text-area style="width: 100%" label="Additional information"></vaadin-text-area>
75-
</section>
57+
<vaadin-scroller theme="overflow-indicators" style="max-height: 300px">
58+
<vaadin-markdown .content="${this.eventDetails}"></vaadin-markdown>
7659
</vaadin-scroller>
7760
<!-- end::snippet[] -->
78-
79-
<footer style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem">
80-
<vaadin-button theme="primary">Save</vaadin-button>
81-
<vaadin-button theme="tertiary">Reset</vaadin-button>
82-
</footer>
83-
</vaadin-vertical-layout>
61+
<vaadin-button slot="footer">Add to calendar</vaadin-button>
62+
</vaadin-card>
8463
`;
8564
}
8665
}

‎src/main/java/com/vaadin/demo/component/scroller/ScrollerBasic.java‎

Lines changed: 46 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -3,111 +3,68 @@
33
import com.vaadin.demo.DemoExporter; // hidden-source-line
44
import com.vaadin.flow.component.Unit;
55
import com.vaadin.flow.component.button.Button;
6-
import com.vaadin.flow.component.button.ButtonVariant;
7-
import com.vaadin.flow.component.datepicker.DatePicker;
8-
import com.vaadin.flow.component.html.*;
9-
import com.vaadin.flow.component.icon.Icon;
10-
import com.vaadin.flow.component.icon.VaadinIcon;
11-
import com.vaadin.flow.component.orderedlayout.FlexComponent;
6+
import com.vaadin.flow.component.card.Card;
7+
import com.vaadin.flow.component.html.Div;
8+
import com.vaadin.flow.component.markdown.Markdown;
129
import com.vaadin.flow.component.orderedlayout.Scroller;
13-
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
14-
import com.vaadin.flow.component.textfield.TextArea;
15-
import com.vaadin.flow.component.textfield.TextField;
1610
import com.vaadin.flow.router.Route;
1711

18-
import java.time.LocalDate;
19-
2012
@Route("scroller-basic")
21-
public class ScrollerBasic extends VerticalLayout {
13+
public class ScrollerBasic extends Div {
2214

23-
public static final String PERSONAL_TITLE_ID = "personal-title";
24-
public static final String EMPLOYMENT_TITLE_ID = "employment-title";
15+
private static final String EVENT_DETAILS = """
16+
**Date & Time**
2517
26-
public ScrollerBasic() {
27-
getStyle().set("border", "solid 1px var(--vaadin-border-color)");
28-
setHeight(400, Unit.PIXELS);
29-
setMaxWidth(100, Unit.PERCENTAGE);
30-
setPadding(false);
31-
setSpacing(false);
32-
setWidth(360, Unit.PIXELS);
33-
setAlignItems(FlexComponent.Alignment.STRETCH);
18+
Saturday, July 19, 2025
19+
9:00 AM – 5:00 PM (PDT)
20+
21+
**About This Event**
22+
23+
Join us for a full day of inspiring talks, hands-on workshops, and networking opportunities with industry leaders. Whether you're a seasoned developer or just starting out, there's something for everyone.
24+
25+
**Schedule**
26+
27+
- **9:00 AM** – Registration & Breakfast
28+
- **10:00 AM** – Opening Keynote
29+
- **11:30 AM** – Breakout Sessions
30+
- **1:00 PM** – Lunch & Networking
31+
- **2:30 PM** – Afternoon Workshops
32+
- **4:30 PM** – Closing Remarks & Raffle
3433
35-
// Header
36-
Header header = new Header();
37-
header.getStyle().set("display", "flex").set("align-items", "center")
38-
.set("gap", "1rem").set("padding", "1rem")
39-
.set("border-bottom", "solid 1px #ccc");
34+
**What to Bring**
4035
41-
H2 editEmployee = new H2("Edit employee");
42-
editEmployee.getStyle().set("font-size", "1.375rem");
36+
- Photo ID for check-in
37+
- Laptop (optional, for workshops)
38+
- Business cards for networking
4339
44-
Icon arrowLeft = VaadinIcon.ARROW_LEFT.create();
45-
arrowLeft.getStyle().set("padding", "0.25rem");
46-
arrowLeft.getElement().setAttribute("aria-hidden", "true");
40+
**Parking**
4741
48-
Anchor goBack = new Anchor("#", arrowLeft);
49-
goBack.setAriaLabel("Go back");
42+
Free parking available in Lot B. Street parking is limited.
5043
51-
header.add(goBack, editEmployee);
52-
add(header);
44+
**Contact**
45+
46+
Questions? Email us at [email protected]
47+
""";
48+
49+
public ScrollerBasic() {
50+
Card card = new Card();
51+
card.setMaxWidth(400, Unit.PIXELS);
52+
53+
card.setTitle("Summer Tech Conference 2025");
5354

5455
// tag::snippet[]
55-
// Personal information
56-
H3 personalTitle = new H3("Personal information");
57-
personalTitle.getStyle().set("font-size", "1.125rem");
58-
personalTitle.setId(PERSONAL_TITLE_ID);
59-
60-
TextField firstName = new TextField("First name");
61-
firstName.setWidthFull();
62-
63-
TextField lastName = new TextField("Last name");
64-
lastName.setWidthFull();
65-
66-
DatePicker birthDate = new DatePicker("Birthdate");
67-
birthDate.setInitialPosition(LocalDate.of(1990, 1, 1));
68-
birthDate.setWidthFull();
69-
70-
Section personalInformation = new Section(personalTitle, firstName,
71-
lastName, birthDate);
72-
personalInformation.getElement().setAttribute("aria-labelledby",
73-
PERSONAL_TITLE_ID);
74-
75-
// Employment information
76-
H3 employmentTitle = new H3("Employment information");
77-
employmentTitle.getStyle().set("font-size", "1.125rem")
78-
.set("margin-top", "1.5rem");
79-
employmentTitle.setId(EMPLOYMENT_TITLE_ID);
80-
81-
TextField position = new TextField("Position");
82-
position.setWidthFull();
83-
84-
TextArea additionalInformation = new TextArea("Additional Information");
85-
additionalInformation.setWidthFull();
86-
87-
Section employmentInformation = new Section(employmentTitle, position,
88-
additionalInformation);
89-
employmentInformation.getElement().setAttribute("aria-labelledby",
90-
EMPLOYMENT_TITLE_ID);
91-
92-
Scroller scroller = new Scroller(
93-
new Div(personalInformation, employmentInformation));
94-
scroller.getStyle().set("border-bottom", "solid 1px #ccc")
95-
.set("padding", "1rem");
96-
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
97-
add(scroller);
98-
// end::snippet[]
56+
Markdown markdown = new Markdown(EVENT_DETAILS);
9957

100-
// Footer
101-
Button save = new Button("Save");
102-
save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
58+
Scroller scroller = new Scroller(markdown);
59+
scroller.addThemeName("overflow-indicators");
60+
scroller.setMaxHeight(300, Unit.PIXELS);
61+
// end::snippet[]
62+
card.add(scroller);
10363

104-
Button reset = new Button("Reset");
105-
reset.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
64+
Button addToCalendar = new Button("Add to calendar");
65+
card.addToFooter(addToCalendar);
10666

107-
Footer footer = new Footer(save, reset);
108-
footer.getStyle().set("display", "flex").set("gap", "0.5rem")
109-
.set("padding", "0.5rem 1rem");
110-
add(footer);
67+
add(card);
11168
}
11269

11370
public static class Exporter extends DemoExporter<ScrollerBasic> { // hidden-source-line

0 commit comments

Comments
 (0)