refactor: use simple items in basic layouts examples (#4000)

* refactor Lit examples * refactor React examples * refactor Flow examples * use better class name * address review comments
vaadin · Dec 13, 2024 · 2cce0b7 · 2cce0b7
1 parent 99ad48e
commit 2cce0b7
Show file tree

Hide file tree

Showing 55 changed files with 482 additions and 343 deletions.
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts b/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="padding spacing">
-        <vaadin-button style="flex-grow: 1">Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item" style="flex-grow: 1">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding" style="justify-content: center">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts
@@ -1,6 +1,5 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/horizontal-layout';
-import '@vaadin/text-area';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
@@ -21,24 +20,17 @@ export class Example extends LitElement {
 
   protected override render() {
     return html`
-    <!-- tag::snippet[] -->
+      <!-- tag::snippet[] -->
       <vaadin-horizontal-layout
         theme="spacing padding"
-        class="height-4xl" // hidden-source-line
+        class="height-4xl"
         style="align-items: stretch"
       >
-        <vaadin-text-area
-          label="Text area 1"
-          style="align-self: start"
-        ></vaadin-text-area>
-        <vaadin-text-area label="Text area 2"></vaadin-text-area>
-        <vaadin-text-area
-          label="Text area 3"
-          style="align-self: end"
-        ></vaadin-text-area>
+        <div class="example-item" style="align-self: start">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item" style="align-self: end">Item 3</div>
       </vaadin-horizontal-layout>
-
-    <!-- end::snippet[] -->
+      <!-- end::snippet[] -->
     `;
   }
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -24,9 +23,9 @@ export class Example extends LitElement {
       <p>Horizontal layout without margin:</p>
       <div class="container">
         <vaadin-horizontal-layout theme="spacing padding">
-          <vaadin-button>Button 1</vaadin-button>
-          <vaadin-button>Button 2</vaadin-button>
-          <vaadin-button>Button 3</vaadin-button>
+          <div class="example-item">Item 1</div>
+          <div class="example-item">Item 2</div>
+          <div class="example-item">Item 3</div>
         </vaadin-horizontal-layout>
       </div>
 
@@ -35,9 +34,9 @@ export class Example extends LitElement {
         <!-- tag::snippet[] -->
         <vaadin-horizontal-layout theme="margin spacing padding">
           <!-- end::snippet[] -->
-          <vaadin-button>Button 1</vaadin-button>
-          <vaadin-button>Button 2</vaadin-button>
-          <vaadin-button>Button 3</vaadin-button>
+          <div class="example-item">Item 1</div>
+          <div class="example-item">Item 2</div>
+          <div class="example-item">Item 3</div>
           <!-- tag::snippet[] -->
         </vaadin-horizontal-layout>
         <!-- end::snippet[] -->

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,18 +22,18 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without padding:</p>
       <vaadin-horizontal-layout theme="spacing">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with padding:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="padding spacing">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/radio-group';
 import { html, LitElement } from 'lit';
@@ -28,9 +27,9 @@ export class Example extends LitElement {
   protected override render() {
     return html`
       <vaadin-horizontal-layout theme="${this.themeVariant} padding" style="align-items: stretch">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <vaadin-radio-group
         label="Spacing variant"

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,18 +22,18 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without spacing:</p>
       <vaadin-horizontal-layout theme="padding">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with spacing:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts
@@ -1,6 +1,5 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/horizontal-layout';
-import '@vaadin/text-area';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
@@ -21,17 +20,17 @@ export class Example extends LitElement {
 
   protected override render() {
     return html`
-    <!-- tag::snippet[] -->
+      <!-- tag::snippet[] -->
       <vaadin-horizontal-layout
         theme="spacing padding"
-        class="height-4xl" // hidden-source-line
+        class="height-4xl"
         style="align-items: center"
       >
-        <vaadin-text-area label="Text area 1"></vaadin-text-area>
-        <vaadin-text-area label="Text area 2"></vaadin-text-area>
-        <vaadin-text-area label="Text area 3"></vaadin-text-area>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
-    <!-- end::snippet[] -->
+      <!-- end::snippet[] -->
     `;
   }
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,22 +22,22 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without wrapping:</p>
       <vaadin-horizontal-layout theme="spacing margin padding" style="width: 350px;">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
-        <vaadin-button>Button 4</vaadin-button>
-        <vaadin-button>Button 5</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
+        <div class="example-item">Item 4</div>
+        <div class="example-item">Item 5</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with wrapping:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="wrap spacing margin padding" style="width: 350px;">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
-        <vaadin-button>Button 4</vaadin-button>
-        <vaadin-button>Button 5</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
+        <div class="example-item">Item 4</div>
+        <div class="example-item">Item 5</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-margin.ts b/frontend/demo/component/basiclayouts/basic-layouts-margin.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -27,9 +26,9 @@ export class Example extends LitElement {
           <p>Vertical layout without margin:</p>
           <div class="container">
             <vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
-              <vaadin-button>Button 1</vaadin-button>
-              <vaadin-button>Button 2</vaadin-button>
-              <vaadin-button>Button 3</vaadin-button>
+              <div class="example-item">Item 1</div>
+              <div class="example-item">Item 2</div>
+              <div class="example-item">Item 3</div>
             </vaadin-vertical-layout>
           </div>
         </div>
@@ -39,9 +38,9 @@ export class Example extends LitElement {
             <!-- tag::snippet[] -->
             <vaadin-vertical-layout theme="margin spacing padding" style="align-items: stretch">
               <!-- end::snippet[] -->
-              <vaadin-button>Button 1</vaadin-button>
-              <vaadin-button>Button 2</vaadin-button>
-              <vaadin-button>Button 3</vaadin-button>
+              <div class="example-item">Item 1</div>
+              <div class="example-item">Item 2</div>
+              <div class="example-item">Item 3</div>
               <!-- tag::snippet[] -->
             </vaadin-vertical-layout>
             <!-- end::snippet[] -->
@@ -50,5 +49,4 @@ export class Example extends LitElement {
       </vaadin-horizontal-layout>
     `;
   }
-  // end::snippet[]
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-padding.ts b/frontend/demo/component/basiclayouts/basic-layouts-padding.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -26,19 +25,19 @@ export class Example extends LitElement {
         <div style="width: 100%">
           <p>Vertical layout without padding:</p>
           <vaadin-vertical-layout theme="spacing" style="align-items: stretch">
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
           </vaadin-vertical-layout>
         </div>
         <div style="width: 100%">
           <p>Vertical layout with padding:</p>
           <!-- tag::snippet[] -->
           <vaadin-vertical-layout theme="padding spacing" style="align-items: stretch">
             <!-- end::snippet[] -->
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
             <!-- tag::snippet[] -->
           </vaadin-vertical-layout>
           <!-- end::snippet[] -->

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts b/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/radio-group';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -32,9 +31,9 @@ export class Example extends LitElement {
         class="height-4xl"
         style="align-items: stretch"
       >
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <vaadin-radio-group
         label="Spacing variant"

diff --git a/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts b/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -26,19 +25,19 @@ export class Example extends LitElement {
         <div style="width: 100%">
           <p>Vertical layout without spacing:</p>
           <vaadin-vertical-layout theme="padding" style="align-items: stretch">
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
           </vaadin-vertical-layout>
         </div>
         <div style="width: 100%">
           <p>Vertical layout with spacing:</p>
           <!-- tag::snippet[] -->
           <vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
             <!-- end::snippet[] -->
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
             <!-- tag::snippet[] -->
           </vaadin-vertical-layout>
           <!-- end::snippet[] -->