Owen/control docs p4

sdk/python/examples/controls/chip/filter_chips.py

@@ -8,7 +8,12 @@ def handle_amenity_selection(e: ft.Event[ft.Chip]):
     amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"]
 
     page.add(
-        ft.Row(controls=[ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]),
+        ft.Row(
+            controls=[
+                ft.Icon(ft.Icons.HOTEL_CLASS),
+                ft.Text("Amenities"),
+            ]
+        ),
         ft.Row(
             controls=[
                 ft.Chip(

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

@@ -37,7 +37,7 @@ def main(page: ft.Page):
         ft.Row(
             expand=True,
             controls=[
-                rail,
+                ft.SelectionArea(content=rail),
                 ft.VerticalDivider(width=1),
                 ft.Column(
                     alignment=ft.MainAxisAlignment.START,

sdk/python/examples/controls/segmented_button/basic.py → sdk/python/examples/controls/segmented_button/single_multiple_selection.py

@@ -9,61 +9,62 @@ def handle_selection_change(e: ft.Event[ft.SegmentedButton]):
         ft.SegmentedButton(
             on_change=handle_selection_change,
             selected_icon=ft.Icon(ft.Icons.CHECK_SHARP),
-            selected=["1"],
+            selected=["1", "4"],
             allow_empty_selection=True,
             allow_multiple_selection=True,
             segments=[
                 ft.Segment(
                     value="1",
-                    label=ft.Text("1"),
+                    label=ft.Text("One"),
                     icon=ft.Icon(ft.Icons.LOOKS_ONE),
                 ),
                 ft.Segment(
                     value="2",
-                    label=ft.Text("2"),
+                    label=ft.Text("Two"),
                     icon=ft.Icon(ft.Icons.LOOKS_TWO),
                 ),
                 ft.Segment(
                     value="3",
-                    label=ft.Text("3"),
+                    label=ft.Text("Three"),
                     icon=ft.Icon(ft.Icons.LOOKS_3),
                 ),
                 ft.Segment(
                     value="4",
-                    label=ft.Text("4"),
+                    label=ft.Text("Four"),
                     icon=ft.Icon(ft.Icons.LOOKS_4),
                 ),
             ],
         ),
         ft.SegmentedButton(
             on_change=handle_selection_change,
-            selected_icon=ft.Icon(ft.Icons.ONETWOTHREE),
+            selected_icon=ft.Icon(ft.Icons.CHECK_SHARP),
             selected=["2"],
             allow_multiple_selection=False,
             segments=[
                 ft.Segment(
                     value="1",
-                    label=ft.Text("1"),
+                    label=ft.Text("One"),
                     icon=ft.Icon(ft.Icons.LOOKS_ONE),
                 ),
                 ft.Segment(
                     value="2",
-                    label=ft.Text("2"),
+                    label=ft.Text("Two"),
                     icon=ft.Icon(ft.Icons.LOOKS_TWO),
                 ),
                 ft.Segment(
                     value="3",
-                    label=ft.Text("3"),
+                    label=ft.Text("Three"),
                     icon=ft.Icon(ft.Icons.LOOKS_3),
                 ),
                 ft.Segment(
                     value="4",
-                    label=ft.Text("4"),
+                    label=ft.Text("Four"),
                     icon=ft.Icon(ft.Icons.LOOKS_4),
                 ),
             ],
         ),
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -15,14 +15,27 @@ def main(page: ft.Page):
         ft.SelectionArea(
             content=ft.Column(
                 controls=[
-                    ft.Text("Selectable text", color=ft.Colors.GREEN, style=TEXT_STYLE),
+                    ft.Text(
+                        "Selectable text",
+                        color=ft.Colors.GREEN,
+                        style=TEXT_STYLE,
+                        key="selectable",
+                    ),
                     ft.Text("Also selectable", color=ft.Colors.GREEN, style=TEXT_STYLE),
                 ]
             )
         )
     )
 
-    page.add(ft.Text("Not selectable", color=ft.Colors.RED, style=TEXT_STYLE))
+    page.add(
+        ft.Text(
+            "Not selectable",
+            color=ft.Colors.RED,
+            style=TEXT_STYLE,
+            key="non-selectable",
+        )
+    )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -8,4 +8,5 @@ def on_click(e: ft.Event[ft.Button]):
     page.add(ft.Button("Open SnackBar", on_click=on_click))
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/snack_bar/counter.py

@@ -34,4 +34,5 @@ def handle_button_click(e: ft.Event[ft.Button]):
     page.add(ft.Button("Open SnackBar", on_click=handle_button_click))
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -1,11 +1,11 @@
 ---
 class_name: flet.SegmentedButton
 examples: ../../examples/controls/segmented_button
-example_images: ../examples/controls/segmented_button/media
+example_images: ../test-images/examples/material/golden/macos/segmented_button
 segment_class_name: flet.Segment
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic segmented button") }}
 
 ## Examples
 
@@ -14,10 +14,10 @@ segment_class_name: flet.Segment
 ### Basic Example
 
 ```python
---8<-- "{{ examples }}/basic.py"
+--8<-- "{{ examples }}/single_multiple_selection.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_images + "/single_multiple_selection.png", alt="basic", width="80%") }}
 
 
 {{ class_members(class_name) }}

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

@@ -1,10 +1,11 @@
 ---
 class_name: flet.SelectionArea
 examples: ../../examples/controls/selection_area
-example_images: ../examples/controls/selection_area/media
+example_images: ../test-images/examples/material/golden/macos/selection_area
+example_media: ../examples/controls/selection_area/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Selectable and unselectable text") }}
 
 ## Examples
 
@@ -14,7 +15,7 @@ example_images: ../examples/controls/selection_area/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/shadermask.md

@@ -1,10 +1,10 @@
 ---
 class_name: flet.ShaderMask
 examples: ../../examples/controls/shader_mask
-example_images: ../examples/controls/shader_mask/media
+example_images: ../test-images/examples/core/golden/macos/shader_mask
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Linear gradient mask") }}
 
 ## Examples
 
@@ -35,4 +35,6 @@ example_images: ../examples/controls/shader_mask/media
 --8<-- "{{ examples }}/linear_and_radial_gradients.py"
 ```
 
+{{ image(example_images + "/linear_and_radial_gradients.png", alt="fade-out-image-bottom", width="80%") }}
+
 {{ class_members(class_name) }}

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

@@ -4,7 +4,7 @@ examples: ../../examples/controls/slider
 example_images: ../test-images/examples/material/golden/macos/slider
 ---
 
-{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Default and disabled sliders") }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic slider") }}
 
 ## Examples
 

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

@@ -1,11 +1,11 @@
 ---
 class_name: flet.SnackBar
 examples: ../../examples/controls/snack_bar
-example_images: ../examples/controls/snack_bar/media
+example_images: ../test-images/examples/material/golden/macos/snack_bar
 snack_bar_action_class_name: flet.SnackBarAction
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Opened snack bar") }}
 
 ## Examples
 
@@ -17,7 +17,7 @@ snack_bar_action_class_name: flet.SnackBarAction
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_images + "/basic.png", alt="basic", width="80%") }}
 
 
 ### Counter
@@ -26,6 +26,9 @@ snack_bar_action_class_name: flet.SnackBarAction
 --8<-- "{{ examples }}/counter.py"
 ```
 
+{{ image(example_images + "/snack_bar_flow.gif", alt="Snack bar with counter", caption="Snack bar with counter",width="50%") }}
+
+
 {{ class_members(class_name) }}
 
 {{ class_all_options(snack_bar_action_class_name) }}

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

@@ -0,0 +1,57 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+from examples.controls.segmented_button import single_multiple_selection
+
+
+@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.SegmentedButton(
+            show_selected_icon=False,
+            selected=["3"],
+            segments=[
+                ft.Segment(
+                    value="1",
+                    icon=ft.Icon(ft.Icons.SENTIMENT_VERY_SATISFIED),
+                ),
+                ft.Segment(
+                    value="2",
+                    icon=ft.Icon(ft.Icons.SENTIMENT_SATISFIED),
+                ),
+                ft.Segment(
+                    value="3",
+                    icon=ft.Icon(ft.Icons.SENTIMENT_NEUTRAL),
+                ),
+                ft.Segment(
+                    value="4",
+                    icon=ft.Icon(ft.Icons.SENTIMENT_DISSATISFIED),
+                ),
+                ft.Segment(
+                    value="5",
+                    icon=ft.Icon(ft.Icons.SENTIMENT_VERY_DISSATISFIED),
+                ),
+            ],
+        ),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": single_multiple_selection.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_single_multiple_selection(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(
+        "single_multiple_selection",
+        await flet_app_function.take_page_controls_screenshot(),
+    )

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

@@ -0,0 +1,31 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+from examples.controls.selection_area 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
+    selectable = ft.SelectionArea(
+        content=ft.Text("Selectable text", color=ft.Colors.GREEN),
+    )
+    non_selectable = ft.Text("Not selectable", color=ft.Colors.RED)
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.Column(controls=[selectable, non_selectable]),
+    )
+
+
+@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.assert_screenshot(
+        "basic",
+        await flet_app_function.take_page_controls_screenshot(),
+    )

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

@@ -14,13 +14,7 @@
 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.Column(
-            [
-                ft.Slider(label="Defualt Slider"),
-                ft.Slider(label="Disabled Slider", disabled=True),
-            ]
-        ),
+        request.node.name, ft.Slider(label="Slider", value=0.3)
     )