docs: add section about wrapping to horizontal and vertical layouts

articles/components/horizontal-layout/index.adoc

@@ -325,6 +325,36 @@ include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizon
 endif::[]
 --
 
+[role="since:com.vaadin:[email protected]"]
+== Wrapping
+
+By default, components in a layout either shrink or overflow when there isn't enough horizontal space. Enable wrapping to allow components to flow onto a new line when space runs out, preventing overflow.
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
 
 == Expanding Items
 

articles/components/vertical-layout/index.adoc

@@ -332,5 +332,37 @@ include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-margin.
 endif::[]
 --
 
+[role="since:com.vaadin:[email protected]"]
+== Wrapping
+
+By default, components in a layout either shrink or overflow when there isn't enough vertical space. Enable wrapping to allow components to flow onto a new column when space runs out, preventing overflow.
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+
+
 
 [discussion-id]`73cc0e40-d39a-11ed-afa1-0242ac120002`

frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts

@@ -0,0 +1,47 @@
+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';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('basic-layouts-horizontal-layout-wrapping')
+export class Example extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add('basic-layouts-example');
+  }
+
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    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>
+      </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>
+        <!-- tag::snippet[] -->
+      </vaadin-horizontal-layout>
+      <!-- end::snippet[] -->
+    `;
+  }
+}

frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts

@@ -0,0 +1,57 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/button';
+import '@vaadin/vertical-layout';
+import '@vaadin/horizontal-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('basic-layouts-vertical-layout-wrapping')
+export class Example extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add('basic-layouts-example');
+  }
+
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    return html`
+      <vaadin-horizontal-layout theme="margin spacing" style="border: 0;">
+        <div style="width: 100%;">
+          <p>Vertical layout without wrapping:</p>
+          <vaadin-vertical-layout
+            theme="spacing padding"
+            style="align-items: stretch; height: 200px;"
+          >
+            <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-vertical-layout>
+        </div>
+        <div style="width: 100%;">
+          <p>Vertical layout with wrapping:</p>
+          <!-- tag::snippet[] -->
+          <vaadin-vertical-layout
+            theme="wrap spacing padding"
+            style="align-items: stretch; height: 200px;"
+          >
+            <!-- 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>
+            <!-- tag::snippet[] -->
+          </vaadin-vertical-layout>
+          <!-- end::snippet[] -->
+        </div>
+      </vaadin-horizontal-layout>
+    `;
+  }
+}

frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx

@@ -0,0 +1,38 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { Button, HorizontalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
+
+function Example() {
+  return (
+    <>
+      <p>Horizontal layout without wrapping:</p>
+      <HorizontalLayout
+        theme="spacing margin padding"
+        style={{ alignItems: 'stretch', width: '350px' }}
+      >
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+        <Button>Button 4</Button>
+        <Button>Button 5</Button>
+      </HorizontalLayout>
+      <p>Horizontal layout with wrapping:</p>
+      {/* tag::snippet[] */}
+      <HorizontalLayout
+        theme="wrap spacing margin padding"
+        style={{ alignItems: 'stretch', width: '350px' }}
+      >
+        {/* end::snippet[] */}
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+        <Button>Button 4</Button>
+        <Button>Button 5</Button>
+        {/* tag::snippet[] */}
+      </HorizontalLayout>
+      {/* end::snippet[] */}
+    </>
+  );
+}
+
+export default reactExample(Example, layoutExampleStyle); // hidden-source-line

frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx

@@ -0,0 +1,37 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
+
+function Example() {
+  return (
+    <HorizontalLayout theme="spacing margin" style={{ border: 0 }}>
+      <div style={{ width: '100%' }}>
+        <p>Vertical layout without wrapping:</p>
+        <VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch', height: '200px' }}>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+          <Button>Button 4</Button>
+        </VerticalLayout>
+      </div>
+      <div style={{ width: '100%' }}>
+        <p>Vertical layout with wrapping:</p>
+        {/* tag::snippet[] */}
+        <VerticalLayout
+          theme="wrap spacing padding"
+          style={{ alignItems: 'stretch', height: '200px' }}
+        >
+          {/* end::snippet[] */}
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+          <Button>Button 4</Button>
+          {/* tag::snippet[] */}
+        </VerticalLayout>
+        {/* end::snippet[] */}
+      </div>
+    </HorizontalLayout>
+  );
+}
+
+export default reactExample(Example, layoutExampleStyle); // hidden-source-line

src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java

@@ -0,0 +1,49 @@
+package com.vaadin.demo.component.basiclayouts;
+
+import com.vaadin.demo.DemoExporter; // hidden-source-line
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.router.Route;
+
+@Route("basic-layouts/horizontal-layout-wrapping")
+public class BasicLayoutsHorizontalLayoutWrapping extends Div {
+
+    public BasicLayoutsHorizontalLayoutWrapping() {
+        add(new Paragraph("Horizontal layout without wrapping:"));
+        HorizontalLayout layoutWithoutWrap = new HorizontalLayout();
+        layoutWithoutWrap.setPadding(true);
+        layoutWithoutWrap.setSpacing(true);
+        layoutWithoutWrap.setMargin(true);
+        layoutWithoutWrap.setWidth("350px");
+        layoutWithoutWrap.add(new Button("Button 1"));
+        layoutWithoutWrap.add(new Button("Button 2"));
+        layoutWithoutWrap.add(new Button("Button 3"));
+        layoutWithoutWrap.add(new Button("Button 4"));
+        layoutWithoutWrap.add(new Button("Button 5"));
+        this.add(layoutWithoutWrap);
+
+        add(new Paragraph("Horizontal layout with wrapping:"));
+        // tag::snippet[]
+        HorizontalLayout layoutWithWrap = new HorizontalLayout();
+        layoutWithWrap.setWrap(true);
+        // end::snippet[]
+        layoutWithWrap.setMargin(true);
+        layoutWithWrap.setPadding(true);
+        layoutWithWrap.setSpacing(true);
+        layoutWithWrap.setWidth("350px");
+        layoutWithWrap.add(new Button("Button 1"));
+        layoutWithWrap.add(new Button("Button 2"));
+        layoutWithWrap.add(new Button("Button 3"));
+        layoutWithWrap.add(new Button("Button 4"));
+        layoutWithWrap.add(new Button("Button 5"));
+
+        this.setClassName("basic-layouts-example");
+        this.add(layoutWithWrap);
+    }
+
+    public static class Exporter // hidden-source-line
+            extends DemoExporter<BasicLayoutsHorizontalLayoutWrapping> { // hidden-source-line
+    } // hidden-source-line
+}

src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java

@@ -0,0 +1,63 @@
+package com.vaadin.demo.component.basiclayouts;
+
+import com.vaadin.demo.DemoExporter; // hidden-source-line
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+@Route("basic-layouts/vertical-layout-wrapping")
+public class BasicLayoutsVerticalLayoutWrapping extends Div {
+
+    public BasicLayoutsVerticalLayoutWrapping() {
+        HorizontalLayout parent = new HorizontalLayout();
+        parent.setSpacing(true);
+        parent.setMargin(true);
+        parent.getElement().getStyle().setBorder("0");
+
+        Div wrapper = new Div();
+        wrapper.setWidthFull();
+        wrapper.add(new Paragraph("Vertical layout without wrapping:"));
+
+        VerticalLayout layoutWithoutWrap = new VerticalLayout();
+        layoutWithoutWrap.setPadding(true);
+        layoutWithoutWrap.setSpacing(true);
+        layoutWithoutWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
+        layoutWithoutWrap.setHeight("200px");
+        layoutWithoutWrap.add(new Button("Button 1"));
+        layoutWithoutWrap.add(new Button("Button 2"));
+        layoutWithoutWrap.add(new Button("Button 3"));
+        layoutWithoutWrap.add(new Button("Button 4"));
+        wrapper.add(layoutWithoutWrap);
+        parent.add(wrapper);
+
+        wrapper = new Div();
+        wrapper.setWidthFull();
+        wrapper.add(new Paragraph("Vertical layout with wrapping:"));
+
+        // tag::snippet[]
+        VerticalLayout layoutWithWrap = new VerticalLayout();
+        layoutWithWrap.setWrap(true);
+        // end::snippet[]
+        layoutWithWrap.setPadding(true);
+        layoutWithWrap.setSpacing(true);
+        layoutWithWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
+        layoutWithWrap.setHeight("200px");
+        layoutWithWrap.add(new Button("Button 1"));
+        layoutWithWrap.add(new Button("Button 2"));
+        layoutWithWrap.add(new Button("Button 3"));
+        layoutWithWrap.add(new Button("Button 4"));
+
+        wrapper.add(layoutWithWrap);
+        parent.add(wrapper);
+        this.setClassName("basic-layouts-example");
+        this.add(parent);
+    }
+
+    public static class Exporter // hidden-source-line
+            extends DemoExporter<BasicLayoutsVerticalLayoutWrapping> { // hidden-source-line
+    } // hidden-source-line
+}