Controls images for docs

sdk/python/examples/controls/badge/basic.py

@@ -0,0 +1,31 @@
+import flet as ft
+
+
+def main(page: ft.Page):
+    page.title = "Badge example"
+    page.navigation_bar = ft.NavigationBar(
+        destinations=[
+            ft.NavigationBarDestination(
+                icon=ft.Icon(
+                    ft.Icons.EXPLORE,
+                    badge=ft.Badge(small_size=10),
+                ),
+                label="Explore",
+            ),
+            ft.NavigationBarDestination(
+                icon=ft.Icons.COMMUTE,
+                label="Commute",
+            ),
+            ft.NavigationBarDestination(
+                icon=ft.Icon(
+                    ft.Icons.PHONE,
+                    badge="10",
+                )
+            ),
+        ]
+    )
+    page.add(ft.Text("Body!"))
+
+
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/packages/flet/docs/controls/alertdialog.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.AlertDialog
 examples: ../../examples/controls/alert_dialog
-example_images: ../examples/controls/alert_dialog/media
+example_images: ../test-images/examples/material/golden/macos/alert_dialog
+example_media: ../examples/controls/alert_dialog/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AlertDialog") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/alert_dialog/media
 --8<-- "{{ examples }}/modal_and_non_modal.py"
 ```
 
-{{ image(example_images + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }}
+{{ image(example_media + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/appbar.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.AppBar
 examples: ../../examples/controls/app_bar
-example_images: ../examples/controls/app_bar/media
+example_images: ../test-images/examples/material/golden/macos/app_bar
+example_media: ../examples/controls/app_bar/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AppBar", image_width="100%") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/app_bar/media
 --8<-- "{{ examples }}/actions_and_popup_menu.py"
 ```
 
