Owen/control docs p7

sdk/python/examples/controls/navigation_drawer/position_end.py

@@ -34,4 +34,5 @@ async def handle_change(e: ft.Event[ft.NavigationDrawer]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/navigation_drawer/position_start.py

@@ -43,4 +43,5 @@ async def handle_change(e: ft.Event[ft.NavigationDrawer]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -49,4 +49,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -10,4 +10,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/outlined_button/custom_content.py

@@ -33,4 +33,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/outlined_button/handling_clicks.py

@@ -10,14 +10,22 @@ def handle_button_click(e: ft.Event[ft.OutlinedButton]):
         message.value = f"Button clicked {button.data} time(s)"
         page.update()
 
+    button = ft.OutlinedButton(
+        content="Button with 'click' event",
+        data=0,
+        on_click=handle_button_click,
+    )
+    message = ft.Text()
+
     page.add(
-        button := ft.OutlinedButton(
-            content="Button with 'click' event",
-            data=0,
-            on_click=handle_button_click,
-        ),
-        message := ft.Text(),
+        ft.Column(
+            controls=[button, message],
+            alignment=ft.MainAxisAlignment.CENTER,
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            expand=True,
+        )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/outlined_button/icons.py

@@ -14,4 +14,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -5,9 +5,13 @@ def main(page: ft.Page):
     page.add(
         ft.Placeholder(
             expand=True,
-            color=ft.Colors.random(),
+            color=ft.Colors.GREEN_ACCENT,
+            fallback_height=200,
+            fallback_width=300,
+            stroke_width=20,
         )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -8,6 +8,7 @@ def handle_check_item_click(e: ft.Event[ft.PopupMenuItem]):
 
     page.add(
         ft.PopupMenuButton(
+            key="popup",
             items=[
                 ft.PopupMenuItem(content="Item 1"),
                 ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, content="Check power"),
@@ -26,9 +27,10 @@ def handle_check_item_click(e: ft.Event[ft.PopupMenuItem]):
                     checked=False,
                     on_click=handle_check_item_click,
                 ),
-            ]
+            ],
         )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/progress_bar/determinate_and_indeterminate.py

@@ -28,4 +28,5 @@ async def main(page: ft.Page):
         page.update()
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/packages/flet/docs/controls/navigationdrawer/index.md

@@ -1,12 +1,12 @@
 ---
 class_name: flet.NavigationDrawer
 examples: ../../examples/controls/navigation_drawer
-example_images: ../../examples/controls/navigation_drawer/media
+example_images: ../../test-images/examples/material/golden/macos/navigation_drawer
 ---
 
 # NavigationDrawer
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Navigation drawer extended") }}
 
 ## Examples
 

sdk/python/packages/flet/docs/controls/navigationrail/index.md

@@ -1,12 +1,12 @@
 ---
 class_name: flet.NavigationRail
 examples: ../../examples/controls/navigation_rail
-example_images: ../../examples/controls/navigation_rail/media
+example_images: ../../test-images/examples/material/golden/macos/navigation_rail
 ---
 
 # NavigationRail
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Navigation rail extended") }}
 
 ## Examples
 

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

@@ -1,10 +1,11 @@
 ---
 class_name: flet.OutlinedButton
 examples: ../../examples/controls/outlined_button
-example_images: ../examples/controls/outlined_button/media
+example_media: ../examples/controls/outlined_button/media
+example_images: ../test-images/examples/material/golden/macos/outlined_button
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Simple Outlined Button") }}
 
 ## Examples
 

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

@@ -1,10 +1,10 @@
 ---
 class_name: flet.Placeholder
 examples: ../../examples/controls/placeholder
-example_images: ../examples/controls/placeholder/media
+example_images: ../test-images/examples/core/golden/macos/placeholder
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Placeholder") }}
 
 ## Examples
 

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

@@ -1,11 +1,12 @@
 ---
 class_name: flet.PopupMenuButton
 examples: ../../examples/controls/popup_menu_button
-example_images: ../examples/controls/popup_menu_button/media
+example_media: ../examples/controls/popup_menu_button/media
+example_images: ../test-images/examples/material/golden/macos/popup_menu_button
 popup_menu_item_class_name: flet.PopupMenuItem
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Opened popup menu under button") }}
 
 ## Examples
 
@@ -17,7 +18,7 @@ popup_menu_item_class_name: flet.PopupMenuItem
 --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/progressbar.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.ProgressBar
 examples: ../../examples/controls/progress_bar
-example_images: ../examples/controls/progress_bar/media
+example_media: ../examples/controls/progress_bar/media
+example_images: ../test-images/examples/material/golden/macos/progress_bar
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Fixed progress bar") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/progress_bar/media
 --8<-- "{{ examples }}/determinate_and_indeterminate.py"
 ```
 
-{{ image(example_images + "/determinate_and_indeterminate.gif", alt="determinate-and-indeterminate", width="80%") }}
+{{ image(example_media + "/determinate_and_indeterminate.gif", alt="determinate-and-indeterminate", width="80%") }}
 
 
 {{ class_members(class_name) }}

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

@@ -0,0 +1,37 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+from examples.controls.placeholder 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.Placeholder(
+            expand=True,
+            color=ft.Colors.RED_500,
+        ),
+    )
+
+
+@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.resize_page(200, 200)
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle()
+    flet_app_function.assert_screenshot(
+        "basic",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )

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

@@ -0,0 +1,131 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+from examples.controls.navigation_drawer import position_end, position_start
+
+
+@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
+    flet_app_function.page.enable_screenshots = True
+    nvd = ft.NavigationDrawer(
+        controls=[
+            ft.NavigationDrawerDestination(label="Item 1"),
+            ft.NavigationDrawerDestination(label="Item 2"),
+            ft.NavigationDrawerDestination(label="Item 3"),
+        ],
+        tile_padding=ft.Padding(top=10),
+    )
+    flet_app_function.resize_page(400, 400)
+    flet_app_function.page.drawer = nvd
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=800)
+    )
+    await flet_app_function.page.show_drawer()
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=800)
+    )
+    flet_app_function.assert_screenshot(
+        "image_for_docs",
+        await flet_app_function.page.take_screenshot(),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": position_end.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_position_end(flet_app_function: ftt.FletTestApp):
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.resize_page(400, 400)
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_end1",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    btn = await flet_app_function.tester.find_by_text_containing("Show")
+    await flet_app_function.tester.mouse_hover(btn)
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_end2",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    await flet_app_function.tester.tap(btn)
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_end3",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+
+    flet_app_function.create_gif(
+        ["position_end1", "position_end2", "position_end3"],
+        "position_end",
+        duration=1600,
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": position_start.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_position_start(flet_app_function: ftt.FletTestApp):
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.resize_page(400, 400)
+    flet_app_function.page.update()
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_start1",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    btn = await flet_app_function.tester.find_by_text_containing("Show")
+    await flet_app_function.tester.mouse_hover(btn)
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_start2",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    await flet_app_function.tester.tap(btn)
+    await flet_app_function.tester.pump_and_settle(
+        duration=ft.Duration(milliseconds=500)
+    )
+    flet_app_function.assert_screenshot(
+        "position_start3",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+
+    flet_app_function.create_gif(
+        ["position_start1", "position_start2", "position_start3"],
+        "position_start",
+        duration=1600,
+    )