-{{ image(example_images + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }}
+{{ image(example_media + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }}
 
 
 ### Theme and Material Mode Toggles

sdk/python/packages/flet/docs/controls/banner.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.Banner
 examples: ../../examples/controls/banner
-example_images: ../examples/controls/banner/media
+example_images: ../test-images/examples/material/golden/macos/banner
+example_media: ../examples/controls/banner/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Banner") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/banner/media
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_media + "/basic.gif", alt="basic", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/dropdownm2.md

@@ -45,7 +45,7 @@ example_media: ../examples/controls/dropdown_m2/media
 --8<-- "{{ examples }}/add_and_delete_options.py"
 ```
 
-{{ image(example_images + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }}
+{{ image(example_media + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/markdown.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.Markdown
 examples: ../../examples/controls/markdown
-example_images: ../examples/controls/markdown/media
+example_images: ../test-images/examples/core/golden/macos/markdown
+example_media: ../examples/controls/markdown/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Markdown") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/markdown/media
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_media + "/basic.gif", alt="basic", width="80%") }}
 
 
 ### Code syntax highlight

sdk/python/packages/flet/docs/types/badge.md

@@ -1,48 +1,22 @@
-{{ class_all_options("flet.Badge") }}
+---
+class_name: flet.Badge
+examples: ../../examples/controls/badge
+example_images: ../test-images/examples/material/golden/macos/badge
+---
+
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Badge") }}
 
 ## Examples
 
 [Live example](https://flet-controls-gallery.fly.dev/displays/badge)
 
 ### Badge decorating an icon on a NavigationBar
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
 ```python
-import flet as ft
-
-
-def main(page: ft.Page):
-    page.title = "Badge example"
-
-    page.navigation_bar = ft.NavigationBar(
-        destinations=[
-            ft.NavigationBarDestination(
-                icon_content=ft.Icon(
-                    ft.Icons.EXPLORE,
-                    badge=ft.Badge(small_size=10),
-                ),
-                label="Explore",
-            ),
-            ft.NavigationBarDestination(
-                icon=ft.Icons.COMMUTE,
-                label="Commute",
-            ),
-            ft.NavigationBarDestination(
-                icon_content=ft.Icon(
-                    ft.Icons.PHONE,
-                    badge="10",
-                )
-            ),
-        ]
-    )
-    page.add(ft.Text("Body!"))
-
-
-ft.run(main)
+--8<-- "{{ examples }}/basic.py"
 ```
-  </TabItem>
-</Tabs>
 
-<img src="/img/docs/controls/badge/badge-navigation-bar.png" className="screenshot-50" />
+
+{{ image(example_images + "/badge-navigation-bar.png", alt="badge-navigation-bar", width="80%") }}
+
+{{ class_members(class_name) }}

sdk/python/packages/flet/integration_tests/examples/core/test_markdown.py

@@ -0,0 +1,16 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.Markdown(
+            value="# Welcome\n\nThis is **Markdown** rendered in Flet.",
+            width=260,
+        ),
+    )

sdk/python/packages/flet/integration_tests/examples/material/test_alert_dialog.py

@@ -0,0 +1,27 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    dialog = ft.AlertDialog(
+        title=ft.Text("Session expired"),
+        content=ft.Text("Please sign in again to continue."),
+        actions=[ft.TextButton("Dismiss")],
+        open=True,
+    )
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.page.window.width = 350
+    flet_app_function.page.window.height = 300
+    flet_app_function.page.add(dialog)
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle()
+    flet_app_function.assert_screenshot(
+        "test_image_for_docs",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )

sdk/python/packages/flet/integration_tests/examples/material/test_app_bar.py

@@ -0,0 +1,21 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.AppBar(
+            leading=ft.Icon(ft.Icons.MENU),
+            title=ft.Text("Dashboard"),
+            actions=[
+                ft.IconButton(ft.Icons.SEARCH),
+                ft.IconButton(ft.Icons.MORE_VERT),
+            ],
+            bgcolor=ft.Colors.SURFACE_CONTAINER,
+        ),
+    )

sdk/python/packages/flet/integration_tests/examples/material/test_badge.py

@@ -0,0 +1,40 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+from examples.controls.badge import basic
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.Container(
+            padding=10,
+            content=ft.FilledIconButton(
+                icon=ft.Icons.PHONE,
+                badge=ft.Badge(label="3"),
+            ),
+        ),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": basic.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_basic(flet_app_function: ftt.FletTestApp):
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.page.window.width = 350
+    flet_app_function.page.window.height = 300
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle()
+    flet_app_function.assert_screenshot(
+        "badge-navigation-bar",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )

sdk/python/packages/flet/integration_tests/examples/material/test_banner.py

@@ -0,0 +1,30 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    page = flet_app_function.page
+    page.theme_mode = ft.ThemeMode.LIGHT
+    page.enable_screenshots = True
+    page.window.width = 400
+    page.window.height = 200
+    banner = ft.Banner(
+        leading=ft.Icon(ft.Icons.INFO_OUTLINED, color=ft.Colors.PRIMARY),
+        content=ft.Text("Backup completed successfully."),
+        actions=[ft.TextButton("Dismiss")],
+        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
+        open=True,
+    )
+    page.add(banner)
+    page.update()
+    await flet_app_function.tester.pump_and_settle()
+    flet_app_function.assert_screenshot(
+        "test_image_for_docs",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    page.update()

sdk/python/packages/flet/src/flet/controls/core/markdown.py

@@ -233,6 +233,13 @@ class MarkdownCustomCodeTheme:
 class Markdown(LayoutControl):
     """
     Renders text in markdown format.
+
+    ```python
+    ft.Markdown(
+        value="# Welcome\\n\\nThis is **Markdown** rendered in Flet.",
+        width=260,
+    )
+    ```
     """
 
     value: str = ""

sdk/python/packages/flet/src/flet/controls/material/alert_dialog.py

@@ -27,6 +27,15 @@ class AlertDialog(DialogControl):
     It has an optional [`title`][(c).] and an optional list of [`actions`][(c).] . The
     `title` is displayed above the [`content`][(c).] and the `actions` are displayed
     below the `content`.
+
+    ```python
+    ft.AlertDialog(
+        title=ft.Text("Session expired"),
+        content=ft.Text("Please sign in again to continue."),
+        actions=[ft.TextButton("Dismiss")],
+        open=True,
+    )
+    ```
     """
 
     content: Optional[Control] = None

sdk/python/packages/flet/src/flet/controls/material/app_bar.py

@@ -18,6 +18,18 @@
 class AppBar(AdaptiveControl):
     """
     A material design app bar.
+
+    ```python
+    ft.AppBar(
+        leading=ft.Icon(ft.Icons.MENU),
+        title=ft.Text("Dashboard"),
+        actions=[
+            ft.IconButton(ft.Icons.SEARCH),
+            ft.IconButton(ft.Icons.MORE_VERT),
+        ],
+        bgcolor=ft.Colors.SURFACE_CONTAINER,
+    )
+    ```
     """
 
     leading: Optional[Control] = None

sdk/python/packages/flet/src/flet/controls/material/badge.py

@@ -16,6 +16,13 @@ class Badge(BaseControl):
     Badges are used to show notifications, counts, or status information on navigation
     items such as [`NavigationBar`][flet.] or [`NavigationRail`][flet.] destinations
     or a button's icon.
+
+    ```python
+    ft.FilledIconButton(
+        icon=ft.Icons.PHONE,
+        badge=ft.Badge(label="3"),
+    )
+    ```
     """
 
     label: Optional[StrOrControl] = None